Zedla Style Life System Unity Tutorial - Part 1 of 10

Zelda Style Life System Unity Tutorial – Part 1 of 10

The end result of the full tutorial.

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

Image 1.0

Before you start you should know these things:

• Be competent with Unity (at least know the basics) 
• Know how to use the new UI system (Implemented in Unity 4.6 aka uGUI) 
• Know the basics of scripting in Unity using C#

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 2 - 10 of this tutorial series:

Go to Part 2

Go to Part 3

Go to Part 4

Go to Part 5

Go to Part 6

Go to Part 7

Go to Part 8

Go to Part 9

Go to 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 1 and the completed project file of Part 1.

This tutorial will be split up into several parts. In this part we will work on getting the basics done:

• Setting up a simple canvas 
• Getting the screens resolution in order to work with any screen and device 

Step 1:

After you have set up a new project and created a new Scene in Unity, create a basic canvas with nothing on it. Now create an empty game object and make it a child of the Canvas and put it some where in the top right of the screen and rename it to ‘LifeSystemManager’. After this create a new folder ‘Scripts’, then create a new script inside that folder called ‘Life System’. When this is done add the script to the ‘LifeSystemManager’ game object. (See figure 1.0)

Step 2:

Before we write a line of code we need to do some theory. We will be spawning UI images which will represent how many lives the player has. To do this we need to know the width and height of the images we will be spawning so they are big enough for the player to see on the screen but not so big they take up all of it and it stays a constant size regardless of the screen size or aspect ratio. In order to do this, we need to get the current screen dimensions in pixels (nor aspect ratio).

Open the script in ‘MonoDevelop’ or Visual Studio or your preferred editor. At the top of the script above the ‘Start’ function we need to add a private int called ‘screenWidthPixels’ and another called ‘screenHeightPixels’.


Code:

private int screenWidthPixels;

private int screenHeightPixels;


After this we need to get the screen resolution and assign it to these variables. We do this easily by assigning the static variable ‘Screen.width’ (this gets the current screen’s width in pixels) and store it in ‘screenWidthPixels’ and ‘Screen.height’ for ‘screenHeightPixels’.


Code:

void Start ()
{
    GetScreenDimentions();
}

void GetScreenDimentions()
{
    screenWidthPixels = Screen.width;
    screenHeightPixels = Screen.height;
}


Great, we have the screen dimension stored locally and it will happen in the first frame the scene starts. In the next step we will work out how to make the image only take up a small fraction of the screen based on a few variables.


Step 3:

In this step we will work out how much of the screen the image itself will cover. For now, to get the foundations sorted quickly we will get the screen width and height we got earlier and divide it to get a fraction of the screen real estate. E.g. Set the image width to 1/8th of the screen’s width and 1/6th of the screen’s height. We will convert this into what percentage of the screen in a later part of the tutorials and maybe implement more ways to do it other than just a percentage of the screen.

To do this we need to create a few more new variables. These are ‘screenWidthFraction’ and ‘screenHeightFraction’ and we will have them as floats. We also need another two floats for the images width and height. We will call these ‘lifeImgWidth’ and ‘lifeImgHeight’ respectively.


Code:

private float screenWidthFraction;
private float screenHeightFraction;
private float lifeImgWidth;
private float lifeImgHeight;


Then we need to create a function which will work out the images width and height based on the above variables. We will call it ‘SetImageSize’.

To do this we divide ‘screenWidthPixels’ by ‘screenWidthFraction’ and assign it to ‘lifeImgWidth’ and we do the same with ‘screenHeightPixels’ and ‘screenHeightFraction’ and assign it to ‘lifeImgHeight’.

Also because we are dividing the values I have cast them all as floats partly because that’s what the image width is measured in but dividing two ints rounds up the value if it is a decimal. This may not be the effect we want in your game. In this case it isn’t.


Code:

void Start ()
{
    GetScreenDimentions();
    SetImageSize();
}

void GetScreenDimentions()
{
    screenWidthPixels = Screen.width;
    screenHeightPixels = Screen.height;
}

void SetImageSize ()
{
    lifeImgWidth = (float)screenWidthPixels / 
                                         (float)screenWidthFraction;
    lifeImgHeight = (float)screenHeightPixels / 
                                          (float)screenHeightPixels;
}


Then we reference the function in their Start method after the ‘GetScreenDimentions’ reference. (See figure 1.1)

Figure 1.2

The script attached to the empty game object. I set the variables to ‘2’ to avoid ‘Infinity’ errors for the interim.

Great, part one is finished. We have done some of the ground work.

We have learnt:

• How to get the resolution of the screen in pixels, both the width and height of the screen 
• Assign said values to local integer variables 
• How to case one value as another (specifically int to float) 
• Calculate what fraction of the screen said image should take up using simple division

In Part 2 we will cover how to set the position of the image on the UI canvas and Instantiate it as a UI game object. Click here for Part 2.

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.https://db.tt/q3gtcmwg