For Construct 2

1. Make a Match-3 Game in
Construct 2: The Basics
Welcome to a new series of tutorials in which I will show you how to build a Match-3
puzzle game, from scratch, in Construct 2. In this first part we are going to lay the
groundwork for the game and get the basic puzzle grid on screen.
Introduction
A Match-3 game is a block-based puzzle where you move blocks around in the game area
to create groups of three or more that share a common attribute (such as a color or a shape).
In most match-3 games the player is also given bonuses for matching more than three
blocks at once.
Most match-3 puzzle games are competitive in nature, and the player's goal is generally
just to get the highest score they can before their time runs out, or some other loss
condition is met. Some examples of match-3 games include Pokemon Puzzle
League, Bejeweled, and the recent hit Candy Crush Saga.
In this first article we are going to focus on laying the groundwork for our game. This
article will focus specifically on setting up the project and spawning a grid of random
blocks for the player.
Before We Begin
Before getting started with this tutorial you should make sure to install the newest version
of Construct 2(C2). When I built the original version of the game I was using Release 122,
so as long as you have a newer version than that, you should be fine. On top of that, if
you've never used C2 before you should check out this guide which details the basics of
using C2 and how to make most object types.
You should also download the graphics package I created for this tutorial. While of course
you can use whatever graphics you want, I will be giving specific positioning for many
items in these tutorials, and those positions are based on the images I used. If you do use
other graphics you will need to account for any size differences in those graphics when
following these tutorials.

2. Once you have everything set up and have a good understanding of C2, read on!
Setting Up the Project
Before we actually build all of the gameplay, we need to set up the project itself. Load C2
and follow these steps:
1. Start a new project.
2. In the Project Properties, set the Window Size to 600x600 .
3. Fill in the Name and Author fields.
4. Go to the Layers panel and add two new layers.
5. Rename the lowest layer to Background , the middle layer to Blocks , and the top
layer to Game Field .
6. Go into Layout 1 and insert a Tiled Background object.
1. For the Tiled Background object, use BG
Images/StandardBGTile.bmp from the graphics pack.
2. Go to the object's properties and rename it GameBG .
3. Set the object's Layer to Background .
4. Set the object's Size to be 650, 650 .
5. Position the object so it fills the entire visible area of the layout and looks
similar to this:

3. 7. Now, create another Tiled Background object.
1. Use the image Game Field Images/GameFieldBorder.bmp.
2. Name the object GameFieldBorder .
3. Set the Position to 9, -12 .
4. Set the Size to 16, 732 .
5. Set the Layer to Game Field .
8. Create a copy of the GameFieldBorder object.
1. Set the Position of the copy to 368, -12 .
9. Next, create a Sprite object.
1. Use the image Game Field Images/GameFieldBottom.png.
2. Name it GameFieldBottom .
3. Set the Position to 197, 625 .
4. Set the Size to 344, 150 .
5. Set the Layer to Game Field .
10.Make a copy of the GameFieldBottom object.
1. Set the Position to 196, -30 .
2. Set the Angle to 180 .

4. The final thing we need to do is make a background for the actual area the blocks will
appear in.
1. Create a new Sprite object.
1. Go to the Color Picker and set the Red, Green, and Blue to 0 , and
the Alpha to 200 .
2. Use the Paint Bucket to fill the entire image with this color.
3. Close the animation editor.
4. Set the Size to 359, 570 .
5. Set the Position to 195,294 .
6. Set the Layer to Background

5. The game field is now complete, but we still have to make a Sprite which can be used for
the Blocks.
1. Make a new Sprite object.
1. With the animation editor open, right-click in the Animation Frames window
and choose "Import frames...".
2. Select every image in the Blocks folder from the graphics pack, and import
them all.
3. Delete Frame 0, so that the gray block image is Frame 0 and there is no blank
frame.
4. Check to make sure your frames are in the same order as my blocks in the
image below:
Before we move forward, I'd like to explain the block images. The gray block is there to
represent an "inactive" block, which will be implemented in an upcoming tutorial. The
remaining images are grouped into sets of three for each block: the first frame is for when
the block is not being used, the second is for when the player is manipulating the block, and
the third is for when the block is matched into a group.
Finally, take the block we've made and place it somewhere in the layout that will prevent
the player from seeing it during an actual game. Also, set the Block's size to 40, 40 .
We have now brought in all the images we need for this article and can move on to actually
making the game work.
Spawning a Random Block Grid
In the final version of the game the blocks will be moving up at all times, and new blocks
will be pushing onto the screen from the bottom. For now, though, we need to get the basic
mechanics working, so we are just going to spawn an 8x8 grid of blocks and leave it at that.

6. Go to Event Sheet 1 and add these global variables to define the initial spawning position
of the Blocks:
Global Variable: SPAWNX
Value = 49
Constant = True
Global Variable: SPAWNY
Value = 526
Constant = True
We also need to do one other thing before we make the first event: we need to create an
instance variable for the Block that tells the block what color it is.
Create a new instance variable for the Block object, name it Color and don't change any
other settings.
Now we will make our first event. The goal of this event is to create a static grid of blocks
for testing purposes:
Event :
Condition: System>On start of layout
Condition: System>For
Name: "Y"
Start index = 0
End index = 7
Sub-Event: System>For
Name: "X"
Start index = 0
End index = 7

7. Action: System>Create Object
Object: Block
X = (SPAWNX + (loopIndex("X"))*(Block.Width + 2))
Y = (SPAWNY - (loopIndex("Y"))*(Block.Width + 2))
Both of these formulas say basically the same thing. First, we add 2 to the block width so
that each block has a 2px buffer between it and its neighbors to prevent false positives
when using collision detection. Then, we multiply that number by the current index in the
for loop, and add that to the starting X or Y position. Also, we are subtracting from the Y
value because in C2 the 0 point on the Y axis is at the top of the game screen, so by
decreasing the Y position's value we are putting an object closer to the top of the screen.
So what does this accomplish? This means that as the X and Y loops iterate, and the values
of X and Y increase, the position it puts each block in will change which will eventually
result in a square grid:
If you run the game at this point, you will have a grid of blocks - but, rather than being
different colors, they will all just cycle through every block image in succession.
To fix this we need to do two things.
First, we need to assign each block a color value using the instance variable we made
earlier. To do this, add another Action:
Action: Block>Set value
Color = floor(Random(1,7))
This will assign the block a random color value from 1 to 6. (The reason it's not from 1 to 7
is explained in the explanation of the Random function.)
Your function should now look like this:
We also need to add a system which changes the image of a block based on its value. To do
this, start by adding a new Instance Variable to the Block object:

8. Instance Variable for Block
Name: "IsMatched"
Type: Boolean
initial value = false
Now, add a new event:
Event: System>Every Tick
Action: Block>Set Frame
Value = (Block.Color-1)*3 + 1
This formula first subtracts 1 from the block's color value to account for the fact that the
values start at 1 rather than 0. Then, it multiplies that number by 3 to account for the fact
that each block has 3 frames of animation. Finally, it adds 1 to that value since the standard
image of a block is the first image in the set of images.
Let's look at a quick example with a Block that has a color value of 4, to see what
animation frame it will be using. First it subtracts 1 from the color value to get 3. Next it
multiplies that number by 3 to make 9. Finally it adds 1 to that value to make 10. This
means that a Block with a color value of 4 will use frame 10 as its default animation frame,
and will be a purple/square Block.
If you run your game now you will see that every block is a different color, but we still
haven't implemented animations for when your mouse is hovering over the block or for
when it is matched. This will be covered in the next tutorial, along with how to swap two
neighboring Blocks.
Here is a small demo of what the game should look like at this point (grab the source here):

9. If you want to continue working on your own, start looking at changing the Block's
animation frame based on a "Mouse > Cursor is over object" event. You could also start
looking at using the "Drag & Drop" behavior to manipulate the Block, and considering how
to determine what the player is trying to do with the Block when they start dragging it or
when they drop it.
Conclusion
Thanks for reading this part of the tutorial, where we set the basic groundwork for our
Match-3 game. Come back again soon for the next part of the series! You can keep up to
date via Facebook, Twitter, Google+, RSS, or email.