Tutorial for Bit Masking & Autotiling on browsers - 2021

АНГЛИЙСКАЯ ВЕРСИЯ

ЦЕЛЬ ЭТОГО РЕДАКТОРА

Этот редактор JavaScript Canvas был разработан для создания уровней для игры Triogical.

Нам нужно щелкнуть, чтобы упорядочить спрайты, и он генерирует код для копирования/вставки. мобильное приложение для Android и iOS.

КАК ИИ РАБОТАЕТ ДЛЯ РИСОВАНИЯ ХОРОШО СОЕДИНЕННЫХ СТЕН?!

Маскирование битов плитки – это метод автоматического выбора соответствующего спрайта для интеллектуальной вставки его в соседние спрайты.

Операция проще, чем кажется.
Каждая плитка смотрит на соседние плитки, чтобы определить, какой спрайт выбрать, в этом случае диагонали игнорируются.

На приведенном выше листе из 16 спрайтов есть все комбинации стен в зависимости от поворотов, которые они совершают, а также их взаимосвязи.

Числа на каждой плитке представляют значение битовой маски

СОСЕДИ ЭТО КЛЮЧ!

После размещения плитки 0, если мы щелкнем справа от нее, чтобы нарисовать стену, ОБЕ плитки изменят внешний вид, чтобы нарисовать соединение.

Плитка 0 будет заменена плиткой 2. Только что созданная плитка 8 является дополнением, приклеенным к плитке 2.

Как это работает?

Мы считаем, что тайл 0 представлен красным квадратом. "?" квадрат, по которому щелкнули справа, имеет значение 2. Плитка 0 будет заменена плиткой 2.

Тогда мы считаем, что плитка "?" представлен красным квадратом. Спрайтприсутствует слева от него. Плитка "?" будет заменен плиткой 8.

И так далее, каждый спрайт будет смотреть на своих соседей, чтобы определить собственное значение.

Пример со спрайтом, окруженным несколькими спрайтами, мы его посчитаем:

Мы начнем с плиток сверху слева, спускаясь к нижнему правому углу.

Мы можем рассчитать значение каждой плитки вокруг красного цвета.
Nсевер: плитки нет. Восток: 1 плитка со значением 2.
Юг: 1 плитка со значением 4.  Запад: без плитки.
Итак:
1x0 + 2x1 + 4x1 + 8x0   =   6
 
Что хорошо соответствует плитке #6
Nсевернее: нет плитки. Восток : без плитки.
Юг: без плитки. Запад: 1 плитка со значением 8
Итак: 
1x0 + 2x0 + 4x0 + 8x1   =   8

N< strong>север: нет плитки. Восток: 1 плитка со значением 2.
Юг: нет плитки. Запад: нет плитки.
Итак: 
1x0 + 2x1 + 4x0 + 8x0   =   2

N восток: 1 плитка со значением 1.  Восток : без плитки.
Юг: без плитки. Запад: 1 плитка со значением 8.
Итак: 
1x1+ ​​2x0 + 4x0 + 8x1   =   9

Таким образом, мы можем рассчитать все возможные комбинации.

НО КАК МЫ ДОЛЖНЫ ОПРЕДЕЛИТЬ НАШУ СОБСТВЕННУЮ НУМЕРАЦИЯ ПЛИТОК И ИХ ПОРЯДОК В THE SPRITE SHEET?!?

Чтобы определить номер каждой плитки, мы можем подумать об этом следующим образом:
Плитка без ссылки должна быть плиткой со значением 0.

Плитка логики под другой одна из них должна быть плиткой со значением 1, потому что ее отрисовка слева, справа и снизу завершена, а верхняя сторона должна быть присоединена к другому спрайту.

Плитка логики справа к другой одна из них должна быть плиткой со значением 2, потому что ее отрисовка закончена сверху, слева и снизу, а правая сторона должна быть повторно присоединена к другому спрайту.

. . .

и т. д. Эта плитка является «перекрестком», потому что она центральная и соединена с другими спрайтами во всех направлениях.
Это соответствует сумме 1 + 2 + 4 + 8 = 15

ВЕРСИЯ  ФРАНЦУЗСКАЯ

LE BUT DE CET EDITEUR

Cet éditeur creé à partir of Canvas et Javascript a été développé in creer des niveaux pour le jeu Triogical.
Nous devons clicker pour organiser les sprites et cela génère le code à copier / используется в мобильных приложениях для Android и iOS.

КОММЕНТАРИЙ, ИСКУССТВЕННО ИСКУССТВЕННЫЙ ИНТЕЛЛЕКТ ДЛЯ КОНСТРУКЦИИ ДЕЗ МУРС БЬЕН СОЕДИНЯЕТ ?!

Битовая маскировка – это метод, который позволяет автоматизировать выбор цвета, применимого для интеллектуального анализа в соответствии с вашими предпочтениями.

Le fonctionnement est plus simple qu'il n'y paraît.
Chaque tuile ses tuiles voisines afin de déterminer le sprite à choisir, dans ce cas, les diagones sont ignorées.

La feuille de 16 sprites ci-dessus comporte toutes les combinaisons des murs en foction 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.< br/>La tuile 8 venant d'être creée est complémentaire à la tuile 2.

Комментарий ça Marche?

On considere que la tuile 0 est représentée par la case rouge. Ла дело "?" cliquée à sa droite a pour valeur 2. La tuile 0 sera donc remplacée par la tuile 2.

Ensuite, on considere que la tuile "?" est représentée par la case rouge. Une tuile est presente à sa gauche. La tuile "?" sera donc remplacée par la tuile 8.

Et ainsi de suite, chaque tuile va its voisins pour déterminer sa propre valeur.

В качестве примера можно привести набор инструментов plusieurs tuiles, nous allons le calculer :

On va beginer par les tuiles du haut à gauche en потомок jusqu'en bas à droite.

На peut calculer la valeur de chaque tuile autour de la colorée en rouge.
Au nord : pas de tuile. A самый высокий : 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 переписка 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.
Так: 
1x0 + 2x0 + 4x0 + 8x1   =   8

Au nord : pas de tuile. Лучшее: 1 tuile de valeur 2.
Au sud : pas de tuile. A l'ouest : pas de tuile.
Так: 
1x0 + 2x1 + 4x0 + 8x0   =   2

Au норд : 1 туиль. A l'est: pas de tuile.
Au sud : pas de tuile. A l'ouest : 1 tuile de valeur 8.
Так: 
1x1+ ​​2x0 + 4x0 + 8x1   =   9

Ainsi on Peut Calculer toutes les combinaisons возможных.

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 coté 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 direction.
Elle соответствует à la somme 1 + 2 + 4 + 8 = 15

РЕДАКТОР В ДЕЙСТВИИ!