Hexes and bricks in Mini Micro

The Mini Micro TileDisplay supports a couple of properties whose purpose may not seem immediately obvious: TileDisplay.oddRowOffset: amount to shift odd rows horizontally (0-1) TileDisplay.oddColOffset: amount to shift odd columns vertically (0-1) Both properties have a "typical" range of 0-1, though you can use negative or larger numbers if you wish. A value of 0 means that rows/columns are not shifted at all. A value of 1 for oddRowOffset shifts the odd rows to the right by one full tile width. For oddColOffset, a value of 1 shifts odd columns up by one full tile height. So if either of these properties is nonzero, then you no longer have a rectangular layout of your tiles. You have some wonky layout that varies with the row or column. Yes, but what's it for? There are two places where such a layout is useful. The first is in making something like a brick wall. With an oddRowOffset of 0.5, every other row of bricks is offset by half the brick width — just like in most real brick walls. The setup for such a display looks like this: display(4).mode = displayMode.tile td = display(4) td.tileSet = file.loadImage("/sys/pics/Block.png") td.tileSetTileSize = [td.tileSet.width, td.tileSet.height] td.cellSize = [64,32] td.extent = [12,10] td.oddRowOffset = 0.5 (Want to play with this yourself right now? Click here! Or copy the code from here and paste into your local Mini Micro.) But the second use is far more common: creating a hexagonal tile display. Notice that when you have a brick layout, each brick has six neighbors — they make a sort of squashed hexagonal layout already! So, what if we load a tile set that has hexagonal images? (Obviously the real cells are still rectangular, but the image in each cell could be transparent outside the hexagonal area.) Then, given the same oddRowOffset = 0.5, it might look like this: A good first try, but what about that big vertical gap between the rows? That occurs because of that extra transparent space around each hex. But we can eliminate it by using another TileDisplay property, TileDisplay.overlap. This is the amount, in pixels, by which you want the cells to overlap in X and Y. A value of [0, 16] means to overlap by 0 pixels (not at all) horizontally, but overlap by 16 pixels vertically. The result is just what we need! Code for this one looks like: display(4).mode = displayMode.tile td = display(4) td.tileSet = file.loadImage("/sys/pics/hextiles-55x64.png") td.tileSetTileSize = [55, 64] td.cellSize = [55,64] td.extent = [12,6] td.overlap = [0, 16] td.oddRowOffset = 0.5 Again, you can play with this online here, or grab the full demo program here. OK, but what about oddColOffset? Well, that does the same thing, but with columns instead of rows. We don't often see brick walls built that way, but you could certainly imagine something like a brick road oriented like that. With hex displays, there are two common ways the hexagons are arranged: points up and down, like the ones above; or points sideways, like these: Mini Micro has two hex tilesets in the /sys/pics directory. "hextiles-55x64.png" is the points-up type; each tile is 55 pixels wide by 64 pixels tall. On the other hand, "hextiles-64x55.png" is essentially the same tiles, but points-sideways, with each tile 64 pixels wide and 55 pixels tall. So, using "hextiles-64x55.png" — or your own hex tiles of similar design — you can make a perfect hexagonal layout where the odd columns are offset, instead of the odd rows. Adjusting the demo code is left as an exercise for the reader. Don't forget that you'll need to change td.overlap to overlap in X instead of Y. Conclusion Now the oddRowOffset and oddColOffset properties on TileDisplay are a mystery no longer. Hexagonal layouts are especially common in strategy games, but where else might you put these properties to good use? Share your thoughts below!

Mar 30, 2025 - 04:53

The Mini Micro TileDisplay supports a couple of properties whose purpose may not seem immediately obvious:

TileDisplay.oddRowOffset: amount to shift odd rows horizontally (0-1)
TileDisplay.oddColOffset: amount to shift odd columns vertically (0-1)

Both properties have a "typical" range of 0-1, though you can use negative or larger numbers if you wish. A value of 0 means that rows/columns are not shifted at all. A value of 1 for oddRowOffset shifts the odd rows to the right by one full tile width. For oddColOffset, a value of 1 shifts odd columns up by one full tile height.

So if either of these properties is nonzero, then you no longer have a rectangular layout of your tiles. You have some wonky layout that varies with the row or column.

Yes, but what's it for?

There are two places where such a layout is useful.

The first is in making something like a brick wall. With an oddRowOffset of 0.5, every other row of bricks is offset by half the brick width — just like in most real brick walls.

The setup for such a display looks like this:

display(4).mode = displayMode.tile
td = display(4)
td.tileSet = file.loadImage("/sys/pics/Block.png")
td.tileSetTileSize = [td.tileSet.width, td.tileSet.height]
td.cellSize = [64,32]
td.extent = [12,10]
td.oddRowOffset = 0.5

(Want to play with this yourself right now? Click here! Or copy the code from here and paste into your local Mini Micro.)

But the second use is far more common: creating a hexagonal tile display. Notice that when you have a brick layout, each brick has six neighbors — they make a sort of squashed hexagonal layout already!

So, what if we load a tile set that has hexagonal images? (Obviously the real cells are still rectangular, but the image in each cell could be transparent outside the hexagonal area.) Then, given the same oddRowOffset = 0.5, it might look like this:

A good first try, but what about that big vertical gap between the rows? That occurs because of that extra transparent space around each hex. But we can eliminate it by using another TileDisplay property, TileDisplay.overlap. This is the amount, in pixels, by which you want the cells to overlap in X and Y. A value of [0, 16] means to overlap by 0 pixels (not at all) horizontally, but overlap by 16 pixels vertically. The result is just what we need!

Code for this one looks like:

display(4).mode = displayMode.tile
td = display(4)
td.tileSet = file.loadImage("/sys/pics/hextiles-55x64.png")
td.tileSetTileSize = [55, 64]
td.cellSize = [55,64]
td.extent = [12,6]
td.overlap = [0, 16]
td.oddRowOffset = 0.5

Again, you can play with this online here, or grab the full demo program here.

OK, but what about oddColOffset?

Well, that does the same thing, but with columns instead of rows. We don't often see brick walls built that way, but you could certainly imagine something like a brick road oriented like that.

With hex displays, there are two common ways the hexagons are arranged: points up and down, like the ones above; or points sideways, like these:

Mini Micro has two hex tilesets in the /sys/pics directory. "hextiles-55x64.png" is the points-up type; each tile is 55 pixels wide by 64 pixels tall.

On the other hand, "hextiles-64x55.png" is essentially the same tiles, but points-sideways, with each tile 64 pixels wide and 55 pixels tall.

So, using "hextiles-64x55.png" — or your own hex tiles of similar design — you can make a perfect hexagonal layout where the odd columns are offset, instead of the odd rows. Adjusting the demo code is left as an exercise for the reader. Don't forget that you'll need to change td.overlap to overlap in X instead of Y.

Conclusion

Now the oddRowOffset and oddColOffset properties on TileDisplay are a mystery no longer. Hexagonal layouts are especially common in strategy games, but where else might you put these properties to good use? Share your thoughts below!