+2
Done

(How To) Create a Health Slider (No Answer Needed)

robsdroid215 2 months ago in Stats updated by Marti (Lead Developer) 2 months ago 1

I was up all night and noticed that my Health Slider would not work.

The documentation says to place the Stats Component on 'ANY' Game Object.

For me the slider will only work if the Stats component is on the 'Player' object.

------------------

Prerequisites

------------------

Game Creator 'Stats Module' needs to be enabled

Unity Version: 2019.4.1f1

Game Creator Version: 1.1.9

Below I wrote a document to help others. PLEASE NOTE: I am very new to Game Creator and Unity so keep that in mind.

------------------

Stat = Maximum Health a Player can Have

Attribute = Current Health a Player Has

------------------

------------------

Create a Stat

------------------

- Click the Game Creator Pull Down Menu > Preferences > Stats

- Click the 'Stats' Tab > 'Create Stat' button

- Create Stat like below image

------------------

Create an Attribute

------------------

- Click the Game Creator Pull Down Menu > Preferences > Stats

- Click the 'Attributes' Tab > 'Create Attribute' button

- Create Attribute like below image

------------------

Add 'Stats' Component to Player Object

------------------

- Click on Player in the Hierarchy, Then from Inspector Click 'Add Component' Button, Then add the 'Stats' component

------------------

Create and Prep 2 PNG image files for UI use

------------------

- Create x2 small .png image files in your favorite Photoshop like app

- Make x1 Image Red and x1 Image White

(Or download the below Images)

Red.png   
White.png

- Copy these images into your Unity Project

- Highlight the Image in your Project View

- Set the 'Texture Type' for both images to Sprite (2D and UI) then Apply

(To apply just click off the image in the Project Panel and a popup will appear)

------------------

Create your HUD UI

------------------

- Right click in your 'Hierarchy' and Select UI > Canvas

- Right Click your 'Canvas' and Select UI > Panel

- Right Click your 'Panel' and Select UI > Image

- Right Click your 'Panel' and Select UI > Image

- Right Click your 'Panel' and Select UI > Text

- Right Click your 'Panel' and Select UI > Text

------------------

Set your Canvas Layer

------------------

- From the Hierarchy Click Canvas

- From the Inspector > Layer = UI > Click the 'Yes Change the Children' button

------------------

Add 'Attributes UI' component to Panel

------------------

- From the Hierarchy Click your 'Panel' (under your Canvas)

- From the Inspector Click the 'Add Component' Button

- Add the Attribute UI Component

------------------

Configure your 'Attributes UI' Component

------------------

- From the Hierarchy Click your 'Panel' and Configure your 'Attribute UI' like the image below.

------------------

Add your PNG Files

------------------

- From the Hierarchy Click your 'Image - Background'

- From your 'Project' panel Drag your 'White Image' to your 'Source Image' in the inspector

- From the Hierarchy Click your 'Image - Foreground'

- From your 'Project' panel Drag your 'Red Image' to your 'Source Image' in the inspector

------------------

Configure your Fill

------------------

- From the Hierarchy Click your 'Image - Foreground'

- From the 'Inspector' > 'Image' configure like the image below

Note: I did not go over Anchors or HUD design in this doc...

Here is what mine looks like


Also if you don't like 100/100 and want it simply say 100

Change the Value format of the Attribute UI from {0}/{1} to {0}

-----------------------------------------------------------------------

BONUS... Not needed for Health Slider

A Damage Pad to test the above Slider

If you want to test your slider, you can create a simple cube with x2 triggers

Trigger 1 

Actions 1

Trigger 2

Actions 2

I hope this document can help someone.

Unity version:
2019.4.1f1
Game Creator version:
1.1.9