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...

For physics between sprite vs tilemapLayer, the overlap and collide method are in fact doing same thing. (I think this problem is caused by careless.)


If you want to handle the overlap with collision response, try "getTiles" method of tilemapLayer.


you can check the implementation of arcade, http://docs.phaser.io/World.js_.html#sunlight-1-line-716

Link to comment
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.

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.


  • Recently Browsing   0 members

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