Jump to content
  • Advertisement
  • entries
    44
  • comments
    19
  • views
    2424

100 Days of VR: Day 21 Creating Game Over UI in Unity

Josh Chang

799 views

Welcome back to day 21. In the past couple of days, we worked on creating a health system for our player and fixing some problems with our enemy that relied on it.

Now we can kill enemies and enemies can kill us, it’s time for us to make this a more complete game!

Today the first thing to do is create a game over state when the player’s health reaches 0.

To do that we’re going to use Unity’s UI system.

Here’s our game plan today. We’re going to:

  • Create a Panel to hold our content
  • Add in a retry button and a game over text
  • Use an animation for our panel to appear when we lose
  • Use our new Game Over UI into our code

Let’s get to it!

Creating the Game Over UI

The first thing we’re going to do is create the game over UI that we’ll show to the player when their health goes down to 0.

The first thing that we must do is create a new Panel UI element to our existing UI canvas HUD. We’ll call the panel UI GameOver.

Then as a child to our GameOver game object, we’re going to create a new Text and Button UI element.

Let’s make some changes, first we’re going to change the GameOver screen, the first thing we’re going to do is change the Rect Transform.

  • Set the Rect Transform to be the center of the screen with Shift + Ctrl to center our panel.
  • Width: 300
  • Height: 150

Next, let’s change our Text and here are the settings we want to make to our Text:

  • Font Size: 28
  • Font Style: Bold
  • Rich Text: Selected
  • Text: Game Over
  • Color: Alpha set to 255

For the Button game object, inside the Rect Transform:

  • Set the Rect Transform to be the center bottom of the screen with Shift + Ctrl to center our Button
  • Width: 160
  • Height: 30
  • Pos Y: 20

Then inside the Text game object in the Button, we’re going to change the setting for Text.

  • Font Style: Bold
  • Font Size: 18
  • Rich Text: checked

When you’re done, we’ll have something like this:

 
0*iHry7l5CWqPnKBlD.png

So now that we have our Game Over pane, the next thing we need to do is to create an animation to get this to show up.

Creating the Game Over Animation

Right now, we just have a panel standing in front of the screen, if we were to play the game, it’d just be in front of us.

Just like in the Survival Shooter tutorial, let’s create an animation for our panel to show when the game is over.

To do that, we’re going to use Unity’s Animation feature to create a new animation for our Game Over game object.

If the Animation tab isn’t available, go to Windows > Animation to get the window to show up.

Select the GameOver game object from the panel and then in the Animationtab, click Create:

 
0*cJYG2fezmyiGqHWN.png

and you’ll be ask to create a new .anim file.

Move it to our Animation folder (or anywhere you want to store it) and name it Game Over.anim.

This will automatically create both the GameOver animation clip and the GameOver controller that we use to attach to our game object. In fact, Unity will already automatically attach the controller to our game object.

Now that we have the animation selected, the next thing we need to decide what we want our animation to look like.

Here’s what I imagine:

Our panel would be invisible and then it slowly appears (from alpha 0 to 1), as that happens, it’ll start to drop from the top of the screen to the center (let’s say from Y position 100 to 0).

Let’s make it happen!

Setting up our Game Object

The first thing we need to do is add a Group Canvas component to our GameOver game object.

The reason why we need this is that we need to be able to make everything transparent in our animation the parent and the child. Just by changing the parent’s alpha will only change its transparency and not its child’s.

Luckily Unity has thought of that and that’s why among many reasons Group Canvas offers an alpha property.

Creating our Animation Clip

Now that we have all the setup that we need, let’s get started creating our animation.

In the Animation tab with the GameOver game object selected, we’re going to click Add Property and add 2 properties:

  1. Canvas Group > Alpha — to set our alpha
  2. Rect Transform > Anchored Position — to set our Y position

Now that we have all the properties we needed, we’re going to make changes to the value in the animator at different frames and Unity will fill in the values from the start to the end.

By default, for all of our properties, we’ll have a key (the grey diamonds) at the start of our animation at frame 0 and we have another key at frame 60. Each key we can set a value and Unity will automatically lerp the values from one key to the next.

The important part is that we move the white line to the specific key whose value we want to change. Changes only apply to the location of where our white line is.

For Canvas Group, at the key at frame:

  1. 0, set alpha to be 0
  2. 60, we can just leave the value at 1

For Rect Transform, at the key at frame:

  1. 0, set Anchored Position.y to be 100
  2. 60, we can just leave the value at 0

When we’re done, we should have something like this:

 
0*UPayDV5EeXg06umm.png
 
0*5_-wIlyiFguV2trt.png

Finishing Touches with our new animation

Before we finish for today, there are 2 finishing touches that should be done.

The first is that we shouldn’t show our Game Over game object in the scene.

To fix this, we go back to our Canvas Group component inside Game Paneland then we set our alpha to be 0.

Next, if you were to play our scene, our animation would constantly play on repeat. We can fix this by selection our GameOver.anim inside our Animation folder and unselect Loop Time.

This will be our short fix, tomorrow, we’re going to implement a state controller for our animation so we can really control how our animations.

Conclusion

That’s it for today! Tomorrow, we’ll go on and attach our animation to when the player’s health drops below 0 and other things like restarting the game is over.

Until then, have a good night!

Source: Day 21

Visit the 100 Days of Unity VR Development main page.

Visit our Homepage



0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By JustACicada
      Random Number God has been updated to v1.1.0.
      This is an incremental (although not idle) game about defeating randomized robots by rolling dice and playing cards that alter those dice and their effects.
      Other than performance fixes, the game has been rebalanced from the ground up. Now it should progress in a more fluid fashion. An option to reset the game with a significant boost to your power has been added, allowing you to advance further than you could before.
      There is also now an option to significantly speed up battle animations. Once you learn the rules of the game, a battle can easily take <2 min.
      Windows, Linux: https://justacicada.itch.io/random-number-god
      Android: https://play.google.com/store/apps/details?id=samuelVazquez.randomNumberGod


    • By Jamesgz
      Hey my dudes,
      Me and 4 friends are third year compsci students. Three of us are pretty good at drawing. We are hoping to make a 2d roguelite game with unity during the next few months. We are still brainstorming. At the moment, my idea is to create a card roguelite game:
      First, you would need to choose 2 heroes to enter the dungeon with the goal of finding a treasure. The treasure found gives you extra bonus in later runs. You can choose between mage, gunner, rogue, paladin, warrior and fighter. Each hero has their own unique cards. And there are common cards that every heroes can get(like hearthstone).
      The progression system would be like slay the spire’s. You can choose your own path, but every paths leads to the boss. It would use procedural generation. After defeating an enemy, you get to choose a new card out of the three options. There would be shops, random events, elite enemies, etc
      The combat system is where i need some suggestions on. There would be two piles of deck. One for each hero. I can think of two good combat systems:
      1. Before every enemy encounters, you can choose what cards to use from your deck. Cards not used would not get discarded. Cards are drawn from the deck only if they break or due to special card’s effect. Every card have a durability number. Ones the durability reach zero, the card would break and can no longer be used. Events/enemies can modify the durability of the cards.
      2. Card not used this turn would get discarded. Once the deck is empty, the discard pile gets shuffled and copied to the deck. Card/item effects can increase the number of cards you draw.
      How can I make the game more interesting? Any suggestions would be appreciated.
    • By horror_man
      Hello, I'm currently searching for a talented and passionate programmer to create a small but great horror game that would take around 3 months to be done.
       
      About the game: The game would be a sci-fi/post-apocalyptic survival horror 3D game with FPS (First person shooter) mechanics and an original setting and story based in a book (which I'm writing) scene, where a group of prisoners are left behind in an abandoned underground facility. It would play similar to Dead Space combined with Penumbra and SCP: Secret Laboratory, with the option of playing solo or multiplayer.
       
      Engine that'd be used to create the game: Unity
       
      About me: I'm a music composer with 4 years of experience and I'm fairly new in this game development world, and I'm currently leading the team that'd be creating this beautiful and horrifying game. I decided that making the book which I'm writing into a game would be really cool, and I got more motivated about doing so some time ago when I got a bunch of expensive Unity assets for a very low price. However, I researched about how to do things right in game development so I reduced the scope of it as much as I could so that's why this game is really based in a scene of the book and not the entire thing (and also that's why it would take 3 months). Also I'm currently learning how to use Unity and how to model things with Blender.
       
      Our team right now consists of: Me (Game Designer, Creator, Music Composer, Writer), 3 3D Modelers, 1 Sound Effect Designer, 1 Concept Artist and 1 Programmer.
       
      Who am I looking for:
      - A programmer that's experienced in C# and with Unity.
       
      Right now the game is very early in its development (GDD is completed and all 3D Items, Music and Sound Effects are completed).
       
      If you are interested in joining, contributing or have questions about the project then let's talk. You can message me in Discord: world_creator#9524
    • By kcirkl
      Hello, 
      So, I'm aware this may be a broad question with a vast variety in the anwser. However, I am a game design student that works professionally for a large engineering company conducting software configuration. Naturally, I'm curious about the path ahead and I'm desperately gathering information on the overall process of developement with Unity. Are there professional resources available that can outline the processes and functions of the engine, and what can be used to interact with it? I'm looking for options other than the official documentation. I have already jumped into that. Thanks!
    • By tspartant
      Hey everyone! My name is Ryan and I am the founder of Visualistic Studios, LLC. 
      I'm looking for experienced developers interested in short term and long term contracting. For the past 3 years I've been working in game development contracting, and the past year I've been working full time from home. Since then, I've received more and more contracts and I'm now at the point that I have too many for myself to handle. I have at least another full time job's worth of programming offers, and around 30-80 hours a month for 3D modeling/animation. I also am in need of a UI artist, so if you're talented please contact me! I have contracts using Unity as well as Unreal Engine 4, so if you can program in either please contact me. 
      If you are interested in working on these contracts, please send me links to your work and you hourly rate. (Most contracts range be between 18-25$/h, but please provide your normal hourly rate)
      You can get ahold of me through email - "ryan.hobbs@visualisticstudios.com", or Discord "TSpartanT#4670"
       
      Thank you everyone for reading, hope to hear from you soon!
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!