Как создавать игры? Гайд для новичков. Делаем спрайтовую модель для ужастика платформера. Часть 1

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

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

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

Как создавать игры - вступление

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

1. Игровой мир (сеттинг) – сюда входит территория, где будут разворачиваться события. Это может быть вымышленная страна, планета или космический корабль, где нужно сражаться с пришельцами. Если это планета, то на ней должны быть города с жителями, домами и т.д. Все это являются частью игрового мира, и называется ассетами. К счастью, в интернете существует достаточно моделей, которые можно использовать для своего мира, некоторые из них платные, но есть и бесплатные. Выбирая модели, следуют придерживаться определенного стиля, иначе получится мир, состоящий из объектов разных эпох. В интернете можно найти целые наборы моделей, выполненные в едином стиле, включая такие вещи, как доспех, мечи и предметы архитектуры. На картинке предоставлен пример ресурса с моделями. В конце статьи будет архив с полезными ссылками, где можно достать бесплатные модели.
2. Придумать название игры. Здесь все проще чем кажется, если дело касается городов, просто возьмите любой существующий город и переставьте буквы местами был Сидней (можно переставить слоги и добавить еще один слог) получится Ней-Альсид. Звучит, как город в Муровинде. Если хотите придумать уникальные имя, то можно применить язык из других стран и позаимствовать слова. Например, есть Санскрит, воспользовавшись переводчиком можно перевести фразы на этот язык и взять их в качестве названия городов. В интернете есть переводчик способный перевести на Санскрит (с транскрипцией). Еще один вариант воспользоваться генератором Никнеймов.
3. Персонажи – это NPC игрового мира. Они ходят, разговаривают и выполняют определенные действия, с ними можно взаимодействовать или убить их, если NPC настроен враждебно.
4. Лор – это предыстория игровой вселенной, так как без нее игра получится скучной и серой. К примеру, вся история Муровинда была записана в книгах. Игрок мог ознакомиться с историей и узнать больше о стране или определенном городе. Лор тоже необходимо продумать
5. Сюжет – основная составляющая игры. Здесь игрок выполняет задания и получает за это награду, в итоге протагонист, продвигаясь, раскрывает полностью всю сюжетную линию и в заключение персонажа ждет схватка с финальным боссом.

На старте нужно выбрать жанр игры и механику, которая будет основной в игре, их около ста. В этом видеоролике на 8 минут перечислены все 100 игровых механик.

Приступим к практике. Мы создадим игру, но сначала разберем 3d программу Blender. Делать мы будем платформер, где все модели это спрайты. Platformer – это игра, где персонаж перепрыгивает с платформы на платформу. Знаменитый пример такой игрушки Mario, который в свое время выпускался на денди. Для полноценного творения своего игрового мира потребуется программное обеспечение.

Софт разработчика. Какие программы использовать для разработки игр?

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

Существует 2d, 3d, а также 2.5D платформеры. Последнее напоминает 3D, но камера установлена в одной позиции, нацелена на помещение, где главный герой исследует комнату. Примером такой игры является, Little Nightmares 2 выпущенная в 2021 году, обзор вы можете увидеть ниже.

Мы будем создавать именно двухмерную графику, чем-то напоминающую Little Nightmares. У нас будет главный герой, который отправляется изучать местность, по пути будут попадаться зомби, оружием в бою будет автомат, а в темных помещениях можно использовать фонарик. Для реализации задумки мы будем использовать движок GameMaker Studio, версия не слишком новая, которая пойдет на слабых компьютерах под управлением Windows XP. На сегодня существует определенный процент пользователей, которые используют Windows XP. Статья рассчитана на любую аудиторию. Для более современной ОС, будет отдельный урок разработка игр.

Наш игровой мир будет состоять из следующих графических частей: окружающая среда, npc (враги, монстры, нейтральные юниты), UI-интерфейс (пользовательский интерфейс) и UX (пользовательский опыт) – где пользователь будет получать опыт в управлении персонажем. Чем удобнее интерфейс, тем лучше игрок будет справляться с поставленной задачей.

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

В нашем случае мы будем конвертировать персонажей из 3D. Для этого понадобиться мощный графический редактор. Большинство платные, мы воспользуемся бесплатным 3d редактором Blender. Он способен создавать модели и конвертировать в любой формат. Еще понадобиться интернет сервис под названием clara.io. Этот инструмент пригодиться для конвертации объектов и последующей загрузки в Blender. После того как мы загрузим модель в Блендер на нее нужно наложить графику и в разделе Render создать анимацию. После этого мы получим целый список спрайтов, сохраненных в tmp.

Формат наших картинок будет png. Этот формат позволяет сохранять графические элементы без заднего фона. При создании спрайтов окружающая пустота вокруг объекта может быть достаточно большой, поэтому нам потребуется ее уменьшить. Разумеется, редактировать 30 спрайтов ходьбы персонажа по отдельности долго, все это можно сделать быстрее с помощью специального редактора для обработки картинок. С этим отлично справиться Photoshop последней версии, но он занимает много места, устанавливать его для одной операции нецелесообразно, лучше поставить Gimp с плагином.

Для просмотра модели существует специальный сервис 3dviewer. С его помощью можно подгрузить model и посмотреть со всех сторон. При создании игры этот инструмент пригодиться для просмотра. Ниже приведен список программ, которые нам понадобятся, а также их версии.

1. GMS (Game Maker Studio) 1.2
2. Blender 2.7.
3. Gimp 2.8.22 + плагин (Export Layers – позволяет экспортировать каждый слой по отдельности пригодиться для редактирования спрайтов и массового сохранения)

Сервисы

1. clara – для конвертирования моделей
2. 3dviewer – для просмотра моделей

Для работы, еще пригодится сборник ассетов, которые мы добавим в проект. В данном случае воспользуемся образом диска DarkMatter, там собраны 3d-модели, которые вполне сгодятся для старта. DarkMatter старая программа, которая раньше распространялась в комплекте с DarkBassic, вот обложка диска.

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

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

Прежде чем делать игровые уровни, нужно сначала установить ПО. С Блендером проблем не возникнет, а в GMS есть некоторые тонкости при инсталляции. Поэтому перед тем как запустить установщик, откройте файл “Инструкция.txt” и следуйте содержащему там руководству.

Как мы писали выше, урок разработка игр посвящен бродилке, похожей на Little Nightmares (LN), только мы еще добавим элементы стрельбы. В остальном все будет то же самое – слабое освещения по всей территории, предметы, разбросанные в разных помещениях и т.д. Если сравнивать Little Nightmares, с другими похожими проектами, то на ум приходит игра,“ Shadow Tag” выпущенная много лет назад. Механика почти такая же есть персонаж с фонариком, которому нужно выбраться из локации на машине, чтобы это сделать, нужно найти ключи от автомобиля и бензин, для заправки бака.

Следует проходить уровень быстро и аккуратно, так как по территории разгуливают призраки детей, которые предлагают сыграть в свои страшные игры. Если заметят главного героя, то нападут и подчинят своей воле, тогда все “Game Over”. Отличительная особенность от Little Nightmares, в Shadow Tag фонарик только освещает путь, нельзя им остановить нападение врагов. Завершив 8 уровней в Shadow Tag, откроется секретный персонаж Слендермен, от которого придется тоже скрываться, если раньше вас преследовали два персонажа то Slender Man, на этот раз будет один.

Для разработки платформера, следует подготовить модели. Предположительно вы уже поставили Софт, если нет, то ссылки на скачивания есть в конце статьи. Устанавливаем ПО, включая DarkMatter.

Моделирование и текстуры в Blender – основы

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

1. Меняем режим на Cycles Render.
2. Выберем Cube.
3. Откроем вкладку Material.
4. Щелкнем по кнопке Use Node (где будут доступны дополнительные настройки ищем опцию Color и меняем цвет на зеленый).
5. Нажимаем на кнопку со сферой и откроется меню, выберем Render (для быстрого запуска существует клавиша F12).

Последовательность действий показана ниже. Чтобы посмотреть цвет куба без рендера, в этом же меню выберите Material. Камера расположена в этом мире, наведена на сцену, и в её объективе можно просмотреть все объекты. Чтобы смотреть на сцену через объект camera, нажмите клавишу Numpad 0, повторное нажатие вернет просмотр сцены в первоначальный вид.

Для настройки материала используются Ноды, с помощью них можно менять цвет и добавлять текстуры. Например, Glassy Bsdf делает зеркальное отображение и все что находится рядом с кубом, будет отображаться на одной из сторон. Добавим несколько объектов Plane и Cube. Для быстрого создания объектов нажмите Shift+A. Откроется раскрывающийся список, и выберите Mesh, там щелкните на соответствующих объектах.

Разместив их на сцене, перейдите во вкладку Material и в Surface выберите Glossy BSDF, также можно установить Roughness (шероховатость). Пример настроек показан на верхнем скриншоте(панель справа). У второго куба, который мы создали, установите другой цвет, только там поставьте Diffuse BSDF. После выполнения всех действий перейдите в Render. Результат отражения виден на картинке ниже.

Это был простой способ использование Нодов, для сложной настройки потребуется Node Editor. В редакторе вы сможете смешивать цвета и делать это с помощью нескольких блоков. Разберем другой пример, где участвует несколько блоков, для одного объекта. Запустив новый проект, подключите два режима. Первый знакомый из предыдущего примера, это Cycles Render, второй Compositing.

Откроется несколько окон. Верхнее окно показывает блоки Node, нижнее левое окно отображает текстуры в развернутом виде, которые будут обертывать объект (к этой панели мы еще вернемся). Справа отображается 3d модель. Здесь можно настроить различные режимы: Render, Material или Texture.

Перейдем к верхнему окну, именно здесь будут построены наши ноды и объединены в связь. Чтобы отобразить блоки со связями, нужно для начала убедиться, что у нас включены материалы. Потом установите флажок Use Node или щелкните по этой кнопке в панели справа.

Обратите внимание на цифры под номером один показано, что материалы нужно включить. Цифра 2 запускает ноды, в обоих случаях опции взаимосвязаны и независимо от того, что вы нажмете, сработает функция, если убрать галочку Use Nodes, в правой панели так же скроются все опции.

Есть три способа добавить новый блок.

1. Нажать плюс и потянуть вправо, там откроется дополнительная панель с блоками, которые можно переносить в окно.
2. Кнопка Add на панели.
3. Горячие клавиши Shift+A.

Первые два варианта показаны на картинке.

Блоки состоят из набора опций, которые можно изменить. К примеру, на картинке выше Glossy BSDF, есть опция Color, там можно придать объекту другой цвет. Для получения новых эффектов следует разместить несколько новых контейнеров. С помощью их можно создавать интересные вещи и просматривать полученный результат в нижнем окне через Render. Если вы хотите разорвать связи, то найдите крайний блок, щелкните по зеленному кругу перетащите его вправо и отпустите.

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

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

Пример № 1, Mix shader, смешивание цветов Изначально при создании нового проекта у нас есть два блока Diffuse BSDF и Material Output, добавим еще два, находятся они в разделе Шейдеров. Поэтому выполним простые действия Add или Shift+A->Shader->(Glossy BSDF и Mix Shader). Потом объединим все это связями как показано на рисунке.

У Mix Shader, есть параметр Fac, он позволяет настроить смешивание, если установить “0”, то куб перекраситься в синий цвет, обозначив “1”, вы увидите зеленый цвет, “0.5” – цвета смешаются.

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

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

Как создавать игры - текстурирование кубических предметов

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

Что делают эти узлы?

• Voronoi - генерирует волны по всему кубическому предмету, есть настройки, которые могут поменять “волны” на цветные ячейки, кроме того опция Scale увеличивает и уменьшает масштаб.
• Checker – разбивает кубическую форму в шахматную доску. Допустимо поменять цвета у квадратов. Аналогично предыдущему варианту присутствует масштаб (Scale).

Когда требуется отобразить картинку на объекте, здесь следует запустить Image Texture. Устанавливаем связь, если в параметрах не установлен графический материал, то cube станет “Розовым”. Здесь следует выбрать подходящую текстуру. Объект имеет форму ящика, то соответственно можно подобрать деревянное покрытие.

Из Preview сбоку видно, что текстуры легли не корректно, чтобы это исправить следует присоединить еще Coordinate, которые находятся Add->Input и применить действия показанные ниже.

В итоге мы видим, что благодаря box.jpg наш предмет превратился в ящик. Однако этого может быт недостаточно и потребуется больше действий и манипуляцией с гранями ящика. Для этого есть специальный инструмент Vector->Mapping выберите его и перетащите. Чтобы вклинить между блоками, наведите на связь. Обычно линия соединяющая узлы по умолчанию серого цвета. При наведении панели Mapping, линия перекрасится в оранжевый. Добавив новый инструмент, вы сможете манипулировать с такими параметрами как смешение, поворот и масштабирование, все это настраивается по оси (X, Y, Z).

Важное примечание. Если объект простой формы, например, “кирпич или ящик”, то достаточно внедрить в работу, приведенную выше архитектуру. Когда дело касается человека, автомобиля или другой сложной модели, здесь следует использовать UV развертку.

Разработка компьютерных игр - как создать UV развертку

Добавим текстуры, используя инструмент UV-развертки. Чтобы перейти в режим редактирования куба нажмите Tab, дальше для перехода в Wareframe и выбора каркаса нужно нажать “Z”, выделяем все клавишей “A”. Устанавливаем опцию на Edge Select (стрелкой помечено на картинке ниже). Удерживаем клавишу Shift, щелкаем по ребрам правой кнопкой мыши, как показано на следующей картинке. В итоге у нас получится выделение ребер. Чтобы повернуть и посмотреть cube со всех сторон удерживайте колесика мыши.

Переходим в режим Composition, если стороны залиты цветом щелкните “Z”, чтобы показать грани. В итоге получите следующее, справа находится куб, слева будет отображаться наша UV-развертка после того как мы завершим все действия.

Теперь их необходимо пометить, для этого следует нажать клавишу “T”, чтобы вызвать меню, потом перейти во вкладку Shaping/UV. Там найти опцию Mark/Clear Seam. Другой вариант воспользоваться горячими клавишами Ctrl+E и выбрать пункт Mark Seam. Убрав выделенные грани, мы видим, что ребра подсвечиваются красным цветом. Это говорит о том, что они помечены для развертки.

Выполняем развертку, выбираем полностью объект клавиша “A”, потом U, чтобы открылось меню и здесь выбираем первый пункт Unwap, пример ниже.

Теперь разместим текстуру в Блендере. Воспользуемся встроенным в программу инструментом. Кликните по New, выберите Color Grid, при желании можно указать название. Пример ниже.

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

Теперь создадим Node, выполните действия, показанные на картинке. Последовательность действий пронумерованы.

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

1. Нажмите G и переместите UV-развертку с помощью мышки.
2. Клавиша “R” – поворачивать развертку.
3. “S” – уменьшить масштаб.

В том же окне, где расположен развернутый куб, можно редактировать вершины. Для этого кликаем правой кнопкой мышки по любой вершине, дальше нажимаем “G” и двигаем в любую сторону результат смотрим в правом окне (где 3-х мерный куб), следует убедиться что режим переключен в формате Rendered. Добавим несколько “нодов”.

1. Vector->Mapping
2. Input->Texture Coordinate

Сделаем связь между ними. Ранее использовали узел Generated для связи, теперь установим связь UV. Пример настройки ниже.

С помощью node Mapping можно менять опции текстур, а именно позицию, поворот и масштабирование. Для загрузки новой текстуры jpg-файла воспользуйтесь кнопкой в форме папки, если в node провести путь от Generated до Vector, то стороны покроются деревом, изображая ящик. Пример ниже.

Как создать игру самому - обертывание персонажа текстурой

Вот мы и подошли к созданию нашего первого солдата. Ранее мы разобрали несколько простых примеров. Теперь добавим солдата в Blender. Для этого воспользуемся библиотекой моделей DarkMatter и выберем подходящую модель.

Откроем путь, где расположена модель. Папка с 3d находится в People\USE, выбираем файл L-USE-MOVE. Открываем сервис clara.io. Если аккаунта нет, зарегистрируйтесь и войдите под своей учетной записью. Загружаем модель, нажимая Upload Model.

На следующем шаге появятся настройки, оставляем все как есть и переходим к самой сцене, появится 3d-холст. Нажимаем Download и выбираем формат сохранения Collada (.dae)

Сохраняем архив и распаковываем. Если посмотреть через сервис http://3dviewer.net, то солдат будет выглядеть вот так.

Запустим Blender и удалим (куб, который создастся по умолчанию) клавишей “X”. Импортируем наш dae-файл. В Блендере нажимаем File->Import->Callada (default) (.dae). Персонаж разместиться на сцене, но в уменьшенном размере. Чтобы увеличить масштаб нажмите клавишу “S” и потяните мышку вправо-вниз. Теперь можно проиграть анимацию. Для быстрого обертывания найдите текстуры, которые расположены в той же папке, что и изначальная model. Дальше делайте следующие действия.

В верхнем окне показана настройка узлов, мы это уже проходили с кубом. Наша игра будет 2d, соответственно, объект следует отобразить сбоку. Для этих целей применим инструмент Right(Numpad 3). Теперь настроим камеру, чтобы она смотрела на солдата, для этого воспользуемся сочетанием клавиш Ctrl+Alt+0. Убедитесь, что солдат полностью вмещается в объектив камеры, если это не так, и ноги заходят за кадр, поверните объект, удерживая колесико мышки, и вручную отрегулируйте координаты (x,y), перемещая model по сцене.

После настройки всех действий переходим в режим Render. В разделе Dimension устанавливаем опцию End frame, так как анимация состоит из 20 кадров, устанавливаем значение 20. В разделе “Film”, ставим флажок “Transparent”, это позволит проигрывать фильм без заднего фона. После всех установок, можно протестировать хождение персонажа Alt+A. Ниже предоставлена инструкция со всеми действиями.

Когда Render Animation завершиться мы получим папку tmp с содержимым из коллекции png-файлов. Когда вы решили создать игру самому, важно соблюдать пропорции объектов и чтобы пустая прозрачная область png не занимала много места. Если посмотреть на размер то у каждой картинки ширина 960, высота 540 это надо исправить.

Для этого воспользуемся программой Gimp и плагином Export Layers. Plugin нужно установить в C:\Documents and Settings\‹USER_NAME›\.gimp-2.8\plug-ins. Запустив Gimp-2.8 нажимаем “Файл->Создать”, загружаем группу графических файлов в программу. Когда загрузка завершиться переходим в Окна->Стыкуемые диалоги->Слои, удаляем фон, для этого достаточно щелкнуть по нему и нажать корзина.

Заходим в “Изображение->Размер холста”, выполняем следующие действия, чтобы изменить все кадры. Устанавливаем размер ширина и высота, делаем смещение, чтобы черный прямоугольник захватывал персонажа, и нажимаем “Изменить размер”.

И вот мы переходим к последнему шагу статьи “как создавать игры”. Делаем экспорт. Для этого выполняем цепочку действий Файл->Export Layers->as Png, откроется окно, обязательно укажите папку, куда будут скопированы ваши фреймы.

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