Open-Source Courses groups advanced skills that are very useful in all sorts of projects. They are completely free to use and no credits will be needed. Support and new topic ideas are very appreciated to help me keep content quality high.
OSC1: Bitwise/Exponential Tile Mapping
Ever wonder how to correctly connect texture in your game? Did you ever ask yourself how to boost your platformer’s looking style? Have you ever noticed tiles often repeat in most hopscotch projects? You’re in the right place to fix that up! Today, you’ll learn how to make a group of textures fit magically together!
Usually, when we design a texture that we’ll use a lot in our game, we often want to make them universal. In other words, we use the same custom image for the same type of tile.
Although this seems to be a nice idea for many people, making the same texture connect together avoids having players feel this game is too cubic. Plus for other games, this technique is essential (image 2), or it’ll interfere with comprehension - for instance, that weird group of blue circles is a pac-man map that has independent patterns! How ugly!
Now that you understand the problem with independent patterns, let’s jump right into how bitwise mapping works.
Bitwise tile mapping works with the concept of being dependent on each other. A center tile (C) having an active east tile (E) will set its own pattern to the correct one in order to fit with the E tile, but not any of his other neighbours because none of the other neighbours is active.
Woah, woah, I already hear y’all yelling at me “what on earth you mean, tri”. Calm down, I’ll try to explain differently.
Let’s say you have a square tile. It logically has four neighbours: north, south, west, and est. For this lesson, let’s ignore diagonal neighbours ;) I’ve drawn a simple sketch down below:
Each neighbour tile will have an active or inactive status. For instance, this works just like in Spy Guy’s Conway’s game of life, tiles have an alive or dead status. Along with this characteristic, each tile will have a 2^n value. The Est one will have a value equal to 1, the North one, 2, the West one, 4, and finally the South one, 8.
When the two characteristics are mixed together, it gives this pattern: an active cell would have a value mentioned above, and an inactive one has a value of zero.
If you know a little bit of bitwise mapping, you know that the most exciting, interesting and surprising part is coming. A sum of different arrangements of active/inactive neighbours gives a unique index. For example, if the West (4), North (2) and East (1) tiles are active, they make up the sum of 4+2+1=7, and you can verify that no other tile arrangements can have this sum.
|East Tile (1)||North Tile (2)||West Tile (4)||South Tile (8)||SUM|
And that means… you are able to select the right pattern to connect different tiles together, just by doing a simple math! The sum of the neighbours is the index of the picture your code need to select to have an accurate connection. For example, if you have a sum of three, the corresponding pattern is designed specifically to connect with the East and North tiles. Amazing, right?
- Your game design will rise to five levels.
- Fast and efficient method.
- Perfect for water connect puzzles, road connection, pac-man, advanced platformers, etc.
- You have to import 16 times more pictures than what you planned.
- Universal tiles are often nice, and they don’t need individual connections.
Completely free to use, and without credit. If the link does not work, you can use this link while it’s stuck in the filter.
So using this technique or not really depends on your own opinion. Do you want to import a lot more pictures to have your game really look nice, or do you prefer sticking with universal tiles but they are very repetitive? I’ll leave it up for you to decide.
- Your friendly local train company
Open-Source Library Club - Request to join! :)
@Cutelittlepuppydog @Mouldycheese8 @William04GamerA @C.H.Rissole @RoadOcean @Temm @Dragongirl1264 @Friday @Nobody @aadenboy @Innerpanda @Bobinny @Dinocomix @Potato @Crosbyman64 @Liquid @CreativePenguin @The_Wild_Fox @DogIcing @DaughterOfHecate @hrh @creationsofavillager @Cutedogs1Forum @HapPI314 @894 @Dolphin_Blast @Tabitha @Noland @Potato @RoadOcean