How to change a sprite in Unity — Changing lives from 3, 2, 1.. GAME OVER!

Yesterday we got into the basics of the User Interface. I showed you how to add it to your game — pretty basic stuff. Today we will get a little deeper and add a Players Lives Image as well as a Game Over.

Let’s start with the Player Lives. I have some premade Sprites that will show 3 ships in a row, and if the Player gets hit, 1 will show grey, hit again, 2 grey and so on.

To start, right click on Canvas in Hierarchy as this is where we want all things UI to live. Highlight UI and then click on Image. This will put an image in your UI, but it is blank. Note in the Inspector you will see an empty box asking for an image. Drag one of the sprites you have into the empty box. Now, that’s strange they are a bit misshapen.. we need to make sure the Preserve Aspect button is clicked. This will make sure your Sprites will hold their original shape when you bring them in. Last, just make sure you move it on the top left and anchor it top left like we did in the score text (this will keep the scale ratio).

Now, we can move on to the UIManager Script and implement the code needed to change these sprites when we are hit.

As mentioned, I have 4 different sprites. We will need to swap between these as the player is getting nailed. This is a good spot for an array.

Note the red line — this is what I added to create the array. Also note I used a Sprite type as we will be dealing with sprites. Make sure you Serialize it so you can see it in Unity. Once in Unity click on the Canvas and note the UIManager Script now has a Live Sprites with a drop down box. If you drop it down it will display one element with 0. Change this to 4 (or however many sprites you have). Now you can drag in the sprites you want to align with each element. See below:

Now, we want to be able to change the image (sprite) everytime the player is hit, and we want it to display the proper image. So we need to get access to the object that is holding that — in our case it is the Lives_Display_img that we created. So we need to create a handle to get access to that. To do that we go back into the UIManager script and create an image component handle:

Now back in Unity, click on the Canvas and drag in the Lives_Display_img object that holds the image component that we want to be able to manipulate. See below:

Ok, so now we have access to the component we need. Now we can focus on implementing the actual functions that will change the sprites.

Back in UIManager we want to be able to change the current lives. We will create a function that we can call when the player is hit, return a number and change the sprite. We do this as follows:

Let’s break this down. So we create a new method and name it UpdateLives (because that’s what we are doing. Remember, always name new variables and methods something you can understand!). Inside the () we are going to be asking for a return, in this case we want an integer number and we will put it inside a variable named currentlives.

Inside the function, on the right side of the = we are getting the array _liveSprites and assigning the return number currentlives (this will be 0, 1, 2 or 3). We are going to assign this value to our _livesImg.sprite which is the variable that is holding our current sprite. This will now change to whichever value is returned.

Last, but certainly not least we need to call the above function to set things in motion. Where would be the best place for this? We are going to be subtracting lives from the player, so it makes sense we do this when the player takes damage. Our Damage function inside the player script!

Note the one line that is red (disregard the true false red). This line I added that will call the function we created. It makes sense to add this here, right after we take a life from the player (_lives- -). Basically we just call the _uiManager script, step into it by using the . and calling the UpdateLives. Then inside the () we are just going to give if the value of _lives which was just updated in the line above.

Let’s see how this plays out…

Perfect! All seems to be working. Of course whenever you are coding and you play your game you come up with 1000 more ideas you want to implement. Easy one here, health power up…

Now.. one last thing. Game Over!

This is an easy one, now that I have armed you with all of that knowledge have a look a the gif below. I’ll just get it started…

One things of note here, the overflow. Take a look (once I finally drag the screen back far enough for you to see!) at the size of the text. Note that I change the font size to 50 and it disappears. This is just it leaving the bounding box created. An easy fix, just see the Horizontal and Vertical Overflow and change each to Overflow.

Make sure you uncheck the Game_over_text check mark. If you don’t, the Player will be greeted with a Game Over as soon as the game starts! We will activate it when the timing is right (the player dies).

Now, make sure you have a play around inside the Inspector. There is a lot you can do — change the color, font, size etc. You can even add your own special touches and make it flash with a little bit of elbow grease :).

Ok, so we have the wording, now we just need a bit of coding to make this thing work.

Now in order for this to work, we need Unity to know it exists. We do this by creating a variable that will store that image.

Now we can add it inside of the Inspector back in Unity. On the Canvas Object inside of the UIManager Script we now have a variable with an empty box (None (Text)). Drag in the Game_Over_text image we created.

Note that at the start I turned off the check mark on the Game_Over_text so it is off when the player starts.

Ok so now you need to find a place to activate this — where would be a good place to write the code that will say Game Over? Well, in this case — the UIManager Script has the perfect place. When we are updating our lives, we can add an If statement that will check to see if the player is dead. If yes, turn that Game Over on!

So in the red text, we just check if the currentlives is 0, then take the gameOverText variable and step inside of it to SetActive to true. That will turn the little check mark on.

Wow this is a long article. But you know what, I want to add one thing. Let’s add a flicker effect to the Game Over to make it feel real old schooly.

There’s many ways to achieve this but all come down to a Coroutine. Using a Yield return and setting a WaitForSeconds to have it print out Game Over, then nothing, then Game Over, will give it the illusion that it is flickering when in fact it’s not.

So the above code we just create a IEnumerator as we have done before, make a While loop and when the gameoverText is true, run the code below it. That code is pretty straight forward. You can change the .5f to .2 if you want it to flash faster.

Let’s see how it looks:

Good!

Well, I won’t keep you any longer — it was a long one today. But we learned a lot — well I hope you did!

Tomorrow we will get into something exciting. How to load scenes in Unity.

Happy Clicking!

--

--

--

With Unity all can be accomplished!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The fifteen minute WebRTC demo

How to debug a production issue?

For loop variations with multiple utility functions

Relationship between C Pointers and Arrays

How to get SelectorsHub Certificate?

MY GOALS FOR HNGI8 AND WHAT I INTEND TO ACHIEVE BY THE END OF THE 8 WEEKS.

Presearch Weekly Update #56 — Feb 25, 2022

Use Python to Power Up Your Day Job

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Laine Dorchester

Laine Dorchester

With Unity all can be accomplished!

More from Medium

Build Angry Birds Game Using Unity 2D

Feature Frenzy

Daily Progression: Main Menu Layout!

Galaxy Shooter 2D — Completed Boss Fight + Game