Big problem with tiledmap collision

[bloudman]

Hello everyone ! 

I'm actually working with phaser for a project of my school ! 

I'm trying to show a small map created with tiled and to collide with some elements.

I have followed phaser example on this but nothing happened :/ 

My map is correctly created (on the screen also) but there is no collision ^^

I've spent 2 hours or more to fix this and ... it's a fail for the moment :/ 

 

If someone can help me to understand my problem it's could be very helpfull :/ 

(sorry for my poor english)

that's my code and I sent all files in the zip attached bellow

const width = 1280;
const height = 720;

// Phaser
var game = new Phaser.Game(width, height, Phaser.AUTO, 'game', { preload: preload, create: create, update: update});
var voiture;
var map;
var layer;
var layer1;



var upKey;
var downKey;
var leftKey;
var rightKey;


function preload () {

    game.load.image('car', 'img/car.png');

    game.load.tilemap('mapTest', 'map.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles', 'img/tileset.png');


}

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.stage.backgroundColor = '#fffff0';
    map = game.add.tilemap('mapTest');
    map.addTilesetImage('tileSet', 'tiles', 16, 16, 0); 

    console.log(map);
    layer = map.createLayer("background");
    layer1 = map.createLayer("collide");
    layer1.debug = true;
    //layer.resizeWorld();


    voiture = game.add.sprite(game.world.centerX - 50, game.world.centerY, 'car');
    voiture2 = game.add.sprite(game.world.centerX, game.world.centerY, 'car');
    game.physics.enable(voiture, Phaser.Physics.ARCADE);
    game.physics.enable(voiture2, Phaser.Physics.ARCADE);
    voiture.body.collideWorldBounds = true;
    voiture2.body.collideWorldBounds = true;
    voiture2.body.immovable = true;

    
    upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);
    downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);
    leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
    
    voiture.body.velocity.x = 10;

    map.setCollisionBetween(1, 2);


}


function update() {
    if (upKey.isDown) {
        voiture.body.y--;
    }
    else if (downKey.isDown) {
        voiture.body.y++;
    }

    if (leftKey.isDown) {
        voiture.body.x--;
    }
    else if (rightKey.isDown) {
        voiture.body.x++;
    }


    game.physics.arcade.collide(voiture, voiture2);
    game.physics.arcade.collide(voiture, layer1);

    game.debug.bodyInfo(voiture, 16, 24);


}

 

phaser2.zip

phaser2.zip

[drhayes]

You didn't specify any of the tiles within your layer as collidable. Check out Phaser.Tilemap.setCollision or the other collision methods.

[bloudman]

Thanks for your answer! 

I don't understand what ou mean because I put map.setCollisionBetween(1,2) it isn't correct ? 
I tried all method relative with setCollsion and nothing works :/ 
I've only 2 tiles in my tilset.png and I would the first collide... 

 

[drhayes]

I missed that, you're right. Can you add the next two arguments, though? "map.setCollisionBetween(1, 2, true, layer1);"

[bloudman]

No problem  

 

done:

const width = 1280;
const height = 720;

// Phaser
var game = new Phaser.Game(width, height, Phaser.AUTO, 'game', { preload: preload, create: create, update: update});
var voiture;
var map;
var layer;
var layer1;



var upKey;
var downKey;
var leftKey;
var rightKey;


function preload () {

    game.load.image('car', 'img/car.png');

    game.load.tilemap('mapTest', 'map.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles', 'img/tileset.png');


}

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.stage.backgroundColor = '#fffff0';
    map = game.add.tilemap('mapTest');
    map.addTilesetImage('tileSet', 'tiles', 16, 16, 0); 
    map.setCollisionBetween(1, 2, true, layer1);

    console.log(map.collision);
    layer = map.createLayer("background");
    layer1 = map.createLayer("collide");
    layer1.debug = true;
    //layer.resizeWorld();


    voiture = game.add.sprite(game.world.centerX - 50, game.world.centerY, 'car');
    voiture2 = game.add.sprite(game.world.centerX, game.world.centerY, 'car');
    game.physics.enable(voiture, Phaser.Physics.ARCADE);
    game.physics.enable(voiture2, Phaser.Physics.ARCADE);

    game.physics.enable(layer1, Phaser.Physics.ARCADE, true);

    voiture.body.collideWorldBounds = true;
    voiture2.body.collideWorldBounds = true;
    voiture2.body.immovable = true;

    
    upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);
    downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);
    leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
    
    voiture.body.velocity.x = 10;



}


function update() {
    if (upKey.isDown) {
        voiture.body.y-=2;
    }
    else if (downKey.isDown) {
        voiture.body.y+=2;
    }

    if (leftKey.isDown) {
        voiture.body.x-=2;
    }
    else if (rightKey.isDown) {
        voiture.body.x+=2;
    }


    game.physics.arcade.collide(voiture, voiture2);
    game.physics.arcade.collide(voiture, layer1);

    game.debug.bodyInfo(voiture, 16, 24);


}

but it is still not working :/ 

[drhayes]

Can you move the line "map.setCollisionBetween(1, 2, true, layer1);" to *after* you've created layer1? See if it works then?

[bloudman]

Thanks a lot !

It works better like this 

It is strange because I tested something like that but maybe not with "map.setCollisionBetween(1, 2, true, layer1);"  so the answer comme from you two!

 

Thanks a lot !

[drhayes]

You're welcome! I try not to let Phaser pick the currentLayer. I've had good success by always supplying that param in the calls that need it.