Platform Game Part 1 

Step 2 Click on New and name the project Platform click create 

Step 3 Sprites

We will create two sprites. A character sprite and a block sprite

You always want to name sprites with the s prefix followed by the name of the sprite example sGem 

Make sure the width and height are both 64 px

Block Sprite

Right Click on the Sprite Folder then select Create Sprite Rename the sprite to sBlock

Click Edit Image then use Fill Tool to color the sBlock black in color

Player Sprite

Now we will make the sprite for you character we will change this later to a better looking sprite so do the same as we did with the block but call this sprite sPlayer and change to color to green

You now have two sprites in your sprite resource folder

Click Edit Image then use Fill Tool to color the sBlock green in color

Step 4 Objects

You always want to name objects with the o prefix followed by the name of the object example oGem 

Block Object

Right Click on the Objects Folder then select Create Objects Rename the object oBlock

Select the sBlock sprite as the objects sprite

Select Solid for the oBlock object this will be the only solid object in the game

Player Object

Right Click on the Objects Folder then select Create Objects Rename the object oPlayer

You now have two Objects in your Objects resource folder

Step 5 Click on New and name the project Platform click create

Splash Screen Room

We will now create a splash screen room.

A splash screen is a graphical control element consisting of window containing an image, a logo and the current version of the software. A splash screen usually appears while a game or program is launching.

We will also use it to initialize our global variables. 

Global variables can be accessed by any object in the game and they always remain in memory even when you go from room to room. 

First lets make a nice logo for our game you can use this online logo generator if you want

Logo Maker

Make the logo 400px to 500px wide and add it as a sprite to your game call it sLogo and center it

  Splash Screen Elements

The splash screen will have three visual elements, 

1. Game Name

2. Sprite of you character and a monster

3. Text to start game

First lets make a font so we can draw larger text.

Right click on the font resource folder and create a font. I used created a font size 36 and named it fntLarge. You can pick whatever font style you like best.

Step 6 Start Object

Create an object and call it oStart  Add a Draw Event and use this code in a Draw Event

Draw Event

draw_self();

draw_set_halign(fa_center);

draw_text(room_width/2,room_height/2+100,"Press Enter to Start");

Create Event

//Variables this is your move speed and jumping distance

global.movespeed = 5;

global.jumpspeed = 20;

Keypress Enter Event

room_goto_next();

Step 7 Create Room

Right Click on the Room Folder then select Create Room Rename the room to RoomStart

Drag the oStart object into the room and Test it by clicking the Run button

Step 8 Movement Engine Code

Open your player object and add the following code this is the Movement Engine Code

Initialize Variables

In the  execute code box you will start to type your code this is what it will look like

We will Initialize variables that we are going to use in our game

the // means that the next lines are not code only comments

If you put /// it will change the name of the action so it is easier to identify latter

Add a Create Event and add the following variables

Step 9 Keyboard Input

Open your player object and add the following code this is the Movement Engine Code

 Now add a step step event 

You will type in several lines of code that will allow your character to move, jump and stop on top of the blocks.

If you want to use other keys to move your characters you can substitute vk_right, vk_left and so on with ord(“A”) and ord (“D”) \

In code for WASD it would look like this :

// Get player input

key_right = keyboard_check(ord("D"));

key_left = -keyboard_check(ord("A"));

key_jump = keyboard_check_pressed(ord("W"));

attack = mouse_check_button_pressed(mb_left);

wepselect = keyboard_check_pressed(ord("S"));

“keyboard_check” will return a 1 or a 0 

Notice that Key left is set up to return either -1 or 0 instead of 1 or 0 by putting a negative sign in front of keyboard_check. This is so that we can add key_right and key_left together and end up with either 1 for right, -1 for left, or 0 for neutral/both keys.

Step 10 React to Input Jumping and Gravity

Open your player object and add the following code this is the Movement Engine Code

 Add this code under the above code notice that I use comments to separate the code logically

Step 11 Collisions with Blocks

Open your player object and add the following code this is the Movement Engine Code

 Add this code under the above code notice that I use comments to separate the code logically

We have to check for collisions to stop our character if he encounters a wall. 

To do "pixel perfect" collision checking make sure your wall objects have solid turned off.

We code in a simple but genius way. 

What we do is we check if we will collide with the wall before we move.

However we still want to move as close to the wall as possible without touching it so we code a while loop that allows us to move until we are 1 pixel from the wall.

We also code in a NOT with the ! so the code put in words would be:

“While there is NOT a collision, one pixel in our direction of movement, with oWall”

Vertical is the same except we check your y variable instead of x 

Step 12 Create Room to test Movement

Create your second room Right click on the room folder and create a room that contains walls to walk and jump on and place your character somewhere in the room Press the Run button and try your game

Hint: You can zoom in on room by holding CTRL + mouse Scroll

Hint: You can move room to new areas by holding down Left Mouse Button + Space

Hint: Hold Alt Key down to place multiple instances of an object

Step 13 Special Blocks

As you design your room you must be thinking this looks real bad the walls and floor are black blocks. You are correct they do look bad. Don't worry we will add graphics on the black blocks soon. However we want to make some other types of blocks so that we have more control of our room design

Here are a few examples of blocks you can use:

• hurting block

• slow block

• spring block

• slippery block

• ladder block

I will show you three a hurting block, slow block and spring block

Make three different objects with 64 x 64 sprites make them all non-solid 

Step 14 Spike Block

Create a spike block object using the sprite below 

Add a create Event to the oSpikes block and add this code to slow down the image animation speed

Step 15 Water Block

Create a water block object using the sprite below 

Add a create Event to the oWater block and add the same code to slow down the image animation speed

Step 16 Super Jump Block

Create a Super Jump block object using the sprite below 

Add a create Event to the oJump block 

 Add a Create Event to this object

subimage=0;

Add a Draw Event 

draw_sprite(sSpring,subimage,x,y);

Add Animation End Event

subimage=0

This will make the spring be draw in the down position until the player collides with it then after it animates it will reset to down position

Step 17 Spike Code for your Player

Open your players object we will add code to make your player interact with these special blocks

The hurt block will eat away at your health as long as you stand in the block, so think of it as fire or poison gas. As long as you remain in the area you will get hurt until you leave.

Add this to the Step Event of your character

// Spikes block

if place_meeting(x,y,oSpikes)

    {

       hpamount -= 1;

    }

Step 18 Water Code for your Player

Open your players object we will add code to make your player interact with these special blocks

Add this code to the end of your step event to slow your character down when he hits the slow block

The movefactor variable will change your movespeed by some factor that way it can return to normal when you are not in a slow area block.

// Water block

if place_meeting(x,y,oSlow)

    {

       movefactor=.1

    }

    else movefactor = 1;

Step 19 Super Jump Code for your Player

A spring would be something that you jump on and it propels you much higher than normal to give you a super jump.

Add the code to the bottom of the step event of your character. Try it out. Adjust global.jumpspeed to make player jump higher.

//Super Jump Block code

if place_meeting(x,y,oJump)     

    {

       vsp=-35;

       oJump.subimage=-1

    }

Step 20 Create Large Room

Make a second room and give it a size of 13660 x 768

This gives you a large room to work with

Next go to the views tab and check Enable the use of Views

Visible when room starts

Select your oPlayer as the object following and change the Horizontal Border and Vertical Border to 320

These settings will allow your player to see more of the room as he moves to the left.

Hint: You can zoom in on room by holding CTRL + mouse Scroll

Hint: You can move room to new areas by holding down Left Mouse Button + Space or hold down middle mouse roller

Hint: Hold Alt Key down to place multiple instances of an object

Step 21 Plan Room

This would be a great time to draw a sketch of you room so you can plan things effectively using graph paper helps a lot 

Step 22 Backgrounds

We will start with a background. A background is used as a backdrop and gives depth to your platformer. So you need to decide if you want a desert, grassland, mountains, ice or whatever. I have several to choose from here. If you do a google search for platformer background you will find lots that look great

1. Right click on the Sprites folder and import a background image as a sprite

2. Open your room folder and the Background Layer

3. Select the background to use for your room

These are 4 good backgrounds

When you select your background select Tile Hor. only

If you choose a good background it should look seamless as you move across your room.

These four backgrounds are castle, grassland, desert and mushroom.

You can find some amazing open game art here http://opengameart.org/

Step 23 Finding Tile Sets

Now we will use tiles to make your rooms look better to do this we will use tile sets. Tile sets are similar to backgrounds except they are split up into individual pictures from the background. 

You should place some of the following types of tiles in each of your rooms:

• Trees

• Paths

• Flowers

• Rocks

• Buildings

• Stumps

• Fences

• Signs

• Etc

I have several Tilesets you can use to the right these are all 64x64 tilesets

Step 24 Creating Tiles Set

Create Tile Set

1. To create a tileset right click on the Sprite folder and create a sprite with you tileset

2. Right click on the Tile Sets folder and import the sprite you just added.

3. You then have to match the tile size with the tile set most are either 16x16 32x32 or 64x64

4. Ours should be 64 x 64 since our original block sprite is 64 x 64

Step 25 Placing Tiles in Room

To place a tile in your room

1. Open your room 

2. Select the Tiles Layer

3. Select the Tile Set you created

4. Click on the tile you wish to place and click to place it over the block objects

You will have to add many tilesets to get the variation you want. You can look on the Internet for many more tilesets. 

Hint: You can zoom in on room by holding CTRL + mouse Scroll

Hint: You can move room to new areas by holding down Left Mouse Button + Space

Step 26 Create Sprite Sheet for Player

Go to this website to create your character sprite sheets  

The Sprite sheets that are created from this site creates 6 different poses in 4 different directions

Spellcast Slash and Hurt are also poses that can be used in your game I will show you how to add walking, shooting and attacking poses.

Step 27 Create Walking Pose  for Player

.Creating the Walking Pose

Game maker does not automatically use the XP style sheet we have to convert it to 4 different poses

1. Click on Add Sprite Icon click load sprite and then select Edit Sprite

2. Select Image Pull Down Menu and click Import Strip Image and load your character sprite

3. Number of images and number of rows is 9

4. Image width should be 64

5. Image height should be 64

6. Vertical cell offset is 11

7. Click Convert

8. If your character has a colored background select Image Erase a color to make it transparent.

9. Save as sWalk

10. Select Middle Center for the sprite

You only need the sprite for walking right we will use the code image_xscale to mirror the image depending upon our direction

Step 28 Create Ranged Attack Pose  for Player

.Creating the Ranged Attack Pose

Game maker does not automatically use the XP style sheet we have to convert it to 4 different poses

1. Click on Add Sprite Icon click load sprite and then select Edit Sprite

2. Select File Create from Strip and load your character.

3. Number of images and number of rows is 13

4. Image width should be 64

5. Image height should be 64

6. Vertical cell offset is 19

7. Click Convert

8. If your character has a colored background select Image Erase a color to make it transparent.

9. Save this as the correct pose name sShoot

Step 29 Create Melee Attack Pose  for Player

.Creating the Melee Attack Pose

Game maker does not automatically use the XP style sheet we have to convert it to 4 different poses

1. Click on Add Sprite Icon click load sprite and then select Edit Sprite

2. Select File Create from Strip and load your character.

3. Number of images and number of rows is 11 it might be different for some weapons

4. Image width should be 192

5. Image height should be 192

6. Vertical cell offset is 10

7. Click Convert

8. If your character has a colored background select Image Erase a color to make it transparent.

9. Save this as the correct pose name sAttack

You only need the sprite for attacking right we will use the code image_xscale to mirror the image depending upon our direction

Some of the sprites are over-sized so if you choose an over-sized melee attack sprite we want to re-size the canvas so our Health-bar is drawn in the correct place. 

To do this click Edit Sprite then Transform Re-size Canvas

Change height to 64, un-check Keep aspect ratio and select center for the position. Make sure you re-center the sprite after making these changes

Code Break Down lines 1-11

I will now break down the code and describe what each piece does

This is a toggle code. A toggle is like a light switch you flip it on or off so if you think of a light switch as values 1 is on and 0 is off.

The problem we have to correct is that when we press the down key to select a weapon it isn't a toggle its a momentary switch. When we press it the value is 1 when we release it returns to 0.

So we want the variable to hold either a 1 or 0 depending upon which weapon we want to use so we add a ! or a NOT in front of the second weapon=!weapon this flips the value to either 1 or 0

We do a similar thing to put us in attack mode when we press space and we continue in the canattack mode until our attack animation is complete we will discuss this later. 

Code Break Down lines 13-21

I will now break down the code and describe what each piece does

This is how we set our attack

Line 14 checks 2 variables to see if it is possible to attack with a apear

1. Does can attack = 1

2. You have spear selected as your weapon

If all these conditions are met it sets your state to "attackspear"

Line 16 works the same but we can attack with your bow

Line 20 checks if we are in a state of "idle". To be idle we can't be moving or attacking so it checks all these conditions then sets the state correctly.

Step 34 Code Break Down lines 23-34

I will now break down the code and describe what each piece does

I described the move code above so lines 24 hasn't changes

However we have to keep track of the current direction you are moving in.

Game maker has a built in variable called direction but because we jump to move by changing your x and y coordinates for movement we have no direction in the game. Therefore we must use the key that is pressed to determine our direction. So if we pressed the right arrow key:

 key_right=1 so move=1 thus we set facing to right and state to walk.

The same for key_left it will set facing to -1

Also we only set these variables if we are NOT currently attacking . It is important to carefully think about states and make sure you check all the conditions to set the state. 

Code Break Down lines 84-110

I will now break down the code and describe what each piece does

Lines 38-82 have not changed so I will go to the animation code.

84-110 is a switch statement:

In a number of situations you want to let your instances complete an action depending on a particular value. You can do this using a number of consecutive "if" statements but when the possible choices gets above two or three it is usually easier to use the "switch" statement. A switch statement has the following form:

switch (<expression>)
{
case <expression1>: <statement1>; ... ; break;
case <expression2>: <statement2>; ... ; break;
...
default: <statement>;
}

So we have a variable called state that contains one of the following values:

• "walk"

• "idle"

• "attackbow"

• "attackspear"

We could even make more states if you want

Now if the state = "walk" we set the animation sprite to sWalk then flip the sprite with image_xscale to the correct direction then break out of the switch statement.

We also set the subimage variable to -1 which means Draw the animation or to 0 which only draws the first subimage of the sprite.