Sign in to follow this  
JCB_

Slopes not working using arcade physics

Recommended Posts

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

Share this post


Link to post
Share on other sites

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;
       // }
    //}
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.