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

In this tutorial, we're continuing our 2D platformer game made with Construct 2. Please go back to previous parts if you're new to this.

Creating events

Events work by testing if a series of conditions have been met. If they have, the actions run.
In this case, we always want to position the player on top of PlayerBox. To do this, we should update its position every tick, or frame of the game.
Double-click a space in the Event Sheet View to create a new event.

Double-click the System object, which contains the Every tick condition.

Now we have an empty event which will run its actions every tick:

Click 'Add action'.

We want to position Player, so double-click 'Player'.

Double-click Set position to another object. For Object, click <click to choose> and pick PlayerBox. Leave Image point as 0 (that means the origin). Click 'Done'. The finished event should look like this:

Hopefully this makes sense: we always position the player on top of the PlayerBox object, which is the object with the movement.
Run the game by clicking the green 'play' arrow in the title bar.

Move and jump with the arrow keys. You've got your first basic platformer up and running!

Problems

If you play around you might notice some problems:
1. The player doesn't face left.
2. There aren't any other animations yet.
Let's sort these out! First of all, number 1: let's get the player turning left and right.
First, switch back to the Layout view using the tabs at the top. Double click the layout to insert an object again, and insert the Keyboard object. Since it's just an input object you don't need to place it anywhere - it just enables keyboard input for the whole project.
Instead of creating a whole new animation with the player facing left, we can simply use Construct 2's Set mirrored action, which will automatically mirror the object to make it appear to be facing left instead of right.
Switch back to the Event Sheet. We're going to make a new event with the condition "On left arrow key pressed", and the action "Set player mirrored".
Double click a space to create a new event, or click the Add event link. Double click the Keyboard object, since it contains the On key pressed condition.

A list of all the Keyboard object's conditions appear. Double-click the On key pressed event.

Construct 2 needs to know which key you want to detect. Click the <click to choose> button, hit the left arrow key, then press OK. Click Done.

Now we want to add our action: "Set player mirrored". As before, first you pick the object, then you pick the type of condition or action, then you enter any parameters. Click the Add action link to the right of the event. (Make sure you don't accidentally click Add event!)
Double-click Player.
Double-click Set mirrored.
Leave the state on Mirrored and click Done.
You should now have this:

Now add another event - double click a space, or click the Add event link.
This time go through the process again, but make the event On right arrow key pressed, and set the player Not mirrored. You should end up with this:

 

Now when we press left the player's image will mirror, and when we press right it restores the right-facing image. Run the game and try it out!

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

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

In this tutorial, we're continuing our 2D platformer game with Construct 2. If you don't know what you're doing in this tutorial, please read again previous parts.

You can see the workflow after this tutorial.

Adding behaviors

Construct 2 comes with lots of behaviors. These make your objects work in pre-defined ways, which often saves loads of time. It's possible to re-do everything the behaviors do in the event system, but it is often difficult and time consuming to do that. That's why behaviors are really handy to get your game up and running quickly!
The Platform behavior can take care of the complexities of platform movement for us. However, there's one important tip for using it: the behavior should be applied to an invisible rectangle object, and the player positioned on top. The Platform behavior works much better if the object with the behavior doesn't animate, since changing animation frame can leave the object partly sticking in to a wall which can confuse the Platform behavior. Also, it avoids silly collision situations like your player hanging off a ledge by their nose or something they're holding.
So we need to make an invisible square for the movement first. Double-click the layout to add a new sprite again, and this time import a square like below. (Right-click and 'save as' if you need it.)

As before, we should have the origin at the bottom. So click Set origin and image points again and press 2 (or use the quick assign menu) to position the origin at the bottom.

Close the image editor. You should now see it in the layout. Resize it to roughly the same size as the player's body as shown below - this size is 53x107.

Rename this object to PlayerBox since it's the box for movement and collision testing for the player. Also, in the Properties Bar, set Initial visibility to Invisible since we don't want to see it.
We also want to give the Platform movement to the PlayerBox object for more reliable collision detection. Still in the PlayerBox's properties, click Add / Edit by Edit behaviors in the properties bar. In the dialog that appears, click the green plus button.

Double-click the Platform behavior.

You should see that some new properties for the platform movement have appeared in the Properties bar. You can tweak the movement settings like speed and acceleration. Let's make the jumps a little bit more snappy. Set the Jump strength to 1100 and the Gravity to 2500.
We also want the screen to follow the player, so click the green plus again and add the Scroll To behavior.
Once you've added both behaviors, close the Player behaviors dialog.

Adding the Solid behavior

The platform movement needs to know what objects it can land on. The player will fall through any objects which don't have the Solid behavior. So this time select the Tile sprite and add a behavior for it, this time choosing the Solid behavior.
We just now need to position the player on top of the PlayerBox. Switch to Event Sheet 1. This is where we define the game's logic using Construct 2's event system.

 

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

[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

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

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

Adding a layer

Okay, now we want to add some more objects. However, we're going to keep accidentally selecting the tiled background unless we lock it, making it unselectable. Let's use the layering system to do this.

Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. For example, in this game, we want everything to display above the tiled background, so we can make another layer on top for our other objects.

To manage layers, click the Layers tab, which usually is next to the Project bar:

You should see Layer 0 in the list (Construct 2 counts starting from zero, since it works better like that in programming). Click the pencil icon and rename it to Background, since it's our background layer. Now click the green 'add' icon to add a new layer for our other objects. Let's call that one Main. Finally, if you click the little padlock icon next to Background, it will become locked. That means you won't be able to select anything on it. That's quite convenient for our tiled background, which is easy to accidentally select and won't need to be touched again. However, if you need to make changes, you can just click the padlock again to unlock.

The checkboxes also allow you to hide layers in the editor, but we don't need that right now. Your layers bar should now look like this:

Now, make sure the 'Main' layer is selected in the layers bar. This is important - the selected layer is the active layer. All new inserted objects are inserted to the active layer, so if it's not selected, we'll be accidentally inserting to the wrong layer. The active layer is shown in the status bar, and also appears in a tooltip when placing a new object - it's worth keeping an eye on.

Adding tiles

The Jungle Platformer has a tileset in the file Tiles\Tiles.png. Let's import these to a Sprite object and use it as a tile object.

Like you did for Tiled Background, double-click a space in the layout to insert a new object. This time, choose Sprite. The mouse turns to a crosshair again. Click somewhere in the middle of the screen.

The Image Editor opens up, but with some extra windows, because Sprites can be animated. However, we're not going to have the animation playing - its speed will be 0. We'll have a tile in each frame of the animation. Then, we can switch which tile is showing by changing the animation frame.

Right click a space in the Animation Frames pane at the bottom, and pick Import sprite strip.... This lets us cut up grids of images in to animations, which also works with tile maps.

A file open dialog appears. Pick the file Tiles\Tiles.png from the sprite pack. Construct 2 then needs to know how many tiles are in the image. You'll notice Tiles.png is a 12x12 grid of tiles. Enter 12 and 12 and click OK.

Give Construct 2 a moment to cut up the tiles. Now you should have all 144 tiles imported as animation frames! We don't need the first blank frame any more though, so right click on it and select delete.

You might want to resize the Animation Frames window bigger to get a better view of your tiles. Also, you can right-click a space and change the thumbnail size to Large if you prefer big thumbnails.

By default the animation speed is 5, which means tiles will keep changing their image. We want tiles to stay on their current frame, so let's make sure the animation speed is 0. Select the Default animation in the Animations window.

The Properties Bar now shows properties for the animation. Set its Speed property to 0.

Now the tiles won't keep changing their image - they'll stay on the same frame. Close the image editor by clicking the X on one of the three floating windows. Your Sprite tile should now be in the layout!

With it selected, change its name from Sprite to Tile in the Properties Bar. It's always a good idea to give objects an appropriate name.

Creating scenery from tiles

Notice the Sprite object has an Initial frame property. We can use this to switch the current tile. Select the Tile object and change its initial frame to 1:

Notice the image changes to reflect the tile in animation frame 1. This is how we can set up different tiles across the level.

Hold Control and click and drag the tile. You'll create another tile object. Do this again so we have 3 tiles in a row. Select the middle one and set its initial frame to 10. Do the same for the one on the right, but make its initial frame 13. You should now have something like this:

If you're wondering how to double-check which frame number corresponds to which tile, just double-click the tile object. The image editor comes up again with the animation windows where you can check. Remember you can control drag a tile and it makes another tile of the same type, so you don't need to keep typing in initial frames.

Enabling snap to grid

It's going to be a headache if we have to line up these tiles by hand! You can enable a grid to make this easier. In the ribbon, click View and enable Snap to Grid. The default grid size of 32x32 is fine. Our tiles are 128x128, which is a multiple of 32. This makes it easy to snap together tiles whilst still giving some freedom in positioning.

Try dragging around the tiles now. You should find they snap to a 32x32 grid. Now it should be easy to snap the three tiles together.

 

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

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

 Construct 2 is a powerful 2D game engine that allows anyone can make their HTML5 games with no coding experience.
In this tutorial, we're going to talk about making games with Construct 2. If you have any tutorials about making games with other engines like Unity, Cocos2d, GameSalad, email to html5indiegames@gmail.com to be a volunteer!
You can learn more about Construct 2 at scirra.com
After reading this tutorial, you can submit a platformer game to us!
Before doing this tutorial, you should grab some assets you will need in this tutorial. Download it here.

Installing Construct 2

If you haven't already, grab a copy of the latest release of Construct 2 here. The Construct 2 editor is for Windows only, but the games you make can run anywhere, such as Mac, Linux or iPad. Construct 2 can also be installed on limited user accounts. It's also portable, so you can install to a USB memory stick for example, and take it with you!

Getting started

Now you're set up, launch Construct 2. Click the File button, and select New.

 

In the New Project dialog, you don't need to change anything. Just click Create project. Construct 2 will keep the entire project in a single .capx file for us. You should now be looking at an empty layout - the design view where you create and position objects. Think of a layout like a game level or menu screen. In other tools, this might have been called a room, scene or frame.

Size the layout

First of all, we need the layout (level) to be a bit bigger than the default. Left-click a space in the layout and the Properties Bar will display Layout Properties. Change the size of the level to 4000 x 2048.

Let's tile the background image across the layout. Double-click a space in the layout. This will bring up the Insert Object dialog. Double click the Tiled Background object to insert it.

The mouse turns in to a crosshair. It doesn't matter where you place it initially, so just left click somewhere in the layout. The Image editor opens so you can enter the image to tile. Let's import the Background Image\Background.png file from the sprite pack. Click the Open icon to import an image.

Select the Background Image\Background.png file, then close the image editor. You should see part of the background image in the layout.
We need to size the background to cover the entire layout. Make sure it is selected (left click it in the layout) and its properties should appear in the Properties Bar. To make it cover the entire layout, set its Position to 0, 0 and its Size to 4000, 2048 (the same size as the layout).

The background image is pretty big, so it's hard to see it all at once at the current zoom level. Let's try zooming out to preview more of it.Hold Control and scroll the mouse wheel down to zoom out. Alternatively, press View - Zoom out in the ribbon a couple of times. You should be able to see the entire layout, a bit like this:

Note the dashed outline in the top left is the size of the window compared to the rest of the layout. Press Ctrl 0 to zoom back to 100%, or View - Zoom to 100% in the ribbon. You're probably zoomed in to the middle of the layout now. Use the scrollbars to navigate back to the top left corner of the layout. You can also click and drag the middle mouse button to 'pan' around the layout, or hold space to do the same if you don't have a middle mouse button.

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