Zelda Style Life System Unity Tutorial - Part 6 of 10
The end result of the full tutorial.
At the end of Part 6 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 5’ 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.com/2016/09/zelda-style-life-system-unity-tutorial.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 5
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 6 and the completed project file of Part 6.
In this part we will work on adding some live interactivity to our life system. Specifically added a few buttons to take away and add some health to see our code in action. In Part 7 we will work on updating the lives and having multiple health values per life icon.
We will:
- Add a few buttons to our UI canvas
- Assign the ‘Modify Health’ function to them
- Parse each button a different value
- Add ‘Update Lives’ function to buttons to reflect the current health value
Step 1: – Creating the Buttons
To start off we will do something easy. We will add a few buttons to our Canvas, three to increase our health value, one each set at ‘1’, ‘2’ and ‘3’, and another three to take damage at the same amounts.
To do this we will selected our ‘LifeSystemManager’, then create a button ‘Create’ -> ‘UI’ -> ‘Button’. Position this somewhere one the left side of the screen but not covering the ‘LifeSystemManager’ game object. I have positioned mine as in the image below, check figure 1.0.
Figure 1.0:
The RectTransform position is: X:-195, Y: 47, the anchor point set to middle, centre.
The next thing to do is keep everything organised. With the buttons on the left side of the screen, these will be used for increasing our health variable, and the buttons on the right will be used for decreasing the same value.
On the left side rename the button UI object to ‘Add1HealthBtn’. This is ok but we need to label what the button does. With our button, a text object is a child of our button, with the ‘Text’ UI element selected go to it’s text component and change the text in the box from ‘Button’ to ‘Add 1 Health’. (See figure 1.1).
Figure 1.1
Good we have the basic done and have created a button. We will create more later but this will do for now.
Step 2: - Adding Health
The next thing we need to do is add functionality to the button. Because this button is adding health we will assign the ‘AddHealth’ method to it. To do this we go to the ‘Button’ script on our button, and where it say’s ‘OnClick’ we will click the mini button wit the ‘+’ on it. This is basically a delegate that can be accesses via the inspector. A delegate is more or less like variable but it can only store functions. (See figure 1.2)
Figure 1.2
When we add a space for a function a variable appears. We can drag an object or any kind of script into it (including the same object the button is attached to).
We will drag in our ‘LifeSystemManager’ into the variable on the left. (See figure 1.3)
Figure 1.3
You may have noticed a drop down list or enum to the right is now available to us which says ‘No Function’. This enum will list all script available to us, and from there all of the public functions available to us in those scripts (only those which return ‘void’ though). First we need to go to our code and make the function public.
Code:
public void AddLives(int n)
{
for (int I = 0; I < n; i++)
{
Image tempImg = Instantiate(lifeImg,
transform.position,
transform.rotation) as Image;
tempImg.transform.parent = transform;
}
}
Then we click on the enum, choose the ‘LifeSystem’ script, then choose ‘AddLives’ from the list of functions. (See figures 1.4 and 1.5).
Figure 1.4
Figure 1.5
We need to create a function for instantiating the ‘lifeImg’ game object, and place our code in there. For now we will call our function ‘AddLives’.
Now have have chosen the ‘AddLives’ method you have have noticed another field appear containing a ‘0’. This field is similar to a public variable. This field is here in case you want to parse your function any variables. This field is dynamic so if your function takes another type like strings you parse those through as well. We will replace the ‘0’ with a ‘1’ for this button, then run our code. (See figure 1.6)
Figure 1.6
I have just clicked to add another ‘lifeImg’, max icons per row set to 4.
Then respectively add a reference to it in the ‘Start’ method. If we enter ‘Play’ mode, the behaviour of our code will not have changed, we’ve made it easier to read and more usable.
Step 3: - Taking Damage
Now we can add health at any time we need to be able to take damage and represent this on screen by removing a health icon. We will do two things, create a new button, rename it to ‘Remove1HealthBtn‘, change the text label to ‘Take Some Damage’, and move it to the right to the previous button. (See figure 1.7)
Figure 1.7
RectTransform positions, X: -17.8, Y: 47.
Now the next thing we need to do is create a method in which we can take some damage and reduce how many lives are on screen (and later a health variable). We will do this by creating a public method called ‘ModifyLives’. For the time being this method will be pretty simple, but in Part 7 we will add more to it for extra functionality over the image icons. We will place this new method below ‘AddLives’.
In this new method we want to tell it the number of lives we will be modifying, so we will parse it an ‘int’ called ‘amt’. At the top of the script we need to create another ‘int’ variable called ‘currentHealth’ to keep track of our health. In this method we add ‘amt’ to ‘currentHealth’ using the incremental operator.
Then we will need to update the ‘currentHealth’ variable at the end of ‘AddLives’ as this will update every time we add a life. With ‘ModifyHealth’ we are adding two values, this means that if we parse it a negative value, it will subtract ‘amt’ from current health as adding a negative value does that. Now to check that our code works we will print ‘currentHealth’ via ‘Debug.Log’, then assign this function to the ‘Remove1HealthBtn’.
Code:
public int currentHealth;
…
public void AddLives(int n)
{
for (int i = 0; i < n; i++)
{
Image tempImg = Instantiate(lifeImg,
transform.position,
transform.rotation) as Image;
tempImg.transform.parent = transform;
}
currentHealth += n;
}
…
public void ModifyLives(int amt)
{
currentHealth += amt;
Debug.Log(currentHealth);
}
After assigning the ‘ModifyHealth’ function to the button parse it a value of '1'. For result see Figure 1.8.
Figure 1.8
Great the code works and our current health goes down. However, we want this to be represented visually and remove the ‘lifeImg’ objects like how we instantiate them. In fact, we want to remove the last one that was created. In order to do any of this we need to keep track of them some how. This requires a list which is similar to an array but more flexible and we will go into this in more detail in Part 7 as that is another topic for another day.
Great, part 6 is finished. We have laid down more foundations to the frame work.
We have learnt how to:
- Manually created two new buttons, renamed and relabelled them
- Assign a script and function to a button from another object
- Output values for the ‘Console’ using ‘Debug.Log()’
- Add ‘lifeImg’ game objects during run time via the buttons
- Keep track of current health using a variable and modify it using the incremental operator
- Decrease player health using the incremental operator with a negative value
- Parse a function assigned to a button either a positive or negative value
- Keep our code fairly reusable for later improvements to our code
In Part 7 we will learn how to use a list to keep track of our ‘lifeImg’ object created during runtime so we can update the latest one on the go making it appear empty. We will also make our code ready for half lives using different images and prevent our ‘currentHealth’ from going below zero or above a maximum value. Click here for Part 7.
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.
