Differences

This shows you the differences between two versions of the page.

Link to this comparison view

gdevelop:tutorials:memorymatchgame [2015/05/18 12:28] (current)
Line 1: Line 1:
 +====== 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:
 +
 +{{ gdevelop:​tutorials:​part1_events.png |}}
 +
 +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).
 +
 +{{ gdevelop:​tutorials:​part1_01.png?​200 |}}
 +
 +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.
 +
 +[[gdevelop:​tutorials:​memorymatchgame/​part2_choice|Part 2]]