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

Вступ

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

../../_images/tileset_draw_atlas.png

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

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

../../_images/tilesheet.png

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

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

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

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

../../_images/tilemap_mode.png

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

../../_images/tilemap_size.png
  • Cell Size

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

  • YSort

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

  • Half Offset і Tile Origin

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

  • Quadrant

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

  • Custom Transform

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

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

Створення TileSet

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

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

../../_images/tilemap_add_tileset.png

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

../../_images/tilemap_tool.png

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

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

../../_images/tilemap_add_tile.png

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

../../_images/tilemap_draw.png

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

../../_images/tile_lock.png

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

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

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

../../_images/tileset_add_collision.png

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

Атлас плиток

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

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

../../_images/tileset_atlas.png

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

../../_images/tileset_snap.png

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

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

../../_images/tileset_draw_atlas.png

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

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

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

Автоплитки

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

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

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

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

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

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

2x2

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

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

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

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

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

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

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

Ключ:

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

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

../../_images/autotile_template_2x2.png

3x3 (minimal)

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

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

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

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

Примітка

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

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

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

Ключ:

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

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

../../_images/autotile_template_3x3_minimal.png

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

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

Ключ:

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

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

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

../../_images/autotile_template_3x3_minimal_16.png

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

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

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

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

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

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

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

../../_images/autotile_template_3x3_minimal_topdown_floor.png

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

../../_images/autotile_template_3x3_minimal_topdown_walls.png

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

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

../../_images/autotile_template_3x3_minimal_topdown_walls_thick.png

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

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

../../_images/autotile_template_3x3_minimal_topdown_walls_tall.png

3x3

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

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

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

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

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

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

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

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

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

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

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

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

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

../../_images/tilemap_menu.png