How to make a Platform game

Favourite 579 favourites
Tutorial written by AshleyOriginally published on 26th, January 2012 - 10 revisions

Adding an enemy

Hopefully you're familiar with the process of adding sprites and animations now. So for conciseness the steps in full won't be repeated. Let's add a new sprite for an enemy.

1. Add a new Sprite object in the layout.
2. Import the Enemies\Snail sprite strip.
3. Delete the first empty animation frame.
4. Set the animation to looping, speed 15.
5. Set the origin to the base of the snail image, and apply it to the whole animation.
6. Crop all the frames (shift + crop).
7. Close the animation editor and rename the object to 'SnailEnemy'.
8. Place it on a ground tile as shown.

The snail enemy on the ground.
Now we want to implement the following logic:

- If the player runs in to the snail from the side, they flash and get hurt.
- If the player jumps on top of the snail, the snail is killed.

To make the player flash, select the player and add the Flash behavior. Remember to select the actual player, not the PlayerBox object (since it is the visible player we want to flash). We'll use the 'Flash' action from this behavior in a moment.

Switch to the event sheet view, and add a new event:

PlayerBox -> On collision with another object -> SnailEnemy

This event runs when we collide with the SnailEnemy from any angle. We can then use sub-events to test whether the player is jumping on top or running in from the side. Let's first test if the player is above.

Add a sub event to the collision event:

PlayerBox -> Is falling

We should also test the player is actually above the enemy. This can prevent the snail accidentally being killed if we fall past it off a ledge, say. Right-click the 'Is falling' condition and select 'Add another condition'. Remember, all conditions must be met for the event to run. Add the condition:

PlayerBox -> Compare Y -> Less than, SnailEnemy.Y

The Y axis increases downwards, so if the player's Y co-ordinate is lower than the snail's, they are above it.

In this event, add the action:

SnailEnemy -> Destroy

We can also make the player bounce off it by adding another action:

PlayerBox -> Set vector Y -> -700

'Set vector Y' basically just sets the vertical speed of the platform movement; setting it to a negative value sets it upwards (again, the Y axis increases downwards), and 700 is a little less than the jump strength of 1100. So this will make the player bounce off as if they did a weak jump.

The jump from above event.

We're not quite done: right-click the margin of the 'Is falling' event (the space just to the left of the PlayerBox icon) and select Add -> Else. 'Else' is a special condition that runs if the previous event did not run. So this event will run if we collided with the snail but we weren't jumping on top of it - we ran in to it from the side, say. In this event we want the player to be hurt. Add the action

Player -> Flash -> (leave default values and click Done)

Remember the Flash behavior is in the Player object, not PlayerBox.

The finished event

OK, so the player will never die, they'll just flash. But we've got the detection set up of whether they jumped on top or ran in to the side. This tutorial won't cover all the bells and whistles, but hopefully you can see where to create kill effects (try creating a 'poof' sprite on the SnailEnemy when it is destroyed, using the SnailEnemy's 'Spawn object' action) and where to take off health (in the event that makes the player flash - you can learn about health using instance variables in the top-down shooter tutorial which you might want to look at afterwards).

Let's make the snail enemy move back and forth across the platform.

Moving the enemy

The main problem with moving the snail is how to detect when it's reached the edge of a platform. The easiest way to do this is with invisible 'edge' markers. These are just invisible sprites that flip the direction of the snail when it touches them.

We can also use the Platform behavior again for the snail. This is convenient because:
- it can get it moving left and right
- it will go up and down slopes just like the player can
- it will fall off ledges if you want it to
- if you want to make a jumping enemy, you can make the enemy automatically jump too using the 'simulate control' action.

Add the Platform behavior to the SnailEnemy sprite. Since we are not using complicated animations on this object, we can get away with using the platform behavior directly on the object without an invisible 'box' object. Note if you make a different platform game with enemies with complicated animations, you should use the same box technique we used on the player.

We don't want the player to control the SnailEnemy - we want to automatically control it. We can do this by setting its Default controls property to No, then using the Simulate control action. Since snails are also pretty slow, set the Max speed to 50 and its Acceleration and Deceleration to 100!

We'll also need our 'Edge' markers. Add a new Sprite object and just load in an opaque rectangle. Call it EdgeMarker. Size the object to about 40 x 40 and set its Initial visibility to Invisible so we don't see it. Place one at each end of the snail's platform like so: (don't forget you can create a new instance by control+dragging it)

Snail platform markers
The snail also needs to know which way it is currently moving - either left or right. We can do this with instance variables. These are simply numbers or text stored in each instance of the object. If we have multiple snails, they each store their instance variables separately. This allows them to have unique values for their health, current direction, and so on. A simple technique to control enemies automatically is to create an "action" instance variable which holds its current state. For example, it could be "run away", "chase player" or "idle". In this case we only need "left" and "right", but it's useful to set it up the same way.

Select the SnailEnemy object. In the properties bar, click Add / Edit under 'Instance variables'.

Instance variables for the snail.
A dialog listing all instance variables for the object appears. Click the 'add' icon to add a new one. Set the name to action, the type to text, and the initial value to right (for moving right).

Adding the 'action' instance variable.
Click OK and close the instance variables dialog. Switch to the event sheet.

We want to implement the following logic:

- if action is "right", simulate the platform movement holding the 'right' key to move the snail right.
- if action is "left", simulate the platform movement holding the 'left' arrow key to move the snail left.

- if the snail hits the EdgeMarker, flip its action (if "left" set it to "right"; if "right" set it to "left").

We can set up the movement with the following two events:

Event: SnailEnemy -> Compare instance variable -> action equal to "right" (use double quotes here to indicate text)
Action: SnailEnemy -> Simulate control -> Right

It should be straightforward to do the same for left. We also want the image to mirror left and right like we did for the player. So add SnailEnemy -> Set mirrored in the "left" event, and SnailEnemy -> Set not mirrored in the "right" event. You should finish with this:

Snail control events

Now to flip the snail's direction on the edges:

Event: SnailEnemy -> On collision with another object -> EdgeMarker
Subevent: SnailEnemy -> Compare instance variable -> action equal to "right"
Action: SnailEnemy -> Set value -> action to "left"
Subevent: Else
Action: SnailEnemy -> Set value -> action to "right"

It's important to use Else here, because events are run from top-to-bottom. If instead of 'else' we said 'action equal to "left"', notice the previous event would have just set it to that. So it'd just set it right back again, having no overall effect. By using 'else', we prevent the second event running if the first was true.

Snail direction events
Run the project. Notice the snail is moving back and forth on its platform. This makes it a bit harder to jump on! This is a very rudimentary "AI" system, but hopefully you can imagine that you could create more intelligent enemies by controlling the movement with more events, possibly even allowing them to fall off edges, or using other markers to trigger a jump to make it look like the enemy knew to jump up on to a platform.

Try creating a platform with two snails on it. Notice they control themselves individually, since they each have their own individual action instance variable holding their current state. Hopefully you can begin to see how important instance variables are for controlling instances independently - they don't all have to be doing exactly the same thing as each other!

Two snails on a platform.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.


Bigheti 17.3k rep

YES...more one tutorial of the Master Ashley. I learned a lot doing this. Thank you more one time!

Thursday, January 26, 2012 at 8:04:21 AM
sman118 7,806 rep

This is great! Can't wait to see more of this. Will definitely be a huge help.

Thursday, January 26, 2012 at 3:56:29 PM
Velojet 21.2k rep

This is very good, Ashley! It complements my own Platform tutorial nicely. It's great to see the Jungle Platformer graphics in action!

Thursday, January 26, 2012 at 6:13:25 PM
Nickydude 11.3k rep

Excellent tutorial! Looking forward to the rest of it. :)

Thursday, February 02, 2012 at 6:02:42 PM
Sheep 2,571 rep

Can't wait to see the finished tutorial. I can't figure out how to do some stuff you'll probably show. ^_^ Good job and well informative.

Friday, February 03, 2012 at 1:22:27 AM
reindeer11 2,224 rep

I am new to Construct 2 and I think this tutorial is easy to understand and helped me alot ^.^

Thursday, February 16, 2012 at 8:03:55 PM
Plejground 2,623 rep

Yes this is great - Thanks!
But how we can learn more ?
If I want to make anything else or different I don't have an idea how to do that !!
Construct is cool but we need to learn somehow all the behaviors,events,actions etc.. to make our OWN GAME :)
I look forward to see more .. I really need it !!!

Wednesday, February 29, 2012 at 11:17:02 AM
Ashley 200.3k rep

@Plejground, have you seen the manual?

Wednesday, February 29, 2012 at 11:18:05 AM
Plejground 2,623 rep

Yes Ashley I've seen it - it's really good and there is a lot of info - thanks
But what I mean is - each game have different events etc .. and I don't know which one is good for what-
for example if I want to make platform game but with the Knight (so is no shooting - you will kill with the sword) - I don't even know where to look at in the manual :)
Anyway I have too much stuff to learn and this makes me impatient :) and I really want to make my games right now > hahha

Wednesday, February 29, 2012 at 11:37:38 AM
Ashley 200.3k rep

@Plejground try asking on the forum. With these types of things it's impossible to make a guide, because there are usually many ways to do it and it depends on what you are trying to do.

Wednesday, February 29, 2012 at 11:55:24 AM
Plejground 2,623 rep

Yes you probably right :)
Thanks for your time

Wednesday, February 29, 2012 at 11:58:17 AM
thiago 4,274 rep

You could use the Stick behavior instead of setting the the position of the object every thick, am I right??

Tuesday, April 03, 2012 at 3:46:06 PM
thiago 4,274 rep

Sorry, I meant "Pin" behavior, not Stick.

Wednesday, April 04, 2012 at 3:42:25 AM
Weazl 2,928 rep

I'm trying to make a game but when i add the background you can't see the other objects in the layout or in the game please help!

Friday, April 06, 2012 at 6:11:56 PM
osiaslemuel 2,711 rep

@ Weazl right click the background > Z order > send to bottom of layer

Wednesday, April 11, 2012 at 10:24:45 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.