Sprite tiling tools

  • Post comments:0 Comments

It is very common that you need to fill rectangular areas when designing 2D game levels, usually to draw backgrounds, with a pattern formed by one or more sprites that repeats infinitely. Unity provides several ways, like using SpriteRenderers or Tilemaps, but they lack from some features I consider necessary to speed up the level building process and incur in a waste of resources that can be easily avoided. In this article, I take an in-depth tour through the functionality of these new sprite tiling tools.

Tiled sprite

The most basic tool that repeats only one sprite. Contrary to SpriteRenderers or Tilemaps, it does not generate one quad per tile but only one quad that contains all tiles. It uses a slightly modified version of the default shaders Unity provides for rendering sprites (like “Sprite-Lit-Default”). This saves GPU and memory.

Since repeating the same sprite may look dull, I added an option to apply some color variations to all the tiles. You can use a “noise” texture (a grayscale image) so a color is applied with more or less intensity to each tile. Besides, you can change the scale of the texture (affects the sampling), how much the color affects tiles or choose the way a color is applied.

There are 4 coloring methods:

  • Add: The color is added. The more light the color is, the more it affects the tile.
  • Add or subtract: The color is added when the noise value is greater or equals 0.5, and subtracted otherwise.
  • Multiply: The color is multiplied. The darker the color is, the more it affects the tile.
  • Alpha blending: The color is applied using alpha blending, where alpha is the noise value. It may replace the color of the tile completely.

One mandatory feature was grid snapping. It affects both resizing and moving. The size of the cells in the imaginary grid is the same as that of the sprite.

The size of the tiles, in world space, depends on the pixels-per-unit of the sprite. If the tiled sprite has a parent, it can optionally inherit its scale so the sprites will look smaller or bigger as the scale of the parent changes.

Additionally, it is possible to change the offset of the tiles to create some kind of visual effects.

Tiled sprite sequence

It keeps all the feature of the Tiled sprite but, instead of repeating one sprite, it repeats a sequence of sprites (it uses a different shader). This may be useful when you want to add some visual variety to a background or when you want to draw a corridor that is decorated with columns, for example, so the column sprite appears every N wall tiles.

When you load a sprite, it examines its texture and loads all the sprites it contains. Those sprites are put into a list from which you can choose which will be included in the sequence and in what order. Currently, the maximum length of a sequence is 64 sprites. Sequences are repeated horizontally and continue at the beginning of the next row if they reach the right side of the rectangle, so the with of the rectangle affects the position of the sprites.

It offers the possibility to generate a random sequence. Every loaded sprite is accompanied by a percentage that indicates how probable it is that the sprite appears in the sequence. These “weights” compete against each other, a 100% does not mean that the sprite is always included but that it is more probable than other that has only a 50%, and equally probable than other that also has a 100%. A value of 0% will discard the sprite from the generation process.

Finally, it also allows you to apply extra randomness the random sequence by using the noise texture mentioned previously, so the grey scale, from 0 (black) to 1 (white), is used to choose the sprite from the array in the shader.

Tile pattern

It keeps all the feature of the Tiled sprite but, instead of repeating one sprite, it repeats a bidimensional pattern of sprites (it uses a different shader). You may need this in cases when you want to represent a figure that repeats but is bigger than a normal tile and requires several of them, like windows or some wall decoration, which requires that tiles appear in a given order.

You can choose up to 16 sprites (a pattern of 4×4 tiles). The pattern starts at the top-left corner and repeats infinitely and is not affected by the size of the rectangle.

Leave a Reply