Take an image and cut it up into a tile map

Question

So I am attemping to make a game in Phaser.

I am trying to think of the best way to cut this image up and make it in to a tile map OR do I try and lay this entire image as a back ground to the game and just determine where the mouse was clicked.

I believe the images have a width of 140 and a height of 160 or 162. Then I would have to make the four corners of the image transparent so I can overlay them to create the map.

If I want to go with a scrollable background, I am not sure how to proceed, would I overlay hot spots on to the screen and would I have to do a point to hex conversion as I would not have the tile coordinates

Answer 1

Take a look at Tiled. It's a tool for creating 2D tile maps including hex-based maps like the example in your post. Phaser allows you to load tile map data generated by this tool.

Once you've created and exported your map you would do something like this in your preload script:

this.game.load.tilemap('SweetTileMap', 
                       '/images/maps/sweetMap.json', 
                        null,
                        Phaser.Tilemap.TILED_JSON
                      );
this.game.load.image('tiles', '/images/terrain_atlas.png');

Then use it as you would use any other tile map in Phaser. There's a basic tutorial here.