Sticky Slopes

When I started implementing the collision layer, I was quickly facing a problem that caused me considerable headache. I needed slopes, sticky slopes. Since I used AABB collision detection and didn’t want to give up the speed advantage, I decided to implement the slopes as collision callbacks.

Wanting to re-use the Phaser.js arcade physics engine, I first needed an entry point for my code. Therefore I replaced the function collideSpriteVsTilemapLayer in Phaser.Physics.Arcade with a custom one which contained the entire functionality of the old one but tested any tile for its type when colliding. The type of a tile was a new attribute that I used for different types of slopes as well as to represent solid blocks. You had to define which form the different tilemap block IDs had when creating the collision layer. The new function could then check the block type, decide which collision algorithm to use and start the respective algorithm.

The call to define the block types looked like this:

collision.layer.data.forEach(function(e){
    e.forEach(function(t){
        if (t.index < 0) {
            // none
        } else if (t.index === 1) {
            t.slope = 'FULL_SQUARE';
        } else if (t.index === 2) {
            t.slope = 'HALF_TRIANGLE_BOTTOM_RIGHT';
        } else if (t.index === 3) {
            t.slope = 'HALF_TRIANGLE_BOTTOM_LEFT';
        } else if (t.index === 4) {
            t.slope = 'LONG_TRIANGLE_BOTTOM_RIGHT_LOW';
        } else if (t.index === 5) {
            t.slope = 'LONG_TRIANGLE_BOTTOM_RIGHT_HIGH';
        } else if (t.index === 6) {
            t.slope = 'LONG_TRIANGLE_BOTTOM_LEFT_HIGH';
        } else if (t.index === 7) {
            t.slope = 'LONG_TRIANGLE_BOTTOM_LEFT_LOW';
        }
    });
});

To be continued…