Шаблон Базовый город демонстрирует процесс и методы, которые вы можете использовать для создания внешнего вида города в Unreal Editor для Fortnite (UEFN).
На этом острове представлена небольшая часть Нью-Йорка, освещённая и стилизованная так, чтобы черепашки-ниндзя почувствовали себя как дома! Протестируйте шаблон и взгляните на город снизу и сверху.
В этом руководстве описаны шаги, предпринятые командой для концептуализации и воссоздания внешнего вида шаблона. Были затронуты следующие вопросы:
Разработка визуальных элементов на основе концепции
Подходы к размещению ресурсов
Методы постобработки
Дополнительные приёмы стилизации: пользовательское небо, освещение и окна
Идеи для развития игры
Ознакомьтесь с принципами постобработки, создания неба и пользовательского освещения, а также узнайте, как настраивать потрясающие стилизованные визуальные эффекты.
Этот урок не охватывает игровой процесс. Карта не включает в себя барьеры на уровне. Вы можете добавить их в свою игру с помощью устройства Барьер. Чтобы узнать, как создать аркадный режим игры, включая камеру для сайд-скроллера и уникальный интерфейс, смотрите шаблон аркады «Черепашки-ниндзя».
Чтобы открыть шаблон, выполните следующее:
Откройте редактор UEFN.
Перейдите в Фирменные шаблоны > Базовый город.
Создайте новый проект.
Если вы не видите проект в «Фирменных шаблонах», убедитесь, что вы вошли в систему под своей учётной записью. Более подробную информацию см. в разделе Правила бренда «Черепашки-ниндзя».
Визуальные стили
Шаблон «Базовый город» содержит два ярких визуальных стиля: мультфильм и комикс. Они были разработаны, чтобы соответствовать игровому процессу и тематике «Черепашек-ниндзя». Эти два стиля доступны в шаблоне UEFN через области постобработки, а на творческих островах — с помощью устройства постобработки. Эти стили можно использовать не только в инструментах разработчика «Черепашек-ниндзя». Используйте приёмы, описанные в шаблоне, для придания индивидуальных особенностей своим островам или для создания игр на базе этих шаблонов.
 |  |
Фильтр мультипликационного стиля | Фильтр стиля «Комикс» |
Эти стили были подобраны на основе самых разных вариантов «Черепашек-ниндзя»: от мультфильмов до 3D-анимации. В их создании принимали участие специалисты Paramount, которые помогли воссоздать знаковые элементы, характерные для мира черепашек. Изучая концепт-арты и другие справочные материалы разработчики выделили такие моменты, как использования сел-шейдинга, сцены на крышах с видом на луну и цветовые схемы.
Образцы концепт-арта
Визуальный стиль выступает элементом гейм-дизайна, перекликаясь с механикой и сюжетом игры. Он охватывает такие составляющие, как цвета, освещение, ресурсы и компоновка сцены. Они помогают создать нужные впечатления от игры.
Смена стилей
В редакторе вы можете переключать стили на панели Структура. Перейдите на панель «Структура» и выполните поиск по ключевому слову «postproccess», чтобы посмотреть обе области — PostProcessVolume_Cartoon и PostProcessVolume_Comic.
Переключатель стилей в убежище в канализации.
По умолчанию активен мультипликационный стиль. Чтобы переключиться на стиль в духе комиксов, выполните следующее:
Отключите для PostProcessVolume_Cartoon значок глаза на панели «Структура».
Выберите PostProcessVolume_Comic и на панели Сведения найдите «Вес смешивания»
Установите для параметра Вес смешивания значение 1.
Перед запуском шаблона убедитесь, что вы откатили изменения, указанные выше.
В игре по этому шаблону вы можете выбрать визуальный стиль с помощью переключателей на стене в убежище в канализации. Переключите стиль, а затем исследуйте улицы и крыши, чтобы увидеть ресурсы «Черепашек-ниндзя», из которых создан город. Используйте этот шаблон как основу для создания своего собственного проекта в духе «Черепашек-ниндзя» или используйте визуальные приёмы в другом проекте.
Чтобы узнать, как дальше настраивать эти стили, смотрите раздел Методы постобработки на этой странице.
Дизайн уровней
Фильтры «Мультипликационный» и «Комикс» сами по себе составляют яркие визуальные стили, но единым целым шаблон делает город. Разработчики разместили ресурсы таким образом, чтобы получился аутентичный для черепашек-ниндзя город. Использование ресурсов «Черепашек-ниндзя» и Fortnite делает город многослойным. Расположение ресурсов для определения пространства и пути, по которому могут перемещаться игроки, называется дизайном уровня.
Город «Черепашек-ниндзя» с силуэтом горизонта на фоне, который добавляет глубину и окружает игрока.
В центре всего — город
Шаблон был разработан на основе вариантов, определяющих город. Хотя этот шаблон не является примером полноценной игры, чтобы помочь в разработке макета, он содержит элементы платформера. В этом жанре проще определить игровое пространство. В самом игровом пространстве разработчики разместили уникальные детализированные элементы, преимущественно фирменные ресурсы из «Черепашек-ниндзя». Идея заключается в том, чтобы игроки могли войти в игру и исследовать эти ресурсы.
Эти объекты являются частью тематического оформления. И когда вы хотите сменить стиль, о них следует помнить. Они могут как дополнить, так и исказить внешний вид игры. Расположение этих ресурсов на уровне и то, как игрок перемещается в сцене, также играет важную роль. В шаблоне используется дополнительные ресурсы, такие как плакаты, неоновые вывески, граффити и объекты окружения, которые придают миру своеобразие и ещё больше раскрывают тему. См. полный список ресурсов в статье Работа с островами «Черепашки-ниндзя».
Ресурсы 6 канала в стиле комиксов.
После того, как разработчики создали игровое пространство, у них появилась идея застроить оставшуюся часть карты, чтобы заполнить пространство.
Карта содержит задний, средний и передний планы. Чем дальше здания и окна от центра, тем проще они становятся. Линия горизонта служит фоном для карты, оставляя игрока в городе. В канализационном убежище размещены высокодетализированные ресурсы, поскольку предполагается, что игрок будет исследовать каждую часть территории.
 |  |
Компоновка ресурсов уровня-города | Компоновка ресурсов в логове в канализации |
Наконец, чтобы передать ощущения ночной жизни города, автор использовали такие акцентные элементы, как луна, окна, освещение и визуальный фильтр.
Методы постобработки
Атмосфера города передаётся с помощью визуальных стилей, созданных с использованием различных методов. Области постобработки — это многообещающая функция, которую задействовали здесь для создания стилей.
Постобработка — это визуальный слой, который влияет на внешний вид всего острова или отдельных его частей. Каждый фильтр имеет свои настройки постобработки, и при этом применяются пользовательские материалы, которые определяют внешний вид. Подробнее о постобработке и её стандартных настройках читайте в статье «Введение в постобработку».
Фильтр постобработки «Мультипликационный»
Объёмный туман
В материалах шаблона используется эффект атмосферного тумана с собственными настройками. Туман добавляет цвет и помогает придать городу объём. С помощью настроек материала можно художественно управлять силуэтами зданий и цветом сцены.
Чтобы узнать подробнее об элементах управления для внесения изменений, см. раздел Материал тумана с индивидуальными настройками на этой странице.
 |  |
Городской горизонт на переднем плане | Городской горизонт отодвинут на задний план |
Сел-шейдер
Материал с сел-шейдером сглаживает освещение и добавляет определённую постеризацию, делая контуры более чёткими. Сцена становится более «мультяшной».
В шаблоне этот эффект маскируется на переднем плане, чтобы изображение не было слишком резким. Поскольку мультфильмы и аниме, которые брали за образец, часто имеют более размытые задние планы, маскировка позволяет сохранить их вид.
 |  |
Значение сел-шейдера 0 | Значение сел-шейдера 1 |
Контуров
Обводка помогает ещё больше стилизовать сцену, создавая ощущение мультфильма. Материал содержит настройки для управления толщиной, цветом и непрозрачностью через глубину. С помощью этих настроек художники усилили линии на переднем плане и создали дополнительную обводку зданий по мере их удаления.
Фильтр постобработки «Комикс»
Фильтр «Комикс» («Нуар») задействует стандартные настройки постобработки, сел-шейдеры и материалы обводки, похожие на те, что используются для мультипликационного фильтра. Материал обводки был откорректирован так, чтобы он дополнял тоновый диапазон оттенков серого. Уникальные материалы фильтра включают в себя эффекты постеризации, гамму в стиле комиксов и рамки. В результате получился графический стиль, напоминающий комиксы или графические романы.
Гамма в стиле комиксов и рамки
Материал с тонами для комиксов обесцвечивает картинку и применяет лимиты яркости, чтобы придать сцене диапазон тонов, похожий на те, что используются в печатных изображениях. Затем применяется материал рамок, чтобы придать окончательный внешний вид.
 |  |
Гамма в стиле комиксов и рамки, значение 0 | Гамма в стиле комиксов и рамки, значение 1 |
Постеризация
Чтобы усилить эффект комикса, изображение постеризовано сплошными полосами серого цвета, преобразованными в точки разного размера. Чем темнее тон, тем крупнее точка, пока они не сольются в чистый черный цвет. Затем точки объединяются в полутоновое изображение в нужном количестве. Для материала используется значение 25%, чтобы уменьшить нагрузку на глаза во время игры.
 |  |
Значение постеризации 0 | Значение постеризации 1 |
Редактирование материалов постобработки
Материалы определяют эффект постобработки, который вы видите в обоих стилизованных режимах. Вы можете изучить сборку каждого материала и внести корректировки в свой проект. Вы также можете менять материалы в областях постобработки, чтобы быстро изменить стиль.
Чтобы просмотреть настройки материалов каждой области постобработки, выполните следующее:
Выберите область постобработки на панели Структура.
Откройте Панель «Сведения» > Функции отрисовки > Материалы постобработки > Массив.
 |  |
Мультипликационные материалы постобработки | Материалы постобработки «Комикс» |
Вы можете менять значение каждого массива в диапазоне от 0 до 1, чтобы изучить эффект каждого материала. Чтобы открыть расположение каждого материала, нажмите на значок папки. Дважды щёлкните по материалу, который хотите изучить, чтобы открыть «Редактор материалов». В «Редакторе материалов» некоторые удобные для пользователя настройки вынесены на панель «Сведения», а другие — в граф Material. Удобные для пользователя настройки — это параметры графа Material, выведенные в редактор в качестве публичных переменных. Чтобы узнать больше о материалах, включая редактор, функции и выражения, см. Узлы и настройки графа Material.
Материал тумана с индивидуальными настройками
Примером удобных для пользователя настроек материала могут служить параметры, установленные для материала объёмного тумана. Значения цвета тумана задаются с помощью кривой градиента. Это довольно гибкий способ точной корректировки значений тумана по глубине сцены. Этот метод делает создание стилизованного вида более управляемым с помощью встроенной в редактор системы атмосферного тумана.
Элементы управления параметрами материала объёмного тумана.
Материал содержит следующие основные параметры, с помощью которых дизайнеры могут быстро вносить изменения. Эти значения доступны на панели **Сведения** материала или в графе материала и меняют значения по умолчанию.
| Параметр тумана | Описание |
|---|---|
Кривая дальней и ближней точек | Устанавливает расстояния до ближней и дальней точек, к которым привязан ресурс этой кривой. Цвета градиента левой стороны кривой соответствуют ближней точке, а правой — дальней точке. |
Ввод кривой | Предоставляет кривую цвета для настройки градиентных цветов тумана. Чтобы открыть кривую, дважды щёлкните по значку. Узнать о ней подробнее можно в статье Атласы кривых в материалах в документации по Unreal Engine. |
Глобальное количество | Задаёт значение видимости градиента тумана в процентах. |
Порог дальности | Задаёт порог глубины сцены. Вы можете использовать значения диапазона, чтобы контролировать количество тумана на небе. |
На примере материала тумана показано, как можно открыть каждый материал, чтобы внести изменения. Те же принципы действуют и для других материалов. Чтобы попрактиковаться в создании нового материала постобработки и узнать о графе Material, см. Использование материалов постобработки.
Дополнительные методы визуального оформления
В этом разделе рассматривается ряд методов, которые применялись для освещения и окон, чтобы подчеркнуть атмосферу и стилизацию.
Настройка процедурно генерируемого неба
Ещё один метод, связанный с материалами, используется для неба. Он отличается от метода применения областей постобработки. В обоих фильтрах используется пользовательское процедурно генерируемое небо, создающее стилизованную атмосферу. Материал прикреплён к сфере со статичной сеткой, которая охватывает карту. Удобные для пользователя параметры вынесены на панель **Сведения** материала для быстрого доступа.
Найти инструмент **Небо** можно одним из следующих способов:
Структура > SkySphere > MI_ProceduralSkybox
Панель ресурсов > Название проекта > Materials > MI_ProceduralSkybox
Дважды щёлкните по миниатюре материала, чтобы открыть редактор материалов. Категория Группы параметров содержит настройки для управления стилизацией неба, описанные в таблице ниже. Категория содержит Глобальные значения переключения статичных параметров для переключения резкости горизонта и луны.
Элементы управления материалами неба.
| Параметр неба | Описание | Пример |
|---|---|---|
Глобальные значения скалярных параметров | Управляет атрибутами луны и атмосферы. Эти элементы управления предоставляют разработчику средства для стилизации луны как центрального элемента. В этой технике выполнен концепт-арт черепашек-ниндзя, бегущих по крышам зданий на фоне луны. |  |
Глобальные значения векторных параметров | Управляет цветом атрибутов неба. Пользовательские настройки неба обеспечивают более точный контроль градиента цвета неба и приоритетных значений смешивания. Такое управление цветом необходимо, чтобы лучше контролировать значения горизонта и зданий на его фоне. Дополнительные элементы управления цветом предназначены для тонкой настройки неба за пределами реалистичных значений, чтобы оно больше соответствовало стилизованной цветовой палитре. |  |
Сюрикены. | Управляет преобразованием, цветом, замощением и яркостью звёзд. |  |
Облака | Управляет картой текстуры облаков, количеством облаков, мягкостью краёв, тёмными и светлыми цветами, контурным освещением, непрозрачностью и направлением движения облаков. Это даёт разработчику возможность создать более динамичное небо, которое выглядит живым и интересным. |
Когда применяются пользовательские настройки неба и освещения, Диспетчер времени суток мира в Параметрах мира отключён.
Вы можете дополнительно изучить материал с помощью графа Material. Чтобы открыть граф Material, на панели инструментов редактора материалов нажмите Иерархия > M_ProceduralSkybox. Граф открывается с группами узлов, распределённых по категориям с полями комментариев, которые показывают, на какие параметры они влияют. Вы можете менять настройки узлов, чтобы регулировать параметры.
Граф Material процедурно генерируемого неба.
Настраиваемое освещение
Освещение для шаблона встроено в области постобработки, чтобы обеспечить необходимый внешний вид. Освещение помогает создать настроение проекта и направить игроков. Оно также помогает определить атрибуты фильтров постобработки. Общие источники освещают весь город, а специальные источники освещения добавлены, чтобы выделить здания и объекты окружения.
Декоративное освещение
Декоративное освещение — это процедура точно рассчитанного размещения источников освещения, которое создаёт определённые ощущения в игре.
На этапе разработки концепции авторы просматривают справочные материалы (часто называемые «эмоциональными картами»), чтобы определить эмоции и направление освещения. Эта процедура используется в других формах визуального искусства, например, в кино, мультипликации и театре.
Большинство источников декоративного освещения в сцене настраиваются с помощью чего-либо из следующего:
Свет неба: определяет цвет окружения сцены и управляет освещённостью самых тёмных участков теней.
Удалённый источник освещения: управляет положением луны и светом от неё.
Точечный свет: размещается для придания мультипликационных цветов в местах, которые в противном случае могли бы быть менее интересными. (Чтобы убрать яркие блики, создаваемые этим освещением, параметр глянца отключён.)
Световые компоненты, прикреплённые к актору.
Излучающие материалы.
Декоративное освещение также помогает сохранить визуальное качество при оптимизации проекта. Стилизация подсветки и ресурсов обеспечивает интересный внешний вид на устройствах с низкой производительностью.
 |  |  |
Классический стиль «Королевской битвы» Fortnite | Мультипликационный стиль | Стиль «Комикс» |
Подробнее о работе с художественным освещением рассказано в разделе Освещение и цвет.
Windows
Чем дальше от центра города, тем больше упрощаются окна на сцене. Как уже говорилось в разделе о дизайне уровня, упрощение добавляет глубины и помогает оптимизировать сцену. В окнах также используются материалы, излучающие свет и дополнительно поддерживающие стилизованный вид. В таблице ниже описаны различные методы, которые использовались при создании окон.
Устройство смены дня и ночи используется для управления выключением фонового освещения материалов зданий.
В этом примере цвет и стиль такого освещения материалов не соответствовал внешнему виду города, поэтому разработчики решили отключить их и создать собственные источники света в окнах.
| Техника | Описание | Пример |
|---|---|---|
Кубическая карта интерьера | Метод настройки материала, позволяющий создать трёхмерный внешний вид. Этот метод используется для оформления зданий, в которые игроки не будут заходить, но могут увидеть, когда проходят мимо них. Найти материал можно, нажав Панель ресурсов > Название проекта > Materials > M_Windows_Interior |  |
Маска окна | Материал, в который добавлено случайное значение позиции окна, чтобы придать разнообразие зданиям на заднем плане. Вы можете получить доступ к материалу, выбрав Панель ресурсов > Название проекта > Materials > M_WindowMask. |  |
Случайное значение из позиции в мире | Внешний вид комнаты, освещённой или неосвещённой, определяется положением окна в мире. К цвету материала каждого окна применяется значение смещения позиции в мире. Смещение создаёт случайный коэффициент яркости, делая город более живым. Этот метод позволяет сократить использование уникальных материалов и памяти. | |
Материал с мультипликационным блеском | Для имитации стилизованного эффекта блеска на окна накладываются диагональные линии. Панель ресурсов > Название проекта > Materials > M_Windows_Channel6. |  |
Развитие игры
Изучив подходы и методы, использовавшиеся для создания внешнего вида шаблона, вы можете приступить к созданию собственной игры в духе «Черепашек-ниндзя»!
Пройдитесь по шаблону, меняя стили, чтобы представить, какие элементы игрового процесса и сюжета соответствуют фильтру и обстановке города.
Вот несколько идей насчёт того, с чего начать.
Создайте платформер и добавьте врагов на пути его прохождения. Чтобы узнать, как добавить столкновения, смотрите Столкновения с врагами и препятствия на островах «Черепашки-ниндзя».
Используйте ресурсы студии новостей для сюжетных внутриигровых видео в стиле комиксов. Подробнее об этом см. в статье Создание внутриигровых видео и роликов.
Усильте эффект с помощью материалов со звёздочками из комиксов, которые можно использовать для диалоговых окон, создав их в Sequencer. Подробнее об этом читайте в статье События игрового процесса в Sequencer.
Создание солнечного стиля
Создавая игру на базе шаблона или используя его ресурсы в других проектах, исходите из концептуальной основы, заключающейся в том, как повествование и игровой процесс сочетаются с городской средой и ресурсами «Черепашек-ниндзя». Подумайте о настроении, которое нужно создать у игрока, и о том, как должно выглядеть освещение. Подумайте, какие части карты должны исследовать игроки.
Образец концепт-арта для карты в солнечном стиле со встречей NPC на крыше.
Используя области постобработки и дополнительные методы визуального оформления, вы можете воплотить этот солнечный город в реальном проекте.
Настройки неба
Сначала сделайте атмосферу ярче посредством процедурной генерации неба. Чтобы создать синее небо, выполните следующее:
В Панели ресурсов найдите MI_ProceduralSkybox и дважды нажмите на него, чтобы открыть в редакторе материалов.
Настройте следующие значения на панели **Сведения**:
Тёмные и светлые цвета облаков: RGB 1,0, 1,0, 1,0
Цвет горизонта: RGB 0,0619, 0,970, 1,0
Цвет сверху: RGB 0,038, 0,119, 0,838
Яркость звёзд: 0 (чтобы выключить звёзды)
Яркость луны: 9,5 (чтобы имитировать солнце)
Другой вариант: вместо настройки яркости луны можно заменить текстуру луны в графе **Material** на ваше собственное изображение солнца.
Настройки освещения
При голубом цвете неба солнце и направление его света должны лучше соответствовать друг другу. Чтобы настроить положение солнца и направление света, выполните следующие действия:
Найдите DirectionalLight_Index1 на панели Структура.
Вращайте источник света влево, чтобы задать более высокое положение.
На панели Сведения увеличьте значение интенсивности света до 6.
Затем выполните следующие действия, чтобы отключить свет в окнах на среднем и заднем плане:
Нажмите на окно на среднем плане.
В строке меню нажмите Выбор > Выбрать все акторы из такого же материала.
Удалите выбранные окна.
Повторите эти действия для окон на переднем плане.
Удаление окон, когда они не нужны, помогает оптимизировать сцену.
Настройки тумана
Используйте в качестве основы для солнечного режима PostProcessVolume_Cartoon. Чтобы настроить объем и цвет тумана, выполните следующие действия:
Найдите на «Панели ресурсов» материал PP_DepthFog_Ins и дважды нажмите на него, чтобы открыть в редакторе материалов.
На панели «Сведения» дважды нажмите на кривую цвета Ввод кривой.
Задайте значения цвета верхней части:
Цвет правого края: RGB 0,022, 0,979, 0,629
Цвет средней части: RGB 0,0, 0,140, 0,307
Цвет левого края: RGB 0,208, 0,059, 0,117
На панели Сведения ресурса PP_DepthFog_Inst настройте глубину градиента цвета со следующими значениями:
Дальняя точка кривой: 93511
Ближняя точка кривой: 14887
Настройки постеризации
Наконец, добавьте постеризацию, чтобы создать эффект точек как в стиле комиксов.
На панели **Сведения**, под секцией **Материалы постобработки**, добавьте элемент массива материалов, нажав на значок **плюс**.
В выпадающем меню нового массива выберите Ссылка ресурса, затем найдите и нажмите PP_Posterize.
Дважды щёлкните по миниатюре материала, чтобы открыть редактор материалов и задать значения.
На панели параметров установите значение Значение постеризации равным 0,05.
С помощью нескольких настроек материалов и освещения вы перенесли город под голубое небо! Теперь перенесём черепашек в их убежище.
