How to make a Platform game

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

Adding the Player sprite

Let's add a sprite for the player. As before, double-click a space in the layout to insert a new object, and choose Sprite. When the crosshair comes up, click somewhere above the tiles. The Image Editor will appear.

Let's import the sprite strip for the player's idle animation. As before, right click the Animation Frames window and select Import sprite strip....

Importing a sprite strip again.
Choose the file Player\Idle\Idle.png. Note that's the complete sprite strip, not one of the animation frames. You can also import the sequence of files with the Import frames... option, but let's stick to this way for now.

Because the strip is not square, Construct 2 guesses the number of frames. It should correctly identify that there are 11 frames. Click OK and the frames are imported.

Note we still have the default blank frame at the start. Right click and delete that again. You should now have a sequence of 11 animation frames for the player's Idle animation.

The Idle animation.

Cropping

You might notice the player has some empty transparent space around them. This is common after importing images. However, it's bad practice to leave it there - it wastes memory and can make collisions less reliable.

Spare space around the player.
There's a quick way to get rid of it, though. Hold shift and press the Crop button on the image editor toolbar.

Cropping the animation.
If you didn't hold shift, only that frame is cropped, so make sure you have shift down when you click it to crop the entire animation. The player image should now be nicely cropped, with no unnecessary space.

A cropped animation frame for the player.

Setting the origin

The origin is the center, or "hot spot", of the object. In platformers, it's best to have the origin by the player's feet. This means if the animation changes height as it plays, they grow upwards, rather than in to the floor.

To set the origin, click the Set origin and image points tool in the image editor.

The origin tool in the image editor.
You should notice a red spot appear on the player. That's the origin. You can click to change it. However, we want it bottom-middle aligned. We can quickly assign this by hitting 2 on the num pad (if num lock is on). If you don't have a num pad (e.g. some laptops), you can right click Origin in the Image points window that popped up and choose Quick assign - Bottom.

It's a hassle to do this for each and every frame, but luckily there's another short-cut: in the Image points window that popped up, right click Origin and click Apply to whole animation.

Applying origin to whole animation
Bingo! The origin should be set on every animation frame.

Loop the animation

Click the Default animation in the Animations window. Rename it to Idle.

Renaming the animation.
In the Properties Bar, change the Speed of the animation to 9 and set Loop to Yes.

Setting the animation Speed and Loop properties.
Right click the Idle animation in the Animations window and select Preview. You should see the player bobbing up and down gently. All done! Close the animation preview and the image editor. You should see your player in the layout.

Rename the object to Player in the Properties bar, since we're being organised.

Share and Copy this Tutorial

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

Comments

56
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
16
sman118 7,204 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
10
Velojet 20.6k 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
10
Nickydude 10.7k rep

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

Thursday, February 02, 2012 at 6:02:42 PM
9
Sheep 2,556 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
10
reindeer11 2,214 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
9
Plejground 2,539 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 183.7k 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,539 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 183.7k 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
7
Plejground 2,539 rep

Yes you probably right :)
Thanks for your time

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

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

Wednesday, April 04, 2012 at 3:42:25 AM
6
Weazl 2,863 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
10
osiaslemuel 2,691 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.