OSC1: Bitwise/Exponential Tile Mapping

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!

The problem with independent/universal patterns

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.

How bitwise/exponential tile 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.

Image 4: GIF explaining bitwise/exponential tile mapping’s math. All right reserved.

East Tile (1) North Tile (2) West Tile (4) South Tile (8) SUM
0 0 0 0 0
1 0 0 0 1
0 2 0 0 2
1 2 0 0 3
0 0 4 0 4
1 0 4 0 5
0 2 4 0 6
1 2 4 0 7
0 0 0 8 8
1 0 0 8 9
0 2 0 8 10
1 2 0 8 11
0 0 4 8 12
1 0 4 8 13
0 2 4 8 14
1 2 4 8 15

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?

Pros and Cons

Pros

  • Your game design will rise to five levels.
  • Fast and efficient method.
  • Perfect for water connect puzzles, road connection, pac-man, advanced platformers, etc.

Cons

  • You have to import 16 times more pictures than what you planned.
  • Universal tiles are often nice, and they don’t need individual connections.

Example Project

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 :steam_locomotive:


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

18 Likes

Download this PDF so you can read the OP anywhere, anytime! :coffee:


Rate this tutorial! :D
  • 1
  • 2
  • 3
  • 4
  • 5

0 voters

11 Likes

its here! Nice topic

2 Likes

Nice topic

3 Likes

btw @StarlightStudios, this morning when i was re-reading everything, i thought of your newest game - if you using bitwise mapping and images are drawn correctly, your project will look crazy nice

7 Likes

Yes, I know this would be perfect! One problem though is that the edges of the tiles get cut off so it would be hard to make this work, I will try to find a way once I understand this lol!

5 Likes

I am def going to try this out

3 Likes

I’ve heard of something similar called “Wave Function Collapse,” which basically lays tiles that connect to adjacent tiles.

The collapse part come from the fact as the tiles are laid, less types of tiles are able to connect to that tile.


Your system could also be used to automatically connect tiles together to make a large tile, which makes it easier to design things like levels in games.

4 Likes

yep, this is exactly the point of this topic! i haven’t seen this yet in hopscotch and i’m really curious what projects hopscotchers can make with this algorithm


small note: added a poll in post 2

3 Likes

Can i join the tag?
Great topic! This was really confusing

2 Likes

I’m thinking about using this method actually because I found a way to use it in my zoo game! (It won’t be the same code since I might’ve made a way that’s easier for me to understand but we’ll see! [ and whether you like it or not ill still give credit hehe /lh ] )

2 Likes

basically, if you add the sum of neighbours tiles, you come up to a number between 0 and 15. each number are given by an unique arrangement of tiles, which means you can identify tiles from 0 to 15 and use this characteristic to connect tiles together

you can also look at my example project, too!

added!

nice, i’m glad! and it’s normal we don’t have the same code, my project was just an example - there’s a ton of way to implement this! :hs_bear:

hm ok, your choice lol :D thx!

5 Likes

AHHHHH I know I’ll find a bug right after I say this but I tested it out and made tiles under stone blue if the tile was stone and it worked! (basically i implemented it right so far )

3 Likes

really awesome tutorial, super thorough and well explained.
feel free to tag me as well :))

4 Likes

thank you :D and added!

3 Likes

indeed this is not the right topic - i’ll go create a topic in #debug-my-code for all hopscotch project questions about osl

edit: all questions about your draft’s code go here!

1 Like

Oops ok I’ll put this there

1 Like

Nice – I love the idea of nine slice in Hopscotch (it’s called nine slice because there’s nine possible pieces of each building block – top left, top, top right, etc. – even if some are repeated)

Quick question – #-opensource_library seems like it could be a tagged that others might use as well if they have open source code snippets to share. I see you put it as a user tag though – were you planning to use the tag for just your topics? (I think something like tri-library, polygon-library, or something like that would make it easier to tell that it’s one of your open source libraries, if that makes sense

And also, did you mean for the link to be attached to the topic? (@Tri-Angle)
image

5 Likes

so “nine slice” is the real name of the algorithm? because i have no clue what’s the real name so i invented “bitwise tile mapping” for it lol
but when i type nine slice it gives me pizzas or bananas so im a little bit confused

yep, however i’d like to keep it like so because the user tag implies that this tag belongs to someone specifically, and in that case i want the tag to be as clear as possible: a library of open source topics/ideas/algorithm :)

yes lol, however it did not work this time

3 Likes

Hmm, okay. I found it confusing because open source libraries aren’t all one person’s thing but rather just a subject that anyone can add to. My thought is that you should have #-opensource_library and something like #tri-angle-opensource or a tag of similar name

Will do the magic again then if you want

3 Likes