2D Тайлмап (Tilemap) или карты тайлов (плиток)

2D Тайлмап. Работа с контентом: от изображения к уровню

В Unity 2017.2 к возможностям работы с 2D добавили Тайлмапы (Tilemap). Используя карты тайлов, ты можешь быстро компоновать и создавать 2D-уровни с помощью комбинации спрайтов и контролировать такие свойства, как порядок слоёв, тайлмапные коллайдеры, анимированные тайлы и многое другое! В этой записи я постараюсь рассказать о всём рабочем процессе, начиная с импорта файлов изображений в Unity и до создания уровня для 2D-платформера!

Договоримся о понятиях. Реальность такова, что мы, работая с Unity, часто в речи не переводим названия понятий, функций, фич и т. д., а скорее транскрибируем. Например, редко можно услышать как Tilemap называют «Карта плиток», зато чаще «Тайлмап» или «Карта тайлов». При первом упоминании, я буду стараться приводить оба варианта, а дальше то, которое употребляется чаще.

Коротко процесс работы можно описать так:

Sprite -> Tile -> Palette -> Brush -> Tilemap

Для новичка эти термины Unity могут показаться немного запутанными. Но мы представим это как рисование на настоящем холсте:

Тюбик с краской -> Краска -> Палитра-> Кисть -> Холст

К концу мы соберём уровень из этих кусочков так, что 2D-персонаж сможет бегать по уровню.

1) Спрайты (Sprites)

Импортировать изображения в Unity можно разными способами:

• Сохранить нужный файл изображения в папке контента проекта «Assets»
• Из верхнего меню, выбрав проекта «Assets -> Import New Asset» и выбрав нужный файл
• Перетащив файл изображения из проводника в окно проекта (Project Window) в редакторе Unity (это, пожалуй, самый простой способ)

После того как мы импортировали изображение в проект, его тип текстуры (Texture Type) определяется в зависимости от режима твоего проекта 2D или 3D.

Т. к. мой проект уже настроен для 2D режима, «GrassPlatform_TileSet» будет автоматически присвоен тип текстуры «Sprite (2D and UI)», это позволит, тайлу (tile) ссылаться на этот спрайт.

«GrassPlatform_TileSet» — это серия спрайтов в одной картинке, нам нужно будет нарезать его на отдельные спрайты; это может быть сделано путем настройки режима спрайта из «единичный» (Single) в «множественный» (Multiple) и открытием редактора спрайтов (Sprite Editor):

Окно редактора спрайтов позволяет нарезать изображение на несколько спрайтов; так что ты сможешь сделать одно изображение со множеством рисунков (spritesheet) в любом программном обеспечении для редактирования изображений и определить, какие области изображения рассматриваются как отдельные спрайты прямо в Unity. Не надо плодить и управляться с сотнями отдельных файлов изображения!

«GrassPlatform_TileSet» изображение составляется из ряда плиток или тайлов (tile), мы можем использовать настройку нарезки по сетке в редакторе спрайтов (Sprite Editor’s Grid Slicing) для автоматического разбиения изображения на несколько спрайтов. Размеры каждой ячейки в этом наборе тайлов (tileset) 64 на 64 пикселя, так что мы можем ввести эти настройки и позволить редактору спрайтов автоматически создать необходимые нарезки спрайта:

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

После надо «Применить» изменения спрайте (нажав кнопку «Применить» в верхнем правом углу редактора спрайта), которая затем позволит нам ссылаться на каждый отрезанный спрайт по отдельности в окне проекта.

После того, как мы нарезали наш лист спрайтов на отдельные спрайты, нам следом нужно «конвертировать» их в тайлы-плитки (tiles).

2) Контент «Плитка»

По умолчанию базовая плитка (Tile) (создаётся из «Create -> Tile» в окне проекта) позволяет спрайту, быть назначенным плиткой, а также иметь настройки такие как оттенок спрайта и тип коллайдера, который будет использован у карты тайлов (Tilemap) (что будет объяснено позже).

3) Окно «Палитра Плитки» (Tile Palette)

В Unity 2017.2 появилось новое окно: палитра плиток (Tile Palette). Это окно является неотъемлемой частью использования тайлмап-системы, организуя интерфейс для выбора плиток (Tiles).

Прежде чем мы сможем добавить «TopGrassTile» плитку в окно палитры плиток (Tile Palette), мы сначала создадим новую палитру (Palette). Палитры (Palettes) могут быть использованы для организации наборов плиток (Tiles) для хранения их всех (сотни или больше!) в одном месте.

В выпадающем окне меню палитры (Palette) есть опция, чтобы создать совершенно новую палитру. И просто можно из папки контента «перетащить и бросить», чтоб добавить «TopGrassTile» в эту новую палитру!

Чтобы не таскать по одному изображению, есть вариант перетащить лист спрайтов (Spritesheet), который содержит нарезанные спрайты, чтобы автоматически создать набор плиток (Tiles) на палитре.

4) Grid & Tilemap

Теперь, когда наш «GrassPlatform_TileSet» спрайтшит (Spritesheet) успешно настроен в окне палитры плиток (Tile Palette), самое время начать строительство 2D уровня!

Для начала нам нужно создать новый тайлмап на нашей текущей сцене; это можно сделать в выпадающем меню: GameObject -> 2D Objects -> Tilemap. Это не только создаст тайлмап, также создаётся игровой объект сетка (Grid), для которой новый тайлмап автоматически станет дочерним.

Наиболее похожие игровые объекты по структуре на «Сетка <-> Тайлмап», это настройка интерфейса пользователя в Unity; где холст (Canavas) родитель игрового объекта выступает в качестве контейнера дочернего UI объекта (такого как текст и изображение). В игровом объекте «Сетка» используется компонент с таким же именем «Сетка» (Grid). Он определяет размеры всего дочернего тайлмапа у игрового объекта.

Тайлмап-система была разработана так, что несколько тайлмапов игровых объектов могут быть дочерними к одной сетке. Это позволит собрать твой уровень из нескольких слоев и из разных плиток.

5) Рисование на тайлмапе!

Чтобы рисовать на тайлмапе, надо выбрать: активный тайлмап, и какая «кисть» используются в настоящее время. Первое можно выбрать из «Active Tilemap» в выпадающем окне палитры плиток (Tile Palette).

В выпадающем списке будут показаны все экземпляры тайлмапов на сцене. Ты сможешь выбрать один, чтобы рисовать на нём.

Второе, что нужно выбрать — текущую кисть. Она определяет, как плитка (или плитки) будут размещены на тайлмапе.

Когда плитки уже нарисованы на карте, может оказаться, что плитка меньше, чем размер ячеек сетки. Это не ошибка, объясню, почему и как изменить это.

Компонент сетка использует единицы мирового пространства Unity для измерения расстояния. Например, куб с масштабированием по умолчанию 1 для каждой оси будет иметь такой же размер. А, именно: одна ячейка на сетке по умолчанию. Каждый спрайт имеет значение «Пикселей на юнит» в параметрах импорта, по умолчанию используется значение 100.

Наши спрайты имеют размер 64 на 64 пикселя, установка соответствующего значения «Пикселей на юнит» позволит автоматически регулировать масштаб на все нарезанные спрайты; таким образом, сторона соответствующие плитки будет соответствовать клеткам решётки!

6) Тайлмап коллайдер (Tilemap Collider) и составной коллайдер (Composite Collider)

Сейчас у тебя есть все знания, чтобы нарисовать готовый уровень.

Когда ты добавишь персонажа с физикой и войдёшь в режим игры, он провалится сквозь землю. Вместе с тайлмап-системой появился очень полезный 2D-компонент тайлмап коллайдер (Tilemap Collider). При применении к тайлмапу, он будет автоматически создавать коллайдер вокруг плиток. Тогда в режиме игры, наш персонаж сможет бегать и прыгать на тайлмапе!

Если ты решишь изменить планировку уровня (например, добавить больше плиток или удалить некоторые), то тайлмап коллайдер автоматически обновится!

Создание игр основывающихся на тайлах — хорошая практика, но надо помнить, что это не единственный вариант. Иногда, лучше нарисовать всё целиком, в этом поможет статья как выбрать разрешения для 2D-контента.

Еще один полезный компонент, который добавили в 2D набор физики — составной коллайдер (Composite Collider). Добавление его к тайлмап коллайдеру объединит все коллайдеры плитки в более оптимальную геометрию сетки коллайдера.

Если после этой подробной статьи у тебя остались вопросы, оставляй комментарий ниже, обсудим!