How to Implement One Way Platforms in Kaboom.js

A quick tutorial on how to make the player jump through a platform in a 2D platformer game

The goal of this article is to teach you how to make a player game object pass through a platform when jumping from the bottom but then remain on the platform when arriving on top.

Prerequisites

I assume you know the basics of Kaboom.js. In case you don’t (I wonder how you found this article?), you can go to my YouTube channel and watch plenty of in-depth tutorials on the subject.

Setup code

Here is some code for making a basic platformer with two platforms. We will then add the code necessary to make one of them passthrough-able (I’m not sure this word exists, anyway you get the point)

const k = kaboom();
k.setGravity(2000);
k.add([
    k.rect(400, 100), 
    k.pos(200, 500),
    k.area(), 
    k.body({isStatic: true}),
    "passthroughPlatform"
]);
const player = k.add([
    k.rect(100, 100), 
    k.pos(300, 700), 
    k.area(), 
    k.body(),
]);
k.add([
    k.rect(k.width(), 100),
    k.pos(0, 900),
    k.area(),
    k.body({isStatic: true}),
    "groundPlatform"
])

This code should work but the positions might be off so feel free to adjust the values for each pos() component so that the groundPlatform is below the player and the passthroughPlatform is above them.

Add the following code so that the player can jump :

k.onKeyPress((key) => {
   if (key === "space") player.jump();
})

Also feel free to play around with the value passed to setGravity to make sure the player can have enough force while jumping to arrive to the platform above them.

The Solution + Explanation

To have a working one way platform, add the code below.

player.onBeforePhysicsResolve(collision => {
    if (collision.target.is("passthroughPlatform") && player.isJumping()) {
        collision.preventResolution()
    }
})

Kaboom offers the onBeforePhysicsResolve method which is available on game objects that uses the body() and area() components. It takes a function as a param that will run before any collisions involving the game object takes effect.

Using the collision param we can check if the collision target has the tag “passthroughPlatform” therefore identifying that the player is about to collide with a passthrough-able platform.

We also want to check if the player is currently jumping by using the isJumping() method offered by Kaboom for game objects using the body() component.

If both these conditions are true then the player needs to pass through the platform. We therefore need to disable the current collision by using the preventResolution() method available on the collision object.

Bonus

If you want to also make it possible for the player to drop down from a passthrough-able platform using the down key, you can modify the code like this :

player.onBeforePhysicsResolve(collision => {
    if (collision.target.is("passthroughPlatform") 
    && (player.isJumping() || k.isKeyDown("down")){
           collision.preventResolution() 
    }
})

Conclusion

That’s it. Pretty simple, right?

If you want to receive more tutorials like this one, subscribe!

If you want in-depth project based tutorials, I recommend checking out my YouTube channel.

Bye!