# Arcade Physics Collisions with Isometric tilemap

**URL:** <https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050>\
**Category:** Phaser 3\
**Created:** [August 1, 2021, 4:23pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050 "2021-08-01T16:23:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![outera](https://avatars.discourse-cdn.com/v4/letter/o/7c8e57/32.png) [@outera](https://phaser.discourse.group/u/outera)\
**Post date:** [August 1, 2021, 4:23pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050/1 "2021-08-01T16:23:13Z")

</div>

Has anyone had success creating tilemap collisions with a sprite and isometric maps? I’ve been stuck on this for 3 days now. I’ve checked open issues on Github and here and have found these two posts which suggest a bug but both are with matter physics and I’m not sure if it would resolve my issue as well.

> <https://github.com/photonstorm/phaser/issues/5764>
>
> \<!--
> Thank you for taking the time to contribute towards Phaser. Before submitt…ing your issue, check the following:
> 
> 1. This repo is for Phaser 3 only. Phaser 2.x issues should be raised in the \[Phaser CE\](https://github.com/photonstorm/phaser-ce) repo.
> 
> 2. This repo should not be used for technical support. If you're struggling to use Phaser then post your question to the \[forum\](https://phaser.discourse.group/) or \[Discord\](https://phaser.io/community/discord) channels. GitHub Issues are for bugs and feature requests only.
> 
> 3. Make sure your issue isn't a duplicate, or has already been fixed.
> 
> 4. If your issue contains \_any\_ form of hostility it will be closed and you will be blocked from access to all our repos. Be nice. We do this for free.
> 
> 5. If all the above is ok, fill out the template below.
> \--\>
> 
> 
> \## Version
> \<!--
> Enter the version of Phaser you're using. You can find this output to the Dev Tools console in your browser.
> \--\>
> \* Phaser Version: 3.55.2
> \<!--
> Place the operating system \*\*below\*\* this comment.
> \--\>
> \* Operating system: macOS
> \<!--
> If the bug is browser specific, please enter the version \*\*below\*\* this comment:
> \--\>
> \* Browser: 
> 
> 
> \## Description
> 
> \<!--
> Write a detailed description of the bug \*\*below\*\* this comment. Include the expected behavior and what actually happens. If the issue is device specific, please say so.
> \--\>
> 
> I'm having an issue with setting up collisions with a staggered isometric tilemap created in Tiled. I ran across \[this discussion\](https://phaser.discourse.group/t/setcollisionbyproperty-not-working-the-way-i-think-it-does/2642) outlining the same issue, and I can confirm it's still a problem in 3.55.2. Basically, \`convertTilemapLayer\` does not set the collision bodies for tiles correctly on isometric maps, neither the default rectangle nor the shape specified in the collision layer.
> 
> As suggested in the thread, the issue comes from \`getBounds()\` on the \`Tile\` class. Specifically, \`this.getLeft()\` always returns \`undefined\` for any of the tiles.
> 
> \`\`\`javascript
> getBounds: function (camera, output)
> {
> if (output === undefined) { output = new Rectangle(); }
> 
> output.x = this.getLeft();
> output.y = this.getTop();
> output.width = this.getRight() - output.x;
> output.height = this.getBottom() - output.y;
> 
> return output;
> }
> \`\`\`
> 
> \## Example Test Code
> 
> \<!--
> All issues must have source code demonstrating the problem. We automatically close issues after 30 days if no code is provided.
> 
> The code can be pasted directly below this comment, or you can link to codepen, jsbin, or similar. The code will ideally be runnable instantly. The more work involved in turning your code into a reproducible test case, the longer it will take the fix the issue.
> \--\>
> 
> \`\`\`typescript
> const map = this.make.tilemap({ key: 'map' })
> const tileset = map.addTilesetImage('tileset', 'tiles')
> const ground = map.createLayer('Floor', tileset)
> 
> // property "collides" is set on certain tiles within Tiled
> ground.setCollisionByProperty({ collides: true })
> 
> this.matter.world.convertTilemapLayer(ground)
> \`\`\`
> 
> 
> \## Additional Information
> 
> \<!--
> Is there anything else you think would be useful for us to reproduce the error? Do you have a solution in mind?
> 
> If you have any screen shots or gifs demonstrating the issue (if it can't be seen when running your code), please include those too.
> \--\>
> 
> I'm happy to give solving this a shot myself if you could provide some guidance. 🙂

> [@Phaser isometric tiled map collisions](https://phaser.discourse.group/t/phaser-isometric-tiled-map-collisions/9092/9):
>
> I know this thread is a little old, but I’ve opened an issue on GitHub for it [convertTilemapLayer for isometric tilemaps not setting bodies properly · Issue #5764 · photonstorm/phaser · GitHub](https://github.com/photonstorm/phaser/issues/5764) I think I might also have a solution for it, so thanks everyone here for the investigative work. Turns out that getting the x value in getBounds() just wasn’t supported for any kind of projection that isn’t Orthogonal.

this.player=this.physics.add.sprite(1590,650, “tempplayer”).setDepth(100).setCollideWorldBounds(true);

var map =this.add.tilemap(‘mapData’)  
var mapTiles=map.addTilesetImage(‘mapTileset’,‘mapImg’);  
this.wall =map.createLayer(‘wall’, mapTiles)

this.wall.setCollision({playerCollides: true});

this.physics.add.collider(this.player,this.wall,function(){console.log(“hits wall”)},null,this)  
this.debugGraphics = this.add.graphics();  
map.renderDebug(this.debugGraphics );

Am I misunderstanding something or doing something wrong? Such as the nature of isometric tilemaps prevents collisions or would the bug in the github issue post resolve my issue. Any help would be appreciated.

---

<div class="post-metadata">

**Author:** ![mayacoda](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mayacoda/32/5344_2.png) [@mayacoda](https://phaser.discourse.group/u/mayacoda)\
**Post date:** [August 3, 2021, 7:15pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050/2 "2021-08-03T19:15:07Z")

</div>

I also tried using Arcade physics in the beginning but switched to Matter after going through this tutorial [Modular Game Worlds in Phaser 3 (Tilemaps #4) — Meet Matter.js | by Michael Hadley | ITNEXT](https://itnext.io/modular-game-worlds-in-phaser-3-tilemaps-4-meet-matter-js-abf4dfa65ca1)

> [Matter](http://brm.io/matter-js/) is another JavaScript 2D physics engine. Whereas arcade physics (AP) in Phaser aims to be fast and simple (mainly just axis-aligned bounding boxes and circles), Matter is a more realistic physics simulation engine — complex body shapes, mass, density, constraints, etc.

Specifically, because I’m using Tiled to create my tilemaps and custom polygon collider shapes (both on tiles and as objects), I needed to use a physics engine, in this case Matter, that could handle that. That being said, there is a bug in Phaser–the issues you linked to–which make it impossible to actually create the collision shapes.

I ultimately ended up using my fork of the repo in the project because I need the fix in the PR to get my game working. I hope that offers a little more context on the problem. I do have working collisions in an isometric game, but it was not without its struggles.

---

<div class="post-metadata">

**Author:** ![mayacoda](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mayacoda/32/5344_2.png) [@mayacoda](https://phaser.discourse.group/u/mayacoda)\
**Post date:** [August 3, 2021, 7:17pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050/3 "2021-08-03T19:17:30Z")

</div>

Also, after rendering the object collider polygons, I had problems placing them correctly in the game. Turns out that Matter expects its x and y positions to be the center of the polygon, I’m not exactly sure what Tiled returns for the x and y position of an object. I ended up calculating the center of each polygon based on the vertices (specifically using the same method that Matter uses) in order to place them correctly.

---

<div class="post-metadata">

**Author:** ![daan93](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daan93/32/4588_2.png) [@daan93](https://phaser.discourse.group/u/daan93)\
**Post date:** [August 3, 2021, 8:13pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050/4 "2021-08-03T20:13:59Z")

</div>

I would be very interested to see how you got the collisions working. I also recently switched to tiled for my isometric game. Before I decided not to add collision as I was advised to use 3d for that. But since then I continued building in 2d. I also need to detect clicks on isometric shapes and I have another bug that collision detection could help with.

This is my project:  
[daan93/phaser-isometric-demo: Isometric game demo for Phaser 3 (github.com)](https://github.com/daan93/phaser-isometric-demo)  
[Phaser Webpack Setup (daan93.github.io)](https://daan93.github.io/phaser-isometric-demo/)

---

<div class="post-metadata">

**Author:** ![outera](https://avatars.discourse-cdn.com/v4/letter/o/7c8e57/32.png) [@outera](https://phaser.discourse.group/u/outera)\
**Post date:** [August 5, 2021, 2:30pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050/5 "2021-08-05T14:30:54Z")

</div>

Thanks for your help and that tutorial. I am going to try and switch my game to the matter physics engine and use the fixes you tried and update this post with what I get.

---

<div class="post-metadata">

**Author:** ![outera](https://avatars.discourse-cdn.com/v4/letter/o/7c8e57/32.png) [@outera](https://phaser.discourse.group/u/outera)\
**Post date:** [August 14, 2021, 7:24pm UTC](https://phaser.discourse.group/t/arcade-physics-collisions-with-isometric-tilemap/10050/7 "2021-08-14T19:24:04Z")

</div>

I used the changes in your fork and was able to get tilemap collisions to work , with callbacks, no issues yet. Thanks so much.