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

enter image description here

  • 2
    \$\begingroup\$ Hi Mike. That map appears to belong to Dwarfstar Games (or one of their collaborators) for the tabletop game Barbarian Prince. Is it released under a license that allows you to use it? We cannot condone or assist in illegal activities such as copyright violation, since that compromises our site's integrity. We cannot advise you on that particular map, but we can advise on chopping up hexagonal maps on principle. In this scenario, I suggest you find a hexagonal map you do have license to use for an example. \$\endgroup\$ Jul 22, 2017 at 20:11
  • \$\begingroup\$ Sure.. this was more of a programming practice exercise that I wanted to build a tool for my self. I never intended to release or resell the final product. from the website PLEASE NOTE: These games and files are NOT released into the public domain. You MAY NOT not sell these files or charge a fee for access to them. You MAY NOT distribute these files except as authorized by Reaper Miniatures. PLEASE RESPECT THE TERMS OF THE DISTRIBUTION AGREEMENT so that these files can remain available for free download. \$\endgroup\$
    – Mike
    Jul 22, 2017 at 20:47
  • \$\begingroup\$ Also if you were going to chop up a map into hexagon tiles, are there tools you would recommend and is there a program like tiled that works with "flat top" hexagonal maps \$\endgroup\$
    – Mike
    Jul 23, 2017 at 0:44

1 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.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.

  • \$\begingroup\$ @JRR is there a way to set up named tiles on a 'Tiled' editor tileset? so that i can use different tilesets for the same tilemap without relying on their indices solely \$\endgroup\$
    – ivan866
    Apr 7 at 16:55
  • 1
    \$\begingroup\$ @ivan866 there probably is. Been a while for me. If I had to do it manually I would use an object with named keys that would point at the generated tile resources - even if the reference was to the index. Pseudo code: {waterTile: 0, rockTile: 1} or something like that. \$\endgroup\$
    – JRR
    Apr 8 at 21:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .