Tileset: Provide complete Bitmasks reference textures for 2x2, 3x3 minimal, and 3x3

[golddotasksquestions]

The documentation on Tileset and Tilemaps desperately needs complete example Bitmask textures. Noone really knows how to set them correctly, which just adds to the gigantic clusterfuck of a UI UX fail that this Tileset resouce is. https://github.com/godotengine/godot/issues/37360

[golddotasksquestions]

Having tested them for a while now, I would suggest we add this 2x2 bitmask reference:

and this 3x3 minimal:

Both are from this tutorial. All I did is to make both match the default 64pixel tile size, and make the red a bit brighter (edit: and shaved of some excess pixels; edit2: Remade both from scratch to be pixel perfect.). The red is great because it makes it immediately clear where to draw the bitmask, however with a 100% red the bitmask is impossible to see when drawing it. So in order for users to be able to just use drag it into their project right away and still see the bitmask when the draw it, I made it a bit brighter.

I think we really need a similarly organized 3x3 reference as well, but I have no idea what that would look like and online searches yield no results.

[golddotasksquestions]

I made top down versions for the 3x3minimal, Those would be good additions as well:

green: floor cyan: wall yellow: wall top

"When you want to draw the floor":

"When you want to draw the walls":

"When you want to draw the walls, but have thicker walls" (have to use rectangular subtiles + alpha, otherwise you don't get equally thick horizontal and vertical walls, subtile size is x64 y88 in this case):

"When you want to draw the walls, but have tall walls": (same as above, have to use rectangular subtiles + alpha, subtile size is x64 y184 in this case. Also make sure to set the "Snap Options" Step to x64 y184 and the "Selected Tile" Texture offset to height minus cell size, so x0, y-120):

(note: for an actual topdown game with higher walls you will most likely want a separate autotile + texture only for the floor, and no floor in your wall autotile, to allow the floor to be sorted underneath the player at all times, and the walls partially obstructing the player. Node structure example.)

All of them use the same 64x64 default Tilemap cell size and the same bitmask layout as the 3x3 minimal reference above.

[nightblade9]

For anyone else looking at this as a template in the future, I must point out that the following settings are required for this to work:

• TileMap cell size: 64x64
• Tileset AutoTile BitMask mode: 3x3 (minimal)
• Tileset subtile size: 64x64

Then it works fine. Reference screenshot below.

(If you use 32x32 subtiles, not only does it take forever to mask out, but you end up with just a solid pink blob.)

[golddotasksquestions]

@nightblade9 Yes, I set the size of those templates so it works with the default values, which is 64x64. The idea is with everything default, you just have to drag the texture in, make a new autotile and set the bitmask according to the pattern. For the 3x3 minimal texture you would of course also set the tile setting to 3x3 minimal.

[Calinou]

Thanks for providing templates!

What would be the best way to expose them? Should we create a demo project containing the templates with the correct settings already in use, then refer to it in the documentation? Or should we do something else?

[nightblade9]

@Calinou I think many people - like me - would look at the AutoTile docs and expect to see a template there. I don't know if many people use the demo projects (I never have so far).

[golddotasksquestions]

@Calinou In future, I would envision some sort of bitmask "overlay" or template right within the Tileset editor, but for now I would think adding those templates and reference sheets to the documentation, with a few lines of description saying what they are and why they work well (with the default values). Like I did above. Adding a screenshot of the Inspector settings could also help with the top down versions.

I want to make more templates when I get around to it.

[nightblade9]

I agree with @golddotasksquestions . The best would be to click a button and some "standardized" bitmask applies itself to your tileset, based on some sort of template.

But devs are smart! If you have the template and bitmask in the docs, I think that will be enough for most of us, most of the time. The real time-suck right now is tweaking the tile size + template + bitmask until it works, and then you just never touch it.

[mechPenSketch]

I want to add onto this thread, condensing 3x3 minimal template so that after accounting for flipping and rotating, these tile are all you need. This way, once the feature is ready, the new reference sheet will be ready to be deployed onto the doc.

However, I've noticed that 3x3 is missing a reference sheet, so I guess I can work on that first.

Starting with this 3x3 (minimum) sheet: I can then add on diagonal lines. I will be doing my workings here until I can post the final reference sheet.

Here is my first set: single diagonal connection: I've added lighter pink triangles to illustrate further how the tiles are connected diagonally.

Next is when a tile is connected through diagonally: Here is a double connection, diagonally and opposite.

Add fill-ins for the diagonally connected-through tiles:

Then, tiles that are double connected, diagonally and adjacent:

Add fill them up, concave,

And convex:

And finally, the connection combination between diagonal and h/v vanilla:

And its concave fill: *Note: Blacked out tiles means that trying to fill those corners are impossible.

As well as convex fill: *Note: Similar to concave, certain tiles are blacked out as trying to fill them essentially uses all 9 bitmasks.

I can't do connections from 3 directions and above.

Total new tiles: 4+2+4+4+4+4+16+8+8 = 54

[mechPenSketch]

I think the regular 3x3 should be split into 2 categories based on usage, whether it's for filling space or drawing line. On this basis, 2 templates can be provided.

Following my previous workings, I can do a template for the former. Hopefully, 3x3 doesn't need all 256 tiles, but I need to test whether I can get away with cutting corners.

Now, I have combined all my tiles and tested them out. Here are the screenshots showing my work:

One observation I've made is the near-corners going back to default tiles when it comes to drawing corners. I need tiles with connections from three directions, though they're low-priority. Or perhaps I could learn to ignore bitmask?

Another problem I've found is when it comes to drawing diagonal lines, where there will be cut-in triangular corners. Anyone knows whether that's taken care of?

[golddotasksquestions]

@mechPenSketch The reason why it's not working properly is most likely because you are missing a number of Tiles for a complete 3x3 Tileset, which would have 256 tiles. See here:

https://github.com/godotengine/godot/issues/37360#issuecomment-631051770

If you don't want to include all 256 tiles, you need to add wildcard bits at the right places. It seems like a LOT of work, so I've never done this, but I would certainly appreciate it if you come up with a more ordered bitmask map then the one above.

The proper way to solve this though is probably to automate in some way, much like with baz_a's Tilepipe tool: https://www.reddit.com/r/godot/comments/jkyhj4/ive_made_a_tool_to_generate_tilesets_it_has/

[Bound2bCoding]

I spent about 15 hours creating a grass tileset using the 256 tile template shown above. I assumed the red sub-sections would indicate an edge touching the same kind of adjacent tile and I assumed the white sub-sections did not. The result is something that doesn't look as expected.

Does anyone know what I might have done incorrectly?

[golddotasksquestions]

@devEyesgood Can you share a minimal project with this til set so we can test it?

[Bound2bCoding]

@golddotasksquestions I will happily provide the tileset if it will help figure out the issue. All I did was create a new 2d scene node, add a tilemap to it, create the tileset from the attached image and did the bitmasking as shown. Please note, my image was not created in the same sprite order as the sample I followed, but it does contain every sprite. Also, the tiles are the default size of 64x64. When I switch the bitmask to 3x3 Minimal, of course those tiles are part of the set, so it works. But 3x3 does not seem to.

[Bound2bCoding]

Update: I have figured out the 3x3 bitmask and how I can use it in my game. For those wanting to use 3x3, here is how you set it up.

1. Assuming a 64x64 tile tilemap, create a new image with a size of 1536px x 704px.
2. To get consistence with your individual tiles, stamp the tile above that is 100% filled (row 2, cell 1) and flood-fill it to your entire image. Then, select all of the transparent pixels in the above image, copy, and paste onto your spritesheet. This will create your new tileset.
3. Now, resize the spritesheet by 200%. This will create a tileset of 128px x 128px tiles.
4. Add the spritesheet to your Godot Tileset. Set the Autotile Bitmask Mode to 3x3. Set the Snap Options Step to 64x64. Set the Subtile Size to 128x128. Then, go through the image and set the bitmask for each sub-tile.
5. Save. You now have a properly designed 3x3 tileset.

[Drachenbauer]

I wonder, why everyone here, who creates a full 3x3 bitmask, uses a wide rectangle with a bit empty space in the bottom right corner.

the 256 tiles will fit perfectly in a square of 16x16 tiles: This is the most compact order and holds no empty tiles in this order it´s easy to create all possible combinations of connections. just draw the first two in the top right corner,copy them to the right and in the copied ones add a position, that none of them have yet. repeat these two steps until the row is full and than with rows down until the whole square is filled.

[Bound2bCoding]

I wonder, why everyone here, who creates a full 3x3 bitmask, uses a wide rectangle with a bit empty space in the bottom right corner.

the 256 tiles will fit perfectly in a square of 16x16 tiles: This is the most compact order and holds no empty tiles in this order it´s easy to create all possible combinations of connections. just draw the first two in the top right corner,copy them to the right and in the copied ones add a position, that none of them have yet. repeat these two steps until the row is full and than with rows down until the whole square is filled.

Very good point. I was following a previous template and it was easier to keep track if mine were in the same position.

[golddotasksquestions]

To be honest I tried my own patters for the full 256 3x3 various times and never got it to work. No idea why, where I made the mistake. My only success with full 256 3x3 was thanks to using the TilePipe tool by aleksandrbazhin, which I can really recommend as it saves an infinite amount of time making these.

[SeanRamey]

@Calinou So, what exactly happened to these reference bit masks for all these tileset possibilities?? Seems completely absent from the documentation now.

[nightblade9]

@SeanRamey there are plenty of samples in this issue that you can use.

[SeanRamey]

@SeanRamey there are plenty of samples in this issue that you can use.

Yes, but I'm thinking of others too, not just myself. The docs should have these, and apparently did at some point, but now they dont?

[strawstack]

I often search the internet for the templates that are in this issue. I get frustrated when I can't find them in the docs. The way I found them this time was searching "Godot autotile templates" then looking at images. I though I'll just download what I can and create my own templates from scratch since these templates seems to have largely vanished from the internet. I clicked a link to this post, and it seems like many other people have a similar issue. I guess I'll add these templates to my own repo and start a personal collection then make a Youtube tutorial that links to my repo.

[strawstack]

This video shows off a DualGrid system which it would be nice if Godot supported: https://youtu.be/jEWFSv3ivTg?si=3YpaVI0FArZPbdde

I though maybe I could make an EditorScript or EditorPlugin that would allow me to make a DualTile map tool, but it seems like an EditorScript at least cannot receive events like "tilemap changed" when one is using the editor.

[strawstack]

Here's my repo with various templates if it's useful to anyone: https://github.com/strawstack/GodotTileTemplate Feel free to add an issue if there is another template I should add.

[Bound2bCoding]

I ended up writing my own bitmasking code which, not trying to toot my horn, ended up being a much faster solution for my turn-based survival game. This leaves me with just having to use the 16-tile sprite layout. I have videos up on my YouTube channel which discuss my solution step-by-step if I remember correctly. Here is a link to the video. Thanks for memorializing these templates.