Unity platformer - GUI bars

NAV15AP&NAV16AP

1. jakso lukuvuonna 2016-2017

This time you’re going to learn how to make different meters eg. health bar and collectible bar with NGUI.

First you need a global variable. This can be player health or things the player is going to collect in the game. Float will be the variable type since the NGUI fill uses float as its variable. Then you need graphics for the bar. This can be done in Photoshop. A simple rectangle will be sufficient for this assignment.

You’ll need to create atlas for the health/ collectible bar. Atlas is a container for all the sprites you need in your GUI. It packs them in a file where you can take individual sprites and use them when needed. Atlas can be done with atlas maker. Simply create new Atlas when a sprite you want to include is chosen. You can add sprites and update old ones any time you wish.

Then you’re going to create sprite from the NGUI tab in the top tool bar. Change the UI sprite type to filled. This enables the use of the float variable as the fill amount. From the UI sprite inspector, you can also change the sprite or atlas you’re using. Fill direction can also be chosen here. In this assignment you can use horizontal direction because the sprite is rectangle shaped. Radial fill direction works best on round shaped sprites.

Now add FSM to the newly created sprite. In the first state you need action called float changed. This will check if a specific float variable has changed and then send event to do another action in another state. In the second state you want to drag the UI sprite and set property for it. Use fill amount as property and your own global variable as fill amount. This FSM will update the fill amount every time the global variable changes eg. if you take damage or collect an object.

You’ll also need float add in the collectible you’re using in order the float changed action to work. Create action add float in the collectible before the state you’re destroying the object. If you want to use this method for a health bar, then use float subtract. The subtract action will decrease your health and then send the information to the health bar so that the player gets visual confirmation from taking damage.

Lastly you need to use the information from the GUI bar. If the collectible bar is full then something should happen. Also it the health bar is fully depleted the playable character will die. Add new state to the fill FSM. This time use float compare action. This will take the global variable used and compare it to a number. Create two events so that if the bar is not filled it goes back to the start state and if it’s filled it will go to the last state.