Request for Code Snippets/Examples: 2D Side-Scrolling Game with No Sliding on Slopes & Bypassing Collision on Specific Sides using Rapier.js + Phaser 3

Phaser 3
1

Hi fellow devs,

I’m currently working on a 2D side-scrolling game similar to Mario using Phaser 3 for the game framework and Rapier.js as the physics engine. I’m seeking some guidance or code examples on two specific challenges I’m facing:

  1. Preventing Sliding on Slopes: When my character moves on a slope, they tend to slide down even when I’m not pressing any movement keys. I need help in implementing a solution where the character doesn’t slide down the slope and stays in place if no input is given.
  2. Bypassing Collision on Specific Sides of Objects: I have polygonal and rectangular objects in my game, and I want to bypass or disable collision detection on specific sides (e.g., allowing the player to pass through from below but not from above). I’m looking for a way to implement this behavior using Rapier.js.

If anyone has experience with these mechanics or could point me to any resources, examples, or code snippets, it would be greatly appreciated! Thanks in advance.

2

I’m not sure if you still need my help, but I’ve worked on this problem for a whole day and finally I found that there is a very simple solution.

Let’s suggest that you’ve already have a tiledmap layer in your js code:

this.map = this.make.tilemap({ key: "testMap1" });
this.tileset.push(this.map.addTilesetImage("testTileset1", "testTileset1"));
this.layerTerrain = this.map.createLayer("terrain", this.tileset);
this.layerTerrain.setCollisionFromCollisionGroup(true, false);

And then, we just need to make a callback function which tells Phaser if the collison should be ignored:

this.physics.add.collider(this.player, this.layerTerrain, null, (player, platform)=>{
            if (player.body.velocity.y < 0 || player.y + player.height > platform.pixelY) {
                return false;
            }
            else {
                return true;
            }
        });

In this way, if your player is lower than the platform(which means player is passing through from the bottom side), the callback function will return false, than the collison will be ignored.You can design your own callback function to build more complex logic.

I hope this will help you.