Tutorial: Create a memory game, Part 1

2 Feb

About two months ago, I purchased a license for Game Maker: Studio Professional from YoYo Games. I wanted to try this development tool, because it was supposed to be a very easy and fast IDE to develop games in. I actually knew about this IDE from some years ago, then as Game Maker 7 and later 8, but now I wanted to do something serious with it.

In this article, I am going to use Game Maker: Studio to create a game and document it as a tutorial.

The game that I want to make is a memory game where we will have 12 cards faced down on a table. We then flip two cards face-up and if those cards match, then they are removed from the table. If they don´t match, then they are flipped face-down again. The goal is to match all cards on the table with as few tries as possible. Try the memory game here

Before we start, I have created the graphics that we will use in the game. The graphics include a background image that represents the table, a face-down card and the face-up cards. The graphics used can be downloaded here.

Create project

  1. We start by opening the Game Maker: Studio.
  2. We then create a new project, which we call MemoryGame.

Backgrounds

backgroundWe start by loading the image of the table as a background resource.

  1. In the treeview, select Backgrounds, then right-click and select Create Background. We can also select Create Background from the Resources  menu.
  2. Then click the Load Background button and load the image with the table.
  3. Click OK and the image is no

    w a background resource. The default name is background0, which is fine by me.

Rooms

room_backgroundThe next thing we want to do is create a room and display the background image inside of it.

  1. From the Resources menu, we select Create Room.
  2. Click the backgrounds tab, and click the textbox that displays . A popup-menu should appear with our background image. Select it.

Save and run

With a room and background image, we can now try to run our game.

  1. We want to save our work first by selecting Save All from the File menu.
  2. Then select Run Normally from the Run menu.

Sprites

Next we want to load the rest of the images in as sprite resources. We will also make some effects and animations with these images.

We will begin by loading the face-down card.

  1. From the Resources menu, we select Create Sprite.
  2. We change the Name to spr_facedown_card.
  3. Then click the Load Sprite button and load the image with the face-down card.
  4. We want to give this card a shadow, so click the Edit Sprite button.
  5. From the Transform menu, select Resize Canvas…
  6. Set the Width to 120%. The Height is also set to 120%. Then click OK.
  7. From the Images menu, select Shadow…
  8. Lets just use the default values and click OK.
  9. From the File menu, select Close Saving Changes.
  10. Click OK to close the sprite window.

We will then add a slightly larger version of the face-down card.  To create some dynamics later on, this card will be displayed when we press the face-down card.

  1. Open the sprite: spr_facedown_card.
  2. Click Edit Sprite.
  3. From the Edit menu, select Copy.
  4. From the File menu, select Close Saving Changes.
  5. From the Resources menu, select Create Sprite.
  6. We change the Name to spr_facedown_card_larger.
  7. Click Edit Sprite.
  8. From the Edit menu, select Paste.
  9. From the Transform menu, select Scale…
  10. Set the Percentage to 110 and click OK.
  11. From the File menu, select Close Saving Changes.
  12. Click OK.

We are now going to create some animated sprites to create some more dynamics when we press the face-down card.

  1. From the Resources menu, select Create Sprite.
  2. Change the Name to spr_facedown_card_anim_shrink.
  3. Click Edit Sprite.
  4. From the Edit menu, select Paste.
  5. From the Animation menu, select Shrink > Center.
  6. Set Number of frames to 6 and click OK.
  7. From File menu, select Close Saving Changes.
  8. Click OK.
  9. From the Edit menu, select Duplicate.
  10. Change Name to spr_facedown_card_anim_grow.
  11. Click Edit Sprite.
  12. From the Animation menu, select Reverse.
  13. From the File menu, select Close Saving Changes.
  14. Click OK.

We will add two more animation sprites.

  1. From the Resources menu, select Create Sprite.
  2. Change Name to spr_faceup_empty_card_anim_shrink.
  3. Click Load Sprite and find card_bank.png.
  4. Click Edit Sprite.
  5. Resize the canvas to 120%
  6. Add shadow effect and create a shrink animation with 6 frames.
  7. Now duplicate this sprite and call it spr_faceup_empty_card_anim_grow.
  8. And reverse the animation.

We will now add the face-up cards.

  1. Create a new sprite and call it spr_faceup_card.
  2. Click Load Sprite and select the png´s for cards: A, B, C, D, E, F – and in that order.
  3. Resize the canvases to 120% and add apply shadow effects.

image_toolboxThen there are only two more sprites to add.

  1. Create a new sprite and call it spr_result.
  2. Click Edit Sprite.
  3. From the File menu, select New…
  4. Set Width to 600 and Height to 100.
  5. From the Edit menu, select Edit…
  6. Select the Flood Filling tool, select some color and flood the image.
  7. From the File menu, select Close Saving Changes.
  8. From the File menu, select Close Saving Changes.
  9. In the Origin box, click the Center button and click OK.
  10. Create a new sprite and call it spr_tryAgain.
  11. Edit the sprite, create a new image with Width: 200 and Height: 50.
  12. Flood the image with some color.
  13. Use the Draw Text tool to draw the text “Try again”. Experiment with the font settings get a satisfactory result.
  14. From the File menu, select Close Saving Changes.
  15. From the Images menu, select Buttonize…
  16. From the File menu, select Close Saving Changes.
  17. In the Origin box, click the Center button and click OK.

Objects

So far we only have sprite resources in the game. To be able to display these sprites and make them interact with us and each other, we need to define objects.

  1. From the Resources menu, select Create Object.
  2. Change Name to obj_card_facedown.
  3. For Sprite choose spr_facedown_card_anim_grow.
  4. Click OK.
  5. Create new object, call it obj_card_facedown_shrink.
  6. Apply sprite: spr_facedown_card_anim_shrink.
  7. Create new object, call it obj_card_faceup_empty_grow.
  8. Apply sprite: spr_faceup_empty_card_anim_grow.
  9. Create new object, call it obj_card_faceup_empty_shrink.
  10. Apply sprite: spr_faceup_empty_card_anim_shrink.
  11. Create new object, call it obj_startGame.
  12. No sprite should be applied.
  13. Create new object. call it obj_card_facedup.
  14. Apply sprite: spr_faceup_card.
  15. Create new object, call it obj_result.
  16. Apply sprite: spr_result.
  17. Create new object, call it obj_tryAgain.
  18. Apply sprite: spr_tryAgain.

Scripts

With Game Maker: Studio it is possible to create games without writing any code at all. But in some cases it will be faster to create the game with some code, especially if you are an experienced programmer. In our case, we are going to use some scripts.

  1. From the Resources menu, select Create Script.
  2. Change the Name to script_initializeGame.

We are going to start by defining some global variables for the different states our game can be in. When the game starts all cards should be faced-down – so the initial gamestate will be gamestate_NoUpcards.

  1. Add this code to the script:


// Define game states
globalvar gamestate_NoUpcards, gamestate_FirstUpcard, gamestate_SecondUpcard, gamestate_ThereWasAMatch;
globalvar gamestate_CountingDown, gamestate_NoCardsLeftToFlip, gameState;
gamestate_NoUpcards = 0;
gamestate_FirstUpcard = 1;
gamestate_SecondUpcard = 2;
gamestate_ThereWasAMatch = 3;
gamestate_CountingDown = 4;
gamestate_NoCardsLeftToFlip = 5;
gameState = gamestate_NoUpcards;

We are going to have 6 pairs of cards on the table, that is 12 cards in total. We are going to position them on the table in a grid of 4 columns and 3 rows.

  1. Add this code to the script:


// Define the number of horizontal and vertical positions on the table.
globalvar horizontalPositions, verticalPositions;
horizontalPositions = 4;
verticalPositions = 3;

When placing the cards on the table, we want the spacing between the cards to be equal – so we need some calculations to get the offsets.

  1. Add this code to the script:


// Get the offsets between the positions on the table
var widthOffset, heightOffset;
widthOffset = (background_get_width(background0) - (sprite_get_width(obj_card_facedown) * horizontalPositions)) / (horizontalPositions + 1);
heightOffset = (background_get_height(background0) - (sprite_get_height(obj_card_facedown) * verticalPositions)) / (verticalPositions + 1);

We only have a object definition for the face-down card. To see these cards in the game, we need to create instances of this object. The following code creates the face-down cards and places them on the table.

  1. Add this code to the script:


// Setup the positions on the table
globalvar table;
var xx, yy, i, j;
xx = 0;
for (i = 0; i < horizontalPositions; i += 1)
{
yy = 0;
for (j = 0; j < verticalPositions; j += 1)
{
// Create the cards and position them
table[i,j] = instance_create(widthOffset + xx, heightOffset + yy, obj_card_facedown);
yy += sprite_get_height(obj_card_facedown) + heightOffset;
}
xx += sprite_get_width(obj_card_facedown) + widthOffset;
}

We then need a list of card values for our 12 cards. We are going to shuffle this list a random number of times.

  1. Add this code to the script:


// Define a list with cards. The card at index = 0 in the list, is the card at pos 0,0 on table
globalvar cardsShuffled;
cardsShuffled = ds_list_create();
// Then add the 6 pairs of cards to the list
ds_list_add(cardsShuffled, "A");
ds_list_add(cardsShuffled, "B");
ds_list_add(cardsShuffled, "C");
ds_list_add(cardsShuffled, "D");
ds_list_add(cardsShuffled, "E");
ds_list_add(cardsShuffled, "F");
ds_list_add(cardsShuffled, "A");
ds_list_add(cardsShuffled, "B");
ds_list_add(cardsShuffled, "C");
ds_list_add(cardsShuffled, "D");
ds_list_add(cardsShuffled, "E");
ds_list_add(cardsShuffled, "F");
// Then shuffle the list a random number of times
var randomNumber;
randomize();
// Random number between 0 and 20
randomNumber = irandom(20);
for (i = 0; i < randomNumber; i += 1)
{
ds_list_shuffle(cardsShuffled);
}

Finally we are going to define some global variables that we are going to use later on.

  1. Add this code to the script:


// Define variables for upcards and their values
globalvar upcard1;
globalvar upcard2;
upcard1 = -1;
upcard2 = -1;
globalvar upcardValue1;
globalvar upcardValue2;
upcardValue1 = "";
upcardValue2 = "";
// Define a variable that determines how long two cards are faced up, before they are flipped face-down again
globalvar countDown;
countDown = 0;
// Define a variable with number of tries to flip cards
globalvar tries;
tries = 0;

Object events and actions

controltabGame Maker: Studio uses events and actions to specify how instances of objects should behave in the game. When a new instance of obj_startGame is created, we want to run our script.

  1. Open the object: obj_startGame.
  2. Click the Add Event button and choose Create.
  3. From the control tab, find the Execute a piece of code icon and drag it to the Action listbox.
  4. Enter this line of code: script_initializeGame(); and close and save changes.

We now want to start our game with one instance of the obj_startGame. When that instance gets created, our script will be run and the cards will be displayed on the table.

  1. Open the room: room0.
  2. In the objects tab, select obj_startGame and click inside the room to create an instance of this object.

If we now try to Run our game, a table will appear with 12 cards on it, but cards are being continually animate with the spr_facedown_card_anim_grow sprite.

main1tabWe now want to make a little change to the obj_card_facedown object.

  1. Open the obj_card_facedown object.
  2. Click Add Event button and choose Other > Animation End.
  3. From the main 1 tab, find the Change Sprite icon and drag it to the Action listbox.
  4. In the pop-window, change the Sprite to spr_facedown_card and click OK.

If we now Run the game, we see that the grow-animation is only execute ones on the face-down cards.

That is enough for this part of the tutorial. We will continue in Tutorial: Create a memory game, Part 2.

7 Responses to “Tutorial: Create a memory game, Part 1”

  1. jesica April 16, 2014 at 1:15 pm #

    can i make this game using game maker 8.1?

    • danjal75 May 13, 2014 at 9:34 pm #

      I am not sure. I do not think I am using anything “GM Studio”-specific.
      Try it out.

  2. zoro May 12, 2014 at 6:30 am #

    i try your tutorial using gm studio but iam stuck at this script
    // Setup the positions on the table
    globalvar table;
    var xx, yy, i, j;
    xx = 0;
    for (i = 0; i < horizontalPositions; i += 1)
    {
    yy = 0;
    for (j = 0; j < verticalPositions; j += 1)
    {
    // Create the cards and position them
    table[i,j] = instance_create(widthOffset + xx, heightOffset + yy, obj_card_facedown);
    yy += sprite_get_height(obj_card_facedown) + heightOffset;
    }
    xx += sprite_get_width(obj_card_facedown) + widthOffset;
    }

    when i run it tell malformed script….

    • danjal75 May 13, 2014 at 9:35 pm #

      What does the error message say?
      Can you post your complete script.

  3. Paksi Jati Petroleum July 9, 2014 at 12:16 am #

    can you make the video tutorial.., it looks easier..

  4. Cloyd November 26, 2014 at 6:25 am #

    I am lost what do you mean by “Click Load Sprite and select the png´s for cards: A, B, C, D, E, F – and in that order?”

    • danjal75 November 27, 2014 at 11:31 am #

      You click Load Sprite, go to the directory where the png´s for card A, card B, etc. are. Then you select the png for card A, hold down the Ctrl-key and then select card B and then card C etc. When you do this, many images will be loaded into a single sprite.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: