ИНСТРУМЕНТЫ ВИЗУАЛИЗАЦИИ КОМПЬЮТЕРНЫХ ИГР

В настоящее время программные обеспечения по созданию компьютерных игр (игровые движки) являются довольно перспективным направлением работы с трёхмерной (3D) графикой. Сами по себе они не предназначены для создания 3D-моделей. Для этих целей лучше использовать специальные программы моделирования, такие как Blender или же Maxon Cinema 4D. Однако игровые движки содержат в себе большое количество разнообразных инструментов визуализации. С их помощью можно добиваться невероятно реалистичного результата, а возможность запускать сцену позволяет симулировать 3D-пространство в режиме реального времени.

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

Игровой движок — это базовое программное обеспечение компьютерной игры, которое пригодно для повторного использования и расширения. Сам термин «игровой движок» появился в середине 1990-х годов в отношении игр-шутеров от первого лица. Одной из таких игр была Doom, разработанная компанией id Software. В настоящее время основными полями разработки игр являются Unreal Engine, Unity и Cry Engine.

Цель данной статьи — показать возможности инструментов визуализации игрового движка Unity для разработки графического интерфейса мобильного приложения.

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

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

Ни один игровой движок невозможен без понятия сцены. Сцена является игровым пространством, в котором расположены объекты игры. Само пространство может быть как двумерным, так и трехмерным.

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

Рассмотрим возможности инструментов визуализации игрового движка на примере Unity. Во всех игровых движках уже по умолчанию присутствует процесс рендеринга сцены. Без него было бы невозможно увидеть на экране то, что происходит в игре. Данный процесс включает в себя несколько этапов выполнения, которые позволяют сформировать двумерную проекцию сцены. Алгоритм этих действий следующий:

1. 1 Подготовка сцены.
2. 2 Построение примитива объекта.
3. 3 Окрашивание объектов.
4. 4 Проекция экранного пространства.
5. 5 Растеризация.

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

После определения примитивов объектов происходит окрашивание. Самый простой тип обработки цвета — это интерполяция. Он заключается в том, что происходит построение новых точек данных в пределах диапазона дискретного набора известных точек данных. На рис. 1 показана каркасная и раскрашенная сфера.

До сих пор игра была по-настоящему трехмерной, но финальный кадр не может быть таковым. Чтобы превратить видимый мир из 3D-пространства в 2D-холст необходимо произвести два этапа: построение проекции экранного пространства и растеризацию. На рис. 2 показан пример проекции экранного пространства. Для создания проекции экранного пространства программа использует большое количество математических методов, основная цель которых состоит в определении объектов, входящих в область видимости камеры, и удалении невидимых примитивов.

Для создания проекции экранного пространства программа использует большое количество математических методов, основная цель которых состоит в определении объектов, входящих в область видимости камеры, и удалении невидимых примитивов.

Последняя стадия преобразования 3D в 2D — это растеризация. На этой стадии создаётся пиксельная сетка, и она сравнивается с краями фигуры под ней, и там, где края перекрываются, пиксель помечается для обработки. На рис. 3 показан пример растеризации кадра, содержащего один примитив.

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

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

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

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

Universal Render Pipeline (URP)

Это упрощенный конвейер. Он предназначен для обеспечения высококачественной графики при сохранении оптимальной производительности. Такой конвейер поддерживает динамическое освещение, создание экземпляров графического процессора и эффекты постобработки. URP предлагает прямой рендеринг, рендеринг forward+ и отложенный рендеринг. Он совместим с широким спектром платформ, таких как Windows, MacOS, Android и т.д. Конвейер URP является высокоэффективным, но за это ему приходится жертвовать некоторыми функциями. Например, он не включает объемные облака, объемный туман или размытие движения для каждого объекта. URP является самым производительным и довольно простой в использовании конвейером.

High Definition Render Pipeline (HDRP)

Это конвейер, предназначенный для обеспечения высококачественной графики для высокопроизводительного оборудования (игровые консоли и высококлассные компьютеры). HDRP является физическим конвейером, который поддерживает новейшие методы рендеринга. Например, он поддерживает трассировку лучей, объемные облака, объемное освещение и освещение HDR. Технология HDRP обеспечивает высокореалистичную графику с точными отражениями.

Конвейер рендеринга HDRP имеет ряд преимуществ, которые делают его идеальным выбором для разработчиков:

• Высокореалистичный рендеринг графики в режиме реального времени
• Возможность добавления атмосферных эффектов (дождь, туман, облака)
• Поддержка технологии трассировки лучей
• Объёмное освещение

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

Встроенный конвейер (Built-In)

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

Ключевые достоинства встроенного конвейера следующие:

• Совместимость с широким спектром платформ и устройств
• Высокий уровень кастомизации через пользовательские шейдеры
• Поддержка динамического освещения и эффектов постобработки
• Обеспечивает поддержку как 2D, так и 3D-графики

В качестве практического примера демонстрации инструментов визуализации рассмотрим их использование для реализации графического интерфейса приложения «Двойные крестики-нолики».

Мобильное приложение «Двойные крестики-нолики» выполнено в 2D-режиме с видом сбоку. В качестве конвейера рендеринга был выбран встроенный конвейер игрового движка Unity. Для данного приложения такой выбор является оптимальным, поскольку он поддерживает работу 2D, совместим со многими устройствами и является довольно производительным.

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

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

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

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

Для большинства кнопок, в данном приложении, дочерним элементов выступает иконка (изображение). Чтобы правильно настроить такую кнопку, был использован компонент Image и его свойство Color. Поскольку данное свойство смешивает выбранный цвет с цветом спрайта, то для избежания неправильной окраски необходимо импортировать изображение в белом цвете.

Большинство элементов интерфейса в меню необходимо было сделать с скруглёнными углами. В Unity нет встроенного компонента, который мог бы выполнить скругление углов. Для решения поставленной задачи можно использовать несколько способов. Первый — это импортировать изображенияе уже со скруглёнными краями. При таком способе размеры объекта являются фиксированными, а их изменение вызовет искажение исходного спрайта. Второй способ — это использовать компонента маски. Данный способ хорошо подойдёт, если объект маски имеет прямоугольную форму. Если использовать спрайт с произвольной фигурой, то края маски будут грубыми (хорошо видны пиксели). Третий способ — это нарезать спрайт на части. При таком подходе возможно изменять размер объекта и края скругления будут гладкими. На рис. 5 показаны примеры использования разных способов скругления углов объекта.

Чтобы нарезать спрайт, в Unity используется редактор спрайтов. Нарезка спрайта применяется, когда нужно сохранить пропорции сторон. Выделенные области могут либо растягиваться, либо выкладываться (заполнять недостающие пространство своими копиями). Для создания скругления углов объекта был импортирован спрайт. Он представляет из себя круг белого цвета. Если начать его растягивать без нарезки, то он потеряет свою форму как это было показано на рис. 5. Чтобы избежать деформации фигуры, в редакторе спрайтов границы рамки были выставлены по центру спрайта. Нарезка белого круга показана на рис. 6.

Редактор спрайтов имеет ещё одну полезную функцию. Он может разбивать один большой файл спрайта на несколько мелких. Такой подход является более подходящим, чем добавление несколько маленьких файлов. Данная функция имеет несколько режимов нарезки: ручная, с заданием размеров сетки, и автоматическая. Нарезка файла спрайта на несколько частей показана на рис. 7.

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

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

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

Представленные технологии использовались для разработки мобильного приложения «Двойные крестики-нолики"». Игра является усложнённым вариантом классических «крестиков-ноликов». Классический вариант довольно популярен среди детей и молодёжи, однако его постоянное использование приводит к постепенному угасанию интереса к игровому процессу. Одной из причин являются сравнительно лёгкие правила игры. В варианте «Двойные крестики-нолики» имеются дополнения к традиционным правилам, благодаря которым усложняется игровой процесс. Такое новшество позволяет поддерживать интерес к игре. Совместное использование традиционной версии и предлагаемой позволяет сделать игру многоуровневой.

Цель данной статьи — показать возможности инструментов визуализации игрового движка Unity для разработки графического интерфейса мобильного приложения.

Рассмотрен процесс рендеринга сцены, который включает в себя несколько этапов для формирования двумерной проекции сцены, и сводится к выполнению следующих действий:

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

В качестве практического примера демонстрации инструментов визуализации рассмотрено их использование для реализации графического интерфейса приложения «Двойные крестики-нолики», которое является усложнённым вариантом классических «крестиков-ноликов».