Slopes not working using arcade physics

[JCB_]

I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue.

HTML

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV);
this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32);
this.game.load.spritesheet('player', 'assets/penguin.png', 32,48);
}

var player;
var cursors;

function create() {
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.game.plugins.add(Phaser.Plugin.ArcadeSlopes);
cursors = game.input.keyboard.createCursorKeys();

this.map = this.game.add.tilemap('tilemap');
this.map.addTilesetImage('snow_tiles_32', 'tiles');

this.game.stage.backgroundColor = '#80e3ff';

this.ground = this.map.createLayer('collision');
this.ground.resizeWorld();

this.game.slopes.convertTilemapLayer(this.ground,{
    2:  'FULL',
    3:  'HALF_BOTTOM_LEFT',
    4:  'HALF_BOTTOM_RIGHT',
    6:  'HALF_TOP_LEFT',
    5:  'HALF_TOP_RIGHT',
    15: 'QUARTER_BOTTOM_LEFT_LOW',
    16: 'QUARTER_BOTTOM_RIGHT_LOW',
    17: 'QUARTER_TOP_RIGHT_LOW',
    18: 'QUARTER_TOP_LEFT_LOW',
    19: 'QUARTER_BOTTOM_LEFT_HIGH',
    20: 'QUARTER_BOTTOM_RIGHT_HIGH',
    21: 'QUARTER_TOP_RIGHT_HIGH',
    22: 'QUARTER_TOP_LEFT_HIGH',
    23: 'QUARTER_LEFT_BOTTOM_HIGH',
    24: 'QUARTER_RIGHT_BOTTOM_HIGH',
    25: 'QUARTER_RIGHT_TOP_LOW',
    26: 'QUARTER_LEFT_TOP_LOW',
    27: 'QUARTER_LEFT_BOTTOM_LOW',
    28: 'QUARTER_RIGHT_BOTTOM_LOW',
    29: 'QUARTER_RIGHT_TOP_HIGH',
    30: 'QUARTER_LEFT_TOP_HIGH',
    31: 'HALF_BOTTOM',
    32: 'HALF_RIGHT',
    33: 'HALF_TOP',
    34: 'HALF_LEFT'
});

this.map.setCollisionBetween(2,34, true, 'collision');

//player
this.player = this.game.add.sprite(100,50,'player');
this.game.physics.arcade.enable(player);

this.player.body.bounce.y = 0.2;
this.player.body.gravity.y = 2000;
this.player.body.collideWorldBounds = true;

this.player.animations.add('left', [0,1,2,3], 10, true);
this.player.animations.add('right', [5,6,7,8], 10, true);
this.game.slopes.enable(this.player);
this.game.camera.follow(this.player);

}

function update() {

this.game.physics.arcade.collide(this.player, this.ground);

this.player.body.velocity.x = 0;

if(cursors.left.isDown){
    this.player.body.velocity.x = -150;
    this.player.animations.play('left');
}
else if (cursors.right.isDown){
    this.player.body.velocity.x = 150;
    this.player.animations.play('right');
}
else{
    this.player.animations.stop();
    this.player.frame = 4;
}

if(cursors.up.isDown && player.body.onFloor()){
    this.player.body.velocity.y = -350;
}
}

 

Test Game Phaser.rar

[hexus]

Here's your fixed game state.

There were a number of bugs to begin with, particularly the fact that your CSV tilemap doesn't have layers, so you just need to pass 0 instead of 'collision'.

Also, because your tilesheet doesn't have the same layout as the Ninja Physics debug tilesheet, the mappings of course wouldn't work, so I estimated a mapping for your current tilesheet.

The JavaScript should be all you need to change.

Happy coding!

/**
 * Created by Welcome on 03/10/2016.
 */

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV);
    this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32);
    this.game.load.spritesheet('player', 'assets/penguin.png', 32,48);
}

var cursors;
//var snowballs;
//var sTime = 0;
//var fireButton;

function create() {
    this.game.physics.startSystem(Phaser.Physics.ARCADE);
    this.game.plugins.add(Phaser.Plugin.ArcadeSlopes);
    cursors = game.input.keyboard.createCursorKeys();

    this.map = this.game.add.tilemap('tilemap');
    this.map.addTilesetImage('snow_tiles_32', 'tiles');

    this.game.stage.backgroundColor = '#80e3ff';

    this.ground = this.map.createLayer(0);
    this.ground.resizeWorld();

    this.game.slopes.convertTilemapLayer(this.ground,{
        1:  'FULL',
        2:  'FULL',
        3:  'FULL',
        4:  'FULL',
        5:  'FULL',
        6:  'FULL',
        7:  'FULL',
        8:  'FULL',
        9:  'HALF_TOP',
        10: 'FULL',
        12: 'FULL',
        13: 'HALF_BOTTOM_LEFT',
        14: 'HALF_BOTTOM_RIGHT',
        
    });

    this.map.setCollisionBetween(1, 34, true, 0);

    //player
    this.player = this.game.add.sprite(100, 50, 'player');
    this.game.physics.arcade.enable(this.player);
    this.player.body.slopes = {sat: {response: 0}}; // workaround for a phaser bug
    this.game.slopes.enable(this.player);
    this.player.body.slopes.preferY = true; // stops the player sliding down slopes

    this.player.body.bounce.y = 0.2;
    this.player.body.gravity.y = 2000;
    this.player.body.collideWorldBounds = true;

    this.player.animations.add('left', [0,1,2,3], 10, true);
    this.player.animations.add('right', [5,6,7,8], 10, true);

    //this.snowballs = game.add.group();
    //this.snowballs.enableBody = true;
    //this.snowballs.physicsBodyType = Phaser.Physics.ARCADE;
    //this.snowballs.createMultiple(1, 'snowball');
    //this.snowballs.setAll('anchor.x', 0.5);
    //this.snowballs.setAll('anchor.y', 1);
    //this.snowballs.setAll('outOfBoundsKill', true);
    //this.snowballs.setAll('checkWorldBounds', true);

    //this.fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

    this.game.slopes.enable(this.player);
    this.game.camera.follow(this.player);
}

function update() {
    this.game.physics.arcade.collide(this.player, this.ground);

    this.player.body.velocity.x = 0;

    if(cursors.left.isDown){
        this.player.body.velocity.x = -150;
        this.player.animations.play('left');
    }
    else if (cursors.right.isDown){
        this.player.body.velocity.x = 150;
        this.player.animations.play('right');
    }
    else{
        this.player.animations.stop();
        this.player.frame = 4;
    }

    if(cursors.up.isDown && (this.player.body.onFloor() || this.player.body.touching.down)){
        this.player.body.velocity.y = -350;
    }

    //if(fireButton.isDown){
        //this.fireSnowball();
    //}
//}

//function fireSnowball(){
    //if(game.time.now > sTime){
        //this.snowball = snowballs.getFirstExists(false);
        //if(snowball){
           // this.snowball.reset(player.x+30, player.y+30);
            //this.snowball.body.velocity.x = 400;
            //this.sTime = game.time.now = 10;
       // }
    //}
}

 

[JCB_]

Thank you this worked as intended now I have another question about mapping of tiles. If I wanted to have more tiles that were intended to be slopes/hills within my game, how exactly would I go about mapping that out? When I read about the slopes plugin initially it mentioned some converter you had to run something through but I didn't quite understand.

[hexus]

On 10/6/2016 at 11:25 PM, JCB_ said:

Thank you this worked as intended now I have another question about mapping of tiles. If I wanted to have more tiles that were intended to be slopes/hills within my game, how exactly would I go about mapping that out? When I read about the slopes plugin initially it mentioned some converter you had to run something through but I didn't quite understand.

this.game.slopes.convertTilemapLayer is the converter, perhaps that's not clear enough in the readme.

You just map the index of each tile to one of the available tile shape types. I don't have a handy wiki for people to look up these constants with their corresponding shapes though.

I would suggest using a Tiled map instead, and using an invisible collision layer that uses the ninja physics tilesheet and mapping. Then your graphical tiles aren't tied to the collision tiles.