How to make a Platform game

17

Adding more animations

Let's get the rest of the player's animations added. First, let's add some more 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 floor tiles. Click and drag to select all three tiles. Then, hold Control and drag the tiles to clone them. Do this a few times so there are some platforms to jump around. It might help to zoom out for this.

To give us 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. Change the Window Size to 800, 600.

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

Double-click the player in the Layout View to bring up the animations editor. There are four animations we want to import:

1. Idle to run (tween)

2. Run

3. Jump from run

4. Jump from stand

For each of these animations, the process to add them is as follows:

1. Right-click in the Animations bar (by default, floating to the right and listing the Idle animation) and select Add animation.

2. Enter the name of the animation. You might want to give easier to remember names like IdleToRun.

3. Left-click the animation to switch to it. It should have a single empty frame.

4. Right-click in the Animation frames bar (by default, at the bottom, listing the animation frames) and select Import sprite strip....

5. Locate the sprite strip. Note in the Jungle sprite pack each frame is also available as a separate PNG file. The frames can be imported that way, but usually it's quicker to use the sprite strip version, so select the image with the complete strip.

6. Check the number of cells is right, then click OK.

7. Delete the first empty frame which we don't need any more.

8. In the first frame, place the origin by the player's feet. Try to get it to match the position in the Idle animation. Apply the origin to the entire animation as we did with the Idle animation (right-click the Origin in the Image Points dialog and select Apply to whole animation).

8. Hold shift and press Crop to crop all the imported frames at once, removing the unnecessary transparent areas.

9. In the Properties Bar, make sure each animation has the following properties:

Speed: 22 for JumpFromStand, 15 for everything else

Loop: Yes for Run, No for everything else

Do this for each animation, so finally there are five animations for the player.

Close the animation editor. Now we need to tell the player to switch to the appropriate animation at the appropriate time. To do this, the platform behavior provides animation triggers - events which run when the player should change animation. Then we just use the player's Set animation action. Remember the Platform behavior (with the animation triggers) is on the PlayerBox object, and then we want to set the animation of the visible Player object.

Also note we have an IdleToRun animation. This means when we start moving, the animations go like this:

Stopped: Idle

Start moving: IdleToRun

When IdleToRun finishes: Run

This is also easy to set up with events.

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

When the IdleToRun animation finishes, we then want to switch to the Run animation. We can do this using the On animation finished trigger in the Player object:

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

Run the game. The player should now be able to switch from running to stopped, with the IdleToRun animation playing in between. However, the jump animations don't play yet. Since we have two Jump animations, we also need to set a different animation depending on whether the player is running or not when they jump. This can be done with the following event:

Notice here sub-events have been used - they appear indented beneath the On jump event. Sub-events are each checked after the "parent" event has run. This correctly implements our logic: when the Platform behavior jumps, if they are moving, set JumpFromRun; otherwise, set JumpFromStand.

To make a sub-event, right-click the parent event and select Add -> Add sub-event, or select it and press S.

To make the above event you'll also need to invert a condition (appearing as the red cross). Inverted conditions mean the opposite of what they state. In this case, the inverted "Platform is moving" condition then means "Platform is NOT moving". To invert a condition, add it normally, then right-click on it and select Invert. Alternatively, select it and press I.

There is just one more thing we need to do: the player will remain on their Jump animation after jumping, even after they land, unless we set the animation back to Idle or Run when they land. This is very similar to the previous event: in the On land animation trigger, if they are moving, set "Run"; otherwise, set "Idle".

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 if you jump from standing still, or jump from running. Also see how when you land from a jump, you either go back to Idle or Running depending on whether you are moving or not.

Now, time to make an enemy!

  • 3 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Very nice tutorial, though I'm an intermediate user. I remember when I was a beginner I did find it too confusing to finish.

    I also used this tutorial with Construct 3. Construct 3 has enough in common with Construct 2, that it wasn't hard to figure out what to do.

    Keep up the great work! Construct rocks!

  • My goodness, this tutorial is a lot but it is very helpful to me. I love it! it helps me learn how to make all of these key elements in a simple platformer that i never had before. Thanks!

  • When I tied background repeat fames include when repeat frame on white space then again it repeat how can remove white space between repeat frame a..