Rendering a hexagon tilemap with offsets

[eranimo]

Does pixi-tilemap support tilemaps with an offset? I have a tileset that is 32x48 but renders into a hexagon grid of 32*32 with a 2px offset.

Rendering an entire tilemap works, but as soon as I try to update a single tile, it renders it above its neighbor tiles, showing the offsetted parts of the tilemap tile.

Essentially, I need layer sort ordering.

[ivanpopelyshev]

tilemap is made for "clear & refill" approach. Usually map is separated to many chunks, each of those are completely recalculated once something was changed inside.

You tried to redraw tile above itself, it doesnt actually delete its previous instance.

[eranimo]

The problem I'm currently facing is that since I'm using a hexagon tilemap, and tiles can overlap their neighbors slightly, the hexes on the edge of chunks overlap. How do I support that?

[ivanpopelyshev]

Its about math and algorithms, not a low-level solution :)

You use diamond tiles in isometry, right? Make your chunks also diamonds, and follow the same order you usually fill the map.

You can even figure out extra trick of how to cut geometry using 45 degree rotations of texture: https://pixijs.io/examples/#/textures/texture-rotate.js , without actually modifying your textures.

Those things require you to actually think, write something on paper. I'm ashamed that there are no articles about it, but I cant make one right now because there are 10 more pixi plugins on me.

If you dont figure out that stuff after a few hours of thinking, then i can help :)

[eranimo]

What does texture rotation have to do with this? Why does the chunk have to be diamond shaped (and not rectangular?)

[ivanpopelyshev]

Order i which tiles are drawn is important. If you make correct order inside chunks and order of chunks inside map, you'll get your overlaps correct. To make that order you need diamond chunks. For square chunks, "tooth" at the edge wont have correct top-to-bottom overlap.

If you cant imagine what order of tiles in map will give that to you - sorry, there's no way to do that in any renderer, whether its canvas2d , webgl-based or whatever.

Texture rotation is extra trick to cut half of geometry, dont bother with it yet :)

[eranimo]

Given that I have a rectangular map, I don't think diamond shaped chunks would work. Also, I have flat-topped hexagons. Is that a problem here?

[ivanpopelyshev]

oh, hexagons.. sorry :)

so you cant make them square because of same reason - at the left and right sides it has "tooth". but you can make parallelograms or hexes.

First try to refill whole visible culled part of map, then make chunks. Difficulty depends on your coordinate system.

[eranimo]

Thank you for the visualization and answering questions, it's been a great help. I still don't quite understand how having the chunks in this shape changes anything. It seems that the problem is still that the chunk has a single layer, but each hex on the chunk edge needs to "interweave" (or "tooth" as you put it) with hexes in the other chunks (since I have flat topped hexagons the top left, top, and top right of each hexagon can overlap onto the hexes above it)

I have a feeling that chunked rendering with flat-topped hexes is just impossible because of the above reason. If I had pointy-top hexes, there would only be direction of overlap. Does that sound correct?

[ivanpopelyshev]

look around one hex.If you draw naively, top hexes and left hex are drawn under it.

If you use chunks like I drawn, that invariant wont be broken, there's no teeth.

[ivanpopelyshev]

Maybe its your time to draw?

[eranimo]

Should every chunk be its own CompositeRectTileLayer instance?

[ivanpopelyshev]

yes, that's the point. You can clear & refill them independently. Each one means one webgl drawcall (every frame), one vertex buffer upload (when its changed).

Refill is just double-For that can also check for autotiles if you have them.

[eranimo]

Got it. So I've tried with square chunks (I have a rectangular map, not sure how to have any other shape) Map size is 150x100, with 10x10 chunks. I'm rendering the chunks in top-left order (hexes as well).

This is what the edges of the chunks look like:

Right below the black edge you can see brown, that's not supposed to be cut off. The top sides of the hexes do overlap correctly.

For reference, this is the tileset: (black edges aren't supposed to be rendered)

How does diamond shaped chunks solve anything? Wouldn't I still have overlapping issues, just no longer in this pattern?

[ivanpopelyshev]

Show me one chunk