Jump to content

Tilemaps collision and overlap - how does it work?


Recommended Posts

Hi all,


I am a total rookie when it comes to using Phaser, but am taking my first stumbling steps at a platformer. At this point I am just trying to get my head around how to work with layers, collisions and overlaps but am not getting it to work (probably) due to my lack of knowledge.


Here is what I got (single HTML-file):

<!DOCTYPE html><html><head><meta charset="ISO-8859-1"><title>Platform Test</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><script type="text/javascript" src="js/gamecontroller.js"></script><script type="text/javascript" src="js/phaser.min.js"></script></head><script type="text/javascript">    var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {        preload : preload,        create : create,        update : update,        render : render    });    function preload() {        this.load.tilemap('level1', 'assets/tilemaps/level2.json', null,                Phaser.Tilemap.TILED_JSON);        this.load.image('gameTiles', 'assets/images/tiles_2.png');        game.load.image('card', 'assets/images/player.png');    }    var card;    var cursors;    function create() {        map = game.add.tilemap('level1');        map.addTilesetImage('tiles_2', 'gameTiles');        backgroundlayer = map.createLayer('backgroundLayer');        blockedLayer = map.createLayer('blockedLayer');        ladderLayer = map.createLayer('ladderLayer');        map.setCollisionBetween(1, 256, true, blockedLayer);        map.setCollision([ 32, 33 ], true, 'ladderLayer');        backgroundlayer.resizeWorld();        card = game.add.sprite(200, 200, 'card');        game.physics.arcade.enable(card);        card.body.gravity.y = 500;        card.body.drag.x = 500;        game.camera.follow(card);        cursors = game.input.keyboard.createCursorKeys();    }    function update() {        game.physics.arcade.collide(card, blockedLayer);        game.physics.arcade.overlap(card, ladderLayer, onLadder, null, this);        if (cursors.left.isDown && !card.body.blocked.left) {            card.body.velocity.x = -200;        }        if (cursors.right.isDown && !card.body.blocked.right) {            card.body.velocity.x = 200;        }        if (cursors.up.isDown && card.body.blocked.down) {            card.body.velocity.y -= 400;        }        if (cursors.down.isDown) {            card.y += 4;        }    }    function onLadder() {        console.log('OnLadder...');    }    function render() {        game.debug.cameraInfo(game.camera, 500, 32);        game.debug.spriteCoords(card, 32, 32);        game.debug.text(card.onLadder, 10, 10);    }</script><style>body {    padding: 0px;    margin: 0px;}</style><body></body></html>

My tilemap is split into three layers, one backgroundlayer, one layers for blocking tiles and one layer for ladders. With the code above, collision with the blocking layer works just fine. The problem occurs when I add the overlap for the ladderLayer.


What happens is that the player stops at the ladder and can't pass through it (as if it where a tile on the blocking layer), but apparently the callback in the overlap is caleld since I get "On ladder..." in the console.


If I remove the line game.physics.arcade.overlap(card, ladderLayer, onLadder, null, this) the player can pass by the ladder but of course I don't get anything in the log (the onLadder callback is not called).


The same thing happens if I keep the overlap-line and instead remove the line map.setCollision([ 32, 33 ], true, 'ladderLayer');


How is this supposed to work?


I have also tried to use the setTileIndexCallback-function but to no avail so far...


Any ideas?


Finest regards,


Link to comment
Share on other sites

  • 1 month later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...