Рабочий процесс с активами 2D Tilemap: От изображения к уровню
В Unity 2017.2 мы представили новое дополнение к набору функций 2D: Плиточные карты! С помощью Tilemaps вы можете быстро компоновать и создавать 2D-уровни, используя комбинацию Sprites и GameObjects, и иметь контроль над такими свойствами, как порядок слоев, коллайдеры tilemap, анимированные плитки и многое другое! В этом блоге я расскажу о полном рабочем процессе, начиная с импорта файла изображения в Unity и заканчивая созданием уровня для 2D-платформера!
В качестве TL;DR-обзора рабочий процесс можно описать следующим образом: каждый элемент относится к ассету или компоненту в редакторе Unity:
Спрайт -> Плитка -> Палитра -> Кисть -> Карта плитки
С точки зрения человека, не принадлежащего к Unity, эти термины могут показаться несколько абстрактными. Представьте себе процесс создания реальной картины на реальном холсте:
Цвет -> Краска -> Палитра -> Кисть -> Холст
Каждый этап процесса имеет схожую логику и даже схожие названия!
В этом посте я буду использовать это изображение 'GrassPlatform_TileSet' в качестве основного примера:
В итоге получается уровень, построенный из этих кусочков, по которому может бегать 2D-персонаж в качестве "уровня":
Импортировать изображение в Unity можно разными способами:
- Сохраните нужный файл изображения в папке "Assets" проекта.
- В верхнем меню выберите пункт 'Assets -> Import New Asset', а затем выберите нужный файл.
- Перетащите файл изображения из браузера файлов в "Окно проекта" в редакторе Unity (это, пожалуй, самый простой способ!).
Когда изображение импортировано в проект, его стандартные настройки импорта типа текстуры определяются тем, какой режим поведения установлен в вашем проекте: 2D или 3D.
Этот режим изначально устанавливается при создании нового проекта:
Или можно изменить в Настройках редактора:
Поскольку мой проект уже настроен на режим 2D Behaviour Mode, то "GrassPlatform_TileSet" будет автоматически импортирован с типом текстуры "Sprite (2D и UI)", что является настройкой, которая потребуется активу Tile для ссылки на Sprite.
Поскольку "GrassPlatform_TileSet" представляет собой серию спрайтов в одном изображении, нам нужно будет разделить его на отдельные спрайты; это можно сделать, установив режим спрайта с "Single" на "Multiple" и открыв редактор спрайтов:
Окно Sprite Editor позволяет "нарезать" изображение на несколько спрайтов; таким образом, вы можете работать с одним листом спрайтов в нужной вам программе для редактирования изображений и определять, какие области изображения будут рассматриваться как "отдельные" спрайты непосредственно в Unity. Не нужно жонглировать и управлять сотнями отдельных файлов изображений!
Поскольку "GrassPlatform_TileSet" - это изображение, составленное из серии плиток, мы можем использовать настройки нарезки сетки в редакторе спрайтов, чтобы автоматически разделить изображение на несколько спрайтов. Размеры каждой "плитки ячейки" в этом наборе тайлов составляют 64 пикселя на 64 пикселя, поэтому мы можем ввести эти параметры и позволить редактору Sprite Editor автоматически сгенерировать необходимые фрагменты спрайта:
И после нажатия кнопки "Slice" у нас теперь есть нарезанный набор спрайтов!
В окне Sprite Editor каждый нарезанный спрайт можно выбрать и отредактировать. Например, вы можете задать имена для каждого спрайта и даже вручную настроить такие параметры, как положение и повороты.
Затем нам нужно "Применить" изменения к Sprite Asset (нажав на кнопку с метким названием "Применить" в правом верхнем углу Sprite Editor), что позволит нам ссылаться на каждый нарезанный спрайт по отдельности в окне проекта:
Теперь, когда наш лист спрайтов нарезан на отдельные спрайты, нам нужно "преобразовать" их в плитки.
Плитка - это совершенно новый актив, добавленный в Unity 2017.2. Его назначение - хранить данные, которые Tilemap будет использовать в определенной ячейке сетки.
Базовый актив Tile по умолчанию (который можно создать с помощью команды "Создать -> Tile" в окне проекта) позволяет назначить ему спрайт, а также выполнить другие настройки, такие как оттенок спрайта и тип коллайдера, который он будет использовать на карте Tilemap (о чем будет рассказано позже).
В Unity 2017.2 появилось новое окно: палитра плиток! Это окно является неотъемлемой частью использования новой системы Tilemap, поскольку оно служит интерфейсом для выбора плиток, которые будут использоваться, и способа редактирования карты Tilemap с их помощью.
Прежде чем мы сможем добавить плитку 'TopGrassTile' в окно палитры плиток, нам нужно создать новую палитру. Палитры можно использовать для организации наборов плиток вместо того, чтобы "складировать" их все (а их может быть сотни или больше!) на одной рабочей области в окне.
В выпадающем меню палитры есть возможность создать новую палитру:
Добавить "TopGrassTile" в эту новую палитру можно простым перетаскиванием!
Однако в некоторых ситуациях мы можем работать с сотнями и сотнями спрайтов, из которых состоит наша 2D-сцена. Было бы очень трудоемко вручную создавать актив Tile для каждого из этих спрайтов, а затем перетаскивать каждый из них по отдельности на палитру.
К счастью, существует рабочий процесс, который можно использовать для автоматической генерации набора плиток (по одной для каждого спрайта) и назначения их всех на нужную палитру. А еще это просто и легко, как перетаскивание! Вместо того чтобы перетаскивать актив Tile на палитру, перетащите исходный лист Spritesheet, содержащий нарезанные спрайты. В данном случае - 'GrassPlatform_TileSet':
Теперь, когда наш спрайт-лист 'GrassPlatform_TileSet' успешно установлен в окне палитры плиток, пора приступать к созданию 2D-уровня!
Для начала нам нужно создать новую карту "Tilemap" в нашей текущей сцене; это можно сделать из выпадающего меню "GameObject -> 2D Objects -> Tilemap". Однако при этом создается не только игровой объект 'Tilemap' GameObject (с сопутствующими компонентами), но и игровой объект 'Grid' GameObject, дочерним объектом которого автоматически является игровой объект Tilemap.
Наиболее похожей на структуру GameObject 'Grid <-> Tilemap' является система UI Unity; в ней родительский GameObject Canvas выступает в качестве контейнера для всех дочерних GameObjects UI (таких как текст и изображения). Игровой объект 'Grid' использует компонент 'Grid' для определения размеров всех своих дочерних GameObjects Tilemap. Есть опции, позволяющие настраивать макет:
Дочерний GameObjects Tilemap создается компонентом Tilemap и компонентом Tilemap Renderer; первый содержит данные о нарисованных на нем плитках, а второй определяет визуальные настройки их отображения.
Система Tilemap была разработана таким образом, что несколько GameObjects могут быть дочерними объектами одной сетки, что означает, что конечный результат вашего уровня может быть легко скомпонован из нескольких слоев различных плиток:
Каждый Tilemap Renderer дает вам контроль над материалом, используемым для рендеринга плиток, слоем сортировки, который он использует (это та же система слоев, которую используют Sprite Renderers, UI Canvases и Particle Systems!), а также над тем, как он реагирует на маску спрайта.
Прежде чем рисовать плитки на карте плиток, необходимо выбрать две вещи: какая карта плиток в данный момент находится в фокусе и какая кисть используется в данный момент.
Первый можно выбрать из выпадающего списка "Активная карта плиток" в окне палитры плиток под опциями редактирования:
В этом выпадающем списке будут показаны все экземпляры компонента "Tilemap" в сцене, и вы сможете выбрать один из них для рисования и редактирования. На скриншоте выше показана только одна опция "Tilemap", названная по умолчанию Tilemap GameObjects, в то время как более сложная сцена с несколькими Tilemap может отображать список возможных активных Tilemap, как здесь:
Для примера 'GrassPlatform_TileSet' переименование GameObject "Tilemap" в более точное приведет к обновлению имен списка Active Tilemap:
Следующее, что нужно выбрать, - это текущая кисть. В то время как актив Tile определяет, какие данные будет содержать ячейка (визуальные эффекты, тип коллайдера и т. д.), актив Brush определяет, как тайл (или тайлы) будет размещен на карте тайлов. В настоящее время в Unity есть только одна кисть (под названием "Кисть по умолчанию"), которая может быть выбрана; она обладает функциональностью, соответствующей своему названию, такой как размещение, стирание, перемещение и заливка плиток на карте плиток. Однако на GitHub команды Unity Technologies есть репозиторий 2D Extras' Repository, в котором есть множество примеров того, как вы можете написать свои собственные кисти и плитки! После того как они будут импортированы в ваш проект, в меню текущей кисти (в нижней части окна палитры плиток) вы сможете выбрать, какую кисть использовать:
Хотя эта статья не посвящена использованию Scriptable Brushes и Scriptable Tiles, это очень мощная область для изучения и интеграции в ваш набор инструментов для создания уровней на основе тайлмапов.
Установив активную карту плиток и текущую кисть, мы можем выбрать определенную плитку в окне палитры плиток, а затем нарисовать ее на карте плиток в сцене! Вам также нужно убедиться, что значок "Кисть" в Инструментах редактирования также выбран:
Успех! Плитка наносится на карту плитки! Однако вы можете заметить, что размер плиток немного меньше размера ячеек сетки. Это не ошибка, но нам нужно сделать небольшой шаг назад, чтобы объяснить, почему - и как вы можете изменить значение по умолчанию.
Размер ячейки компонента Grid использует единицы расстояния мирового пространства Unity (например, примитивный куб Unity с масштабированием по умолчанию 1 для каждой оси будет иметь размер, равный одной ячейке на сетке по умолчанию). Каждый актив Sprite имеет значение Pixels Per Unit в настройках импорта, по умолчанию оно равно 100:
