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

Created on 28 Mar 2020  路  8Comments  路  Source: godotengine/godot-docs

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

enhancement

Most helpful comment

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":
complete_3x3min_drawing_floor

"When you want to draw the walls":
complete_3x3min_drawing_wall

"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):
complete_3x3min_drawing_wall_thicc

"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):
complete_3x3min_wall_tall

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

All 8 comments

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

and this 3x3 minimal:
complete_3x3min_bitmask

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.

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":
complete_3x3min_drawing_floor

"When you want to draw the walls":
complete_3x3min_drawing_wall

"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):
complete_3x3min_drawing_wall_thicc

"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):
complete_3x3min_wall_tall

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

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

image

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

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?

@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).

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

clayjohn picture clayjohn  路  4Comments

youreperfect picture youreperfect  路  3Comments

eon-s picture eon-s  路  3Comments

jcmonkey picture jcmonkey  路  4Comments

RiverMesa picture RiverMesa  路  4Comments