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,562 visits, 841,932 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

ADDING MORE ANIMATIONS

Let's get the rest of the player's animations added.

First, make sure you have enough 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 the platforms Tilemap. Unlock the Platforms layer and select the Tilemap. You might want to add or remove some platforms. Consider checking back the steps in page 3 of this tutorial if you do not remember how to do so.

To give us and our player 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. You may want to change its name. Let's also change the Viewport size to 1280, 720.

Now that we have somewhere to jump to, with a bigger game 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.

Now we can focus on adding further new animations.

Jump animation

Let's add a jump animation, to display when the character is jumping towards the ceiling.

Double-click the PlayerAnim object to open up the image editor.

Right-click the Animations bar and click Add Animation.

Rename Animation 1 to jump.

Click the Open button in the toolbar.

Select the sprites PNG\Players\Player Blue\playerBlue_up1.png, playerBlue_up2.png and playerBlue_up3.png files from the Abstract Platformer pack.

Make sure to position the image point to the bottom of the frame as instructed in the Setting the origin paragraph in this page.

We do not need to make that animation loop.

Fall animation

Let's add a last animation, the fall animation.

Right-click the Animations bar and click Add Animation.

Rename Animation 1 to fall.

Click the Open icon in the toolbar

Import the sprites PNG\Players\Player Blue\playerBlue_fall.png file from the Abstract Platformer pack.

Make sure to set the origin point the frame to the bottom.

We now have 4 animations for our PlayerAnim object.

Let's close the animations editor and add some events to display the animations appropriately to the ongoing game situation.

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 walk when we start moving, using the Platform Behavior's On moved trigger in the PlayerBox object:

Once you have created that event, add an action to it.

Select PlayerAnim

Select Set Animation

In the Animation field, type walk

Click Done, our event is finished.

The condition will trigger when the object PlayerBox's Platform behavior is moving (the green invisible box moves).

When it does, we set the displayed animation in the PlayerAnim object to be walk.

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 trigger in the PlayerBox object:

Run the game. The player should now be able to switch from running to stopped. However, the jump animations don't play yet. This can be done with the following event:

We will want to also add the fall animation while the character falls :

If you run the game now, you can notice that on touching the ground, the animation is not changed, it is still displaying the fall animation frame.

We may use the On landed condition of the platform behavior to take care of that:

You can now notice that only the idle animation will play when landing. Even if you are moving your character, it keeps to the same animation.

We can check whether the player is moving when landing or not.

To do so we are going to add new events and position them as sub-events by dragging and dropping them to the appropriate sub-event level in the Event sheet view.

Add a new event and use the condition Is moving:

Add an action Set animation and set the animation to display walk.

Then, click and hold down the mouse button on the event we've just created.

As you are holding down the mouse button, you can drag and move the event around. Place it over the event that is right before it on top (all while keeping the mouse button down).

Notice that the black line should be indented - appearing slightly to the right - to place the event inside the parent event, rather than just after it.

When you release your mouse button (drop), events should look like this :

Notice the sub-event is also indented, indicating it is a sub-event of the event above it, rather than simply another event coming after it.

So now, when the character lands, it plays the animation idle, and if the PlayerBox object is moving, the animation will be set to walk.

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.

Also see how when you land from a jump, you either go back to idle or walk depending on whether you are moving or not.

As we did unlock the Platforms layer, be sure to lock it again before proceeding further.

Once locked, be sure to select the PlayerLayer layer.

Now, time to make an enemy!

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.