Randomly generated tile map with custom sized wall collision boxes in Arcade

Phaser 3
1

Hey everyone!

I’m currently creating a dungeon crawler where the map is auto generated at the start. My tile size is 32x32, but my wall tiles have different sizes, depending on if it is a top, left, right or bottom wall tile.

I already managed to do that with Matter physics and an empty map from Tiled where I only load the Tilesets and where I set the collision boxes for every tile in the Tile collision editor.
Here is a picture of what that looks like at the moment:

wall-tiles_matter
wall-tiles_matter1011×526 47.8 KB

But to be honest is Matter quite the overkill for that, because I only really need this special treatment for the wall tiles.

Therefore I would like to do that with Arcade physics and after a long research I think the best way is to make an object layer out of my wall tiles. Or in other words: I will give every wall tile an Image with a custom body. But I can’t seem to manage to create such an object layer.
These are my current problems with that approach:

  • I can’t seem to get the image which was used for the specific tiles. So for example if I’m currently replacing the first wall tile with an object, I do know where that tile is, like the x and y coordinates, but how do I get the image from that specific tile so I can assign it to the object?
  • There are a couple of different wall tiles, like 8 different kinds of bottom walls, which are all set randomly. Therefore I don’t know what collision box a tile needs without any further information. I tried it with custom properties on the tile itself and on the collision boxes in Tiled, but they are nowhere to be found when I have the tile in phaser. I don’t know if that’s just a bug with the latest version of Tiled and Phaser or if I’m just too dumb to find them because I saw a lot of posts which stated that they should be somewhere.

It would be really great if someone could help me here, or show me some directions if there is a way easier path to create a randomly generated tile map with custom sized wall collision boxes.

Note: I’m using Phaser 3.55.0 and Tiled 1.8.2

2

:wave:

The map is autogenerated in Tiled or in Phaser?

In Phaser you can modify the tile width and height directly but it’s always against tile origin (0, 1), bottom-left.

If you eventually convert the tiles to sprites (game objects) then you’ll need to load the tileset image as a spritesheet; then you can select the right frame for the tile.

3

The map is autogenerated in Phaser, because I create it everytime a player loads the game.

Shrinking the width/height of tiles also resizes the picture/asset of that tile. Just tried it and set every wall tile to half its width and height, and they are now all just a smaller version of that tile. Don’t know if you meant that?

Regarding loading the tileset as spritesheet…so there is no way to get the specific asset used for a tile directly from the tile itself? Like “object.image = tile.image” or something of that sort?

And the problem still persists that the custom properties I set in Tiled are nowhere to be found. Can’t find them when I use Matter nor while using Arcade.

4

I think that’s a Phaser bug, WebGL only.

The texture is in tile.tileset.image.

Look in tile.properties and tileset.getTileData(gid) and tileset.getTileProperties(gid).

5

I couldn’t get the asset out of the tileset from one specific tile, but tileset.getTileData(gid) gives me all the custom properties I set and even the collision boxes I created for that tile!

So I will just create an extra layer or an object group where I will set all the collision boxes, and let the wall tiles/images be build as it is now.

Thanks a lot!