Hello, in this video, we're going to be continuing with the gray. So in the previous video, we handled all the different touches, learning boundaries actually concerned about when to dissolve them, so you can use them as you need to. We'll link to all the touches, we initialize the grid array we call initialize methods, but we haven't implemented them yet. We'll be doing that pretty soon. We added our grid sprite, we added a background and we added some definitions as well. So let's continue with initializing our grid Rex and sprites, old and void game scene in it, grid Rex.

And in here, we're going to initialize all the different Rex. I've got the code right here with quite a bit here. I'll explain what's happening. And you can access all of this from our GitHub page as well. So that is fantastic. So this Since now this seems to be okay.

It's just obviously the font size is pretty big. So let's show you what's happened. The second to problem in the third and fourth parameter, this session should essentially use to set the size of our rect. And the first one first to our use set our use to set the position of our rect in terms of where it's going to be starting from, and they obviously start from the first one. And as you go through them, they move across the grid, because that grid that we added up image, if we try and press it, it doesn't do anything. We know that the nine different grid spaces on there, we know that if we click the top left one, that we should do something with the top left one, but we need wrecks that are in the place of individual grid spaces to detect it.

Particular touch event. And that's what all of this is for. So now what we're going to do is initialize the grid pieces, aka our Sprite. For that, this implement method void game scene in it, grid pieces. We're going to create a for loop and then another for loop inside of here. This is just going to allow us to loop over our grid pieces of writing int x equals zero, x less than three y incremented every single time.

Okay, don't need semicolon there, my back in Y equals zero, y less than three with y, also incrementing every single time. So now all we need to do is the grid. Pieces x, y, and we're going to assign it to sprite, colon colon, create x underscore piece file path. You might be wondering, why are we assigning them to, to the XPS file path and not the note file path. And the reason is, we don't know which particular grid space or have a particular piece sounds obvious, yes. Also, we're not going to be displaying any of these at the moment, we'll be adding them as children to our layup, we're going to set the opacity to zero that will animate when we actually press down on a particular grid space to set the visibility to four but before we do that, we'll change the image to the appropriate one you might be thinking, Okay, why assign an image at all in this case?

And the reason is because we want to set up all the initialization yet. So that also include the positioning the positioning factors in the size of the grid piece, we can't factor in the size of the grid piece. As we know the size. That's the reason we are assigning a image to it that we can get the exact size of the grid. Now good grid pieces, x, y, set position. And for this, what we're going to be doing this is some pretty darn cool stuff that we're gonna be doing here.

We are going to do a vector. So back to we're going to do grid sprite get position x, we're going to get the condition of our grid Get position position needs to be x. add to it the calculation of grid PCs x, y, get content size aka the size of our particular grid piece, dot width. And this is n times by x minus one. If it's a zero, we we want to move it to the left, otherwise it's going to be in the center animals even centella fine and we'll be multiplying by zero. And if it's one space to the right, aka the foremost right one, that one to the right from the middle and he will add one because it was two minus one. So now once we've done This one we need to do is do something very, very similar for y.

So we need to do grid sprite get position y, where is it? y which will add that to the calculation of grid pieces. x, y get content. So is the height times by y minus one. Make sure we get the right number of brackets is moaning about something. So, what it's saying here expecting an expression okay Pammi it expects an expression hmm To open the fold build it expected expression so we're gonna have to go through this first of all let's have a look that might look fine to me x tected.

So we got vector grade sprite get position x. We're adding that to grid pieces. x&y, get contents is the width, multiply that by x minus one just can't see why that doesn't like it at all. I know what I'm going to do when I get something like this. I like printing in a textbook to like especially when I can see a lot more of it. And let's go over it and see what the issue is.

Okay, apparently we have some photo was it extra invalid character? Oh, so let's see if we paste that. That was, that was very weird. I would not have been able to figure that out in Xcode unless I rewrote that very weird, but it seems to be all good now. And now what we're going to do is by default set all the grid pieces to visibility is off, so set visible to false. We're also going to set the grid pieces opacity to zero because we don't want it To be visible, not only do we not only to be visible when invisible, we're going to animate to make the opacity 100%.

We will set this to zero as well. So doing later on, when did this add child gonna add the pieces by default, there's gonna be pieces laid down, it's gonna look like there's not enough for game development all about, you'll have certain things that will provide illusions of things being there or not being there. As a result, he will feel and look different. And so programming is all about all of that magic. Now, what we're going to do is check and place the peace, avoid. Game scene.

Check, please peace. For this, we're going to use a touch parameter and this needs to be a bit more than that. It's called cast to the colon colon touch, and it's going to be called touch. We're going to create a rect which is going to equal to the grid, right? Yep, bounding box. So this is essentially the size of our grid.

Sprite like aka each individual piece. And now all we're gonna do is get the touch point. And this is where the user has touched so touch. Yeah, location. And now all them do is iterate over our grid, see where we've clicked. So it's gonna you reuse this nested for loop, like so.

Now, in here, what we're going to do is do this grid spaces X and Y got contains point So if you contain a particular point, which is our touch point, then we obviously have clicked it. But you kind of place it right there, we need to check if that particular space the grid array is equal to empty. If it is fantastic, now we can actually place our piece. So first of all, let's change the game state to state underscore place in peace. Now, we're going to set a grid array to equal to turn so it will put either circle x in the actual grid array, which keeps track of the individual pieces or spaces of our array. Now we're going to check it out.

Current tiny tip from x underscore piece equals 10. Grid PCs y, set texture and the texture we're going to set it to is going to be x underscore p file path. outs. You can guess Logan do grid pieces, x, y, set texture equal to circle underscore, file path. And now inside of this if statement we want to set select a piece to be visible Set visible to true. Remember, we still want to see it because the capacity is off.

So what we're going to do, we could set the past 80 to 100%. We don't want to do that. We want to do grid pieces. x, y, run action. Yeah, we're gonna run a animation. And the animation is going to be consistent of a couple of things.

So we're going to have a sequence. And the sequence is going to be a fade in animation create, and the time is going to be the peace underscore fade in time definition that we created in the previous video. That after the piece has been placed, you can call a function, not during but app day, that's called funk colon, colon, create And calling if we just do STD colon colon bind ampersand DMC because that's a scene that we are going to call the method frog when you check when for every time a piece has been placed, we are going to check if somebody has one. So check when is going to be check when the way we actually pass in a parameter is slightly different. So you put the method in this X and Y to this is what we're passing through. And we need to have a look bracket here.

And we're good. So we're running the action so this will show our sprite now and we have a couple more methods. First of all, we need to check if we want Do that do void game scene, promo code check when corrected x in y. I'm going to call the method check three pieces for match. So if three particular pieces have mapped, remember in Tic Tac Toe or Noughts and Crosses, when you want to call it the eight different wind conditions, three rows and three columns and the two diagonals. So, I've already worked out these values, but you can essentially look at these and figure out which pay me which three we are checking for. What I'm going to do is copy and paste in empty method, eight checks that we need to do.

That's a tough one right there. And the next one is going to be 0111 to one, zero to one to two and a half 0010 to 101112. Now we're going to have to zero to one to two and the last two conditions are 001122. Now we need to do zero to one, one to zero. Now we need to check whose current turn it is and switch. So if x on the score piece Equals turn close.

If you don't want it to always be one particular pieces turn. We're gonna do turn equals circle on the score piece. Our turn equals x underscore piece. Now we'll do F, date on the scope, place in the scope, piece, equals equals game state. So if we're placing a piece, we can now set it to date equals plane. So games date equals date on the school plane so we can play again and now we're going to check If free particular pieces actually match.

To do that, we're gonna do void game scene. Check free pieces for match almost with this part. Now to increment it, I'm gonna check if he calls grid array x one, y one because the turn, aka the U that that's what we're checking for every particular if it matches, y one and we've checked for all three different grid spaces, so And these changes to x two x two x three X ray that we're going to do a string for the winning piece string and you'll see what we're gonna do in a second. First of all, we're going to check whose turn it is, so it's gonna be zero on the scale piece equals turn. double equals and we're gonna do winning piece string equals circle on the score, winning piece file path. Else, the winning piece string equals X on a school winning last reason we're gonna we have this particular variable, we'll be using that very very soon.

And now, what we're going to do is create a right array of the winning pieces, which is going to be free winning pieces because assembly you can ask the new winning PCs, zero equals, right. This is where we're going to use our bright string create winning PC string to get a character string, so gets the string we need to do winning pieces. set position. Sorry, my bad we need to get the actual elements. So set position. For the position, we're going to do grid PCs x one, y one, I'm gonna get the position.

Pretty simple stuff. Now when do winning PCs zero, set opacity to zero because we're going to do an animation starting looks really cool, trust me, you're gonna love this. We're gonna do this add child and the child we're gonna add is the one that we just created a winning PC zero. Need to do exactly the same for the other two pieces of copy. paste this change zero to 1111 change this x one to x two and y two position to two to two, negative two, x three and x, y three position. And there's only two more things we need to do.

First of those two is start fading in our winning piece. So winning pieces, zero run action. And the action we're going to run is a fade in, on column create. And this is going to be piece fade in time. For the other winning pieces, we could have them fade in at the same time but we're going to do is have one fade in after another is going to look really cool. So for this we need to run an action.

But we need to run it as a sequence because we want to do it partway through our previous fade in create The first one is going to be a delay time. You can guess what that method or what that particular action does. For this, we're going to do peace underscore for a time, we're not going to start fading in after the previous piece of fading in halfway during that transition. And trust me, you're gonna love this, this is gonna look awesome. And then next we put a fade in, which is create the for the times of peace fade in time. And now we can copy and paste this.

I need to change this to a to four instead of 0.5 and get to 1.5. So it's not halfway through this. It's halfway through this because I got a whole one as well. I didn't do it. And now we simply do game state equals state on the score. One.

And now, we are now ready to compile this awesome application. So we are compiling it. Hopefully it'll work. So is that Sora. Thea when you've done quite a lot of code? Yeah, that is working fantastic or, which is fantastic.

So it's just run in our simulator. And we'll get our splash screen and we'll go to our main menu, and we'll go to a beautiful, you know, what, the ultimate game theme. And then once we are on our game scene, we'll test out our game, there's still quite a bit to go because we don't have any AI. We don't have anything to tell the user that the game is over. We don't have anything to handle posing and we haven't implemented achievements yet. All of that will be to come in separate videos, but for now, we're going to have this Cool, awesome Tic Tac Toe game.

So let's see what we get. It's still running grass that's green. Going to our main menu, click guy grid. So if I press space here, I see fades in again. I'm gonna I at the moment, that's going to be covered in the next video for click here because the circle by print exia what circle gonna do you know what they're gonna do? They're very tricky.

Exia or circle can't do anything with a block here. I princey here, and look how cool that animation sucks. It is so awesome. But I can't press any more pieces because it's no longer plane. I can't do anything. What am I meant to do?

Game is over now. Wherever I've won, wherever I've lost, I should be able to retry or go back to the main menu. And we'll be handling that very, very soon. So this has been In it just for finishing off the grid. If you have any questions, feel free to post them on my education platform sonar learning Dakota, UK. If you want to check out the source code, feel free.

There will be a GitHub link provided. And as usual, thanks for watching and I hope you have a great day.