Road Run, или как я свою первую игру делал. Часть 2
Введение
В первой части я рассказал о самой игре и о создании модели дорожного полотна. По дорожному полотну двигается автомобиль, избегая препятствий.
Одной модели дороги для полноценной игры будет мало, нужен ещё окружающий дорогу пейзаж, иначе дорожное полотно, подвешенное в пространстве, будет выглядеть как минимум неестественно, а у пользователя возникнет ощущение, что игра не доделана.
Значит надо создать какое-нибудь окружающее пространство для услады взора игрока. Для начала поле зрения игрока следует ограничить, ведь заполнять всё пространство от игрока до горизонта моделями затратно как по времени, так и по производительности.
Стена
Для этой цели можно использовать стену, расположив её на заднем плане. Перед стеной, вдоль дороги, следует выставить дома, деревья, припаркованные автомобили и прочие объекты, которые будут служить фоном для разворачивающегося действа. Теперь, когда игрок будет ехать по дороге, он будет видеть привычный глазу пейзаж со строениями и зелёными насаждениями, а в просветах между ними взор будет упираться в стену, а не проваливаться в пустоту.
Модель для стены — плоскость, как и в случае с дорогой, рассмотренной в первой части моего повествования, а вот текстуру для неё я предлагаю сделать другим способом.
Прежде, чем приступать к работе над текстурой, надо понять для себя, как она должна выглядеть, например, у игрока не должно возникать ощущение, что стена — это фон «по умолчанию» в редакторе сцен игрового движка. По этой причине, я решил отказаться от монотонных цветов.
Стена будет находиться на заднем плане, а это означает, что она будет не только дальше других объектов от игрока, но и то, что любые другие объекты, находящиеся вдоль дороги, будут её скрывать. Значит не имеет смысла использовать текстуру с мелкими элементами дизайна, для корректного изображения которых потребуется высокое разрешение и, как следствие, большой размер файла с изображением этой текстуры. Игрок их скорее всего не заметит, а вот производительность пострадает.
Для стены я предпочёл изображение кирпичной кладки, если её сделать достаточно крупной, она не потребует изображения высокого разрешения. В кирпичной кладке можно использовать разноцветные кирпичи, что разнообразит пейзаж, сделает его менее однотонным.
Кирпичная текстура
Но как создать подобную текстуру? Можно нарисовать в графическом редакторе. Кирпичная кладка — узор простой, даже возможностей стандартного графического редактора Paint хватит для этой задачи. Можно скачать с тематических сайтов в сети, например с такого.
Я решил пойти третьим путём, и сгенерировать текстуру в редакторе для трёхмерных моделей Blender. Генерирование простой кирпичной кладки не займёт много времени, но при этом может сильно его сэкономить, если придётся менять текстуру, например, захочется кирпичи сделать других цветов, или изменить цвет и размер стяжки между ними. Всё это сильно пригодится при подборе дизайна и цветовой гаммы игры.
Как создать плоскость в Blender можно прочитать в первой части, которая находится здесь. Сейчас же я больше внимания уделю процессу создания самой текстуры.
Плоскость создана, материал ей назначен, а Blender открыт в рабочем пространстве (workspace), всё выглядит, как на картинке внизу:
Начало работы
В редакторе «Shader Editor», он находится слева, следует удалить все узлы кроме узлов «Material Output» и «Diffuse BSDF». Первый нужен для вывода изображения на поверхность модели, иначе поверхность будет чёрного цвета, в независимости от добавленных узлов в материал. Второй полезен при работе со светом и отражениями. Внизу, на картинке «Diffuse BSDF», приведён пример, как будет выглядеть модель при освещении её точечным источником света: слева — с узлом «Diffuse BSDF», а справа — без.
Diffuse BSDF
Для получения кирпичной кладки надо добавить узел «Brick Texture». Располагаем курсор мыши над той частью окна, в которой находится «Shader Editor» и нажимаем комбинацию клавиш «Shift + A» на клавиатуре. Открывается контекстное меню «Add» (добавить), в котором надо выбрать пункт «Texture», он откроет ещё одно меню, но теперь с узлами. В открывшемся меню и следует выбрать узел «Brick Texture».
У каждого узла могут быть входы и выходы, например, у узла «Diffuse BSDF» есть три входа: «Color», «Roughness» и «Normal», и один выход, называющийся «BSDF». А вот у узла «Material Output» есть только входы, а выходов нет. Кратко говоря, для того, чтобы узлы взаимодействовали друг с другом, выходы одного узла нужно соединить с входами другого.
Выход «Color» узла «Brick Texture» нужно соединить со входом «Color» узла «Diffuse BSDF». Теперь можно настроить параметры внутри узла «Brick Texture» по своему вкусу, и кирпичная кладка готова.
Процедурная кирпичная кладка
Если в редакторе »3D Viewport» вместо кирпичей видно только серое поле, возможно не включен режим предпросмотра материала «Material Preview». Его можно включить воспользовавшись группой кнопок в верхнем правом краю редактора »3D Viewport» (оранжевая стрелка на рисунке «Процедурная кирпичная кладка»).
От вычислений к изображению
Текстура готова, но она процедурная, созданная при помощи построенного из узлов блендера алгоритма, а для игрового движка нужно растровое изображение. Следующая задача, которую надо решить, это преобразование получившейся текстуры из процедурной в растровую и сохранение её на диске ПК.
Для её решения могу предложить следующий метод, которым пользуюсь и сам. Он состоит в том, чтобы использовать две модели, одна из которых будет содержать материал с процедурной текстурой, а другая тоже будет содержать материал, но с растровой картинкой. В таком случае можно будет перенести изображение, сгенерированное алгоритмом в процедурной текстуре первой модели, на растровую текстуру второй модели. В блендере сие действо зовётся запеканием текстуры (Baking).
Создать копию модели в блендере проще простого, надо выделить модель, которую нужно скопировать, и нажать комбинацию клавиш «Shift + D» на клавиатуре, и затем клавишу «Escape», иначе копия модели может сдвинуться относительно оригинала. Для корректного запекания текстуры модель и её копия должны располагаться в одних и тех же координатах.
Для простоты понимания модель с процедурной текстурой я назову «BrickWall», а её копию для растровой текстуры так и назову — «Copy».
Удаление материала
Копия готова, выделяем её, когда одна модель наложена на другую, выбрать нужную удобнее всего в редакторе «Outliner», где все находящиеся на сцене объекты представлены древовидным списком. Выделив копию, удаляем из неё материал, используя вкладку «материал» редактора свойств «Properties». На этой вкладке рядом с полем, где отображаются все материалы выбранной модели, есть кнопка, на которой изображён минус, нажатие на неё удаляет слот с материалом, что и нужно сделать. Нажимаем на появившуюся кнопку «New», создаётся новый материал и слот для него.
Теперь надо создать растровый файл, в который будет сохранено изображение процедурной кирпичной кладки. Для чего можно воспользоваться рабочим пространством «UV Editing».
UV Editing
В нём в редакторе «UV Editor» нажимаем на кнопку «New», которая находится сверху в ленте редактора. Откроется модальное окно, в котором нужно ввести желаемые параметры создаваемого изображения, и нажать кнопку «OK» для его создания. В поле имени картинки (Name) желательно ввести осмысленное название, например «Bricks», оно упростит поиск картинки в других редакторах. Размер текстуры можно выбрать любой, желательно выбирать значения кратные степени двойки, с ними лучше работают различные алгоритмы сжатия в игровом движке. Остальные настройки я оставил как есть.
Создание изображения
Только что созданную пустую картинку подключаем в материале модели с названием «Copy». Структура этого материала такая же, как и у материала модели дороги из первой части. Переходим в рабочее пространство «Shading», и в редакторе «Shader Editor» комбинацией клавиш «Shift + A» добавляем требуемые узлы: «Diffuse BSDF» — в пункте меню «Shader», а «Image Texture» (с коричневой полоской сверху) — в «Texture». В узле «Image Texture» в выпадающем списке выбираем созданную в редакторе «UV Editor» картинку.
Подключение изображения к материалу
Теперь всё готово, и можно приступать к запеканию. В этом случае понадобятся два следующих редактора: «Outliner», где я буду выбирать модели, участвующие в процессе запекания текстуры, и «Properties» для настройки самого процесса.
В блендере можно выделить сразу несколько объектов, выделенные объекты будут иметь оранжевое обрамление в редакторе »3D Viewport», а их имена в редакторе «Outliner» станут оранжевого цвета. Объект выделенный жёлтым цветом является активным, это означает, что все операции и преобразования будут происходить относительно него. Активным элементом становится последний выбранный элемент.
Поскольку нужно перенести графическую информацию из процедурной текстуры материала модели «BrickWall» на растровое изображение внутри материала модели «Copy», то модель «Copy» должна быть активной. Чтобы сделать активным выделенный элемент, надо щёлкнуть на нём левой кнопкой мыши, зажав при этом клавишу «Ctrl» на клавиатуре. В итоге модель «BrickWall» должна быть подсвечена оранжевым цветом, а модель «Copy» — жёлтым.
Подготовка к запеканию
Модели выделены, переходим к запеканию. В редакторе «Properties» находим вкладку «Render», она имеет иконку с фотоаппаратом на боковой панели. В ней есть группа настроек «Bake», она-то и нужна.
В поле «Bake Type» нужно выбрать «Diffuse», ниже появятся три флажка «Contributions», среди них требуются установить флажок «Color», а остальные два снять. Если их не снять, то в растровое изображение запишутся не только цвета, но и тени, света и отражения.
Также необходимо установить флажок «Selected to Active», его установка позволит перенести цветовую информацию с выделенного объекта или объектов на активный.
Если установить флаг «Clear Image», то изображение, в которое должна будет производиться запись, в нашем случае это картинка с именем «Bricks», будет сначала стёрто, а затем уже в него запишется новая цветовая информация.
Нажатие на кнопку «Bake» запускает процесс переноса графической информации из процедурной текстуры кирпичной кладки в растровый файл. Длительность процесса зависит от размера и сложности текстуры, а также от производительности ПК.
На самом верху вкладки «Render» есть три поля, о которых стоит упомянуть. Первое сверху поле «Render Engine» определяет, какой движок используется для вывода изображения (рендеринга), в нём должен стоять «Cycles», иначе не будет доступна группа настроек «Bake».
Поле, располагающееся посередине, «Feature Set» даёт доступ к экспериментальным возможностям, стабильная работа которых не гарантирована. Для запекания текстур достаточно уровня «Supported».
Самое нижнее поле, «Device», позволяет выбрать компонент ПК, силами которого будут производиться вычисления, необходимые для прорисовки текстуры. Обычно, это процессор или видеокарта. Видеокарты справляются с подобными задачами быстрее чем процессоры, поэтому я рекомендовал бы использовать именно видеокарту (GPU Compute), если компьютер имеет таковую на борту.
Иногда случается так, что хоть компьютер и оборудован видеокартой, но при выборе «GPU Compute» в поле «Device», поле вместе с выбранным пунктом становятся неактивны и отображаются тусклым серым цветом. Проблема скорее всего кроется в том, что в настройках устройства прорисовки для движка «Cycles» не выбрана видеокарта. Исправить это позволяет пункт «Preferences…» в меню «Edit» основного окна блендера.
Настройка оборудования
В открывшемся окне «Blender Preferences» в левой колонке следует выбрать пункт «System», в правой части окна откроются системные настройки. В них для нас интерес представляет пункт «Cycles Render Devices», который позволяет выбрать, какие компоненты ПК блендер может использовать для работы с графикой.
Когда отрисовка изображения закончится, можно перейти в рабочее пространство «UV Editing», где, если всё пошло по плану, пред нами во всей красе предстанет новоиспечённая растровая текстура. В меню «Image» пункт «Save» позволит сохранить текстуру на жёстком диске компьютера.
Сгенерированная текстура
Окно в стене
В растровую текстуру можно можно сохранить, ну или запечь, цвета не только с одного элемента, но и с нескольких, о чём я здесь и расскажу.
В большинстве случаев, модели не состоят из одной плоскости, да и на плоскостях зачастую располагаются дополнительные элементы. Например, дом имеет не одну стену, а в стене дома будут как минимум окна и двери, если конечно стена не глухая.
Модель глухой стены для игры уже есть, не повредит и стена с окном. Лучше всего, с моей точки зрения, изготовить окно отдельным элементом, а затем перенести его изображение на стену. Нарисованное на стене окно будет потреблять меньше ресурсов в игре, чем окно, которое сделано отдельным элементом.
Окно можно сделать формы любой сложности, но ради простоты и краткости изложения, я думаю, следует остановиться на квадратном окне с наличниками. Подобное окно к текстуре, конечно, можно дорисовать в любом графическом редакторе, работающем с растровыми изображениями — достаточно выбрать фигуру квадрата с заливкой. Но это касается только простых моделей и текстур для них, чем сложнее модели, тем сложнее будет рисовать что-либо на их текстурах в редакторах.
Окно. Создадим плоскость, и уменьшим её. Для уменьшения плоскости нужно выделить её и нажать на клавиатуре клавишу «S», далее движением мыши или вводом дробного числа с клавиатуры уменьшить плоскость до желаемых размеров будущего окна.
Если объектов на сцене стало слишком много, и они мешают работать, перекрывая друг друга, то часть из них можно скрыть в редакторе «Outliner», нажав на пиктограмму с открытым глазом напротив тех объектов, которые в данный момент не нужны. Глаз закроется, а объект исчезнет. Повторное нажатие на пиктограмму приведёт к появлению объекта обратно.
Скрытие объектов
Для создания наличников следует войти в режим редактирования геометрии, для чего сначала убедимся, что выделена та модель, геометрию которой нужно отредактировать, затем в редакторе »3D Viewport» из меню в левом верхнем углу выберем «Edit Mode» или нажмём клавишу «Tab».
Режим работы с геометрией
Рядом с меню, где был выбран режим «Edit Mode», появится панель с тремя кнопками, которые управляют режимом выбора элементов геометрии модели: вершина (Vertex), ребро (Edge) и грань (Face). Включаем режим выбора граней, выделяем грань, у только что созданной плоскости она одна единственная. На клавиатуре нажимаем клавишу «I», вводим значение »0.1» и нажимаем клавишу «Enter». Окно готово, остаётся его только раскрасить.
Каждая грань модели может иметь свой материал, чем и следует воспользоваться для раскраски окна. Не выходя из режима редактирования открываем вкладку «Material» в редакторе «Properties», создаём в ней два материала кнопкой »+», ниже есть группа настроек «Surface», в ней можно настроить цвета материалов на свой вкус. Я выбрал синий для стекла и красный для наличников.
Под полем с материалами есть три кнопки: «Assign», «Select» и «Deselect». Кнопка «Assign» назначает выбранный материал выделенной грани или граням редактируемой модели. Кнопка «Select» выделяет все грани, которые имеют выбранный материал, а кнопка «Deselect» наоборот — снимает с них выделение.
Грани и метериалы
Сразу после создания материалов, самый верхний в списке из них будет применён ко всем граням модели. Чтобы исправить подобную ситуацию, нужно выделить те грани, материал которых требуется изменить, затем из списка с материалами выбрать материал, на который должна быть произведена замена, нажать кнопку «Assign», и материал на выбранных гранях изменится.
Окно готово, теперь можно приступить к запеканию его в текстуру стены. Сам процесс аналогичен запеканию текстуры стены, но есть несколько отличий, о которых необходимо рассказать.
Если взять и запечь текстуру прямо сейчас, то может получиться следующий результат:
Ошибка
Связан такой результат с тем, что теперь перенос графической информации осуществляется не с одной модели на другую, а сразу с двух моделей: окна и стены. Модели на сцене пересекаются, и в таком случае неясно с какой из моделей следует брать графическую информацию в зоне их пересечения.
Справиться с этой проблемой можно, чуть-чуть приподняв окно над стеной. Для чего следует выйти из режима редактирования модели, если он включён (клавиша «Tab» или пункт «Edit Mode» в меню в левом верхнем углу редактора »3D Viewport»). Выделить модель окна, нажать клавишу «G» и за ней клавишу «Z», теперь вместе с движением курсора мыши будет двигаться и окно, но только вдоль оси Z. Если вместо «Z» нажать «Х» или «Y», то модель будет двигаться вдоль оси Х или оси Y соответственно. Остаётся всего лишь немного приподнять окно над стеной и нажать «Enter».
Теперь модель окна не пересекается с моделью стены, а находится над ней, и в процессе запекания текстуры будет нанесено поверх кирпичной кладки.
Чтобы изображение окна смогло появиться на растровой текстуре стены, следует поставить значение больше нуля в поле «Extrusion» вкладки «Render» редактора «Properties». В поле «Extrusion» указывается максимальная дистанция от активного объекта, на которой выделенные объекты будут влиять на его текстуру. Если в этом поле будет »0», модель окна, находящаяся небольшом расстоянии от стены, не отобразится в текстуре модели «Copy».
Extrusion
Выделяем все три модели, делаем модель «Copy» активной, нажимаем кнопку «Bake», и ждём, когда запечётся текстура.
Окно в стене
Если всё сделано было верно, то на текстуре кирпичной кладки появится окно. В случае отсутствия окна на текстуре, следует проверить внимательно все вышеперечисленные настройки, а также убедиться, что окно находится над стеной, а не под ней. Приподнимая окно над стеной нужно следить, чтобы оно двигалось в сторону положительных чисел оси Z. Другой причиной может быть сильное удаление модели окна от модели стены, величина, указанная в поле «Extrusion», должна превышать дистанцию между моделями.
Стены
Допустим для игры потребуется изготовить стену других размеров или пропорций: выше, ниже, длиннее или короче уже существующей. Нет задачи проще, не придётся даже входить в режим редактирования модели, достаточно выделить модель и нажать на клавиатуре клавишу «S».
Нажатие клавиши «S» запускает команду «Scale», которая изменяет размеры выделенной модели или моделей, если выделено было несколько, сразу по трём осям. Размер модели можно менять как движением курсора мыши, так и вводом с клавиатуры множителя. Если нажать одноимённую с какой-либо из осей клавишу: «X», «Y» или «Z», то размер будет меняться вдоль той оси, клавиша которой была нажата. Нажатие какой-нибудь из этих трёх клавиш вместе с клавишей «Shift» исключит ось, имени которой соответствует нажатая клавиша, из процесса изменения размера, то есть размер будет изменяться вдоль оставшихся двух осей. Например, комбинация клавиш «Shift + X» сделает так, что размер модели будет меняться только вдоль осей Y и Z.
Нажали заветную клавишу, изменили размер и пропорции стены, но вместе с ними поменялись размеры кирпичей в стене, что в планы, могло и не входить. Что же делать?
Стены
Один из вариантов решения — подредактировать настройки узла «Brick Texture»: длину кирпича «Brick Width», высоту кирпичного ряда «Row Height» и масштаб «Scale». Но подобный вариант не особо-то удобен, для каждой новой стены придётся создавать новый материал, и подгонять его настройки так, чтобы кирпичи были одинакового размера хотя бы приблизительно.
Texture Coordinate
Второй вариант, с моей точки зрения, подойдёт больше. В рабочем пространстве «Shading» в редакторе «Shader Editor» следует добавить узел «Texture Coordinate», который обычно используется для позиционирования текстуры на модели и её гранях. Комбинацией клавиш «Shift + A» вызываем контекстное меню «Add», в его пункте «Input» выбираем узел «Texture Coordinate». Выход «Object» узла «Texture Coordinate» соединяем со входом «Vector» узла «Brick Texture», теперь размер кирпичей будет одинаков на стенах любых пропорций.
Заключение
В этой части был рассмотрен один из методов создания текстур для трёхмерных моделей. Основное его преимущество, с моей точки зрения, это то, что он не требует наличия сколь нибудь серьёзных навыков в изобразительном искусстве. Нет необходимости иметь графический планшет, стоимость которого может достигать внушительной суммы, да и рисование на таких планшетах всё же отличается от рисования на бумаге.
Стены и стены с окнами, без сомнения, способны разнообразить пробегающий мимо пейзаж, хоть что-то вдоль дороги всё же лучше, чем ничего, но одними только стенами красивые виды сделать будет трудно, да и большинству игроков вид коридора, пускай и с окнами, может быстро наскучить.
Поэтому в следующей части я продолжу тему создания трёхмерных моделей и текстур к ним. Расскажу о том, как можно быстро создать упрощённые модели домов, которые с одной стороны не потребуют больших вычислительных мощностей, с другой же стороны не будут выглядеть как раскрашенные примитивы.
Надеюсь, что изложенный материал было, как минимум, интересно читать, а для кого-нибудь он оказался даже полезен и открыл что-то новое. Описываемую игру можно скачать тут, так же удобно воспользоваться приложением для загрузки и установки игр с itch.io, которое скачивается здесь.
