Differences

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

Link to this comparison view

Next revision
Previous revision
gdevelop:tutorials:memorymatchgame [2015/05/18 12:28]
127.0.0.1 external edit
gdevelop:tutorials:memorymatchgame [2020/06/13 11:26] (current)
rapperdinesh [B. Inserting a sprite object, adding animations to it]
Line 7: Line 7:
 https://​www.scirra.com/​tutorials/​280/​creating-a-memory-match-game/​page-1 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.+For this tutorialyou'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. 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.
Line 28: Line 28:
 Launch GDevelop. 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//.+Create a new project (the //New// button at the top of //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. Now let's choose the size of the game window and the color of its background.
Line 35: Line 35:
  
 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''​. 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.+Alsolet'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 ===== ===== B. Inserting a sprite object, adding animations to it =====
Line 57: Line 57:
 Now add another animation to our card, which will contain its face images. 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. +To do this, double-click in the ''​Objects editor''​ on the object ''​card''​ to open the ''​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.+In iton the leftyou'll see the ''​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. 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.+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.+Now we need to repeat the same action and insert another 12 frames to our animation and place the side of the same picture ​by side.
 It will help us in the future identify cards matches. It will help us in the future identify cards matches.
  
Line 84: Line 84:
 ''​Sprite - Mouse - The cursor is on an object''​. ''​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''​.+On the right side of the window choose object ''​card''​ by clicking on a button with picture of the cube on it and selecting ''​card''​ from the list. Then click ''​OK''​.
  
 Now we'll add a sub-event. Now we'll add a sub-event.
Line 94: Line 94:
 ''​Mouse - Mouse button.''​ ''​Mouse - Mouse button.''​
  
-Click on the button with picture of a mouse on it and choose //Left button//. Click //OK//.+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. Now we need to add //Trigger once// condition to not constantly execute our event while the mouse button is pressed.
Line 102: Line 102:
 ''​Advanced - Trigger once while true''​ ''​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 cardwhen these conditions are met.+So, if the mouse cursor is on the card and the 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//. Move your mouse to the part of our sub-event with words //No Action// and select //Add an action//.
Line 133: Line 133:
 Go to the Scene and click on the //Preview// button up in the ribbon. 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).+If we click on our card it changes its image from the card back to its first face picture (leaf).
  
 {{ gdevelop:​tutorials:​part1_01.png?​200 |}} {{ gdevelop:​tutorials:​part1_01.png?​200 |}}
Line 139: Line 139:
 To exit preview mode, press //Edition// button in the ribbon on the top. 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.+In the next partwe'll lay out the cards, and make each card show its own face image.
  
 [[gdevelop:​tutorials:​memorymatchgame/​part2_choice|Part 2]] [[gdevelop:​tutorials:​memorymatchgame/​part2_choice|Part 2]]