Как сделать изометрию в unity

Изометрический плагин для Unity3D

Как сделать изометрию в unity

Сказ о том, как написать плагин для Unity Asset Store, поломать голову над решением известных проблем изометрии в играх, да еще и немного денег на кофе с этого поиметь, а так же понять на сколько Unity имеет расширяемый редактор. Картинки, реализации, графики и мысли под катом.

Завязка

Дело было вечером, делать было нечего. Новый год не предвещал ничего особенного в программерской жизни (в отличии от личной, но это уже совсем другая история). Созрела идея тряхнуть сединой и написать хоть что-то личное и своё, да еще и нацеленное хоть на какую-нибудь коммерческую выгоду (чтобы грело душу, что разработки твои хоть кому-нибудь нужны, кроме работодателя). Всё это совпало с тем, что давно хотелось пощупать возможности расширения редактора Unity и оценить его площадку для продажи своих расширений движка.

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

Постановка целей

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

Сортировка

Коротко изометрия — это попытка 2D спрайтам прикинуться и выглядеть 3D моделями, что выливается в различного рода проблемы. Основная проблема в том, что спрайты должны быть отсортированы в порядке их отрисовки, для избежания неверного взаимного перекрытия.

Как сделать изометрию в unity
На скриншоте сначала рисуется зеленый спрайт (2,1), потом сверху него синий (1,1)

Как сделать изометрию в unity
На скриншоте показана неверная сортировка, когда сначала рисуется синий

Сортировка, в данном простом случае, не составит труда и существуют различные варианты, например:

Как сделать изометрию в unity
На скриншоте правильно отсортированные вытянутые объекты 3×1 и 1×3 с «заборами» размерами 3×0 и 0x3

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

Второй подход не подразумевает критерия сортировки объектов, то есть нет какого-то специального вычисленного значения по которому можно их отсортировать. Кто не верит (а многие кто не делал изометрию — не верят), возьмите листочек и порисуйте объектики размерами 2×8 и, например, 2×2, если что-то получится и вы как-то исхитритесь вывести какое-то число для вычисления глубины и сортировки — добавьте в пример объектик 8×2 и попробуйте их отсортировать в разных положениях относительно друг друга.

Ладно, числа нет, но мы можем вычислить отношения между ними (грубо говоря кто-кого перекрывает), а это, в свою очередь, использовать в топологической сортировке. Зависимости объектов можно вычислить используя проекции изометрических координат на изометрические оси.

Как сделать изометрию в unity
На скриншоте у синего куба зависимость от красного

Как сделать изометрию в unity
На скриншоте у зеленого куба зависимость от синего

Псевдокод для определения зависимости по двум осям (с осью Z аналогично):

С помощью такого подхода строим зависимости между объектами и рекурсивно проходимся по всем объектам и их зависимостям выставляя дисплейную Z координату. Подход довольно универсальный, а главное работает. Подробнее описание этого алгоритма можно почитать, например, тут и тут. А еще этот подход используется в популярной flash-библиотеке для изометрии (as3isolib).

Всё бы хорошо, да вот алгоритмическая сложность данного подхода O(N^2), так как для построения зависимостей нужно сравнить каждый объект с каждым. Но оптимизации были отложены на более поздние версии, разве что я сделал ленивую пересортировку, что бы ничего не сортировалось, когда ничего не двигается. Об оптимизациях позже.

Расширение редактора

Цели были поставлены следующие:

Всё это было сделано, конечно, не без проблем и всяческих уловок, но не было проблемы над которой я бился больше пары часов (гугл, форумы и комьюнити помогали решать возникшие вопросы не описанные в документации).

Как сделать изометрию в unity
На скриншоте мои gizmos для перемещения объектов в изометрическом мире

Выпуск

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

Мучительные 5 дней (примерно столько же я потратил на написание первой версии, но я знал что делал, без особых поисков и дум, что дало мне бОльшую скорость по сравнению с людьми, которые только начинают копать в сторону изометрии) и пришло письмо от Unity, что плагин одобрен и можете идти любоваться им в сторе и смотреть нулевые (пока) продажи. Отметился на местном форуме, встроил Google Analytics на страницу в сторе и стал ждать с моря погоды.

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

Оптимизации

Основные претензии были к двум вещам:

Алгоритм

При 100 объектах и O(N^2) было 10’000 проверок, что бы только найти зависимости, а еще нужно по всем ним пройтись и дисплейный Z выставить для сортировки. Нужно было что-то решать. В конечном итоге я перепробовал огромную кучу вариантов, не мог спать мучаясь над решениями. Не буду описывать все опробованные механизмы, опишу лучше на чем остановился в данный момент.

Во-первых, естественно, сортируем только видимое. Это значит, что нужно постоянно знать кто в кадре, при появлении в кадре добавлять объект в сортировку, при уходе — забывать. Юнити не даёт нам возможность узнать Bounding Box объекта вместе с его детьми в дереве сцены, пробегать по всем детям (причем каждый раз, потому что они могут добавляться и удаляться) не вариант — медленно. События OnBecameVisible и иже с ними тоже нельзя, потому что работают только для родительского объекта. Зато есть возможность получить все Renderer компоненты из нужного объекта и его детей. Вариант этот не блещет красотой, но такого же универсального способа с приемлемой производительностью я не нашел.

Тут есть тонкость, что используется функция GetComponentsInChildren, с помощью которой можно получить компоненты без аллокаций в нужный буффер, в отличии от той, что возвращает новый массив с компонентами

Во-вторых, нужно всё равно что-то делать с O(N^2). Я пробовал многие варианты разбития пространства, но остановился на простой двухмерной сетке в дисплейном пространстве, куда я проецирую свои изометрические объекты, в каждом такой секторе содержится список изометрических объектов, которые его пересекают. Идея простая: если проекции объектов не пересекаются, то и зависимости между объектами строить смысла нет. Далее бежим по всем видимым объектам и строим зависимости только в нужных секторах, тем самым понижая алгоритмическую сложность и увеличивая драгоценное быстродействие. Размер сектора выбираю как среднее между размерами всех объектов, результат меня устроил.

Общая производительность

Тут можно и отдельную статью написать конечно… Если коротко, то кэшируем компоненты (GetComponent их ищет и это не быстро), осторожнее со всем что касается Update, всегда нужно понимать, что это делается каждый кадр и нужно быть осторожнее. Помним про всякие интересные особенности типа кастомного сравнения с null. И прочее и прочее, в конце концов об этом всём узнаёшь во встроенном профайлере и начинаешь решать и помнить.

Также там узнаёшь о боли сборщика мусора. Нужна производительность? Забудьте о всём что может выделять память, а в C# (а особенно в местном старом Mono) это может делать всё, начиная от foreach(!) заканчивая создающимися лямбдами, а уж какой-нибудь LINQ противопоказан даже в самых простых случаях. В конечном итоге из красивых синтаксических конструкций и прочего сахара C# превращается в этакий Си со смешными возможностями.

Приведу полезные ссылки по теме:
Часть1, Часть2, Часть3

Результаты

Я никогда не видел, чтобы так улучшали этот алгоритм, поэтому особенно был рад результатам. Если в первых версиях буквально на 50 двигающихся объектах игра превращалась в слайд-шоу, то сейчас на 800 объектов в кадре — всё крутится на запредельных скоростях, пересортировываясь всего за 3-6мс, что для такого количества объектов и изометрии оооочень хорошо. Плюс после инициализации почти не выделяя в кадре памяти вообще.

Дополнительные возможности

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

Микс 2D и 3D

Смешивание 2d и 3d в изометрических играх интересная возможность, которая позволяет минимизировать отрисовку разных вариантов движения и поворотов (например 3д модели персонажей с анимациями). Делается не сложно, но нужно встроить это всё в систему сортировки. Всего лишь нужен Bounding Box модели со всеми детьми и сдвигать модель по дисплейному Z на его ширину.

Так можно вычислить Bounding Box модели со всеми её детьми

Как сделать изометрию в unity
А вот так всё получается в конечном итоге

Кастомные настройки изометрии

Тут всё относительно просто, просили сделать возможность задавать угол изометрии, аспект, высоту тайлов. Помучившись немного с математикой можно получить такое:

Как сделать изометрию в unity

Физика

А вот здесь интереснее. Так как изометрия симулирует 3д мир, то и физика должна быть трёхмерной, с высотой и прочим. Был придумал интересный трюк. Я дублирую все компоненты физики, такие как Rigidbody, Collider и прочее для изометрического мира. По этим описаниям и настройкам повторяю невидимый физический трёхмерный мир средствами самого движка и встроенного в него PhysX‘а. Далее беру вычисленные данные симуляции и возвращаю в те дублирующие компоненты для изометрического мира. Таким же образом симулирую события столкновений и триггеров.

Как сделать изометрию в unity
Гифка физической демки тулсета

Источник

Создание изометрических 2D-уровней с помощью системы Tilemap

Как сделать изометрию в unity

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

Обе системы построены на основе уже существовавшей системы Tilemap, появившейся в Unity 2017.2, и сегодня работать с ними так же просто! Кроме того, они имеют нативную интеграцию с Editor. В дальнейших версиях Unity они могут быть перенесены в package manager.

Если вам интересно поэкспериментировать с этими системами, мы создали заранее подготовленный проект Isometric Starter Kit с анимированным персонажем и несколькими тайлсетами окружений. Скачать его можно здесь.

Параметры проекта для Isometric Tilemap

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

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

Чтобы задать Custom Axis Sort на уровне проекта, перейдём в Edit > Project Settings > Graphics. В разделе Camera Settings вы увидите раскрывающееся меню Transparency Sort Mode, а также параметры значений X, Y Z для Transparency Sort Axis.

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

Как сделать изометрию в unity

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

В некоторых случаях может также понадобиться изменить для Transparency Sort Axis значение Z. Подробнее об этом мы расскажем ниже.

Типы тайловых карт

Система Tilemap состоит из нескольких взаимодействующих компонентов. Первые два — это игровые объекты Grid и Tilemap. Для создания Grid достаточно нажать правой клавишей мыши в любом месте Hierarchy, перейти к пункту 2D Object и выбрать тип Tilemap, который вы хотите использовать. По умолчанию каждая новая сетка Grid создаётся с одним дочерним игровым объектом Tilemap соответствующего типа. На данный момент существуют следующие типы Tilemap:

Tilemap — создаёт прямоугольные Grid и Tilemap. Пример использования этого Tilemap можно увидеть в 2D Game Kit движка Unity.

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

Hexagonal Flat Top Tilemap — ещё один тип Grid шестиугольников, в котором вверху шестиугольника находится грань, параллельная верхнему краю экрана.

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

Если вы хотите создавать отдельные игровые объекты Tilemap для каждого уровня высот тайлов, то лучше использовать обычный тип Isometric Tilemap. Он упрощает процесс создания автоматических форм коллизий, но обладает меньшей гибкостью при работе с перепадами высот между тайлами, потому что все тайлы на одном слое должны находиться на одной «плоскости».

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

Как сделать изометрию в unity

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

Воспринимайте Grid как «мольберт», на котором располагаются все игровые объекты Tilemap. А они, в свою очередь, по сути являются холстом, на котором мы будем рисовать тайлы. Чтобы начать рисование на Tilemap, нам также понадобятся кисть и палитра. Все тайловые ассеты находятся на Tile Palette, из которой их можно выбирать при помощи инструмента кисти и начинать рисование.

Для создания Tile Palette выберите Window > 2D > Tile Palette. В левом верхнем раскрывающемся меню выберите «Create New Palette». Убедитесь, что выбран соответствующий тип сетки. В примере я буду использовать обычный Isometric Tilemap, а также ассеты из проекта Isometric Starter Kit. В качестве размера ячейки палитры (cell size) укажем Manual, чтобы иметь возможность изменять размеры изометрических тайлов. В данном случае я знаю, что размеры моих тайлов соответствуют сетке с размером ячейки 1 по X и 0.5 по Y; однако они зависят от разрешения, выбранных при импорте значений pixels per unit и размеров ассетов — по сути, от изометрического угла, на который повёрнуты тайлы.

Как сделать изометрию в unity

Примечание об импорте ассетов

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

Как сделать изометрию в unity

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

Как сделать изометрию в unity

В пиксель-артных ассетах, которые мы используем для этого проекта, все тайлы оснований имеют высоту 32 пикселя и ширину 64 пикселя. Поэтому размер сетки по Y будет равен 0.5. Второй блок на изображении взят из пакета ассетов Golden Skull Studios; посмотреть его можно здесь. Тайл примера был уменьшен, но исходные ассеты имеют ширину 128 пикселей. Основание тайла примерно равно 66 пикселям, что даёт размер сетки Y, равный 66/128, то есть приблизительно 0.515 единицы.

Базовый процесс работы с Tilemap

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

Для рисования новым Tile по Tilemap выберите инструмент Brush (B) и нажмите на Tile в Palette. После этого вы сможете рисовать выбранным тайлом в окне сцены. Есть и другие инструменты рисования, например, Eraser (D), Box Fill (U), Flood Fill (G) и Tile Picker (I).

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

Режимы Tilemap Renderer

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

Как сделать изометрию в unity

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

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

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

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

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

Поэтому в процессе редактирования лучше выбрать для Tilemap Renderer режим Individual. В этом режиме каждый спрайт будет сортироваться по отдельности; это значит, что они будут правильно рендериться даже вне режима Play, что очень полезно при редактировании уровня. Завершив создание структуры уровня, можно в любой момент снова переключить режим Tilemap Renderer на Chunk.

Как сделать изометрию в unity

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

Как сделать изометрию в unity

Использование нескольких Tilemap

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

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

Чтобы перейти к рисованию на новом Tilemap, вернитесь в окно Tile Palette и измените Active Tilemap под основной панелью инструментов.

Добавление поднятых вверх областей

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

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

Использование обычной Isometric Tilemap

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

У моей Tilemap нижнего уровня для X и Y в Tile Anchor установлено (0, 0). Я хочу, чтобы новый слой отрисовывался на одну единицу выше, поэтому я изменю точку привязки нового Tilemap на (1, 1). Также я присвою Order in Layer значение 1 — на единицу больше, чем уровень основания.

Теперь можно сменить активный Tilemap на имеющий второй уровень высоты и начать рисование.

Как сделать изометрию в unity

Использование Z as Y Isometric Tilemap

Иногда бывает полезно имитировать разные высоты при помощи одной Tilemap. В таком слуае можно использовать Z as Y Isometric Tilemap и Grid.

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

Как сделать изометрию в unity

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

Задав правильное значение Custom Axis Sort, можно начинать рисовать тайлы, имеющие различные значения Z. Также можно настроить инкременты, с которыми значение Z перемещает поднятые тайлы вверх или вниз, изменив размер Z сетки Grid, по умолчанию равный 1.

Как сделать изометрию в unity

Вычисление значения Z

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

Добавление коллизий

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

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

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

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

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

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

Как сделать изометрию в unity

Добавление предметов

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

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

При помощи коллайдера можно задать точку, в которой игрок может пройти возле дерева. Это также можно сделать несколькими способами.

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

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

Если вы используете предметы как тайлы в Tilemap, то можете также воспользоваться коллайдером Grid. Выберите Tile Asset, соответствующий тайлу предмета (если вы не помните, где его найти, то см. раздел «Базовый процесс работы с Tilemap»). Вы увидите меню Collider Type. По умолчанию в качестве типа задан спрайт, то есть автоматически сгенерированный коллайдер будет использовать Physics Shape, о котором мы говорили выше. Если в качестве типа задана сетка. то он всегда будет точно соответствовать форме ячейки сетки, к которой прикреплён предмет. Возможно, это и не самый точный способ реализации коллайдеров, но для некоторых видов игр он может оказаться полезным.

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

Как сделать изометрию в unity

Использование Rule Tiles

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

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

Изометрические и шестиугольные Rule Tiles доступны из репозитория 2D Extras Unity на GitHub. В нём также есть множество других полезных ассетов для системы Tilemap, которые стоит изучить.

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

Как сделать изометрию в unity

Как сделать изометрию в unity

Как сделать изометрию в unity

Как сделать изометрию в unity

Как сделать изометрию в unity

Дальнейшая работа

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

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

Графика этого проекта была создана для Unity художницей @castpixel; другие её работы можно посмотреть здесь. Если вы хотите больше узнать о создании 2D-игр на Unity, то вам стоит изучить отличные курсы с веб-сайта Learn. Если вы ищете дополнительные ресурсы для экспериментов с тайловыми картами, то загляните в Unity Asset Store.

Впервые создаёте уровни при помощи Tilemap? Изучите построение двухмерных миров в этом туториале для новичков на Unity Learn.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *