How to make a Platform game

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

Adding more animations

Let's get the rest of the player's animations added. First, let's add some more platforms for the player to jump around so we can more easily see how the animations work.

Switch back to the Layout View where you can see the player and floor tiles. Click and drag to select all three tiles. Then, hold Control and drag the tiles to clone them. Do this a few times so there are some platforms to jump around. It might help to zoom out for this.

Three platforms for the player to jump around.
To give us a better view, let's also make the window size a bit bigger. Click the name of the project at the top of the Project Bar to show the project's properties. Change the Window Size to 800, 600.

Changing the window size.
Now that we have somewhere to jump to, with a bigger window size so we can see more, let's get going adding the rest of the player animations.

Remember we're using the Set mirrored action to automatically flip the player left and right. So we only need to import animations for the player facing right.

Double-click the player in the Layout View to bring up the animations editor. There are four animations we want to import:

1. Idle to run (tween)
2. Run
3. Jump from run
4. Jump from stand

For each of these animations, the process to add them is as follows:

1. Right-click in the Animations bar (by default, floating to the right and listing the Idle animation) and select Add animation.
2. Enter the name of the animation. You might want to give easier to remember names like IdleToRun.
3. Left-click the animation to switch to it. It should have a single empty frame.
4. Right-click in the Animation frames bar (by default, at the bottom, listing the animation frames) and select Import sprite strip....
5. Locate the sprite strip. Note in the Jungle sprite pack each frame is also available as a separate PNG file. The frames can be imported that way, but usually it's quicker to use the sprite strip version, so select the image with the complete strip.
6. Check the number of cells is right, then click OK.
7. Delete the first empty frame which we don't need any more.
8. In the first frame, place the origin by the player's feet. Try to get it to match the position in the Idle animation. Apply the origin to the entire animation as we did with the Idle animation (right-click the Origin in the Image Points dialog and select Apply to whole animation).
8. Hold shift and press Crop to crop all the imported frames at once, removing the unnecessary transparent areas.
9. In the Properties Bar, make sure each animation has the following properties:

Speed: 22 for JumpFromStand, 15 for everything else
Loop: Yes for Run, No for everything else

Do this for each animation, so finally there are five animations for the player.

The player animations.
Close the animation editor. Now we need to tell the player to switch to the appropriate animation at the appropriate time. To do this, the platform behavior provides animation triggers - events which run when the player should change animation. Then we just use the player's Set animation action. Remember the Platform behavior (with the animation triggers) is on the PlayerBox object, and then we want to set the animation of the visible Player object.

Also note we have an IdleToRun animation. This means when we start moving, the animations go like this:

Stopped: Idle
Start moving: IdleToRun
When IdleToRun finishes: Run

This is also easy to set up with events.

Setting up the animation events

Hopefully by now you're familiar with the process for creating an event:

1. Select the object.
2. Select the condition or action.
3. Optional: enter parameters if the condition or action has any.

Switch back to the Event Sheet View. First of all, let's set the animation to IdleToRun when we start moving, using the Platform Behavior's On moved trigger in the PlayerBox object:

First animation event.
When the IdleToRun animation finishes, we then want to switch to the Run animation. We can do this using the On animation finished trigger in the Player object:

Second animation event.
If the player is running then they stop, we need to switch back to the Idle animation. We can do this with the On stopped animation trigger in the PlayerBox object:

Third animation event.
Run the game. The player should now be able to switch from running to stopped, with the IdleToRun animation playing in between. However, the jump animations don't play yet. Since we have two Jump animations, we also need to set a different animation depending on whether the player is running or not when they jump. This can be done with the following event:

Fourth animation event.


Notice here sub-events have been used - they appear indented beneath the On jump event. Sub-events are each checked after the "parent" event has run. This correctly implements our logic: when the Platform behavior jumps, if they are moving, set JumpFromRun; otherwise, set JumpFromStand.

To make a sub-event, right-click the parent event and select Add -> Add sub-event, or select it and press S.

To make the above event you'll also need to invert a condition (appearing as the red cross). Inverted conditions mean the opposite of what they state. In this case, the inverted "Platform is moving" condition then means "Platform is NOT moving". To invert a condition, add it normally, then right-click on it and select Invert. Alternatively, select it and press I.

There is just one more thing we need to do: the player will remain on their Jump animation after jumping, even after they land, unless we set the animation back to Idle or Run when they land. This is very similar to the previous event: in the On land animation trigger, if they are moving, set "Run"; otherwise, set "Idle".

Fifth animation event.


Once you've set this all up, run the game. Congratulations - you've now made a fully animated player character! Notice how the different animations play if you jump from standing still, or jump from running. Also see how when you land from a jump, you either go back to Idle or Running depending on whether you are moving or not.

Now, time to make an enemy!

Share and Copy this Tutorial

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

Comments

57
Bigheti 15.7k 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
17
sman118 7,230 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
12
Velojet 20.7k 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
12
Nickydude 10.7k rep

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

Thursday, February 02, 2012 at 6:02:42 PM
11
Sheep 2,566 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
11
reindeer11 2,219 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
10
Plejground 2,603 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
9
Ashley 190.4k rep

@Plejground, have you seen the manual? http://www.scirra.com/manual/1/construct-2

Wednesday, February 29, 2012 at 11:18:05 AM
5
Plejground 2,603 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
Cheers

Wednesday, February 29, 2012 at 11:37:38 AM
8
Ashley 190.4k 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
8
Plejground 2,603 rep

Yes you probably right :)
Thanks for your time

Wednesday, February 29, 2012 at 11:58:17 AM
9
thiago 4,264 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
7
thiago 4,264 rep

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

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

@Ashley
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
11
osiaslemuel 2,696 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.