drawing a health bar

[santelia]

Hi everybody!
I'm now engaged in creating the health management of my game using playMaker (I use it for so many other things... awesome wonderful tool!).
Let's make it simple. Say the health of Player depends on remaining energy. Energy lower as much as the time passes by. Say with playMaker I store two float values in two global variables (timeAtEnergyRecharged and runningTime). How can I draw a rect (filled of color) on top of a GUI element that I show on screen? What would you suggest to compute a health state and to show it in % on the GUI just using that rect? Thank you mates...

[tobbeo]

I set-up a health-bar for my game and the way I did it was to scale a rectangle (where the pivot was at the "beginning" of the rectangle). I give the player a health value of 100, another value is fine too but then you'd have to convert it with some basic math. So if his health is 100, and he takes 10 damage, I scale the rectangle to 90%. Super easy to animate the scale from 100 to 90 too so it looks nice.

[santelia]

What playMaker action do you use to draw a rectangle as you said and to scale it?

[santelia]

Solved.
Not so difficult, I have to admit after having solved, working with globals, counters, conversions, compare, int and float operators, and so on...
But still I'm not able to draw a texture object over another, to get a polished graphic result...

[tobbeo]

You mentioned you got it solved. But to explain my setup I just created a rectangle as a prefab and then scaled it along X with an FSM like explained in my previous post. I don't know what you mean about drawing a texture object over another. You can have a child that inherits the transform of the rectangle that look like something else...

If you want to get fancier and have a round health bar (or any shape) you could create an object in any 3D program and make sure the UVs are laid out in a straight line and then scale the UVs instead of the transform as the player takes damage. I don't use Playmaker's GUI (other than for text) as I find it limiting. I much rather set up everything the way I want it and link it to the camera.

[santelia]

I mean to draw different graphics one on top of another, like in layers. In this case I need to draw the framework of the user interface informations (with room for health bar, for points, and for various other items), and then draw the informations like in a layer on top of the previous one (the health bar in its right position inside the framework, and so on with all the rest). Like in any game with an information bar at the top or at the bottom of the screen. Did I clarify enough?

[justifun]

You can create 2 rectangle planes and place them one in front of another with your main framework of your characters heath/magic etc and the animated health rectangles behind it.

[tobbeo]

Well yeah, like Santelia said, if you want layers you just place the rectangles on top of each other. You just need to think in depth rather than in Photoshop layers. Then just use additive (cheapest), blend, or an alpha. There are a few different ways of doing a set-up like this, all valid as long as they work .

[santelia]

Thank you mates, I'm doing some tests on all the possible overlapping. They now seem to run rather well, except that it isn't so obvious when an "Enable Gui" command might be sent to best fit the correct PlayMaker internal flow. Before the first "Draw Texture" command? Each time before a draw command? Will the GUI remain on (enable GUI cheched) through all the states and FSMs until a new command sets it off (unchecked)?

[Alex Chouls]

Are you using Draw Texture or GUI Textures?

GUI Textures are an older GUI system in Unity, but still quite powerful:
https://hutonggames.fogbugz.com/default.asp?W361

GUI Textures give you a lot of control over layering - just play with the z coordinate. You can build the whole UI in the Unity editor, then use PlayMaker to manipulate the GameObjects (Enable, Transform etc.). Check out PlaymakerSamples\TestLab\GUIElement for examples.

Draw Texture uses Unity's OnGUI commands (GUI and GUI Layout Actions). Since actions are executed in order, you can just re-order the actions to change their layering. But it gets tricky when GUI Actions are spread across FSMs since you have no way to control the execution order of each FSM (or any MonoBehavior/Script in Unity for that matter).

You can also just use textured planes in the scene, parented to the camera. Then use Playmaker actions to manipulate them. Hint: Build a hierarchy where related gui controls are parented to a root object so you can easily show/hide, move etc. the whole gui.

Lots of ways to do this in Unity/PlayMaker! I'd play with a few methods, and pick the workflow you like best...

[markfrancombe]

You can also just use textured planes in the scene, parented to the camera. Then use Playmaker actions to manipulate them. Hint: Build a hierarchy where related gui controls are parented to a root object so you can easily show/hide, move etc. the whole gui.

I think this sounds very simple to understand and almost... er... too un-professional.If Im making a 3rd person game, then Im having to hike about the place with lots and lots of tiny bits of graphics all meticulously placed... what happens for example if I just want to swap camera for a second (cut scene for example) seems like alot of stuff to jump about...

Also, wont the interface be affected by lighting.. If a weird (but maybe cool) game where the actual interface elements get darker when you walk into a scary dungeon?

Is this method REALLY recommended???  Cos if it is, Ill def go with it.. just cos its so simple to understand, IM just a tad worried of the complex issues I might hit down the road?

Mark

[justifun]

Here's a game dev talk about using this exact situation in a professional and popular game within unity.

http://learnunity3d.com/2011/04/smuggle-truck-2d-techniques-talk/

In order to answer your question about hiding cameras etc....

If you take all of your 2D menu elements and parent them to a single empty game object then you can hide/unhide that parent object and all of the children will be hidden as well, so you can disable it whenever you need to super easy.

Also in regards to being affected by lighting, you can use a type of shader that's not affected by lighting, so that they never change appearance. such as the "self-Illum" types of materials.

[Alex Chouls]

It is indeed a common technique. I believe NGUI works this way too...

[santelia]

I'm currently using Draw Textures, and obtaining layers by properly deciding the execution order.
I only have some headache with GUI Text as far as positioning and updating content (variables!) is concerned...

[tbelgrave]

You can also just use textured planes in the scene, parented to the camera. Then use Playmaker actions to manipulate them. Hint: Build a hierarchy where related gui controls are parented to a root object so you can easily show/hide, move etc. the whole gui.

I'm currently trying to get this accomplished, but I'm getting tripped up because I think I'm following Christopher's example a bit to closely

.

I would like to use the healthManager method in this example and I somewhat got it working, but I'm not sure how to increase/decrease the scale of the bar properly (Like which action to use). Using Set Scale doesn't work, but I can't find anything that would add/subtract values for the healthBar. I think I'm confusing myself haha. Any help would be appreciated.

~t