Hello, in this video we're going to be covering the grid system. So let's get on with this now. So what we want to do is first go to the definition fall, it's quite a few more definition for the grid. So let's just get started with that very simple stuff. first definition we're going to create is for the grid file path, aka the image itself. So I'm going to put rez for slash grid dot png.

Now we're going to define the flow path for the different PC a Noughts and Crosses. So x underscore piece, underscore file path. And this is when you read for slash x dot png. So capital X and capital O, we should obviously be able to see from the images as well. So the reason I'm doing four There's going to be a piece you can see here, there's also going to be an X wing piece and an x and a northwind piece. So when a US particularly when the user wins, what will happen is the actual Pete like pattern or the row or the column or the diagonal line, that is the winning piece winning line will actually change with an animation to the winning image so it's gonna look a lot better.

So we're gonna have x piece for path which is actually going to be X, meaning the file path is going to be circle winning piece file path. Okay, that doesn't know yet that is fixed itself. We're going to do some definitions for the PC so x underscore p 80% of you weren't really in conflict with anything else want full circle on the score piece is going to be zero. And one for an empty piece, we need to keep track of spaces in the grid empty and those are the one we'll be able to place our PCs on. And it's going to be negative one. But again, you can do whatever you want really ki dokie.

So now we're going to define all the different states and the states are going to be what state the game is in. So the first line that we played, so this can be the state when you're actually playing the game, you can put pieces down, we're going to have a state full pause. So while this you can obviously play the game, and the computer will and play the game, etc. But I have one for state one. When this is the case, you can guess what's going on. You have one Therefore it will show thing accordingly.

And when it's lose me, you can guess you lost the computer has worn. And finally, gonna be one for state on the school placing on the school piece. The reason there's wonderful place in the piece is because we're going to have an animation. And we just don't want to allow the user to place in a piece on that particular area. So now what we're going to do is do a hash, define for piece on the score fade on the score in on the score time. And this is going to be how long it's going to take for a piece to fade in.

Save that. We're all done with that. Now what we want to do is go to the game scene header, go to the header file, we need to create some methods. So what we're gonna do is private. We're gonna do blue on top began. And for this co cos today touch so what we're going to do is handle the function declarations for handling touch events.

And this is going to be event so asterik event, a copy and paste this because there's four different types of touch events. First one on just began returns a ball. So we're overnight successful, whereas the others do not. It is just void. The parameters are all the same, but the method is going to be on touch move. So when the user has placed the finger on the screen, but the moving on touch ended, so when they lift up pressing and on canceled, which is essentially when something takes over in control of your device on your phone, so it could be for your phone call coming in, and it will be canceled a lot of time you probably handled in a similar way to ended.

But that's the way you would do it if you want to something different. For now, what we're going to do is set up the grid rectangle so we can detect which space to use as our key clicked the void in it. Grid wreck and we're going to do void in it. Grid pieces. What we're going to do now is create methods. Some more space here, we're going to create a method for checking if the user has clicked an empty grid space if so, place their piece so void, check, place peace For this, we're going to need Coco's to be touch which will be passing in based on our touch.

Now we're going to check if the user has one. So void check when is it going to take 40 different two different parameters X and a Y parameter are never going to check ticular set of pieces so void check free pieces for much int x int y one index to get away with going with all of this and why to cut and paste this so we need one for wave three as well aka the different positions For free difference basis, and now we're going to create some variables. First one is going to be our grid Sprite. Next, we're going to create a 2d array of Rx, which will be interacting with AK. That's what we'll be detecting to, to see if the players touched a particular grid space. So this will be grid bases, and it's gonna be a three by three.

Now we're going to do a Coco's 2d array of sprites. So grid PC and this is essentially what's actually going to be displayed on our grid. inch grid array which is also free by free and this He's going to keep track of the individual pieces. So obviously, this is the visual piece that you'll see. This is going to be used for church. This is essentially just the background of the grid, the actual three by three grid.

And this will keep track of what's in one particular piece. In terms of out Whose turn is is it ours, okay, the use that always if the computers into game state, remember all those states that we created in definition right here. That's what that variable will be handling. So now what we can do is go to the game scene dot cpp. And what we're going to do is remove this, we need to include the definitions dot h. And now in our init method, all we need to do is scroll down, scroll down yeah, we are going to add a second background for Sona, Coco's helper, UI colon colon line centered background. And for this game underscore background score file path.

For some reason days not picking me up. Let's go to definitions. I didn't, I didn't know where background Yeah. And for this, it is the same as the main menu background, the aka the yellow background, but the reason we're doing separate define it because if later on, we want to change that background, we'd have to go for the code and change it or we don't want to use this one definition that's changed our code later on. We just change the definition for that's a great point, great reason of using some sort of definition file. So this should be a thing you can guess what it should be.

Gay background path for the layer passing this this is what's going to be adding that image to now we're going to initialize grid sprites of grid sprite got a bit more space to work with I'm scrolling grid sprite equals write colon colon create and for the file path it's going to be grid underscore file path now we're going to set the position which is going to be centered on our screen so grid sprite equals no mean sorry second position and for this position you need to center it so it's going to be Sona focus alpa, you icon on column get screen center like so. We need to add this as a child to our layer for this add Child Support grids. We need to know initialize the grid racks and grid pieces for now we can call a method here. We'll be implementing them very soon.

So in it, grid rack in its grid pieces. So now that we've done that, what we're going to do is by default, initialize the grid array, which keeps track of all the different pieces that are on our grid, we're going to need for it and just assign an empty space to it by default, the grid is going to be empty. So int x equals zero, x less than free x plus plus one when these common basis, we need one side of X the moments of two dimensional array, and I'm going to rename this to y, y, y, y y yyy and over a grid array x, y equals empty piece. And now we need to set whose turn it is. So I'm gonna turn equals x on the score piece. So that's gonna be the first time gamestate date on the score plane.

So by default you are playing the game is your go. We need to set up our touch event method. So we do event listener. Touch, one by one a case a single touch we're not interested in multi touch for this listener equals event. Touch the listener one by one colon colon create. Now when the listener swallow touches Through.

And now we just need to actually attach the methods to our touch event listener, or the listener. On touch began equal cc underscore callback to add the number always the first you have any parameters that a particular method takes. You don't need to pass in any parameters because this will do we automatically focus for the class name. On Touch. Touch on touch begin, began I should say. And now we've put a comma there.

And now we're going to copy and paste that for move ended and canceled. We can get all these changes to move change this to did this To cancelled. And then finally, we just need to actually add our event listener to our director. So to do that, you direct tags, otherwise you won't handle any touch gift instance. So get our instance, get Event Dispatcher. event listener, with event listener with scene graph priority and listener, listener, and specify the node.

She's gonna read this. Okay, let's listen in it, listening to it based on this particular node, aka our scene. Now we can start implementing the different methods from our head out. So first of all, I'm just going to copy and paste easy to be quicker this way that writing out myself First of all curly braces, curly braces, curly braces. And now we need to do game scene. The game scene Conan Conan do the same for the other free touch methods and for on touch began was going to return true need to return true if the function wants to swallow the touch aka doesn't want to allow it has to be propagated to items below it.

And untouched moved we're interested in we're only interested in ended but all the other ones are implemented. So if and when you want to use particular different touch types, you can very easily and for this the moment we're just going to say if state claim equals game state Then we're going to do a check and plays piece. And we'll pass in our touch event so we can actually get the position that's going to be very crucial, like soaking actually get where we're touching it. And that's it for this touch ended for now, if we're playing it, and we've pressed, what we're going to do is called a method which will handle all the different placing of this cool stuff. So what we're going to do now is initialize the grieved rect and initialize the grid sprites as well, you know what, I'm actually going to leave that for the next video.

I'll keep these two videos separate because we've done quite a lot already. And in the next video, we'll be looking at the grid, the grid, but we'll be initializing all of our rays. So that is it for this video. If you have any questions, feel free to post them Education platform sonar learning Dakota UK. If you don't check out the source code, feel free. There will be a GitHub link.

And as usual, thank you for watching and I hope you have a great day.