Problem #3: Making a tilemap

Oh hell, it took me some time to really understand how to make a tilemap.

1. Firstly, you have to have a tilemap editor.
In this case, I chose the most popular tilemap editor, Tiled. The reason is mostly because when I tried to google things related to tilemap, most people refer to Tiled as the editor they're using. So I guess it will be easier for me to ask around when I have any problem.

2. After making new tilemap, go to Map - New Tileset, and choose the tilemap texture that you have. If you don't have any, you can choose one given in Phaser first tutorial.

3. Take note of the name of your layer:

In the picture above, the name of the layer is "Tile Layer 1". This is the name that you will have to put in your code later.

4. In this case, I only use 1 tile, which is the first green tile (among many other green tiles). If you right-click on the tile, you can see the properties.

Select Tile Properties, and you can give it a property by double-clicking on the name and the value.

5. Save your map as .JSON file. If you open the file in your text editor, you will see that there's a number on the tile that you gave properties.

In the case above, I gave another property of "Test2" to another tile. The number above the property is the Tile ID. So my first tile with the property "Test" has Tile ID of 185, and "Test2" has Tile ID of 235. Knowing your tile ID is very important to set collision. I find giving properties to each of your tiles quite tedious. If anybody knows the easier way to see the tile ID, please tell me.

(To be honest I don't even think you need to do all those steps. It's just that I don't know how to see the tile ID, although I can still work around it)
(Since it's my first time working with tilemap, it took me hours to understand all of the above)

6. Now we go back to coding!
In the function preload(), load your map and tiles:

game.load.tilemap('map', 'assets/test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'assets/platform.png');

Don't forget to declare your map and layer.

In the function create(), add:

map = game.add.tilemap('map');
map.addTilesetImage('testmap', 'tiles');
map.setCollisionBetween(0, 10);
 
layer = map.createLayer('Tile Layer 1');
layer.resizeWorld();

The setCollisionBetween() means the tiles with the ID from 0 to 10 will collide with our sprites. This is easier, since I can just put setCollisionBetween(0, 500) and thus even if I don't know the tile ID, chances are it will be between 0 and 500.
In the function map.createLayer(), you have to put the name of the layer in your .JSON file, which in my case is "Tile Layer 1".

And voila, you're done. It's so easy it makes me wonder why I spent hours trying to get it right.

Now that I'm done working with the game mechanic, I can start making the sprites :3