Hello, in this video we are going to look at implementing a game over system. Because at the moment if we play our Tic Tac Toe game, the previous video implemented AI, play it plays a PCI places on the middle is one here, hey, I counted it, I'll be stupid and I'll post one here, and the AI wins. At the moment, nothing happened after this animation. And that's the same for wherever I win, lose, or draw. But what we want to do is display a game over state, which will have sort of a semi transparent background, which are sort of gray the objects and we'll have a menu bounce onto the screen. The menu will consist of two buttons, a home button and a retry button.

It's gonna be the same for any game over state. You can customize it very easily. The code will be very extendable, we'll be using a separate UI class. So let's get down to it. So first of all, go to your definition file. And there are a few definitions we need to create.

So the first one is going to be a game over background file path. So hash defined game underscore over on the school background. And this is gonna be rez four slash scan report background because we are going to be using the same background as deployment pause menu, which we have not implemented yet, and we will be implementing in the next video. But the purpose of creating a separate hash define is that we can easily modify our game without having to go through anywhere we've used this background image. So next, we're going to create a game of a window because if you just saw that semi transparent background Now this is going to be sort of the background of the window that's going to bounce onto the screen using a nice cool animation. And that's going to be game underscore over underscore window.

And this is gonna be rez for slash, again, pause window, you can change it to a different window image for your game over screen if you want to. And we need to add a few button definitions. So we need to add a Actually you know what, I will just copy and paste this to save some time. And I'll change this to retry. This is also going to be retry is going to be retried a pMj. As usual, we're going to use the same foil path for the retry pressed button.

But you can easily change it if you have a different image to appear when the button is pressed This is provides a very extendable way of creating our game. Just need one more, and this is going to be the home button. So home button, we're going to have home button pressed. foil path is home button dot png. And then again, it's home button dot png. If you're missing something, there it is, is meant to be retry button.

By bad all of these images were already provided when we set up our project earlier on in this series. And if we scroll down, we need to create a couple more hash defines just for the animation. So we're going to do hash define game on the screen. Go over on the score background from the score fade underscore in time. And this is going to be how long it's gonna take for the game of background to fade in. Gonna be half a second, I'm gonna create a define for the menu, bouncing duration.

If you don't want to bend affecting the fade effect or slide effect, you can easily change the animation. Just go to our sonar costs API guy which is coke cost of sonar learning Dakota, UK, there will be a link provided and that shows you with just some videos, the different animations and aspects of cocoa so that you can easily use this and put one and a half seconds. So that now what we need to do is actually create some new files. Like I said, we're gonna have a separate UI system and this is going to be a class So if I show the classes in folder, I just like to duplicate an existing file, rename this UI dot Hage UI dot cpp just drag this on to my editor using Visual Studio clips Android Studio, or whatever ID you're using. Id however you need to, and you're good to go.

So included that go to AI. It's going to get rid of all the contents. And in here, we're gonna put a hash pragma once in tude focus 2d dot h. And now the class of you are going to have a couple of public methods. The first being the constructor and this is gonna take cost today. Hold on layer asterik layer won't actually do anything in the constructor in this video. This is just setting me up so we can create it as a pointer and pass in variable in the next video for the pause system because that will be part of the UI system as well.

Next, we're going to have a method for showing the game over. Just want to say one thing, though in a lot of games, game over is usually considered the thorough losing state the bad state in this game, you The game is always going to end so always going to be game over at some point. Even when you win, the game is over. When you lose, the game is over. Or when you draw the game is also over. Hence why it's called game over and not like game win, but you could have separate methods very easily because we've got a state system in our game so you can easily detect which particular date has occurred, and then show me the color menu.

And this is going to take a cost to the layer and this would allow us to draw to the current layer we're going to have a couple of private methods and this is going to be void retry. This is going to be co cos to the wrath. So this is going to be the original sender. gonna call it P sender, this is just a naming convention of Cobras TX you can call it whatever you want to and another one go to Main Menu. So these will be called depending on which particular method is I mean, which particular button is pressed. So go to UI dot cpp get rid of all the contents.

So now in here we need to include a few files. First beam you all you got haitch neck We're going to include the sonar framework file from the sonar cocoa Salpa dot h. And this is just going to be allowing us to use the UI functionality for stuff like centering very easily hash include definitions, or Hey, include game scene dot h. Include Main Menu, scene dot h. So first of all let's create the constructor, which like I said, will be empty. So cost to the layer asterik layer will be implementing this in the next method. Now while you just be easier for copy and paste these instead of typing them out myself Copy and Paste UI colon colon and just put some nice curly braces. So now for the show gameover we are going to be creating a background and the menu system. First of all we want to get the screen size we need that for stuff like position.

This is going to be equal to direct colon colon gift instance. Yeah, get visible size. And what we want to do is sprite asterik background. This is going to be equal to sprite colon colon create. And this is really going to take file path to our game over background like so. They set the position to background position and this position will be Sona co cos help.

Oh Conan co long get screen center. So we're just centering it in the screen, difficultly that sort of semi transparent gray background that will just sort of hide some of the game objects. Now we're going to set the opacity set to pass it to zero. Lay Schild background. Finally, we just need to run an action which will fade it in so background run action and the One option is going to consist of a sequence So the first action in the sequence is going to be a delay time. And the delay time is created with a time of peace, underscore fading time times by 2.5.

And then fade in create, and the fade in is merely going to take the game over background fading time. So let me explain why we're using a sequence and not directly doing the fade in. And the reason for this is the computer or the actual phone, which is a computer really yet the computer doesn't know about the animation in terms of we need to display the background after the animations have occurred. The computer will know the game state as soon as the piece has been placed or it's decided to place the piece there soon as being placed in the array. But before the after image has actually appeared. Because we've got animation, it takes a bit of time.

But we want to allow that to appear, allow the actual essay went in or the losing pieces to change. And as a result, this will allow us to see why it's happening. Give us some time to process it as the user, then show the background and then show the menu as well, which we're going to be implementing in a second. You want this to last a lot longer, you just change this aka if you want the actual game over to come a little while after the actual game has finished. You just change this value to increase it. So now when I create a menu item image, we're going to create a menu system menu item image, which is going to be the background, which incentives that game have a window, then to menu item sprites, which will be the home button and the retry button.

So menu item image. And I'm going to call this overlay. overlay overlay. Window item equals to menu item image, create. And this is going to consist of a few different parameters. The first one is going to be game over window and Game Over window again, game over window again.

So this is four different states such as disabled state, regular state, we just want the same one for each individual state. We're not modifying the states. And in terms of any callback, we don't want this to call any method when it's pressed. So now we're going to do menu items right? Actually not colon colon. This is going to be asked to retry item equals menu item sprite create and for the normal sprite, we need a sprite, quote unquote on create for this it is going to be retry button we can just copy and paste this for the selected Sprite.

We also need a disable sprite so we can actually use the callback otherwise we won't be able to use the callback we need to specify the disabled sprite butter sprite as well. And for the callback instead of specify no one of the do cc underscore callback. One because remember, your retry method has one parameter The selector is UI colon colon retry. We're not passing any parameters in ourselves that handles itself. Target is this and that is it in terms of initializing the menu item sprite for the retry button. Now we can position it.

So retry. No, I'm actually that's a bit easier just to see retry a retry button, we try item. set position. For this is gonna consist of effects to first of all, you want to get the overlay window item, yet, content size and we're going to divide it by four. The reason we are doing this is because by default, it will will be centered in the actual item in the overlay window item. And what we want to do is just position it slightly to the right.

And we're just going to get a quarter. we've experimented with these values, so we know what values look good if you want to change the positioning, if you need absolute values, feel free. I don't recommend using absolute values or recommend using dynamic calculation like what we're doing here. But you can easily change this. And now we're going to set y position and this is going to be the retry term. Get position.

Y why when I'm modifying this, the center is a Okay, so it's still in like something so lucky if we have close everything off by the looks of it. What does he not like? No matching constructor for initialization of Coco's 2d Vic to ah the contents it should be dot width. My bed was trying to pass in a vector and which is obviously not good at all. Now we are going to create the main menu item. So if we copy and paste this to save some time, rename this to main menu item and a menu item.

We need the home button here. We could call it home item whatever you want, it's your choice. This is obviously going to call the go to Main Menu mefferd you're setting the main menu position. Again the position wide for main menu item. But for this we aren't actually adding for to eight all we are taking away so this will position it to the left left of the center of the overlay window item in the x axis. And now that we've got that, we can actually construct our menu.

So menu asterik menu equals menu panel colon create. And in here, we merely specify the items that we want to put in here. So overlay window term, retry term, and main menu item. This will display them in this particular order. So these two items will be on top of this one. So if we were to put this after retry attempt, this will be on top of that one.

So that's just something to bear in mind. We're just gonna know this parameter that it requires. And now we're going to set the position and for this we're going to be Menu set position. For this was undo vec To sonar focus help you i colon colon and get screen center. And for the x value, we want dot x we want it centered in the x axis. But for the y axis, we want to do something slightly different.

You want to get the screen center, but we're going to do dot y plus screen size. dot height was wondering if we're doing that only appear off screen because if that's the center and we're adding the height of the screen, they'll no longer be visible and that is what we want. Because we want an animation which will make the menu bounce onto the screen, your locks if you want to fade in animation, you can easily do that. Using the code that we've got from here, just adapt it to the menu but we are going to do a bounce animation. So now we're gonna do layer. Child.

This is going to be menu. The animation we're going to create is called eat bang. So there's a whole heap of them, feel free to check out our cocoa API guide at co cos dots on our learning Daugherty gay said earlier on in this video, there will be a link provided so feel free to check that out on the quarterly menu, action easing equals inventor, colon colon create and for this we just need to specify where it's going to move to so it's gonna be moved to hold on hold on create. First of all, that's for the two ration which is menu on the score mukbangs duration. And for the position, we just specify the center of the screen which is Coco's helper, UI, corner colon get spring center. And now we're going to create a sequence we do love our sequences.

This is gonna be called menu, show sequence equals sequence, colon, colon create. And the sequence again, we need to do a delay time so the actual piece animation can completely finish and the user can see the result before the game over status showed me create. And this is going to be piece of skill fading time time by 2.5. Then the menu, show sequence Surely, that should be over here. Finally, we just need to run the action. So menu, run Action Menu show sequence.

And that's it for showing the game over, just need to implement you retry and go to Main Menu methods. These are very simple. We've already done this before, so we're actually going to go and get the code. So if we go to Main Menu dot cpp and if we just copy and paste this for example, here, so game scene creating the outline because for the reach, right, we want to reload the current game scene. For the transition. We're using the same transition of fade.

You can use a different transition if you want to use a different transition time, more than welcome to We are replacing it not popping anything or pushing one on we want, we don't want the currency to exist anymore. And we're gonna do the same for here. The only difference is it's gonna be Main Menu scene. And that's it, we can now go into our game scene dot cpp and just set this up. So the first thing we need to do is actually go to games in that age. And just include the UI header.

Create an instance of UI. So that in our game scene dot cpp, we just need to construct it. So UI equals new UI, colon, colon UI, the path in the layer, which is this, and finally we just need to go to the check, win condition. So check, win, keep scrolling down, check when. So after we have literally done everything You can move this car out if you want. And it was just for testing, we want to check if this date is equal to draw, lose or win.

If it is, then we can actually show the game over. So state draw does it equal to the game state. If it doesn't, the game state equal win state. And if that doesn't play finally equal the lose state. And if so, in here, so this is going to occur after we've placed any piece we've done all our check in so every single time we do a piece place, we will check this so we're going to do you I shield game over the layer just passing this so to draw the objects to it. That's it if you wanted to different do different menu for the different free states drawing when and losing with different items can easily just extend this have different methods in there and just do different if statements for the different states or do a switch statement.

Easily done. So now if we run this hopefully it'll build and we haven't made any errors. Okay, no good so far. Okay, build is successful. Now it's just running it on our simulator. So now if I play the game, nice piece place one here.

Place on here the move the AI wins. Okay, it crushed so sequence it crushed on a sequence. So where did it crash for go to UI, it would have obviously messed up here. That's where it's messed up. It's literally have created and sort of an infant sequence here. We should be constructing it using the menu action pleasing.

So let's just rerun this, to know why I did that. That was just totally a stupid move of mine. So this should be a okay now we shouldn't get any sort of problems like we just did. So just let this run on our simulator. Play. Dice a PC placement here, plays one here, it wins.

As you can see, there's a gray sort of background that fades then you can change the intensity of The gray background or a different image there, we got a menu system for click home takes us back to the home screen. If I click play again or this, I will beat dir this time. As you can see, wait for the animation to appear. I can click the retry button and it retries and I can play again. Okay, so this is the drawing just, let's say the user see it for a bit, and then we can retry again at the moment. Why do we want to quit from here?

What if we want to retry without having to complete this instance of the game? We'll be implementing that in the next video using the pole system that we'll be adding to our UI system. So if you have any questions, feel free to post them on my education platform. So no learning curve okay? Or feel free to reach out via Twitter, Facebook, Google Plus the comment however you feel comfortable. If you want to check out the source code, there will be a GitHub link provided along with the Coco's API guide.

So feel free to check that out for all the different animations, transitions, all of that good stuff. And as usual, thanks for watching, and I hope you have a great day.