Hello in this video we are going to cover implementing the main menu theme. Good if we run our awesome Tic Tac Toe application, what we have is a splash screen which will load soon as it loads in simulator from the splash screen after a few seconds, it goes to the main menu screen. And there is nothing there is just looks blank and what we want to do with that background button to be able to show achievements we have to go to the game scene as well aka a play button. We'll be implementing all of that in this video. And then in future videos, we'll be covering implementing the actual game logic within the game scene and are the classes to be able to play our Tic Tac Toe game. Otherwise, we don't just want to find the menu system and a fancy scene system.

So let's just let this all load up. And it should be loaded in any moment now. Okay guys laughing and now this is our main menu thing as you can see, very, very bland. So what we're going to do is go to definition dot h, we want to create a few new definitions. So what we want to do is only duplicate this and replace this with the last scene we're going to put main underscore menu background file path, and for this is main many backgrounds, so if we go to rez, just confirm it Main Menu background dot png, so let's replace this main menu background dot P and G and now we also need a bunch of different For the buttons and the other different objects that are going to be on our main menu, so kind of a hash define main underscore menu, underscore title, underscore file path.

So this will essentially be the right in tic tac toe. So we actually know what the game is a lot of games have on the menu, the name of the game. And in here, this is gonna be red for slash game. Total dot png as exceed that is right here. We need definitions for the buttons there. So main underscore menu, underscore play underscore button.

And this is going to be read for slash Play Button dot png. So this is what you'll be clicking to go to the game scene. gonna duplicate this. And we're gonna have Main Menu play button, underscore pressed. So Incoterms two dx, when you press a button, which will be coding very soon, you can change the image as well, we're going to keep the same image, because we've only got one image, we're not actually changing between them. But the reason we're putting that definition is you won't have to go through the different scenes later on and change the click buttons, images, if you want to change it later on, you could just go to this definition for and that's the beauty of having something like this, whether it's a setting system, in a more complex application, you probably would have a set in a single turn something along those lines for this definition file is more than enough, but something to keep track of the different objects, the different sort of images that are being used.

So you can easily change them later on. So you don't have to go through, you know, hundreds or thousands of lines. code to figure out where it's used. You just change it here, and it gets updated everywhere. So now we're going to put a hash, define for the sound, underscore on bottom. So sound on button, read for slash sound on dot png.

And again, if you can guess what we're going to do, we're going to have one for sound on underscore pressed. I want to duplicate this because there is going to be another state, which is sound off. So when you click the sound button will switch between on and off. And we do have different images for this. But again, the pressed state is going to be the same image they won't change but we can easily change it at a later date. And we're going to put a hash define for the achievement button.

And this is the new red four slash achievements. dot png, which is right there, and we need one for the press state as well. So underscore pressed. We need something else called the hash define main underscore menu, underscore play on the scope button on the score outer. And what this outer is. So we've got this play button.

This is essentially what you'll be clicking, but the way we've designed it is, so you've got the play button, then outside of it, you have some more sort of art around it just looks nice, but that's not part of the functionality. So that's the reason it is separate image. You can make it the same image by within the entirety of it would be the button. This is just read for slash play. Button out to that PNG Now we've defined for tag underscore main underscore menu, underscore play on the call button. And this is going to be zero.

And we also need a tag for the achievement. But the reason we need this is so we know what attended being pressed and it should be a one. These can really be anything as long as they're different because we need to distinguish between a main menu button being clicked on, I mean, the main menu Play Button being clicked and an achievement button clicked. might be wondering, why aren't we doing something similar for the sound on and off button. That's because we're going to be using the CO cos helper UI functionality, which will allow us to create a sound button the way we have created a background on the splash screen and scented it using just one or two lines of code and your handle all of the back end for it because usually a fan button is the same in most games. Click sound is on or off, and there hasn't been a press state.

And that's it. So we're handling all of that for you in our co class help. If you do want to check out that, feel free to go in here and just check out the folder and see how it works. So now, you want to go to the main menu dot h. And then here, what we need to do is just include the UI system. So first of all we're going to do using underscore ns underscore CC, which is basically using the code costs namespace. Do hash include extensions for slash costs, dash x t dot h, and then the hash include UI for slash co cos gooey dot h We need these extra files, even though the built into co cos because the new UI system is an extension is not built in by default.

So it's not included by default website. Now initially using underscore ns underscore cc extension, so we're using the extension namespace. And we're going to be using namespace i. So this will prevent us having to do Coco's 2d every single time I leave it there that's already been coded up. So what we need to do is within here, we need to add some private methods, just the one actually, and this is going to be called void touch event. It's going to have a reference of the sender and this is essentially which button or what is calling this method aka which button has been clicked, because that's essentially what's going to call our methods so you can be achievement button or the play button.

Within there, we'll be using the tag that we created in the definition file to distinguish between the two buttons. Now we need widget code on code on touch event type. So what type of event has occurred? So what we'll do is go to the main menu. cpp. Now we're going to actually implement this code.

So we'll add in here what we need, we can actually remove the Simple Audio engine. You don't need that at all. We are going to do hash define a hash define sorry, hash include definitions dot h we also need And I thought we can actually get rid of this, because we have it in the header file. And we have the extension included right here. So yeah, we're all good for all includes, we can start code in our scene up. We don't want to do anything in the Create.

See, I'm gonna leave that as it is in the init method. This is what we're going to be modifying. So after we have initialized the layer, we're going to do sois. Screen please. Equals director colon colon get instance. Get visible size so this is the visible screen size and we'll be using the full position couldn't do back to origin equals director, colon colon get instance.

And we need to get visible origin. And some devices like certain Android devices have an offset due to stuff like a touch bar at the bottom, stuff like that make that particular device have an offset. And for that reason, we need to handle that when we actually do positioning. So that's the reason we're going to get origin. And now what we're going to do is actually create our background. And because that's gonna be centered, we're going to use the Coco's helper UI system for this.

So when do so now Coco saga UI, Conan colon, add centered background for the string, you simply specify main on the score menu on the school background file path. And for the layer, we just put this and I'm actually going to run this now so it's good to run it as you go along. Make sure thing though, working and Make sure they're working the way you want them to work. So it seems to be going good. Just build in our application at the moment. Okay, successfully built, it will launch it any moment now.

And now, as you can see, we have our yellow background that is essentially the background for the main menu thing. Once we have the button and the toy tool, it will look a lot better. What I was gonna say was if you go to definitions, instead of having the transition timer 0.2 20 to 1.0 because it's a little slow, I mean, it's a little faster the way the money last lower so we can see the transition. So if you just run this through your Asana game logo, probably couldn't make it a little pattern. Now let's do 0.6 on I'm pretty sure that's going to be good. So we'll test it when we actually run it again.

So now, what we're going to do is create the sprite for the title. So sprite title equals write colon colon create. And this is going to take a method I'm going to take parameter, which is going to be the file path of our sprite, or images should say and it's gonna be main menu is going to go to file path. Next, we're going to position it so during the total set position. I'm going to put back to take two prompt to the x and the y position and then the screen size dot width divided by two plus origin dot x and we can copy that paste this. And we just need to change this to height and this to y.

So let's explain what we're doing here. So we're setting the position. And because we want it to be centered, actually my bad, we want it to be centered in the x axis. So we gained the width of the screen divided by two, then we need to factor in origin, the way you simply factor in our origin is by adding x by adding it. So origin dot x for the x value origin dot y for the y value, but for this, what we actually want to do is we want it three quarters of the way up because by default, items are in the bottom left hand corner. So because we want it, you know, three quarters of the way up to do that you just do times 0.75, so it's above the center.

And now we just need to add this to our scene to do that you this child and the Know that you required his title. And now if we run this we'll have our main many background along with the title. So let's see what we get. There we go. It's already coming along pretty nicely, just with that addition is already in looking a lot better. Now we're going to add the play button and the play button outer.

To do that really simple. We're going to add a few extra blank empty lines so we can easily navigate around this add button asterik Play Button equals button colon colon create and this is going to take two images. The first is going to be the main but Main Menu play button. Then Main Menu play button pressed. Now we're going to set the position within the play button, set position. And for the position, we want it to be centered in the x and the y axis.

We could copy and paste this and do something similar for the y axis as we've done for the x axis. Or you can use the built in Coco's helper method which easily allows you to position stuff or doing Sona Coco's helper, UI, colon, colon, get screen center. And that's it. That's all you have to do to center it. Now. You don't have to do anything else.

You're going to do this child play button. You might be wondering before I run it, why didn't we just Do this the same way we did our center background, because you can just center it just using one line of code. The reason is the background, you're not interacting with just one image. And that's great for what the cocoa helper does. But whereas this is two images, and regular state and a press state, and you're going to be interacting with it, it's gonna be more code to handle the interaction later on. Hence why we couldn't use the built in AD centered background method.

So what we're going to do now is run this and show you what we've got. Here we go, we got our play button. At the moment it obviously will not Do anything to actually create some interact? interaction, we need to add a touch event listener. To do that you just do play button. touch event listener.

And the callback that it takes is going to be CC, underscore callback two. And then number two refers to how many parameters that particular method is taken. So first, you need to specify which method you want to call. So this is going to be Main Menu theme, colon touch event, which we created. And our header file, we can get rid of all of this. And after touch event, we're going to do comment so we're just passing in the scene in the layer and we're all good to go.

Now, we can just do play button, set tag. And the tag is going to be tag underscore Main Menu play button. At the moment, this still won't do anything because we haven't implemented the touch event method. I won't be doing that very, very soon. What we're going to do now is create the outer sprite, which goes around our play button for that. Roy asterik.

Play Button, outer equals wrote colon colon create. And in here should be Main Menu, Play Button outer. We need to play but outer set position we're going to send to this this is going to be so No coca silver UI colon colon, get screen center this show your Play Button out outer. And now we can run it and see what it looks like with the actor Sprite. And I'm sure you'll agree it will look a lot with failed. running again is failing for some reason.

Ah, I know it's failing. We go to many see is failing because we haven't actually recording this method or touching it. But we haven't actually implemented yet for now and a commented out and if we run this now, it should build successfully and run and when we actually Implement the method very soon, we'll uncomment this line out. So let's let this run. There we go. We have a outer part, which is just a bunch of lines, and it looks a lot better.

So now what we're going to do is add the audio toggle button. To do that we have built in methods within the cocoa helper. So you just do sonar, class helper, colon colon UI, we should create an instance of the UI. And you do UI dot add audio toggle. So you can either do a music, toggle or sound effects toggle, or the audio toggle or handle sound effects and music if you wanted to. Just keep it basic.

That's what we're going to do. And for the on button, if you can guess what this is going to be. She's going to be sad. Under score on button, this is going to be sound on the score home button pressed off, but technically sound ON or OFF button does sound off button pressed the layer if this this is what it's going to be added to. And the position, we can either provide a manual position later on, or what we can do is use the built in cost helper methods for positioning and that's what we're going to do discuss. So now coca Salpa you I put some position, colon colon, he can do top left, top right, bottom left or bottom right, only bottom right and this clearly allows you to position it in any one of the corners instead of having to thought out all of that stuff yourself and it's dynamic on different screen sizes.

So now all we can do is run it and see the Audio button. So now that it has successfully built sonar games, and as you can see, we have our audio button. And if I click that, it shows the off audio button and the on audio button. We had music in here or sound effects, they would be disabled, enabled or disabled. enabled. So very simple stuff using just two lines of code.

We've created a button that can switch between two state easily position and it has the audio toggling functionality, which is fantastic. Now what we're going to do is create an achievement button so when the button achievement achievements achievements button equals button, colon colon create. And this is going to take the regular achievement button and the pressed achievements button. Now we need to set the position so achievement button, set position. And for this, what we're going to do is use the sonar Coco's helper method which is sonar cocoa, selpa uy, colon colon, get screen corner, so we want to get a particular screen corner. And for this, we'll just do Sona cocoa soap, UI, bottom position, colon, colon, and we want the bottom left.

And for the item that will position it is going to be achievement, but the reason we need to pass it the thing it needs to factor in stuff like size. So what we're going to do now is This add child is going to add the achievements button. And the last two things we need to do for the achievements button is assign the touch event listener like so. So instead of play button is going to be achievements button. That's fine. And for the tag is going to be tagged underscore achievement button, and we're ready to run.

And after this has successfully run, the initialization method is done and we can implement the touch event method which will handle the actual logic behind touching the achievements button and the play button. There we go our splash screen main menu and we have our achievements button right here. At the moment, we don't have any functionality handling this. So we'll be doing that very, very soon. So, what we want to do now is void Main Menu scene touch event. And this is ref, pass to sender.

Know where that came from, no red ref asterik sender. This is widget colon colon touch event toy. And in here, what we want to do is first do node asterik node equals node asterik send up. So what we're doing is casting the sender to a node and the reason we want to do that is because we want to be able to get certain things like the tag and the day is just a like a reference to it, whereas this will be an actual node. And we'll be out to get the different properties of that node as we need them in here. So we're actually going to switch on type.

And there are four different cases. So the first case is going to handle widget. colon colon, touch event type, colon colon began. Great. We're not actually going to be using this. We're just going to show you the different cases.

And then you can use them accordingly. If you need it, though, we're going to have one for handling. Touch, move. Touch ended so when the finger has been lifted and touch canceled, just canceled will be something like it If some other application took control over your phone, maybe the phone rang, the canceled event would be cold. So you should always have a default break. The only one would that we are actually interested in is the ended case.

So in here, we're going to do if tag, underscore Main Menu, Play Button equals node get tag, it's going to get the tag that we assigned in the init method. So in here, we'll handle whenever the play button is pressed out. If we're going to be tagged on the score, achievement, button, equals node, get tag and in here, we're hi Under the achievement, but I'm impressed. So for this, what we want to do is see asterisk scene equals game scene. colon colon create. Actually, if we go up, we also need to hash include game scene header.

And now here, we're going to do something very similar to what we did in the splash scene, which will create an instance of our game scene. Then we're going to create a transition, you can use a different one if you want to, I'm just going to use the fade one, then transition equals transition fade, colon, colon create. The first parameter we're going to pass in is how long we want the transition to last. So this is going to be seen underscore transition time. That's the beauty of having a definition. We can have all the difference Same transitions same amount of time.

And if we want to change it, we only have to change in one place. And then it's changed. And then for the theme, the path in a scene that we want to replace our currency in with and director Conan Conan yet. instance replace scene and you specify the scene you know replace the current main many scene with which is our game scene instance and implement the achievement button as well. This is sono Coco's helper colon colon, Game Center, colon colon show achievements. And if you implemented the Android side, so sonar Coco's helper colon colon, Google Play Services Just do Google Play Services colon colon show achievements.

You don't need to handle. If you're on iOS or Android, we do all of that behind the scenes in the cocoa helper. If you're on iOS doing Google Play services on to anything. If you're on Android, during Game Center show treatment won't do anything. So assuming you've got all of this set up, which we provided links to setting up Coco's helper in your project in the first video, if you've done that fantastic, and this will just work out of the box. So if we click play, we will now be able to click our different buttons.

So it's just successfully built our project. It's going to run it now in our simulator. Our splash screen will load up transition to our main menu. And now if I were to click the play button, forgot one thing. We still have these common today, we can uncomment them now. So we can actually click them and call the touch event listener, which will handle what button is clicked and do the code accordingly.

So build is successful, fantastic. We have the splash scene. If I were to click the achievements button, Game Center on a valuable player is not signed in. If I was signed in on my device, then that would well show me the achievements, obviously that that is always going to be an assumption that the user should be signed in. If I click the play button, it now takes me to the main I mean the game theme. And in the next few videos, we'll be implementing the game scene logic and the game scene.

Roll. If you have any questions, feel free to post them on my education platform sonar learning.co.uk. If you want to check out the source code, there'll be a link to GitHub. And as usual, thank you for watching and I hope you have a great day.