How can I get a hexagonal tilemap to work?

Phaser 3
1

I’m trying to get a hexagonal tilemap working, and I haven’t got it to work so far. There are a lot of members in the mapData object passed to this.make.tilemap, and at first glance the only things that look neccesary for a hexagonal tilemap to work are data, tileWidth, tileHeight, orientation, staggerAxis, staggerIndex, and hexSideLength. However, this code here:

map = this.make.tilemap({ data: [[1,2,0]], tileWidth: 200, tileHeight: 200, orientation: "hexagonal", staggeraxis: "y", staggerindex: "odd", hexSideLength: 80 });
tiles = map.addTilesetImage('tiles');
map.createLayer(0, tiles, 0, 0);

creates a orthogonal tilemap. So I tried using the “Tiled” software to make an example tilemap and see what I need for a hexagonal tilemap. Here’s what it came up with:

this.make.tilemap({ 
    "compressionlevel":-1,
    "height":20,
    "hexsidelength":16,
    "infinite":false,
    "layers":[
        {
         "data":[1,2,0],
         "height":20,
         "id":1,
         "name":"Tile Layer 1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":30,
         "x":0,
         "y":0
        }],
    "nextlayerid":2,
    "nextobjectid":1,
    "orientation":"hexagonal",
    "renderorder":"right-down",
    "staggeraxis":"y",
    "staggerindex":"odd",
    "tiledversion":"1.10.1",
    "tileheight":32,
    "tilesets":[
        {
            "firstgid":1,
            "source":"a.tsx"
        }],
    "tilewidth":32,
    "type":"map",
    "version":"1.10",
    "width":30
});

At first I thought that this looks very bloated, and I wasn’t sure if most of this was even necessary. Like, infinite:false? Do I seriously need this? But the thing that confused me most is layers[0].data. Why is it not a 2-dimensional array? Can tilemaps also take 1-dimensional arrays as input? What’s going on?

So, what I want to know is,

  1. What is the bare minimum parameters that I need to pass to make.tilemap to get a hexagonal tilemap? Do I need all of them for it to work?
  2. What’s up with the 1-dimensional array? Can I pass different types of array into this.make.tilemap and still get the same result?

Thank you! :slight_smile:

2

My question has fallen into obscurity. *dramatic camera zoom-out* NOOOOOOOOOOOOOOOOOOO!
Lol :wink:

3

I think not many people have tried this. :slight_smile: Maybe step through in the debugger to see what’s going on.

4

Welp, time to stop using console.log("Hi") and learn how to use the debugger I guess lol :joy:

5

I’ve found some weird things in the phaser.js file and not my script which I think might be causing the issue, but I can’t tell if this WAI or a bug because I don’t know my way around the phaser source :neutral_face:.

  1. Some of the tilemap configuration, including orientation, isn’t being passed to ParseToTilemap at line 210257

My data:

config = {
    "version": 1.8,
    "tiledversion": "1.8.4",
    "data": [ /* There is a 2D array here, but it was big so I removed it for the forum */ ],
    "tileWidth": 188,
    "tileHeight": 176,
    "orientation": "hexagonal",
    "staggeraxis": "y",
    "staggerindex": "odd",
    "hexSideLength": 100
}

phaser.js @ line 210257:

    var c = (config !== undefined) ? config : {};

    return ParseToTilemap(
        this.scene,
        c.key,
        c.tileWidth,
        c.tileHeight,
        c.width,
        c.height,
        c.data,
        c.insertNull
    );
});

See how c.orientation, c.staggeraxis and a whole lot of other stuff is missing?

  1. Only tileWidth and tileHeight is being passed to LayerData() at line 66727, but LayerData is processing orientation and lots of other stuff at line 32024

Line 66727:

    var layerData = new LayerData({
        tileWidth: tileWidth,
        tileHeight: tileHeight
    });

Line 32024:

function LayerData (config)
    {
        /* other processing I cropped out */
        this.orientation = GetFastValue(config, 'orientation', CONST.ORTHOGONAL);
        /* more processing I cropped out */

It’s setting this.orientation (technically mapData.orientation I think?) to config.orientation except if (config.orientation == undefined) { /* set to orthogonal */ }. But orientation was never passed to LayerData() in the first place, so it’ll always be orthogonal!

There’s also a bunch of other confusing stuff where I really have no idea what is going on. If my hunch is correct, the tilemap processing part of phaser is completely messed up and the whole process needs to be looked at by the devs, I’d try doing a fork&fix if I knew the source well but I don’t :neutral_face:
As I said, I don’t know if these are WAI or actual bugs :confused:, hopefully someone can tell me.

Thanks in advance for help! :smiley:
P.S. I was using the .min.js version for debugging until I realised that .min.js wasn’t meant to be read, I scramble egg’d my brain for nothing :joy:

6

I’m not sure creating a hex tilemap through make.tilemap({ data }) is supported. You may have to create the MapData directly and then instantiate the Tilemap yourself. Try stepping through https://labs.phaser.io/view.html?src=src/tilemap\isometric\hexagonal%20test.js&v=dev if you have the patience. :slight_smile:

7

Also check out tilemap/isometric/create isometric manually.

1 Like