How to make a platformer game

343

Index

Attached Files

The following files have been attached to this tutorial:

.c3p

platformer-abstraction.c3p

Download now 362.85 KB

Contributors

Stats

201,579 visits, 841,955 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 21 Feb, 2020. Last updated 14 Dec, 2022

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 PlayerAnim 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 (or click the Add event link in the sheet).

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.

Double-click the PlayerAnim object. We will want to set its position.

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 PlayerAnim object on top of the PlayerBox object, which is the object with the movement.

Run the game by clicking the Preview button.

The Preview button in Construct 3

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. PlayerAnim 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'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 add a new event with the condition "On left arrow key pressed", and the action "Set PlayerAnim 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 condition.

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

Now we want to add our action: "Set PlayerAnim 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 PlayerAnim.

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 PlayerAnim 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!

Next Tutorial In Course

Supporting multiple screen sizes 11:57

Learn how to make sure your games work on devices with varying resolutions

Disabled Comments have been disabled by the owner.