Wingzgaming

Collision only works with base layer in tilemaps

Recommended Posts

Hi There,

I am having this issue with phaser(2.9.4) where collision with a tilemap only work with the base layer. In my example I have the collide-able world and then I wanted to add a background underneath that was part of the tilemap.

Here is my code(excluding boot and preload)

 

Game.preload = function () {
    game.stage.backgroundColor = "000000";
};

Game.create = function () {
    Game.scale = 5;

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

    game.physics.arcade.gravity.y = 850;

    Game.cursors = game.input.keyboard.createCursorKeys();

    Game.map = game.add.tilemap('map');
    Game.map.addTilesetImage('tiles_1', 'tiles');

    Game.back = Game.map.createLayer('Background');
    Game.back.setScale(Game.scale);
    Game.back.renderSettings.enableScrollDelta = false;

    Game.spawn = Game.map.createLayer('Spawn');
    Game.spawn.setScale(Game.scale);
    Game.spawn.renderSettings.enableScrollDelta = false;

    Game.decor = Game.map.createLayer('Decor');
    Game.decor.setScale(Game.scale);
    Game.decor.renderSettings.enableScrollDelta = false;

    Game.layer = Game.map.createLayer('Collideable');
    Game.layer.setScale(Game.scale);
    Game.layer.renderSettings.enableScrollDelta = false;
    Game.layer.resizeWorld();

    Game.map.setCollisionByExclusion([]);


    Game.player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');
    Game.player.scale.setTo(Game.scale);
    //Game.player.anchor.setTo(0.5);

    game.physics.enable(Game.player, Phaser.Physics.ARCADE);

    Game.player.body.collideWorldBounds = true;

    game.camera.follow(Game.player);

    var enemyPos = Game.findTiles(952, true);
    Game.enemies = game.add.group();
    for (var enemies in enemyPos) {
        var enemy = game.add.sprite(enemyPos[enemies][0] * Game.scale * 16, enemyPos[enemies][1] * Game.scale * 16, 'enemy');

        Game.enemies.add(enemy);

        enemy.scale.setTo(randomInt(1, 5));
        game.physics.enable(enemy, Phaser.Physics.ARCADE);
        enemy.body.collideWorldBounds = true;
        enemy.speed = randomInt(150, 250);
        enemy.interval = 0;
        enemy.update = function () {
            this.interval++;
            if (this.interval >= 20) {
                this.interval = 0;
                if (this.x > Game.player.x) {
                    this.body.velocity.x = -this.speed;
                } else if (this.x < Game.player.x) {
                    this.body.velocity.x = this.speed;
                }

                if (this.y > Game.player.y && this.body.blocked.down) {
                    this.body.velocity.y = -600;
                }
            }
        }
    }
};

Game.update = function () {
    game.physics.arcade.collide(Game.player, Game.layer);
    //game.physics.arcade.collide(Game.player, Game.enemies);
    game.physics.arcade.collide(Game.enemies, Game.layer);
    //game.physics.arcade.collide(Game.enemies, Game.enemies);

    Game.player.body.velocity.setMagnitude(Math.min(1000, Game.player.body.velocity.getMagnitude()));

    if (Game.cursors.left.isDown) {
        Game.player.body.velocity.x = -500;
    } else if (Game.cursors.right.isDown) {
        Game.player.body.velocity.x = 500;
    } else {
        Game.player.body.velocity.x = 0;
    }

    if (Game.cursors.up.isDown && Game.player.body.blocked.down) {
        Game.player.body.velocity.y = -600;
    } else if (Game.cursors.up.isDown && Game.player.body.touching.down) {
        Game.player.body.velocity.y = -600;
    }


};


Game.findTiles = function (id, destroy) {
    var mapArray = Game.spawn.getTiles(0, 0, game.world.width, game.world.height);

    var found = [];

    var needToFindID = id;

    for (var blocks in mapArray) {
        if (needToFindID == mapArray[blocks].index) {
            found.push([mapArray[blocks].x, mapArray[blocks].y]);
            if (destroy) {
                Game.map.removeTile(mapArray[blocks].x, mapArray[blocks].y, Game.spawn).destroy();
            }

        }
    }
    return found;
};

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

Any help would be greatly appreciated.

Share this post


Link to post
Share on other sites

I only see collisions against Game.layer. Are there others?

Try adding one layer at a time, set layer.debug = true, and verify the collision faces.

Also try it without layer.setScale().

Share this post


Link to post
Share on other sites

After add Game.layer.debug = true; I found that when there was a background layer the layer did not show up as collide-able even if I turned off scaling.

I attached the images in this order(With Layer.debug): Before background was added, After background added, With only the collide-able layer and finally without scaling

BeforeBack.png

AfterBack.png

OnlyLayer.png

AfterScale.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.