Grid Tiling: Mixing Multiple Tiles
I think many of the game programmers were thinking about how to implement a convenient map-tiling. Only by presenting all sorts of combinations of blends, you can pretty well break your brain - I tried several times to depict any easy-to-use algorithm that would allow you to display a variety of tile cards. The fact that this turned out - and it turned out something quite simple to implement - can be found below.
How many times do textures need to be mixed in order to draw various combinations of two tiles on a grid field? And by adding additional tiles, this number increases to such numbers that it’s even scary to think about. Let us forget about all these difficulties for the moment and dive into the consideration of combinations in order to identify any patterns that will help us overcome the difficulties of mixing.
')
Let's start with mixing two tiles. In Figure 1, I depicted the simplest tile markup "as is", and in Figure 2 - something that we want to have in the end.
In Figure 3-4, you can see more complex markup. The number of various combinations is quite large (and we remember the upcoming addition of new tiles), and we need to find a pattern that will help simplify the task.
In the process, I managed to draw a hefty amount of these very combinations and eventually came to this decision - if you divide the tile into 4 parts, you can determine its appearance from just 3 adjacent tiles. Let's look at 5 different blending patterns:
A small square in a yellow frame is part of the tile that we are trying to describe. How it will look is determined by adjacent HVC files.
H - adjacent horizontal (Horizontal)
V - vertically adjacent (Vertical)
C - Corner Tile (Corner)
Using these notations, you can notice a similar pattern for the remaining 3 parts of the tile, which means that by inventing an algorithm for one part, we can easily extend it to the entire tile.
As a result, we have 3 adjacent tiles, which means only 8 different combinations of them. Why did I depict only 5 templates? Let's look at these combinations:
HCV (all adjacent tiles of the same type as the one under consideration): pattern 5 (draw part of the tile “as is”)
HV (H and V-tiles are the same, the tile in the corner is different): pattern 4
--V or -CV : pattern 3 (two combinations mutated into one pattern - this simplifies things; you can draw them and see what can really be done with just one picture)
H-- or HC- : pattern 2
--- or -C- : pattern 1
The original heap of combinations has decreased to just 8 or even more — we only need 5 different patterns for any tile layout. Moreover, the pattern number 5 is very simple - we draw our part of the tile without any mixing. It turns out that for each part you need to get 4 different blending masks for templates 1-4. Considering the fact that we have twice spread the tile, we will need a 4x4 mask, with which we can mix the layout of two tiles in any variants.
Mask for one part of the tile
4x4 mask
Pretty boring, isn't it? Naturally, you can come up with something more beautiful; To demonstrate what is happening, I will use just such a mask.
The first picture is the mask for that part of the tile that we examined a little earlier, and the second is the combination of masks for all four parts:
- upper-left part (the order corresponds to the numbers of templates: 1-2-3-4)
- upper-right part
- bottom-right side
- lower-left part
The mask represents the alpha channel for rendering the blending tile. That is, first we draw the base tile, and then use the mask to put the corresponding part of the second tile on top.
And here is the result of the work of the described algorithm for abstract tile marking (using the presented mask). Of course, instead of boring monotone-colored tiles, you can use textures, and if you work a little on the mask, you can get a fairly beautiful surface.
Summarizing the above, the algorithm is as follows:
- draw tile-1
- draw mask 2 on mask
So, with the mixing of two tiles, we’ll assume that we’ve got it. How about adding a couple more?
First we decide on the sequence. Want to know what happens if we replace the order of drawing tiles, that is, we start with tile 2, and put the mask on the first one? Here is a picture:
Very different, isn't it. That is, order matters. We draw the first tile, and on top we impose the second one. Any ideas on the third? Elementary - just add a new layer on top of the image that we received earlier. True, there are a couple of points that need to be taken into account.
First you need to decide which tile you need to draw first, which second and so on. Imagine a kind of green field with burned spots of yellow grass and flowing over the river. Obviously, we draw the green field first. Now we put a layer of yellow grass on top and at the same time remember that it will be necessary to add a river on top.
When calculating the mask for marking yellow grass, it is necessary to consider the river tile the same as yellow (remember the HCV templates? For example, if all these tiles are river, we think that pattern 5 is appropriate). And to calculate the mask for the river, all previously drawn tiles are considered alien (in a similar HCV example, template number 1 will be needed).
Let us follow the algorithm. Suppose the green field is tile-1 (the first one in the stack), yellow grass is tile-2, and the river is tile-3.
- draw the whole grid with tile-1 - generate a mask for each tile, while all tiles smaller than 2 represent the black color of the mask (fully transparent), and those that are larger or equal are white (drawn)
- we draw tile-2 (at the same time all tiles are drawn, starting from the second, moreover, as tile-2!)
- generate a second mask, now all tiles, less than 3 - transparent, 3 or more - are drawn
- we draw tile-3
- ... (continue until the tiles run out)
Sounds easy? Especially in comparison with the complexity of combining each pair of tiles with each other. If my explanation is not as smart as I expected - just look at the phased work of the algorithm on the screenshots, this should clarify the situation:
(Sorry for the two intersecting rivers. All for the sake of tiling!)
Here is such a basic idea. You can use different masks when drawing different layers. Mixing our yellow grass and green field can be done with one mask, and for the more pleasant river banks you can choose another. You can also think about the additional texture - for the same pretty shores, only alpha will not be enough, so why not put on a mask like a marked-up special texture. In general, there is room for thought when using this algorithm, so long as it all fits into the imagination and possibilities of iron. I hope you find this method useful, or at least it suggests some interesting ideas!
* Small postscript: historically, I first wrote this article in English. Perhaps if I hadn’t been looking at the original when writing the Russian version, the language would have been more human; at least I tried! In any case, I apologize for the sudden hard-to-read speed.
How many times do textures need to be mixed in order to draw various combinations of two tiles on a grid field? And by adding additional tiles, this number increases to such numbers that it’s even scary to think about. Let us forget about all these difficulties for the moment and dive into the consideration of combinations in order to identify any patterns that will help us overcome the difficulties of mixing.
')
Let's start with mixing two tiles. In Figure 1, I depicted the simplest tile markup "as is", and in Figure 2 - something that we want to have in the end.
In Figure 3-4, you can see more complex markup. The number of various combinations is quite large (and we remember the upcoming addition of new tiles), and we need to find a pattern that will help simplify the task.
In the process, I managed to draw a hefty amount of these very combinations and eventually came to this decision - if you divide the tile into 4 parts, you can determine its appearance from just 3 adjacent tiles. Let's look at 5 different blending patterns:
A small square in a yellow frame is part of the tile that we are trying to describe. How it will look is determined by adjacent HVC files.
H - adjacent horizontal (Horizontal)
V - vertically adjacent (Vertical)
C - Corner Tile (Corner)
Using these notations, you can notice a similar pattern for the remaining 3 parts of the tile, which means that by inventing an algorithm for one part, we can easily extend it to the entire tile.
As a result, we have 3 adjacent tiles, which means only 8 different combinations of them. Why did I depict only 5 templates? Let's look at these combinations:
HCV (all adjacent tiles of the same type as the one under consideration): pattern 5 (draw part of the tile “as is”)
HV (H and V-tiles are the same, the tile in the corner is different): pattern 4
--V or -CV : pattern 3 (two combinations mutated into one pattern - this simplifies things; you can draw them and see what can really be done with just one picture)
H-- or HC- : pattern 2
--- or -C- : pattern 1
The original heap of combinations has decreased to just 8 or even more — we only need 5 different patterns for any tile layout. Moreover, the pattern number 5 is very simple - we draw our part of the tile without any mixing. It turns out that for each part you need to get 4 different blending masks for templates 1-4. Considering the fact that we have twice spread the tile, we will need a 4x4 mask, with which we can mix the layout of two tiles in any variants.
Mask for one part of the tile
4x4 mask
Pretty boring, isn't it? Naturally, you can come up with something more beautiful; To demonstrate what is happening, I will use just such a mask.
The first picture is the mask for that part of the tile that we examined a little earlier, and the second is the combination of masks for all four parts:
- upper-left part (the order corresponds to the numbers of templates: 1-2-3-4)
- upper-right part
- bottom-right side
- lower-left part
The mask represents the alpha channel for rendering the blending tile. That is, first we draw the base tile, and then use the mask to put the corresponding part of the second tile on top.
And here is the result of the work of the described algorithm for abstract tile marking (using the presented mask). Of course, instead of boring monotone-colored tiles, you can use textures, and if you work a little on the mask, you can get a fairly beautiful surface.
Summarizing the above, the algorithm is as follows:
- draw tile-1
- draw mask 2 on mask
So, with the mixing of two tiles, we’ll assume that we’ve got it. How about adding a couple more?
First we decide on the sequence. Want to know what happens if we replace the order of drawing tiles, that is, we start with tile 2, and put the mask on the first one? Here is a picture:
Very different, isn't it. That is, order matters. We draw the first tile, and on top we impose the second one. Any ideas on the third? Elementary - just add a new layer on top of the image that we received earlier. True, there are a couple of points that need to be taken into account.
First you need to decide which tile you need to draw first, which second and so on. Imagine a kind of green field with burned spots of yellow grass and flowing over the river. Obviously, we draw the green field first. Now we put a layer of yellow grass on top and at the same time remember that it will be necessary to add a river on top.
When calculating the mask for marking yellow grass, it is necessary to consider the river tile the same as yellow (remember the HCV templates? For example, if all these tiles are river, we think that pattern 5 is appropriate). And to calculate the mask for the river, all previously drawn tiles are considered alien (in a similar HCV example, template number 1 will be needed).
Let us follow the algorithm. Suppose the green field is tile-1 (the first one in the stack), yellow grass is tile-2, and the river is tile-3.
- draw the whole grid with tile-1 - generate a mask for each tile, while all tiles smaller than 2 represent the black color of the mask (fully transparent), and those that are larger or equal are white (drawn)
- we draw tile-2 (at the same time all tiles are drawn, starting from the second, moreover, as tile-2!)
- generate a second mask, now all tiles, less than 3 - transparent, 3 or more - are drawn
- we draw tile-3
- ... (continue until the tiles run out)
Sounds easy? Especially in comparison with the complexity of combining each pair of tiles with each other. If my explanation is not as smart as I expected - just look at the phased work of the algorithm on the screenshots, this should clarify the situation:
(Sorry for the two intersecting rivers. All for the sake of tiling!)
Here is such a basic idea. You can use different masks when drawing different layers. Mixing our yellow grass and green field can be done with one mask, and for the more pleasant river banks you can choose another. You can also think about the additional texture - for the same pretty shores, only alpha will not be enough, so why not put on a mask like a marked-up special texture. In general, there is room for thought when using this algorithm, so long as it all fits into the imagination and possibilities of iron. I hope you find this method useful, or at least it suggests some interesting ideas!
* Small postscript: historically, I first wrote this article in English. Perhaps if I hadn’t been looking at the original when writing the Russian version, the language would have been more human; at least I tried! In any case, I apologize for the sudden hard-to-read speed.
Source: https://habr.com/ru/post/226787/
All Articles