Howdy Game Dev Whizs! Today, you will be learning how to make tilemaps in Phaser 3.60. Firstly, you should create a map using the Tiled Map Editor. There is a blog written by Stack Abuse dedicated to "Creating Tilemaps using the Tiled Map Editor". Feel free to create your tilemap by following the given blog. Then, you can continue with this blog.

Note: For this to work, you should have exported the map as tilemap.json. The Map should have the tile layer name set to "Platforms". And, you should have the tilemap.json and tilesheet.png files in your game directory.

Now, import the tilemap.json and tilesheet.png files into your game file.

import map from './path/to/tilemap.json';
import tiles from './path/to/tilesheet.png';

Then, load the files using the preload function.

preload() {
    this.load.image('tiles', tiles);
    this.load.tilemapTiledJSON('map', map);
}

After that, you want to go to the create function and add the following lines.

create() {
    const myMap = this.make.tilemap({ key: 'map' });
    const tileset = myMap.addTilesetImage('tilesheet', 'tiles');
    const platforms = myMap.createLayer('Platforms', tileset, 0, 0);
    platforms.setCollisionByExclusion(-1, true);
}

Disclaimer: If you use myMap.createStaticLayer or myMap.createDynamicLayer instead of myMap.createLayer in the 3rd line, then it won't work. As createStaticLayer and createDynamicLayer methods only work on Phaser versions below 3.50. In Phaser 3.60, you should use map.createLayer.

If you have been following this tutorial correctly, then you should have the tilemap working in Phaser 3.60. Feel free to comment below if you have faced any problems while following this tutorial.

In my next blog, you will be learning how to add cool one-way platforms to your Phaser 3.60 game.