[Tutorial] How to make a simple 2D platformer game with Construct 2 - Part 3

 In this tutorial, we're continuing our 2D platformer game. If you don't know what you are doing in this tutorial, please go back to Part 1 and Part 2.

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....

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.

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.

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

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.

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.

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.

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.

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

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.

Part 1 >> Part 2 >> Part 3 >> Part 4 >> Part 5 >> Part 6 >> Part 7 >> Part 8