Jump to content

How to handle collision between sprite and tilemap?


Recommended Posts

What is commonly done is that a 2nd tilemap is created whose sole purpose is to deal with collisions. This collision tilemap just holds information about where collisions will occur and what type of tile the collision is. Then when you move the player, you just check where the player is going against the collision tilemap and if the tile the player is moving into has a tile, you can check what type of tile and respond accordingly.
So for example, let's say you have a room surrounded by walls (represented by tile #1) with a river of lava through it (represented by tile #2) and any tile that doesn't have a collision will be empty (represented by tile #0). The collision tilemap could look like the following:
collisionTilemap = [
   [1, 1, 1, 1, 2, 1, 1, 1, 1],
   [1, 0, 0, 0, 2, 0, 0, 0, 1],
   [1, 0, 0, 0, 0, 0, 0, 0, 1],
   [1, 0, 0, 0, 2, 0, 0, 0, 1],
   [1, 1, 1, 1, 2, 1, 1, 1, 1]



When the player tries to move into a tile with the #1, he is just prevented from moving into the square. But if the player tries to move into a tile with the #2, the player dies because he touched lava.

Link to comment
Share on other sites

  • 4 months later...
  • 1 month later...
  • 4 months later...

I just want to ask something. I have made a game where I have used canvas to make a string. Basically the canvas is a line which behaves  as a string. So what I want to do is detect when the string(i.e. canvas) collides with coin tiles on the tilemap. how can I use game physics and collide functions between canvas and a tilemap layer?  (Not a sprite and tilemap).


Please help.

Link to comment
Share on other sites

  • 1 year later...
  • 10 months later...

Sorry to revive this but I'm having some problems with this example here.


My main issue is that on collision the tile becomes passable. How do I make it impassable? 

In the example, the once the arrow connects with the coin, then the coin changes it alpha value AND becomes passable at the same time. Why? 

How do I make it so that I can get the collide callback but not change any physics?




//  This will set Tile ID 26 (the coin) to call the hitCoin function when collided with
    map.setTileIndexCallback(26, hitCoin, this);

    //  This will set the map location 2, 0 to call the function
    map.setTileLocationCallback(2, 0, 1, 1, hitCoin, this);

These 2 functions here for example. the .setTileLocationCallback works as how I imagine it. It sets the tiles.alpha to 0.2 but it's not passable by the sprite body. Meanwhile the setTileIndexCallback makes it both passable and adds alpha to it. Why does one change the physics and the other one does not? I would prefer if neither changed the physics, the way setTileLocationCallback is set up.



http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=tile+callbacks.js&t=tile callbacks

And in this example both functions make the tile passable.

Link to comment
Share on other sites

2 hours ago, anthkris said:

Wanted to make sure I posted this @symof. I submitted an issue and got some answers. You need to return true in the callback function to keep the tile impassable.

Thanks for your reply. I did change the return value to true in the hitCoin function from the example and it's still passable.


You can see from the example that the coin is not impassable even with hitCoin returning true.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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