Creating a Memory Match Game in GDevelop

by komencanto

This tutorial is based on the original tutorial “Creating a Memory Match Game in Construct 2” by kittiewan:

https://www.scirra.com/tutorials/280/creating-a-memory-match-game/page-1

For this tutorial you'll need GDevelop, ver. 3.5.74.0 or higher.

We also will use the card graphics, created by kittiewan in this tutorial, which you can download from the linked page (look for Memory Match Tutorial bundle, the folder Cards Graphics). Or if you want to use your own images you'll need 13 of them: 12 for face side of the card and 1 for the back of a card.

You can try the original game here: http://www.scirra.com/arcade/addicting-example-games/956/memory-match-tutorial

The goal of the game is to find matching pairs of cards in the least number of turns possible.

The tutorial consists of 5 parts which will guide you step by step in creating this game.

You can leave your feedback about this tutorial on GD forum: http://www.forum.compilgames.net/viewtopic.php?f=19&t=5471

PART 1: ADDING A CARD OBJECT TO THE SCENE

(Setting up the game window, inserting a sprite object, adding animations, making the card respond to a mouse click.)

A. Adjusting a window size and a background color.

Launch GDevelop.

Create a new project (the New button at the top or Create a new project in the main window on the Start page), select Empty project, Native platform (you can always change to the Web platform, but the debugger is available only on the Native platform). Under Choose a file for the project, rename the folder My project to MemoryMatch and the name of the project from Project.gdg to MemoryMatch_1.gdg (we will save each part of the project as a separate file). At the end click on the button Create the new project.

Now let's choose the size of the game window and the color of its background.

Right-click on the Project in the Project Manager and select Edit the property of the game. Set the Window Width to 640 and the Window Height to 480. Close the window Project Properties.

Next, right-click on the New scene in the Project Manager and select Edit the properties. Change the background color of the Scene to the one that will contrast with the white cards - green, for example, and click OK. Also let's rename our Scene from New scene to Game. Right click on the name New scene and select Rename. Type in the new name.

B. Inserting a sprite object, adding animations to it

Now let's add an object Card to the Scene.

  • Right-click on the Scene (green field with a frame in the main window) and select Insert a new object. Select Sprite, and then click OK.
  • In the sprite editor, right-click in the Images window and select Add an image from a file. From the folder containing the card graphics, select the file CardBack.png and click Open. Then close the sprite editor.

The image of the card will appear on the Scene.

Let's move it inside the frame on our Scene, which shows its visible part when the game is running.

Now we'll rename our card object from New Object to the card. To do this in the Objects' Editor, right click on the object New Object, select Rename and rename it to card.

(Note:
- GDevelop is case sensitive. The 'card' and 'Card' will be names for two different objects.)
- If the window Object Editor is closed, open it by selecting Scene-Objects Editor in the top menu.)

Now add another animation to our card, which will contain its face images.

To do this, double-click in the Objects editor on the object card to open Edition of a Sprite object window. In it on the left you'll see Animation window with Animation 0 in it which has only one frame - the back of the card. Now we'll add another animation for our card with all face images which it can have.

To do this in the Animation window click on the plus sign (Add animation). Animation 1 will be added. Then right click in the bottom Images window and select Add an image from a file. Select all the files with images of the card faces (click on the first image, then Shift+click on the last and click Open. You'll see then 12 images - frames 0-11 of the Animation 1 of our card.

Now we need to repeat the same action and insert another 12 frames to our animation and place same pictures side by side. It will help us in the future identify cards matches.

To place the same pictures next to each other, click on the frame 12 (leaf) and press “j” to move it to the left until it will be placed next to the frame 0 (the same image of a leaf). And repeat that for each of the remaining frames. As a result, you shall see 12 pairs of frames with the same pictures. Now you can close the window Edition of a Sprite object.

C. Reacting to the mouse click

So, we have prepared our card, now let's make it react to a mouse click by changing its animation from Animation 0 (back of a card) to Animation 1 (face of the card).

To do this, go to the Event editor (tab Events next to the tab Scene), and create our first event.

So, in the event editor, in the top panel click Add an Event.

Move your mouse cursor to the part of it which says No condition and select Add a condition.

A window opens with a list of possible conditions, grouped into categories on the left and with the description of them on the right.

Choose:

Sprite - Mouse - The cursor is on an object.

In the right side of the window choose object card by clicking on a button with picture of cube on it and selecting card from the list. Then click OK.

Now we'll add a sub-event.

To do this, select our first event by clicking on the number 1, and add a sub-event by button Add a sub-event on the top or a tab A sub-event under our event ).

Add a condition:

Mouse - Mouse button.

Click on the button with picture of a mouse on it and choose Left button. Click OK.

Now we need to add Trigger once condition to not constantly execute our event while the mouse button is pressed.

To do this, add a condition:

Advanced - Trigger once while true

So, if the mouse cursor is on the card and left mouse button was pressed, then … We need to add an action that changes the animation of the card, when these conditions are met.

Move your mouse to the part of our sub-event with words No Action and select Add an action.

Choose:

Sprite - Animations and images - Change the animation
Object: card
Modification's sign: =
Value: 1

and click OK

Now, if we'll run our game (Scene-Preview) after clicking on the card it will show all its face images from the first to the last.
Let's fix it. (To exit the Preview mode click on the Edition button.)

We need the card to show only one face image of it - not all of them. To do this, we need to stop the animation.

Go to the events editor and add another action to our sub-event: Action:
Sprite - Animations and images - Pause the animation
Object: card.

Our events shall look like this:

Now let's run our project.

Go to the Scene and click on the Preview button up in the ribbon.

If we click on our card it changes its image from card back to its first face picture (leaf).

To exit preview mode, press Edition button in the ribbon on the top.

In the next part we'll lay out the cards, and make each card show its own face image.

Part 2