Zelda Style Life System Unity Tutorial – Part 5 of 10

Zelda Style Life System Unity Tutorial – Part 5 of 10

The end result of the full tutorial.

At the end of Part 5 we will have produced this (See image 1.0).

Image 1.0

Before you start you should know these things:

You should have gone through and completed ‘Part 4’ of this tutorial before going any further. If you find yourself not understanding some of the terminology or code of the tutorial I would also recommend going through the previous tutorial to get up to speed. I will leave a link to it below to go through at your leisure.

http://joseph-easter.blogspot.co.uk/2016/08/zelda-style-life-system-unity-tutorial_24.html

If you follow this tutorial and find I am moving too fast or if you don’t know the things in the list above, I would recommend getting up to speed and then come back to this tutorial when you are ready.

Links to Parts 1 - 10 of this tutorial series:

Part 1

Part 2

Part 3

Part 4

Part 6

Part 7

Part 8

Part 9

Part 10

With this tutorial if you want to convert this into JavaScript by all means do so but it may be easier for you to follow this in C# and stick with the language of the tutorial to make it easier.

PROJECT RESOURCES: At the bottom of the post there is a download link to a zip file. This files includes all files needed to follow Part 5 and the completed project file of Part 5.

In this part we will finish the foundation of the life system framework. After the this we will add more features to it and generally polish it so you can easily adapt it for your project. We will:

• Control how many lives we have per row on screen
• If lives per row is exceeded, put new life on a new row and reset it’s X position
• Count how many lives the player currently has
• Introduce a max lives variable so the current lives variable does not exceed this

Step 1:- Setting the Constraints

In most games when the player has multiple lives they can also gain lives. Quite often they can exceed the original number of lives they had in the first place through power ups. When they gain a new life there is normally a maxim number of them in a row. Then it resets and a new row is started below the first. This continues until either a portion of the screen is full or a predetermined value has been met.

With our script there are a few ways we can do this. If we didn’t have our ‘GridLayoutGroup’ component we could do it all through code using a series of for loops. Luckily we do and the ‘GridLayoutGroup’ component can do the heavy lifting for us. We will take a look at it now.

The particular variable we will be looking at is the ‘Constraints’ enum, just under ‘Child Alignment’. This is the setting we will use in order to make sure the ‘lifeImg’ game objects only have a certain number of image objects per row.

It has three different settings, ‘Flexible’, ‘Fixed Column Count’, ‘Fixed Row Count’. (See figure 1.0)

Figure 1.0

First there is ‘Flexible’. With this setting, both the grid height and width will be flexible. We can keep it this way but we will have no control over the specific number of cells in each row and column. It will try to keep the number of cells in each the same though.

The ‘Fixed Column Count’ setting constrains the grid UI elements from exceeding a fixed number columns. When ‘Fixed Row Count’ is chosen, the grid elements will not exceed a certain number of rows. When ‘Fixed Column Count’ or ‘Fixed Row Count’ is chosen a variable appears under it called ‘Constraint Count’. This lists the maximum number of items in each row or column.

We can see this in action, if we set ‘Starting Health’ to ‘8’, set the constrains to ‘Fixed Column Count’ and keep ‘Constraint Count’ at ‘2’ the elements will be like in the image below. (See figure 1.1)

Figure 1.1: Spacing is set to 3 on both X and Y axis.

If we do the same thing but change ‘Fixed Column Count’ to ‘Fixed Row Count’ we will have a similar result to the image below. (See figure 1.2)

Figure 1.2

This is pretty handy, all we have to do it set a few variables and the component does the hard work for us. Using these settings we can set the values manually. However, we are creating this asset for the designer. We want to keep everything simple and all of our settings in one place rather having the designer looking all over the place in different scripts and components. We can do this by accessing these variables via our ‘LifeSystem’ script. We will go into dive into this in ‘Step 2’.

Step 2: - Setting the Row Count

In this step we will cover to how set the maximum number of lives per row and how to automatically set the constraint of the rows on the first frame.

The first thing we need to do is set the maximum number of lives per row and assign this to ‘Constraint Count’ of the ‘GridLayoutGroup’. We do this by creating a new public int at the top called ‘livesPerRow’. This is how many lives we want per row. For now I have set this to three just as an arbitrary number.

Next we need to access the constraint variable of the ‘gridLayoutGroup’. In our ‘ResetGridLayoutProperties’ method at the bottom of it we will access the constraint count and assign our ‘livesPerRow’ int to it.

Code:

public int livesPerRow = 3;
…
void ResetGridLayoutProperties()
{
  gridLayoutGroup = GetComponent<GridLayoutGroup>();
  gridLayoutGroup.cellSize = new Vector2(lifeImgWidth,
                                         lifeImgHeight);
  gridLayoutGroup.startAxis = GridLayoutGroup.Axis.Vertical;
  gridLayoutGroup.spacing = ImageSpacing();
  gridLayoutGroup.constraintCount = livesPerRow;
}

This is good but because we still have our ‘Constraint’ enem set to ‘Flexible’ we will not see a difference. We want to set this via in our function. You may ask ‘why don’t we just set it manually?’. Well the first reason has already been brought up in this tutorial. The other reason is that if some one messes with our project or changes the constraint by accident, the code will over ride it. Essentially we are making this idiot proof.

To do this we access the ‘constraint’ variable of our ‘gridLayoutGroup’ then set it to ‘GridLayoutGroup.Constraint.FixedColumnCount’ for the effect we want.

Code:

void ResetGridLayoutProperties()
{
  gridLayoutGroup = GetComponent<GridLayoutGroup>();
  gridLayoutGroup.cellSize = new Vector2(lifeImgWidth,
                                         lifeImgHeight);
  gridLayoutGroup.startAxis = GridLayoutGroup.Axis.Vertical;
  gridLayoutGroup.spacing = ImageSpacing();
  gridLayoutGroup.constraintCount = livesPerRow;
  gridLayoutGroup.constraint =
                        GridLayoutGroup.Constraint.FixedColumnCount;
}

Now if we run our code we will get this. (See figure 1.3)

Figure 1.3

How result of our code in ‘Play’ mode (left). Inspector settings changed via code (right).

We will change the number of lives per row later when we need to. This is pretty good so far, things are shaping up and we are getting there. What we need to do next is set the amount of health per heart.

Great, part five is finished. We have pretty much got the core of this done, the rest is just polish.

We have learnt how to:

• Constrain UI grid elements to a fixed row or column 
• Set the maximum number of elements in a row or column using ‘constrainCount’
• Set these variables via code to run automatically in the first frame of the scene

In Part 6 we will learn how to set our life system so we can easily add and take away health by clicking a few buttons. This way we can see the results of our work more quickly. In Part 7 we will cover how to set the amount of health per life, keep track of our of lives using a list (similar to an array) and change the image of the latest life image based on health current health. Click here for Part 6.


If you liked this tutorial leave a comment below telling me why you like it and share it with a friend who will find it useful. If you didn’t like it, please leave a comment below saying why.

If you would would like to see more of these tutorials, please leave a comment below. And if you want more of this particular tutorial say what you want to see more of in the comments.

Download resources and project files.