Tutorial for Bit Masking & Autotiling on browsers - 2021
Tutorial for Bit Masking & Autotiling
ENGLISH VERSION
THE GOAL OF THIS EDITOR
This JavaScript Canvas editor was developed to create the levels for the Triogical game.
We have to click to arrange the sprites and it generates the code to copy / paste in the mobile application for Android & iOS.
HOW DOES THE A.I. WORKS TO DRAW WELL-CONNECTED WALLS ?!
Tile Bit masking is a method for automatically selecting the appropriate sprite to intelligently paste it to its neighboring sprites.
Operation is simpler than it looks. Each tile looks at its neighboring tiles to determine which sprite to choose, in this case the diagonals are ignored.
The sheet of 16 sprites above has all the combinations of the walls depending on the turns they take but also their interconnections.
The numbers on each tile represents the bitmasking value
NEIGHBOURS IS THE KEY!
After placing tile 0, if we click to its right to draw the wall, BOTH tiles will change appearance to draw an interconnection.
Tile 0 will be replaced by tile 2.
The tile 8 just created is the complement pasted to the tile 2.
How it works?
We consider that tile 0 is represented by the red square. The "?" square clicked on its right has the value 2. The tile 0 will be replaced by the tile 2.
Then, we consider that the tile "?" is represented by the red square. A sprite is present to its left. The tile "?" will be replaced by the tile 8.
And so on, each sprite will look at its neighbors to determine its own value.
An example with a sprite surrounded by several sprites, we will calculate it:
We will start with the tiles from the top left, going down to the bottom right.
We can calculate the value of each tile around the colored red. North: no tile. East : 1 tile with value 2. South: 1 tile with value 4. West: no tile. So: 1x0 + 2x1 + 4x1 + 8x0 = 6 Which corresponds well to get the tile #6
North: no tile. East : no tile. South: no tile. West: 1 tile with value 8 So: 1x0 + 2x0 + 4x0 + 8x1 = 8
North: no tile. East : 1 tile with value 2.
South: no tile. West: no tile. So: 1x0 + 2x1 + 4x0 + 8x0 = 2
North: 1 tile with value 1. East : no tile. South: no tile. West: 1 tile with value 8. So: 1x1+ 2x0 + 4x0 + 8x1 = 9
So we can calculate all the possible combinations.
BUT HOW SHOULD WE DEFINE OUR OWN TILE NUMBERING AND THEIR ORDER IN THE SPRITE SHEET?!?
In order to define the number of each tile, we can think about it in the following way below:
The tile with no link must be the 0 value tile.
The logic tile under another one must be the tile with value 1, because its drawing is finished to the left, right, and bottom, and the top side must be reattach to another sprite.
The logic tile on the right to another one must be the tile with value 2, because its drawing is finished to the top, left, and bottom, and the right side must be reattach to another sprite.
. . .
etc.
This tile is a "crossroads" because it is central and connected to the other sprites in all directions. It corresponds to the sum 1 + 2 + 4 + 8 = 15
Tutoriel sur le Bit Masking & Autotiling
VERSION FRANÇAISE
LE BUT DE CET EDITEUR
Cet éditeur créé à partir de Canvas et Javascript a été développé afin de créer des niveaux pour le jeu Triogical. Nous devons cliquer pour organiser les sprites et cela génère le code à copier / coller dans l'application mobile pour Android et iOS.
COMMENT FONCTIONNE L'INTELLIGENCE ARTIFICIELLE POUR DESSINER DES MURS BIEN CONNECTES ?!
Le bit masking est une méthode permettant de sélectionner automatiquement la tuile appropriée pour la coller intelligemment à ses tuiles voisines.
Le fonctionnement est plus simple qu'il n'y paraît. Chaque tuile regarde ses tuiles voisines afin de déterminer le sprite à choisir, dans ce cas, les diagonales sont ignorées.
La feuille de 16 sprites ci-dessus comporte toutes les combinaisons des murs en fonction des virages qu'ils prennent mais aussi de leur interconnexions. Les nombres sur chaque tuile représentent la valeur de masquage de bits.
LES VOISINS SONT LA CLE !
Après avoir posé la tuile 0, si on clique à sa droite pour dessiner le mur, les DEUX tuiles vont changer d'aspect pour dessiner une interconnexion.
La tuile 0 sera remplacée par la tuile 2. La tuile 8 venant d'être créée est complémentaire à la tuile 2.
Comment ça marche?
On considère que la tuile 0 est représentée par la case rouge. La case "?" cliquée à sa droite a pour valeur 2. La tuile 0 sera donc remplacée par la tuile 2.
Ensuite, on considère que la tuile "?" est représentée par la case rouge. Une tuile est présente à sa gauche. La tuile "?" sera donc remplacée par la tuile 8.
Et ainsi de suite, chaque tuile va regarder ses voisins pour déterminer sa propre valeur.
Un exemple avec une tuile entourée de plusieurs tuiles, nous allons le calculer :
On va commencer par les tuiles du haut à gauche en descendant jusqu'en bas à droite.
On peut calculer la valeur de chaque tuile autour de la colorée en rouge. Au nord : pas de tuile. A l'est : 1 tuile de valeur 2. Au sud : 1 tuile de valeur 4. A l'ouest : pas de tuile. Soit : 1x0 + 2x1 + 4x1 + 8x0 = 6 Ce qui correspond bien à chercher notre tuile n°6
Au nord : pas de tuile. A l'est : pas de tuile. Au sud : pas de tuile. A l'ouest : 1 tuile de valeur 8. Soit : 1x0 + 2x0 + 4x0 + 8x1 = 8
Au nord : pas de tuile. A l'est : 1 tuile de valeur 2. Au sud : pas de tuile. A l'ouest : pas de tuile. Soit : 1x0 + 2x1 + 4x0 + 8x0 = 2
Au nord : 1 tuile. A l'est : pas de tuile. Au sud : pas de tuile. A l'ouest : 1 tuile de valeur 8. Soit : 1x1+ 2x0 + 4x0 + 8x1 = 9
Ainsi on peut calculer toutes les combinaisons possibles.
MAIS COMMENT ON DEFINI LES NUMEROS DES TUILES DANS LA FEUILLE DE SPRITES ?!?
Afin de définir le numéro de chaque tuile, on peut y réfléchir de la manière suivante ci-dessous:
La tuile n'ayant aucune liaison doit être la tuile de valeur 0.
Le dessin de tuile logique sous une autre tuile doit être la tuile de valeur 1, car son dessin est terminé à gauche, droite et bas, et le haut doit se rattacher à une autre tuile.
Le dessin de tuile logique à droite d'une autre tuile doit être la tuile de valeur 2, car son dessin est terminé en haut, gauche et bas, et le côté droit doit se rattacher à une autre tuile.
. . .
etc.
Cette tuile est un "carrefour" car elle est centrale et connectée aux autres tuiles dans toutes les directions. Elle correspond à la somme 1 + 2 + 4 + 8 = 15
Leave a comment
Log in with itch.io to leave a comment.