Autotile sprites with Bit Masking

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.

Sheet of 16 sprites

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!

Bit masking for autotile

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.


Bit masking for autotile

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

Bit masking for autotile

North: no tile.  East : no tile.
South: no tile.  West: 1 tile with value 8
So: 
1x0 + 2x0 + 4x0 + 8x1   =   8

Bit masking for autotile

North: no tile.  East : 1 tile with value 2.
South: no tile.  West: no tile.
So: 
1x0 + 2x1 + 4x0 + 8x0   =   2

Bit masking for autotile

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?!?


Sheet of 16 sprites

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.

Bit masking for autotile

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.

Bit masking for autotile

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.

Bit masking for autotile

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.

Feuille de 16 sprites

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 !

Bit masking pour gérer les tuiles automatiquement

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.


Bit masking pour gérer les tuiles automatiquement

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

Bit masking pour gérer les tuiles automatiquement

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

Bit masking pour gérer les tuiles automatiquement

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

Bit masking pour gérer les tuiles automatiquement

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 ?!?


Feuille de 16 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.

Bit masking pour gérer les tuiles automatiquement

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.

Bit masking pour gérer les tuiles automatiquement

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.

Bit masking pour gérer les tuiles automatiquement

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


THE EDITOR IN ACTION!

Leave a comment

Log in with itch.io to leave a comment.