Изометрические 2D-среды с Tilemap

С выходом Unity 2018.3 мы представили поддержку изометрических плиточных карт, следуя за поддержкой гексагональных плиточных карт, которая была добавлена в релизе 2018.2. Новые функции Tilemap позволяют быстро и эффективно создавать 2D-окружения на основе изометрической и гексагональной сетки, подобные которой можно увидеть во многих классических играх, включая первые части франшиз Diablo и Fallout, Civilization, Age of Empires и многие другие. Обе функции созданы на основе существующей системы Tilemap, представленной еще в Unity 2017.2, и работать с ними сегодня так же просто! Они также встроены в редактор. В последующих выпусках Unity они могут быть перенесены в менеджер пакетов. Если вам интересно проследить за развитием событий и поэкспериментировать с показанными техниками, мы создали готовый проект Isometric Starter Kit с анимированным персонажем и несколькими наборами тайлов окружения, который вы можете скачать бесплатно.

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

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

Чтобы настроить порядок отображения 2D-объектов на экране, мы можем воспользоваться функцией Unity Custom Axis Sort. Эту настройку можно задать либо для каждой камеры (в настоящее время это делается по умолчанию в конвейерах рендеринга со сценариями, включая LWRP и HDRP), либо глобально на уровне проекта.

Чтобы задать пользовательскую сортировку осей на уровне проекта, перейдите в меню Редактирование > Настройки проекта > Графика. В разделе "Настройки камеры" вы увидите выпадающий список "Режим сортировки прозрачности", а также настройки значений X, Y и Z для оси сортировки прозрачности.

По умолчанию ось сортировки прозрачности в Unity установлена на (0, 0, 1) для XYZ соответственно. Однако все наши 2D-плитки на самом деле находятся в одной плоскости Z. Вместо этого мы можем определить, какие плитки находятся позади или впереди, используя их высоту на экране, а не глубину. Плитки, расположенные выше на экране, будут отсортированы за теми, которые расположены ниже. Чтобы отсортировать плитки по высоте, измените режим сортировки прозрачности на пользовательский и установите значения оси сортировки прозрачности на (0, 1, 0).

Вы можете прочитать соответствующую страницу документации Unity по 2D-сортировке, если хотите узнать больше о том, как она работает.

В некоторых случаях вам также может понадобиться настроить значение Z оси сортировки прозрачности. Мы расскажем об этом подробнее далее в этом блоге.

Функция Tilemap состоит из нескольких компонентов, работающих вместе. Первые два - это игровые объекты Grid и Tilemap. Чтобы создать сетку, просто щелкните правой кнопкой мыши в любом месте иерархии, перейдите в раздел 2D Object и выберите тип карты Tilemap, который вы хотите использовать. По умолчанию каждая новая сетка создается с одним дочерним игровым объектом Tilemap соответствующего типа. В настоящее время доступны следующие типы карт плиток:

Tilemap - создает прямоугольную сетку и карту Tilemap. Пример использования этой карты Tilemap можно увидеть в Unity's 2D Game Kit.

Hexagonal Point Top Tilemap - создает гексагональную сетку и карту плиток, где одна из вершин каждого гексагона направлена вверх.

Hexagonal Flat Top Tilemap - еще один тип гексагональной сетки, где вершиной гексагона является край, параллельный верхней части экрана.

Последние два типа, Isometric и Isometric Z as Y, создают две разные реализации изометрической сетки. Разница между ними возникает при моделировании различных уровней возвышения плитки, например, когда у нас есть приподнятая платформа в изометрическом уровне.

Обычную изометрическую карту лучше всего использовать, если вы хотите создать отдельные игровые объекты для каждого отдельного уровня высоты плитки. Это упростит процесс создания автоматических фигур столкновения - но у вас будет меньше гибкости, когда дело дойдет до изменения высоты между плитками, поскольку все плитки на одном слое должны находиться в одной "плоскости".

В случае изометрической карты плиток Z as Y значение позиции Z каждой плитки работает в сочетании с пользовательской настройкой Transparency Axis Sort, чтобы плитки выглядели как уложенные друг на друга. При рисовании на тайлмапе Z as Y мы динамически настраиваем параметр Z на кисти, чтобы переключаться между разными высотами. Для корректного отображения карты Z as Y Tilemap требуется дополнительное значение Z в пользовательской оси сортировки прозрачности.

Примечание: Активы, показанные здесь, относятся к набору плиток Temple из нашего проекта Isometric Starter Kit. Не стесняйтесь взять его - совершенно бесплатно - и повеселитесь, создавая свои собственные среды!

Думайте о сетке как о "мольберте", на котором хранятся игровые объекты Tilemap - по сути, это холсты, на которые вы будете рисовать плитки. Чтобы начать рисовать на карте Tilemap, вам также понадобятся кисть и палитра. Палитра плиток - это то, что хранит ваши плитки, после чего вы можете выбрать их с помощью инструмента "кисть" и начать рисовать.

Чтобы создать палитру плиток, выберите Window > 2D > Tile Palette. В открывшемся окне в левом верхнем углу выберите "Создать новую палитру". Обязательно установите тип сетки, соответствующий вашему сценарию использования. В этом примере я буду использовать обычную изометрическую карту плиток, а также активы из нашего проекта Isometric Starter Kit. Установите размер ячейки палитры на Manual, чтобы иметь возможность настраивать размеры изометрических плиток. В данном случае я знаю, что размеры моих плиток соответствуют сетке 1 по X и 0,5 по Y; однако для вашего случая это будет зависеть от разрешения, значений пикселей на единицу, выбранных при импорте, и размеров активов - по сути, от изометрического угла, под которым повернуты плитки.

Возможно, вы не знаете, какие настройки импорта и размер тайлмапа подойдут для ваших активов. Существует общее правило, которому вы можете следовать, основываясь на исходных размерах активов. Во-первых, обратите внимание на разрешение вашей плитки. Как правило, изометрические плитки, представленные в виде блока, имеют большую высоту, чем ширину; "плоские" плитки (те, которые представлены в виде плоскости, а не куба) имеют большую ширину, чем высоту. Однако их ширина всегда будет одинаковой. Поэтому, если вы хотите, чтобы плитки занимали ровно один блок Unity, установите значение Pixels Per Unit в настройках импорта плиток равным их ширине в пикселях. В некоторых случаях вы можете изменить это значение - обычно уменьшая его (или увеличивая фактическое разрешение ваших активов); это может быть полезно, если вы пытаетесь создать эффект, при котором некоторые плитки занимают более одной ячейки сетки и перекрывают соседние плитки.

Чтобы определить правильное значение сетки Y для плитки, возьмите высоту основания (или крышки) одной плитки и разделите ее на ширину. Это даст вам значение Y относительно X, при условии, что X равно 1. Давайте рассмотрим несколько примеров:

Для пиксельного искусства, которое мы используем в этом проекте, все плитки имеют базовую высоту 32 пикселя и ширину 64 пикселя. Поэтому размер сетки, которую мы будем использовать, составляет ровно 0,5 по Y. Второй блок на примере изображения взят из пакета активов от Golden Skull Art. Пример плитки был уменьшен для справки, но оригинальные активы имеют ширину 128 пикселей. Высота основания плитки составляет около 66 пикселей, что дает нам размер сетки Y 66/128 - примерно 0,515 единиц.

После того как мы определились с правильными размерами сетки, давайте добавим несколько плиток в нашу палитру. Просто возьмите один из спрайтов плитки и перетащите его в окно "Палитра плиток". В результате будет создан ассет плитки. Он содержит некоторую информацию о самом тайле, например, спрайт(ы), которые он использует, цвет оттенка и тип коллайдера, который он будет генерировать. Если вы хотите просмотреть подробную информацию о плитке на палитре, выберите инструмент Select (S) в верхней части окна Tile Palette и щелкните на плитке. Теперь в Инспекторе вы должны видеть, на какой актив Tile ссылается этот актив.

Чтобы нарисовать новую плитку на нашей карте плиток, выберите инструмент Кисть (B) и щелкните плитку в палитре. Теперь вы сможете рисовать на выбранной плитке в режиме просмотра сцены. Среди других инструментов рисования - ластик (D), заливка рамки (U), заливка потоком (G) и пикер плитки (I).

Иногда вы также можете захотеть изменить расположение плиток в самой палитре. Чуть ниже панели инструментов вы увидите кнопку Edit. Если вы нажмете на нее, то перейдете в режим редактирования палитры, во время которого инструменты будут воздействовать на саму палитру плитки. Не забудьте выйти из этого режима после внесения нужных изменений.

В некоторых случаях вы можете столкнуться с ситуацией, когда плитки разных типов сортируются неправильно, несмотря на то, что находятся на одной карте плиток, как в примере ниже:

Это определяется настройкой Mode в компоненте Tilemap Renderer. По умолчанию для параметра Mode установлено значение Chunk.

Режим Chunk эффективно снижает затраты на производительность Tilemap. Вместо того чтобы рендерить каждую плитку по отдельности, он делает их пакетный рендеринг за один раз, в виде большого блока. Однако есть два основных недостатка его использования. Первое - это то, что он не поддерживает динамическую сортировку с другими 2D-объектами в сцене. Это означает, что если ваша карта Tilemap находится в режиме Chunk, она не сможет динамически сортироваться позади и перед другими объектами, например, персонажами - в зависимости от настройки Order in Layer (Порядок в слое) одновременно будет возможно только одно или другое. Тем не менее, он по-прежнему чрезвычайно эффективен, когда вы хотите оптимизировать свою игру, и может использоваться для пакетного рендеринга больших участков земли.

Однако это не избавляет от проблемы, когда разные плитки не сортируются друг с другом. Для пакетного рендеринга тайлов, созданных из двух или более разных спрайтов (то есть текстур), спрайты должны быть объединены в один актив Sprite Atlas.

Чтобы создать Sprite Atlas, выберите Assets > Create > Sprite Atlas. В настройках Sprite Atlas вы найдете список объектов для упаковки. Просто перетащите все тайлы, которые вы хотите подвергнуть пакетному рендерингу, в этот список и установите правильные настройки импорта - обычно они эквивалентны настройкам для отдельных спрайтов.

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

Поэтому во время редактирования лучше установить режим рендеринга карты плиток на Индивидуальный . Он будет сортировать каждую плитку отдельно, что означает, что вы увидите их корректное отображение даже вне режима игры, что очень полезно, когда вы все еще вносите изменения в свой уровень. После того как структура уровня будет создана, вы всегда можете установить режим рендеринга Tilemap Renderer Mode обратно на Chunk.

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

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

Чтобы прикрепить к сетке другую карту плиток, щелкните правой кнопкой мыши на игровом объекте "Сетка" и создайте новую карту плиток соответствующего типа.

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

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

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

Для обычных изометрических тайлмапов можно просто создать новый тайлмап в той же сетке и задать ему более высокое значение Order in Layer. Затем можно изменить настройку Tile Anchor, чтобы новый слой был привязан к более высокой точке сетки.

Моя карта Tilemap на уровне земли имеет Tile Anchor (0, 0) для X и Y соответственно. Я хочу, чтобы мой новый слой рисовался на одну единицу выше; поэтому я изменю точку привязки новой карты Tilemap на (1, 1). Кроме того, я дам ему Орден в слое 1 - всего на одну единицу выше, чем мой базовый уровень.

Теперь я могу сменить активную карту Tilemap на карту со вторым уровнем высоты и рисовать дальше.

Иногда бывает полезно смоделировать разные высоты, используя одну и ту же карту плиток. Для этого случая можно использовать изометрическую карту плиток и сетку Z as Y.

При использовании Z as Y Tilemap значение Z каждой плитки оказывает дополнительное влияние на порядок отрисовки плиток. Мы можем регулировать значение Z, которое имеют плитки во время их рисования, с помощью параметра Z Position на нашей кисти в нижней части палитры плиток (его также можно изменить с помощью горячих клавиш "+" и "-"):

Однако для того, чтобы значение Z внесло свой вклад и плитки правильно сортировались, нам нужно вернуться к значению Custom Axis Sort и добавить влияние Z. Число, которое мы здесь используем, напрямую связано с тем, как Unity преобразует положение ячеек на изометрической сетке в значения мирового пространства.

Например, сетка с размерами XYZ (1, 0.5, 1) - по умолчанию изометрическая - будет иметь значение сортировки по оси Z, равное -0.26. Если вам интересно, как рассчитывается это число, или вы используете сетку с другим размером ячеек - читайте дальше, чтобы узнать, как найти правильное значение Z для вашего случая.

После того как вы установили правильное значение Custom Axis Sort, вы можете начать раскрашивать плитки с разными значениями Z. Вы также можете настроить шаг, с которым значение Z перемещает приподнятые плитки вверх или вниз, изменив размер Z сетки - по умолчанию он равен 1.

Существует общая формула, которую можно использовать для определения значения Z сортировки по оси. Сначала возьмите размер Y вашей сетки. Если вы еще не определились с размером Y, посмотрите заметку об импорте активов в верхней части этой статьи. Умножьте это значение на отрицательное 0,5 и вычтите из него еще 0,01.

Следуя этой формуле, сетка с размерами (1, 0,5, 1) даст нам значение сортировки Z, равное -0,26 (двадцать шесть отрицательных пунктов). При таком значении сортировки осей в любой сетке (1, 0.5, 1) плитки будут отсортированы правильно.

Если вы хотите узнать больше о том, откуда берутся эти значения и расчеты, посмотрите документацию здесь. В ней подробно объясняется, как работают 2D-рендеры и какой метод используется при преобразовании изометрических ячеек в значения мирового пространства.

Теперь, когда некоторые плитки расположены выше других, мы можем управлять областями, в которые может попасть игрок, и переходить между ними с помощью столкновений.

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

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

Мы также можем добавить пользовательский материал в компонент Tilemap Renderer, чтобы оттенить плитки другим цветом, отличным от остальной части нашего уровня.

После того как мы разместили плитки столкновений, мы можем добавить компонент Tilemap Collider к Tilemap столкновений. Это позволит автоматически генерировать коллайдеры для каждого отдельного тайла на основе формы спрайта.

Для повышения производительности мы также можем добавить компонент Composite Collider 2D и убедиться, что в нашем Tilemap Collider установлен флажок Used by Composite. Это объединяет все наши отдельные коллайдеры в одну большую форму.

Добавлять реквизит на уровень довольно просто. Вы можете либо вручную разместить спрайты реквизита в любой нужной точке сцены, либо прикрепить реквизит к сетке Tilemap Grid, превратив его в отдельные плитки. Вы сами можете решить, какой подход лучше всего подходит для вашего случая.

В этом проекте мы вручную разместили несколько деревьев вокруг уровня. Деревья и персонаж имеют одинаковый порядок в слое, что позволяет нашему персонажу динамически сортировать их позади и перед ними.

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

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

Другой способ - определить пользовательскую физическую форму для объекта в редакторе спрайтов.

Чтобы открыть редактор спрайтов, выберите спрайт объекта и найдите кнопку Sprite Editor в Инспекторе. В левом верхнем углу переключитесь на редактор Custom Physics Shape. Здесь вы можете создать многоугольную фигуру, чтобы определить границы вашего пользовательского коллайдера.

Определив физическую форму, вы можете прикрепить к объекту компонент Polygon Collider, и он будет соответствовать этой форме.

Если вы используете реквизит как плитку на карте Tilemap, вы также можете использовать коллайдер Grid. Выберите ассет плитки, соответствующий плитке реквизита (если вам нужно узнать, где его найти, загляните в раздел "Базовый рабочий процесс с плиткой"). Вы увидите выпадающий список настроек для типа коллайдера. По умолчанию он установлен на sprite - это означает, что автогенерируемый коллайдер будет использовать Physics Shape, о которой мы говорили ранее. Однако если вы установите значение grid, оно всегда будет точно соответствовать форме ячейки сетки, к которой прикреплен реквизит. Возможно, это не самый точный способ реализации коллайдеров, но он может быть полезен для определенного типа игр.

Чтобы использовать коллайдеры сетки для этих плиток, выберите карту Tilemap с реквизитами и добавьте компонент Tilemap Collider.

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

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

Плитки с изометрическими и гексагональными правилами доступны в репозитории 2D Extras на GitHub в Unity. Они также содержат множество других удобных активов для функции Tilemap, которые вы можете изучить.

Мы также включили в проект Isometric Starter Kit предварительно настроенные плитки правил для каждого из различных наборов плиток. Вот несколько примеров плиток, включенных в проект, с которыми вы можете поэкспериментировать:

Теперь, когда вы узнали, что такое изометрические тайлмапы в Unity, скачайте проект Isometric Starter kit здесь и попробуйте сами! Если вы программист, то можете попробовать взаимодействовать с Tilemaps через скрипт.

Например, вы можете узнать, как реализовать простой контроллер персонажа, работающий с Isometric Tilemap, посмотрев это видео:

Художественное оформление этого проекта было создано для Unity @castpixel, и вы можете увидеть другие ее работы здесь. Если вы ищете дополнительные 2D-активы для экспериментов с использованием Tilemaps, вы также можете заглянуть в магазин Unity Asset Store.

---

Изучите передовые методы использования Tilemap с помощью материалов для начинающих и продвинутых пользователей на платформе Unity Learn Premium.