Creating a Memory Match Game in GDevelop

by komencanto

Part 1

Part 2: Laying out the Cards (easy way - by hand)

(Using a grid, object variables.)

In this part we'll create 12 cards and lay them out in 4 columns and 3 rows. (For the final version of this game we'll need to create 24 cards, but for now 12 cards will be enough.)

Go to the Scene. Turn on the Grid (button Grid on the top panel). Adjust the size of the grid (button Edit the grid). Let's make it 8 x 8 and enable Snapping to the grid.

(Note: When the grid is on, the boundaries of the window became invisible. You can resize the program window so that you can see only visible part of the screen in the scene window.)

We can now resize the card by mouse to fit 12 of them in our screen, or we can do it by changing it's size in the Properties window.

Let's do the last. Click on the card, in the Properties check the box 'Custom size', change Width from 0 to 112 and Height from 0 to 144.

Now, before we'll begin to make the copies of our card, we need to make several object's variables for it.

Click on the card, and then click on the 'Variables' in the 'Properties' window of the card.

Add variables by clicking on plus sign:

CardID = 0 (the number of the card to refer to it in the Events editor)
CardFrame = 0 (the face up image of the card)
FaceUp = 0 (to check if the card is face up or not)

Now place our first card 9 grid squares from the left border and 1 square from the top. Copy it (Ctrl-drag) and place the copy 2 grid squares from the first card on the right.

Keep copying and arranging your cards in 4 columns an 3 rows with 2 grid squares apart.

That's it - we layed out our cards.

Now we need to assign numbers to our cards from 0 to 11 by changing by hand (some tedious task) the object variable CardID of each card. For the first card (top-left) CardID will be = 0, for the second (on the right from the first one) CardID will be = 1 and so on till the last one (bottom-right).

If we'll run now our program, when we click on the cards they will show the same picture (leaf, the first frame (frame 0) of the Animation 1) because we stopped the Animation 1 for each card at the beginning frame.

Now, let's make our cards to have different face up images.

First, let's make the variable CardFrame of each card to be the same as it's CardID.

Go to the Events and add a new event:

Scene - At the beginning of the scene

Add an empty sub-event (you can delete it later - it'll just show where to put our loop), select it and then add a loop 'For each object' (A button 'Add…' on a top panel).

Object: card
Condition: No conditions

For an action we'll do CardFrame of each card = CardID of it.

All Objects - Variables - Modify a variable of an object
Object: card
Variable: CardFrame
Modification's sign: =
Value: card.Variable(CardID)

Now we need to connect the value in the CardFrame with the frame which shall be shown.

To do this, go to a mouse event and under the action 'Pause the current animation of card' add another action:

Sprite - Animation and images - Current frame
Object: card
Modification's sign: =
Value: card.Variable(CardFrame)

Our events shall look like this:

Now if we run our program, we'll have pairs of cards with the same pictures side by side.

The source file:

In the next part we'll shuffle our cards.

Part 3