2D Platformer: Jump-Through Platforms

2D Platformer Jump Through Platforms

Hey everyone :) more progress on our 2D Platform Engine! In our last post, Alejandro talked about Physics and Collision Detection between sprites and the terrain — namely, how the Ninja interacts with the map terrain.

Our next step was creating Jump Through Platforms – or JTPs, which are basically platforms where the sprite can jump through but will land, and by pressing  a combination of keys, which in our case is double-tap Down or [ ↓ ↓ ] (since we are using [ ↓ + Jump ] for ninja sliding), the sprite will fall through the platform. It’s easier to explain on video:

Adding JTPs greatly increases the gameplay experience. So, how are exactly JTPs implemented in-game?

Adding JTP’s to the Map Editor

The first step is to be able to actually draw them in the Map Editor, else we won’t be able to test them ^^, as I mentioned some time ago when I started the Map Editor, we have different angles, directions, and terrain types. These are the different types of angles and directions we have currently implemented:

As for JTP’s, as you saw on the video, we have various inclinations too, so in this case, what we do is just change the “terrain type” bit. This is how it looks like now:

In our current Map Editor, JTP’s are just represented by gray tiles, so this is how part of our map looks like:

2D Map Editor

On another note, the Map Editor has been improved considerably, it’s more efficient and some small but useful features have been added (like a thumbnail). Will talk about it on my next post :)

Back on track, as you can see, the actual JTP’s are one full tile in size. It does look kind of confusing when you see it on the editor, but do remember that actual graphics will go on top of what I call the map’s mask or terrain information. I did create a simple graphic for the platforms in-game.

So now that they’re added and saved on our new map, it’s time to implement them in game:

Collision Detection for JTP’s

Before getting into JTR’s, let’s take a rough look on how Solid tiles look like:


Collision-wise, the red lines indicate the collision planes, while the direction of the sprite when it collides into the tile surface is marked by red arrows. So, by adding both of these tiles together, this is what you get:


So how to JTP’s look like? They are actually the same as their solid equivalent, with all the collision planes removed (grayed out) except for the top one:

Jump Through Platforms 2D Platformer

So again, adding the two tiles together would create two collision planes.

Jump Through Platforms 2D Platformer

So, what happens when a sprite jumps from below, on top of a JTP? At first it looks like it will trigger a ceiling collision and it may look like there should be a special case programmed for this, however, remember that collision only occurs from the direction the sprite is coming from (marked with the red arrows), so in this case only floor collisions are triggered. And voilá! There’s still one last issue regarding JTP’s:

Falling off from platforms

The final issue regarding platforms is if the sprite should be allowed to fall off or from platforms using a key combination. Usually, this is done by using the [ ↓ + Jump ] combination — however, as we want the Ninja to be able to slide while on a JTP, we have decided to use the [ ↓ ↓ ] combination, which is also pretty standard in 2D platformers:

Jump Through Platform: Slide


That pretty much wraps it up. If you noticed carefully on the video I posted above, Ninja-kun can now Slash, so our next step will be creating sprite-to-sprite collisions and hitboxes, or creating movable platforms. Which would you prefer to have implemented and which do you think poses more of a challenge?

Finally, again, don forget to follow us on Facebook and Twitter.

Happy gamedev and video gaming!


Leave a Reply

%d bloggers like this: