The Playground

Creating our second scene:

In the previous post we started making our multiplayer game, we added some buttons, and we connected 2 random players together.
Now it's time to give them something to play with.

In the previous post we created a second scene named PlayingScene. To make it look different we'll add a nice background to it:

We'll also add a new actor with 3 animations:

I'll cleverly name it Square, use a Scale of x1, in the Collision tab I'll mark it as a Is a Sensor, in the Physics tab I will mark the NO button in the Can Rotate section, we'll let the Affected by Gravity to Yes, and of course we'll also disable Continuous Collisions, and we'll set the Actor Mode to Simple.

The first Animation of our Square actor will be the blue one and the Name of the Animation will be 0 (the digit zero!). We'll add the second animation with the name 1 (the green one) and the third Animation with the name 2, which will be the remaining red square.

This is the actor that will form the board you saw in the first post. When it gets created it will use the first animation  (the blue one), when the player clicks on it we will change the animation to the green one, and we will mark the "danger" squares with the red animation.

The fun part:

The fun part needs a new Scene behavior named PlayBehavior and Photon's 2d List extension I mentioned in the first post.

Inside a Created event we'll just add a Do after .5 seconds block where we trigger an event named CreateBoard.

What do we add in it? Well..What do we need in our scene? We need to create a grid of 8x8 squares, we should probably keep the title of the game in this scene as well, and we should also display the Player1 and Player2 actors to be able to notify the players who's turn it is. We also need to create a 2D list that will be used for win/loose conditions as well as to keep track of the squares that the players claim. Eventually we will also add some score just to fill the screen with something interesting.

Let us begin by creating the grid. The logical way would be to use 2 repeat blocks and create our actors like this:

This would actually work nicely, however it is quite boring. What if we create our Squares somewhere else and  we just slide them in their position? It would still be boring, but at least it would look pretty, so let's do just that. It's actually simple to do. Create the actor somewhere below the screen bottom border and just move it in it's place:

When I tested this I noticed that my FPS's dropped a little, so I had to remove the collision box from my Square actor, on all 3 animations to overcome the problem.

Now that we created the grid it's time to add the Player1 and Player2 actors to show who's turn it is and the title of the game:

With the above done I'll stop adding anything else on the scene (for now) and I'll focus on what's under the hood of the game.

Under The Hood

What we need to do under the hood is to remember which squares are marked and which ones are not as our first task, and the most obvious solution would be to store them in a 2d list.

 To check for win/loose conditions we'd just need to check for matches on the same row, column or diagonal and it should be a lot easier than using a normal list.

Since, when the game starts, there are no claimed squares we could fill the list with 0 (zero) and we'll use 1 to remember the marked squares.

Create a list attribute that will hold our 2D list inside it, I named mine GridList, then if you haven't already, enable Photon's 2D List extension and insert the following inside the CreateBoard event:

And that's it for this post :)

In the next post we'll learn how to let the players claim those squares, figure out how to mark those danger squares and we'll let our players communicate that claimed square to their opponents.

P.S. This is the entire behavior up to this point: