TileMaps in Phaser 3 are very popular with developers because they allow us to rapidly build worlds for our players to explore. Not just in Phaser! Most modern game frameworks support TileMaps.<\/p>\n\n\n\n

I’ll admit I’ve had trouble with tileMaps in Phaser 3 before. I kept giving up and writing code to get around them. I finally sat down with some coffee and dove in. I’m not sure what my stumbling block was, but I finally got past it. They are quite easy when you come down to it.<\/p>\n\n\n\n

I found the best way was breaking down the parts.<\/p>\n\n\n\n

I’ve also included some tileMap snippets<\/a> to help get you started<\/p>\n\n\n\n

Parts of a TileMap<\/h2>\n\n\n\n

The map<\/h3>\n\n\n\n

The map object is the top parent object and holds all the other parts of the tileMap. To create a tileMap we need to give dimensions and data to build the the map.<\/p>\n\n\n\n

const map = this.make.tilemap({ data:array, tileWidth: 64, tileHeight: 64});<\/code><\/pre>\n\n\n\n
TileSets<\/h3>\n\n\n\n
Tileset means the collection of tiles that you want to use in the map. This is usually in the form of a png spritesheet image with a transparent background. We add it to the map object with the following code:<\/p>\n\n\n\n
map.addTilesetImage(\"tiles\");<\/code><\/pre>\n\n\n\n
<\/a><\/figure>\n\n\n\n
Layers<\/h3>\n\n\n\n
A layer is an object where you will actually place the tiles.  You can have multiple layers. As the name suggests you can place one layer on top of another. This allows you arrange the z-order of the tiles, so you can place some objects above or below other. It also allows us to detect collisions only from certain layers. <\/p>\n\n\n\n
const layer = map.createLayer(0, \"tiles\", 0, 0);<\/code><\/pre>\n\n\n\n
Data<\/h3>\n\n\n\n
The data consist of either an array or a key to preloaded file (JSON or CVS). In the example below we have an array of sub-arrays. Each number denotes a tile image or keyframe of the tileSet. Each array is a row, and each entry a column. <\/p>\n\n\n\n
 const array=[[0,1,2,22],\n              [17,18,19],\n              [34,35,36]];<\/code><\/pre>\n\n\n\n
Making a map with a multi-dimensional array<\/h2>\n\n\n\n
Here is how looks all together:<\/p>\n\n\n\n
export class SceneMain extends Phaser.Scene {\r\n    constructor() {\r\n        super(\"SceneMain\");\r\n    }\r\n    preload() {\r\n      this.load.image(\"tiles\",\"src\/assets\/tiles.png\");\r\n      \r\n    }\r\n    create() {         \r\n\r\n    \t\/\/make a multi-dimensonial array\r\n        const array=[[0,1,2,22],\r\n                     [17,18,19],\r\n                     [34,35,36]];\r\n\r\n        \/\/make the tile map           \r\n        const map = this.make.tilemap({ data:array, tileWidth: 64, tileHeight: 64});\r\n\r\n        \/\/add the tileset to the map\r\n        map.addTilesetImage(\"tiles\");\r\n\r\n        \/\/add a layer to the map\r\n        const layer = map.createLayer(0, \"tiles\", 0, 0);\r\n    }\r\n    update() {\r\n\r\n    }\r\n}\r\nexport default SceneMain;<\/code><\/pre>\n\n\n\n
<\/a><\/figure>\n\n\n\t
\n\n\t\t\n\t\t
\n\t\t\tFree – Purchase<\/span> <\/span><\/button>Checkout<\/a>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n