Phaser JS walk up tile based stairs
<p>I'm creating a small 2d-minecraft clone, in Phaser js, on my own as a learning experience. So far I have gotten player movement and random level seeds to work ok.</p>

<p>I am using Phasers P2JS engine and have sprites that are box based. What I'm struggling with now Is I want the player to be able to walk unhindered up small elevations, (1-tile high) but I don't have any good idea of how I should Implement this. </p>

<p>I have tried changing the bounding box of the player so that it had a slope at the bottom but this gets me in to a bunch of trouble with wall climbing. I want a way to do this where it gets as seamless as possible. Preferably the player speed is not altered much by climbing the steps.</p>

<p>I am concidering writing some kind of collision detection function to handle this but I am uncertain if this is the best way to do it.</p>

<p>Thanks for your help.</p>

<p>Below is my code and an image that shows the kind of step I want to beable to walk up. Its the first elevation to the left in the image.</p>

<pre><code>var pablo = require('../generators/pablo.js');
var destiny = {};
var socket;
var player;
var jumpButton;
var levelCollisionGroup;
var playerCollisionGroup;


destiny.create = function () {
  console.info("game loaded");

  // World
  this.game.world.setBounds(0, 0, 4000, 1000);
  this.game.physics.startSystem(Phaser.Physics.P2JS);
  this.game.physics.p2.gravity.y = 600;
  this.game.physics.p2.applySpringForces= false;
  this.game.physics.p2.applyDamping= false;
  this.game.physics.p2.restitution = 0;
  this.game.physics.p2.friction = 0.01;

  // Player
  playerCollisionGroup = this.game.physics.p2.createCollisionGroup();
  player = this.game.add.sprite(this.game.world.centerX, 800, 'player');
  this.game.physics.p2.enable(player,true);
  player.body.fixedRotation = true;
  player.body.setCollisionGroup(playerCollisionGroup);
  player.body.mass = 2;

  // Camera
  this.game.camera.follow(player);
  this.game.camera.deadzone = new Phaser.Rectangle(200, 0, 400, 100);

  // Controls
  jumpButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
  leftButton = this.game.input.keyboard.addKey(Phaser.Keyboard.A);
  rightButton = this.game.input.keyboard.addKey(Phaser.Keyboard.D);

  // Level
  levelCollisionGroup = this.game.physics.p2.createCollisionGroup();
  this.game.physics.p2.updateBoundsCollisionGroup();
  for (i = 0; i &lt; 280; i = i + 1) {
    var block;
    var height = pablo.getHeight(i);
    for(j = 0; j &lt; height; j = j + 1){
      if(j === height-1){
        block = this.game.add.sprite(15*i, 993-15*j, 'grass');
      } else {
        block = this.game.add.sprite(15*i, 993-15*j, 'dirt');
      }
      block.width = 15;
      block.height = 15;
      this.game.physics.p2.enable(block);
      block.body.static=true;
      block.body.immovable = true;
      block.body.collides([levelCollisionGroup, playerCollisionGroup]);
      block.body.setCollisionGroup(levelCollisionGroup);
      if(j == height){

      }
    }
  }
  player.body.collides(levelCollisionGroup);
  this.game.stage.backgroundColor = "#5599CC";

};

destiny.update = function() {

    player.body.velocity.x=0;

    if (leftButton.isDown) {
        player.body.velocity.x = -200;
    } else if (rightButton.isDown) {
        player.body.velocity.x = 200;
    }

    if (jumpButton.isDown &amp;&amp; this.checkIfCanJump()) {
      player.body.velocity.y = -400;
    }
};

destiny.render = function() {
  this.game.debug.cameraInfo(this.game.camera, 32, 32);
  this.game.debug.spriteCoords(player, 32, 550);
};

destiny.checkIfCanJump = function() {

    var result = false;

    for (var i=0; i &lt; this.game.physics.p2.world.narrowphase.contactEquations.length; i++) {
        var c = this.game.physics.p2.world.narrowphase.contactEquations[i];
        if (c.bodyA === player.body.data || c.bodyB === player.body.data) {
            var d = p2.vec2.dot(c.normalA, p2.vec2.fromValues(0, 1));

            if (c.bodyA === player.body.data) {
                d *= -1;
            }

            if (d &gt; 0.5) {
                result = true;
            }
        }
    }
    return result;
};

module.exports = destiny;
</code></pre>

<p><a href="https://i.stack.imgur.com/J2UwZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J2UwZ.png" alt="enter image description here"></a></p>

<p>===================== Edit =====================</p>

<p>I have now tried creating slopes of the edge pieces when generating the world. But I realized that this makes me have to regenerate the world when I later add the feature for hacking away blocks. Thus this is not the solution. I think I will need to do some collision detection and move the player up when I hit an edge. But I'm not quite sure how to do this in phaser. Any help is still appreciated.</p>

<p>!!! Here is an image of what not to do !!!</p>

<p><a href="https://i.stack.imgur.com/plDET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/plDET.png" alt="enter image description here"></a></p>