Jump to content
  • entries
    44
  • comments
    19
  • views
    2320

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

Josh Chang

774 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 Rio Lloyd
      Hey all!
      we are a team of 3 looking for more members, 
      we are making an isometrical Survival RPG.
      we are looking For Members who can make low poly 3D artists who can do character models, environments, tools and more.
       
      if interested and want to know more email me at rioishere14@gmail.com
    • By nxrighthere
      BenchmarkNet is a console application for testing the reliable UDP networking solutions.
      Features:
      Asynchronous simulation of a large number of clients Stable under high loads Simple and flexible simulation setup Detailed session information Multi-process instances Supported networking libraries:
      ENet UNet LiteNetLib Lidgren MiniUDP Hazel Photon Neutrino DarkRift More information and source code on GitHub.
      You can find the latest benchmark results on the wiki page.
       
    • By trapazza
      I'm trying to add some details like grass, rocks, trees, etc. to my little procedurally-generated planet. The meshes for the terrain are created from a spherified cube which is split in chunks (chunked LOD).
      To do this I've wrote a geometry shader that takes a mesh as input and uses its vertex positions as locations where the patches of grass will be placed (as textured quads).
      For an infinite flat world (not spherical) I'd use the terrain mesh as input to the geometry shader, but I've found that this won't work well on a sphere, since the vertex density is not homogeneous across the surface.
      So the main question would be: How to create a point cloud for each terrain chunk whose points were equally distributed across the chunk?
      Note: I've seen some examples where these points are calculated from intersecting a massive rain of totally random perpendicular rays from above... but I found this solution overkill, to say the least.
      Another related question would be: Is there something better/faster than the geometry shader approach, maybe using compute shaders and instancing?
    • By FedGuard
      Hello all,
       
      I would like to start off with thanking you all for this community. Without fora like these to assist people the already hard journey to making an own game would be exponentially more difficult. Next I would like to apologize for the long post, in advance...
      I am contemplating making a game. There, now that's out of the way, maybe some further details might be handy.
      I am not some youngster (no offence) with dreams of breaking into the industry, I am 38, have a full-time job, a wife, kid and dog so I think I am not even considered indie? However I recently found myself with additional time on my hands and decided I would try my hand at making a game.Why? Well mostly because I would like to contribute something, also because I think I have a project worth making (and of course some extra income wouldn't hurt either to be honest). The first thing I realized was, I have absolutely no relevant skill or experience. Hmm; ok, never mind, we can overcome that, right?
      I have spent a few months "researching",meaning looking at YouTube channels, reading articles and fora. Needless to say, I am more confused now than when I started. I also bought some courses (Blender, Unity, C#) and set out to make my ideas more concrete.
      I quickly discovered, I am definitely not an artist... So I decided, though I do plan to continue learning the art side eventually, I would focus on the design and development phase first. The idea being, if it takes me a year or more solely learning stuff and taking courses without actually working on my game, I would become demoralized and the risk of quitting would increase.
      So I thought I would:
      1: Keep following the courses Unity and C# while starting on the actual game development as the courses and my knowledge progress.
      2: Acquire some artwork to help me get a connection with the game and main character, and have something to helm keep me motivated. (I already did some contacting and realized this will not be cheap...). Also try to have the main character model so I can use it to start testing the initial character and game mechanics. For this I have my first concrete question. I already learned that outsourcing this will easily run up in the high hundreds or thousands of dollars... (lowest offer so far being 220 USD) I am therefore playing with the idea of purchasing https://assetstore.unity.com/packages/3d/animations/medieval-animations-mega-pack-12141 with the intention of then have an artist alter and/or add to the animations (it is for a Roman character so some shield animations are not going to work the same way.). This way I could start  with the basic character mechanics. Is this a good idea, waste of money,...? Any suggestions? I then have a related but separate question. Is it a good idea to buy Playmaker (or some other similar software I haven't yet heard of like RPGAIO), and using this for initial build, then changing/adding code as the need arises?
      3.Get a playable initial level ready as a rough demo and then starting to look for artist for level design and character/prop creation.
      ...
       
      I would really appreciate some input from more experienced people, and especially answers to my questions. Of course any advice is extremely welcome.
    • By GameTop
      Dirt Bike Extreme - another game made with Unity. Took about 2 months to complete.
      Take part in extreme motorcycle races across the dangerous and challenging tracks. Dirt Bike Extreme is easy to pick up but hard to master. Race, jump and crash your way and other mad rivals through the amazing tracks as you master the skills and physics of motocross in this high-speed racing adventure. Conquer challenging routes on 23 different runs, discover new bikes and become the best of the best! Over 257K downloads already!
      Windows Version:
      https://www.gametop.com/download-free-games/dirt-bike-extreme/

      Mac Version:
      https://www.macstop.com/games/dirt-bike-extreme/
       

       


×

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!