A tiled background object is just like what the name implies. It is a background made up of tiled sprites. If you want to reuse the same sprite over and over, then using one tiled background object is better than making plenty of instances of a sprite object for two reasons:

Add a new game object, select a tiled background from the General section, and rename it as areaBorder. You will see an edit image window much like the one you see when you want to add a sprite game object; the difference here is that there's no animation because you can't add animations to a tiled background. You also can't set origins and collision polygons for it. Use element_grey_square for the sprite; this is usually for game blocks, but we don't have the appropriate sprite for a border, so we'll use this instead.

Close the edit image window, and we have a tiled background in our layout. You can click-and-drag one of the eight points that surround the game object (you can see it when the object is selected), and instead of making the image bigger, you can actually add more rows and columns to it.

Perhaps you've realized this, but when you drag one of the eight points to add more tiles, the newly added tiles are not always at full size, but only a portion of it.

If this is the kind of image we want, there's no problem, but often, this is not the case. We want the object to add new rows and columns exactly by its tile's width or height. Luckily, there's an easy way to do this in Construct 2: by snapping it into grids. Perform the following steps:

Which grid? If you want to see the grid, you can select the Show grid checkbox. This setting only works per layout. So, if you want to do the same to other layouts, you have to check it manually on each layout.

Now, move areaBorder and create more instances of it until it makes a game border as follows:

Now that this is done, we can move to the next part of the game: moving the paddle.

Moving the paddle isn't actually a difficult thing; we can do this using a movement behavior like we did in Chapter 3, Creating Diverse Player Experiences with a Flappy Bird Clone. The important thing is that we only want the paddle to move in two directions: left and right. I will explain how to do this by introducing you to another game object: the Mouse object.

Insert a new game object as usual, but select the Mouse object from the input category. It will be added to the entire project, so you won't see anything new on the layout. We want the paddle to follow the mouse; if the mouse moves to the left, then the paddle will move to the left, and the same will happen if the mouse moves to the right. However, we only want the paddle to move along the x axis. So now, switch to the event sheet and add the following line of code:

This will make our paddle follow the mouse on the x axis only. If you test it now, the paddle will move like we want it to, only in two directions. However, there's something wrong with it; it follows the mouse even until outside of the game border. This is something we don't want, so we will stop this from happening. To prevent this, we will simply say, "Don't go to the right if you have reached the position I decide." and "Don't go left if you have reached the position I decide." to the paddle. If you translate them into code language, the first event would be as follows:

The second event would be as follows:

Try testing it now, and now, the paddle only moves inside the game border. We have finished making our paddle move; the next thing we're going to do is move the ball.

We will to do two things: move the ball automatically at the start of a level and make it bounce off objects. These two things can be accomplished using a movement behavior we learned in the previous chapter. We will add a Bullet behavior to the ball so that it always moves in one direction. However, making it bounce can't be done just by the Bullet behavior alone.

If you take a look at the Bullet behavior properties in the Properties bar, you can see that one of its properties is to bounce off solids, which defaults to No. By switching this to Yes, we can make an object with Bullet behavior bounce off solids, but what actually is a solid?

A solid is just another behavior that can be added to a game object. An object with such behavior is considered a solid object, which means other game objects can't walk past it, can't jump through it, and so on. Since we want to make the ball bounce off the paddle and the game border, we'll add this behavior to those objects.

After adding the Solid behavior to the paddle and area border, we will have to change the angle of the ball a little so that it moves at an angle at the beginning of the level. So, set it to 45 degrees to make it move to the lower-right angle (or you can set it to any angle you want), and after setting the bounce off solid property to true, we are all set. Test the game now, and the ball should bounce on the paddle and off the borders; what's missing now are the blocks.

Now comes the time when we need to add the blocks to the game area. Before adding the blocks, let's remember that they have several characteristics such as the following ones:

We must keep these in mind when making our blocks. There are several block shapes we can use in the Puzzle assets folder from freebundle.zip, but for simplicity, we'll only be using the rectangle shape here. We'll classify them based on their colors as follows:

Now that we've planned it like this, let's add blocks to our layout. Insert a new sprite object with blocks with its name, and in the edit image window, load a blue rectangle sprite. We'll also load the other colors in this object so that we can easily set it up and, probably, change it when the game is running. We can do this by adding new animations to this object.

Right-click on the Animations window and select Add animation to add a new animation, rename it to Purple, and give a purple rectangle image to this animation. Ensure that you click on this animation first before adding an image to it because Construct 2 will automatically select the default animation after adding new ones. Repeat this for the rest of the colors until you have all the required animations.

Close the edit image window, and we'll have our block's object in the layout. Next, we'll add three instance variables to implement the characteristics of this object:

You may think it's starting to get difficult, but don't give up because I'm going to explain everything it in a way that is easy to understand. Now, we can use instance variables to determine which block to destroy, but first, let's put the blocks in place in the layout as follows:

We will first make the blocks collide with the ball and destroy them. Just like the areaBorder object, we will simply add a Solid behavior to the blocks. This will make the ball bounce off the blocks, but it won't destroy them. To destroy them, we will subtract their health every time the blocks collide with the ball, and after that, we'll check if their health has gone to 0; if it has, then we will destroy them. Translate this into code language, and you will get two new lines of code. The first one is as follows:

The second event will be as follows:

If you test it now, you can see the basic gameplay of the game: you can move the paddle to bounce the ball in order to destroy the blocks.

Now, we'll set up the power up blocks at the beginning of a level. There are two ways to do this: set it randomly or define it manually. We'll do it manually in this example, because this kind of game is usually level-based. To do this, we'll first add an instance variable to the blocks called blockColor (it's actually a Text variable) and leave the initial value to empty. We'll use this instance variable to determine what kind of block it is.

After adding this instance variable, close the instance variable window and select the block whose color you want to change. Then, in the Properties bar, change the value of blockColor to a color you want. The color must be one of the animations we set earlier, and when you set a Text variable in the Properties bar, you don't need to type the quote symbol. If you set a purple block, don't forget to change the health variable as well, so it needs two collisions to destroy it.

However, just because we change an instance variable, it doesn't mean the blocks' animation will immediately change. We need to add something on the event sheet. We want the game to check the blockColor instance variable at the start of the level and then change the blocks' animation to that color. So, we will simply add the following line:

Perhaps, you've realized that there are blocks with their blockColor instance variable values empty, but their color is blue. This is because when Construct 2 doesn't find a matching animation, it reverts to the default color, which is blue.