Використання TileMaps (Карти Плиток)

Вступ

Карта плитки - це сітка плиток, яка використовується для створення макета гри. Використання вузлів TileMap (Карта Плиток) для проєктування ваших рівнів має кілька переваг . По-перше, вони дають можливість намалювати макет, "намалювавши" плитки на сітці, що набагато швидше, ніж розміщення окремих вузлів Sprite по одному. По-друге, вони дозволяють створювати набагато більші рівні, оскільки вони оптимізовані для малювання великої кількості плиток. Нарешті, ви можете додати зіткнення, оклюзії та фігури навігації до плиток, додавши додаткову функціональність до TileMap.

Налаштування проєкту

У цій демонстрації ми використаємо наступні плитки, взяті з художнього набору Кенні "Абстрактний платформер". Ви можете знайти повний комплект тут, але для цієї демонстрації ми дотримуватимемось цього невеликого набору.

Створіть новий проєкт і помістіть вищевказане зображення в папку проєкта.

При використанні набору плиток важливо, щоб сусідні плитки збігалися. За замовчуванням Godot імпортує 2D-зображення за допомогою інтерпольованого режиму "фільтра", що призведе до негарних меж між плитками. Виділіть зображення та натисніть вкладку Імпорт. Вимкніть Filter і натисніть "Повторний імпорт". Більше дивіться Імпортування зображень.

Вузол TileMap (Карта Плиток)

Додайте до сцени новий вузол TileMap. За замовчуванням TileMap використовує квадратну сітку плиток. Ви також можете використовувати режим "Ізометричний" на основі перспективи або визначити власну форму плитки.

У розділі Cell (Клітинка) в Інспекторі є багато властивостей, які ви можете налаштувати, щоб налаштувати поведінку плитки вашої карти:

• Cell Size

  Визначає розмір плитки. Має відповідати розміру ваших плиток у пікселях. Значення за замовчуванням - (64, 64).

• YSort

  Призводить до того, що плитки малюються в порядку їх Y розташування, так що "нижчі" плитки малюються поверх "вищих".

• Half Offset і Tile Origin

  Впливають на положення плитки відносно положення сітки.

• Quadrant

  Визначає розмір шматка, який використовується для групового малювання. Може негативно вплинути на продуктивність. Не змінюйте його, якщо ви не знаєте, що робите.

• Custom Transform

  Використовується для зміни форми плитки. Використовуйте його, якщо у вас плитка не квадратна.

Усі ці параметри можна залишити за замовчуванням для цієї демонстрації.

Створення TileSet

Після того, як ви налаштували свою карту плиток, настав час додати TileSet. TileSet - це Ресурс, що містить дані про ваші плитки - їх текстури, форми зіткнень та інші властивості. Коли гра запускається, TileMap об'єднує окремі плитки в один об'єкт.

Щоб додати новий TileSet, клацніть на властивість Tile Set і виберіть Новий TileSet.

Клацніть на властивість TileSet, і внизу вікна редактора відкриється панель "TileSet":

Спочатку потрібно додати текстуру(и), яку ви будете використовувати для плиток. Натисніть кнопку Додати текстуру(и) до TileSet і виберіть зображення tilesheet.png.

Далі натисніть Нова окрема плитка та перетягніть зображення, щоб вибрати плитку, яку ви хочете. Натисніть кнопку Увімкнути прилипання, щоб полегшити вибір плитки. Навколо вибраної плитки з’являється жовтий прямокутник.

Клацніть на TileMap в дереві сцени, і ви побачите, що новостворена плитка тепер відображається з правого боку. Клацніть у вікні перегляду, і ви зможете розміщувати плитки. Клацніть правою кнопкою миші, щоб видалити їх.

Легко випадково вибрати та перемістити вузол карти плиток. Щоб цього уникнути, використовуйте кнопку блокування вузла:

Форми зіткнень

Якщо ви створюєте карту, яка потребує зіткнень - наприклад, стін, підлоги чи інших перешкод - тоді вам потрібно буде додати форми зіткнення до плиток, які за вашим задумом мають бути "твердими".

Клацніть на "TileSet" внизу вікна редактора, щоб повернутися до інструменту набору плиток. Клацніть плитку, яку ви визначили раніше (позначену жовтим кольором). Виберіть вкладку Зіткнення та натисніть кнопку Створити прямокутник. Переконайтеся, що у вас все ще ввімкнено прилипання сітки, а потім клацніть та пере-крийте плитку. Квадратна форма зіткнення виглядає світло-блакитним:

Ви можете таким же чином додати до плитки фігури перешкоди та навігації.

Атлас плиток

Замість того, щоб додавати окремі плитки по черзі, ви можете одночасно визначити групу плиток, використовуючи атлас. Він також дозволяє випадковим чином генерувати плитки з групи.

Клацніть Новий атлас і виділіть увесь аркуш плиток.

Якщо ви цього ще не зробили, обов’язково змініть Крок у Snap options на (64, 64), інакше ваші плитки можуть бути порубані на менші шматки. Ви можете знайти це в Інспекторі:

Визначивши атлас, ви можете додати форми зіткнення до окремих плиток, як і раніше. Ви також можете натиснути Піктограма, щоб вибрати одну з плиток для представлення атласа.

Повернувшись до TileMap, ви можете вибрати плитку атласу, і побачите всі плитки, які вона містить:

На додаток до економії часу при визначенні плиток, це може допомогти групуванням подібних плиток, коли ви працюєте з великою кількістю плиток.

Випадкові пріоритети плитки

Якщо малювати за допомогою плиток атласу, увімкнення параметра Увімкнути пріоритетність призводить до випадкового вибору плиток. За замовчуванням кожна плитка в наборі плиток має однакову ймовірність появи. Ви можете змінити ймовірність, встановивши різні пріоритети для кожної плитки. Наприклад, плитка з пріоритетом 2 удвічі частіше буде обрана, ніж плитка з пріоритетом 1, а плитка з пріоритетом 3 на 50% частіше буде обрана, ніж плитка з пріоритетом 2.

Автоплитки

Автоплитки дозволяють визначити групу плиток, а потім додати правила для керування тим, яка плитка буде використовуватися для малювання на основі вмісту сусідніх клітинок.

Клацніть на Нова автоплитка та виділіть плитки, які хочете використовувати. Ви можете додати зіткнення, оклюзію, фігури навігації, пріоритети плиток та вибрати піктограму плитки таким же чином, як для атласу плиток.

Вибір плитки контролюється бітовими масками. Бітові маски можна додати, натиснувши Бітова маска, і вибравши частину плиток, щоб додати або видалити біти в масці. Клацання лівою кнопкою миші на ділянці плитки додає біт, клацання правою кнопкою знімає "вимкнено", а клавіша Shift-ліва кнопка встановлює біт "ігнорувати".

Щоразу, коли Godot оновлює клітинку за допомогою автоплитки, він спочатку створює шаблон, на основі якого вже встановлені сусідні комірки. Потім він здійснює пошук автоплитки для однієї плитки з бітовою маскою, що відповідає створеному шаблону. Якщо відповідної бітової маски не знайдено, замість неї буде використана плитка "піктограма". Якщо знайдено більше однієї збіжної бітової маски, одна з них буде обрана випадковим чином, з використанням пріоритету плиток.

Правила узгодження бітової маски з шаблоном залежать від параметра режиму Autotile Bitmask Mode (Режим бітової маски автоплитки). Його можна встановити на вкладці Інспектор під заголовком Selected Tile (Вибрана плитка). Допустимі значення: "2x2", "3x3 (minimal)" і "3x3".

Усі "увімкнені" та "вимкнені" біти повинні відповідати бітовій масці, але біти "ігнорування" ігноруються.

2x2

У режимі 2x2 кожна бітова маска містить чотири біти, по одному для кожного кута.

Якщо біт "увімкнений", всі клітинки, що межують з цим кутом, повинні бути заповнені за допомогою одної і тої ж автоплитки, щоб бітова маска збігалася. Наприклад, якщо встановлено біт ліворуч зверху, клітинки безпосередньо над, прямо зліва і по діагоналі ліворуч, потрібно заповнити.

Там, де біт "вимкнений", принаймні одну клітинку, що межує з цим кутом, не можна встановлювати за допомогою одної і тої ж автоплитки.

Потрібно встановити принаймні один біт для плитки, яка буде використовуватися, тому в цілому потрібно буде 15 плиток, щоб забезпечити рівно одну плитку для кожного розташування, яке цей режим може перевірити.

Режим 2x2 може збігатися лише з клітинками, які є частиною блоку 2 на 2 - клітинки без сусідів та ліній шириною лише в одну клітинку не підтримуються.

Шаблон - Загальний:

Цей шаблон можна використовувати для перспектив убік або повністю зверху вниз. Він розроблений для розміру клітинки TileMap 64x64.

Ключ:

• Червоний: "увімкнений"

• Білий: "вимкнений"

3x3 (minimal)

У режимі 3x3 (minimal) кожна бітова маска містить 9 бітів (4 кути, 4 ребра, 1 центр). 4 кутові біти працюють так само, як і в режимі 2x2.

Коли бітовий край "увімкнений", клітинка, яка межує з цим краєм, повинна бути заповнена. Коли бітовий край "вимкнений", сусідня клітинка, повинна бути порожньою.

Центральний біт повинен бути "увімкнений" для будь-якої плитки, яку ви хочете використовувати. Запримітьте, що в цьому режимі немає сенсу "вмикати" кутовий біт , без "увімкнення", хоча б одного, сусіднього біта.

Загалом знадобиться 47 плиток, щоб забезпечити рівно одну бітову маску для кожного розташування, яке цей режим може перевірити.

Примітка

Клацніть зображення правою кнопкою мишки та виберіть Зберегти зображення як ..., щоб зберегти його.

Шаблон - Загальний:

Цей шаблон можна використовувати для перспектив убік або повністю зверху вниз. Усі наведені нижче шаблони розроблені для розміру клітинки TileMap 64x64, але, можливо, вам доведеться використовувати різні розміри підплиток для шаблонів зверху вниз, як описано нижче.

Ключ:

• Червоний: "увімкнений"

• Білий: "вимкнений"

Шаблон - Загальний на 16 плиток:

Цей шаблон можна використовувати для наборів плиток, які мають лише 16 плиток - для простіших художніх стилів відсутні плитки не будуть помітні.

Ключ:

• Червоний: "увімкнений"

• Білий: "вимкнений"

• Синьо-білий: "ігнорувати"

Шаблон - Зверху вниз у перспективі 3/4:

Ключ (відноситься до чотирьох шаблонів нижче):

• Зелений: підлога

• Голубий: стіна

• Жовтий: верх стіни

• Сірий: прихований через перекриття

• Прозорий: повітря

Шаблон - Стіна зверху вниз у перспективі 3/4:

Шаблон - Стіна зверху вниз у перспективі 3/4 (товсті стіни):

При використанні цього шаблону встановіть для розміру підплитки TileSet значення Vector2(64, 88).

Шаблон - Стіна зверху вниз у перспективі 3/4 (високі стіни):

При використанні цього шаблону встановіть Snap Options -> Step (Параметри прив'язки -> Крок) значення Vector2(64, 184) і Selected Tile -> Texture offset (Вибрана плитка -> Зміщення текстури) на висоту мінус розмір клітинки. Це означає, що зміщення текстури має бути Vector2(0, -120):

3x3

У режимі 3x3 кожна бітова маска містить 9 бітів (4 кути, 4 ребра, 1 центр)

Кожен біт перевіряє одну сусідню клітинку. Кутові біти перевіряють лише сусідні по діагоналі клітинки. Центральний біт повинен бути "увімкнений" для будь-якої плитки, яку ви хочете використовувати.

Всього потрібно 256 плиток, щоб забезпечити рівно одну бітову маску для кожного розташування, яке цей режим може перевірити.

Відключення автоплиток

При використанні автоплитки можна вимкнути поведінку її та вибирати плитки вручну, натискаючи кнопку Вимкнути автоплитки у верхній частині вікна вибору плитки.

Прив'язка автоплиток

За замовчуванням автоплитка перевіряє лише сусідні комірки, заповнені за допомогою тих самих автоплиток. Цю поведінку можна замінити, щоб автоплитки зв’язувались між собою, або навіть прив’язувались до порожніх комірок. В даний час це можна зробити лише за допомогою скриптів. Вам потрібно буде додати скрипт до вашого набору плиток і визначити функцію з назвою _is_tile_bound (drawn_id, сусед_id). Ця функція буде викликана для кожної сусідньої клітинки, яка не містить такої самої автоплитки, і повинна повертати значення true, якщо ви хочете, щоб намальована клітинка "прив'язувалася" до сусідньої клітинки. Ви можете знайти ідентифікатор автоплитки за допомогою find_tile_by_name (ім'я), порожні клітинки отримують ідентифікатор -1.

Зауважте, що для використання скрипта в редакторі він повинен починатися з оголошення tool, і можливо, вам доведеться закрити та перезавантажити сцену, щоб ці зміни набрали чинності.

Поради та підказки

• Якщо ви використовуєте Camera2D для прокрутки свого рівня, ви можете помітити лінії, що з’являються між вашими плитками. Щоб виправити це, відкрийте Параметри проєкта та ввімкніть Use Gpu Pixel Snap (Використовувати прив'язку пікселів графічного процесора) у розділі Rendering > 2d > Snapping (Візуалізація > 2d > Прив'язування).

• Ви можете перевертати та обертати плитки, використовуючи піктограми у верхньому правому куті редактора.

• Щоб намалювати прямі лінії, утримуйте Shift клацаючи та перетягуючи плитку.

• Такі інструменти, як копіювання, вставлення та заповнення сегмента, можна знайти в меню "TileMap" у верхньому правому куті.