Как создавать игры. Часть 2.

Первая часть этого неимоверного повествования тут. 

Фреймворки для браузерных игр

Первые игры для браузера делали на html и php. Механика была простая, с помощью списков выбиралось действие “атака” или “защита”. С развитием технологии flash игры стали более динамичными и интересными благодаря анимации. В 2010 году объявили, что flash устарел, а в 2020 поддержка флеш была прекращена. Уже 10 лет для создания анимации и игр используют html5. 

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

Как и для платформ, игровой мир в браузере делится на два вида 3d и 2d.

Фреймворки для 3d

Как создавать игры для браузеров? Нужно выбрать подходящий framework.

№1. Threejs – самый первый framework с открытым исходным кодом. Поддерживает 3d, можно создавать игры и 3d-сайты. Под него написано несколько дополнительных библиотек. Огромное количество интересных примеров можно найти на официальном ресурсе. Например, там уже есть готовое решение бродилки от первого лица.  

№2. Babylon – javascript. Фреймворк предназначен для отображения 2d и 3d графики. Использует технологию API WebGL. Показ графических элементов происходит через Canvas. В интернете существует сообщество разработчиков, где обсуждают вопросы Babylon. Официальный сайт постоянно пополняется новыми примерами.

В давние времена для flash были разработаны отличные библиотеки работы с физикой Nape и Box2d. На Javascript тоже есть две библиотеки Box2d (переделанная с flash на Js) и Ammojs. Подходящие пример работы Ammojs можно найти в репозитории github. Пример.

Ниже предоставлен простой пример подъемного крана, где с помощью клавиш можно разрушить кирпичную стену.

Фреймворки для 2d 

Ниже предоставлены js-фреймвороки для 2d, кроме того для быстрой разработки на html5 существуют полноценные редакторы, где процесс создания игры стал еще проще. 

В свое время для flash так же был разработан редактор, позволяющий быстро создавать сцены и добавлять туда объекты. Специальное приложение, где можно создать свою игру называлось StencylWorks. Вот игра “Амнезия – исход (Somnium:Exodus)” разработана на StencylWorks.

Перечислим популярные фреймворки для 2d.

№ 1. Phaser – здесь добавлены все необходимые функции, чтобы упростить создание двухмерной игры. На холсте можно загрузить спрайтовую анимацию и проиграть ее. 

Персонажи и окружающие объекты хранятся в json. При запуске игры происходит загрузка объектов из json-документа, после они размещаются на canvas по x и y координат. Для загрузки онлайн игры требуется время, в этом случае можно создать функцию прогресс бара и туда поместить всю графику, а на холсте отобразить полоску загрузки. 

При использовании этого фрейморка процесс разработки стал достаточно простым, если и это покажется слишком сложным, то существует специальный редактор Phaser Editor. В нем можно писать код и редактировать объекты.

№ 2. EaselJs – библиотека с открытым исходным кодом, проста в использовании. Все объекты хранятся в массиве и вызываются по идентификатору. Как и в phaser есть возможность сделать предзагрузку в качестве шкалы заполнения. 

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

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

№ 3. Construct 3 – движок для быстрой разработки игр. С помощью блочного подхода, любой пользователь сможет создать игру даже без знаний программирования. Всего в несколько кликов можно указать область столкновения объектов, что позволит быстро сделать шутер или бродилку. Construct работает прям в браузере на любом устройстве. Готовый проект можно преобразовать под любую платформу, android, xbox или для браузера html5. Существует также софт Construct – это приложение где можно создать свою игру.

№ 4. Pixi. Это библиотека с открытым исходным кодом, предназначенная для работы с графикой. С помощью этой библиотеки можно легко создавать игры, добавлять персонажей и анимировать их. Чтобы приступить к работе с Pixi, нужно скачать специальный файл с репозитория github и подключить его в html-документе.

Библиотека для работы с физикой. Ранее упоминалось, что flash использует box2d. На html5 также создали box2d. Ниже пример падающих объектов. Здесь используется EaselJS и Box2DWeb.

Графические пакеты для создания окружающей среды и NPC

Если ваша задача сделать крутой проект, а не просто 2048, то потребуется подходящие графические пакеты. Перечислим самые популярные.

1. 3ds max – программа для создания 3d моделей, предназначена для профессионального моделирования. Область применения – игры, фильмы и 3d-мультфильмы. 
2. Photoshop – графический редактор для создание текстур персонажей и уровней. С помощью слоев можно накладывать рисунки друг на друга, а также фильтры. Основной формат сохранения psd, но поддерживает еще jpg, png (для спрайтов) и другие.
3. CorelDraw – редактор для работы с векторной графикой.

Указанные выше пакеты платные, но существуют и бесплатные аналоги.

1. Blender – бесплатная программа для 3d моделирования. С её помощью можно создавать 3d-модели для крупных проектов. Начальная версия Блендера обладает всем необходимым для создания качественных моделей. Внимание на картинку ниже. 

Если по каким-то причинам возможности программного обеспечения(ПО) недостаточно, то можно поискать подходящий плагин. 

Основные преимущества – быстрая установка, небольшой размер (200-300 мб) и портативность. Программа легко переносится на другой ПК и запускается. 

1. Gimp – бесплатный графический редактор для работы с картинками, умеет работать со слоями, и наделен специальными инструментами для редактирования картинок. 

Для работы с отдельными спрайтами рекомендуется установить plugin Export Layers. Он позволяет сохранить каждый слой по отдельности. Пример использования – загружаете 20 спрайтов, меняете размер рабочей области и сохраняете Файл->Export Layers->as PNG.

2. Сервисы по объединению спрайтов – после рендеринга в блендере, требуется объединить все картинки в один спрайтлист. Для этого есть два инструмента.

• • leshy spritesheet – с помощью мышки переносим спрайты в окно браузера на рабочую область и нажимаем кнопку save, как показано на скриншоте.

• Images to Sprite Sheet Generator – генератор для объединения спрайтов. Добавляете картинки в рабочую область и нажимаете Download Sprite Sheet.

Где взять ассеты

Что такой assets? Это начинка игры, то из чего состоит любой проект, модели, звуки, текстуры и т.д. Когда знаний по рисованию своей графики недостаточно, то разработчики ищут на просторах интернета пак моделей, который можно скачать или купить. 

Модели рекомендуется брать у одного автора, чтобы сохранить стиль игры, так как каждый художник рисует по-своему. Бесплатными модели бывают либо частично (где требуется заранее оговорить условия) либо полностью free-версия. Выбирать следует по типу лицензии, полностью бесплатные это СС 0 (отказ от авторских прав, можно использовать без указания автора). 

Ниже предоставлены сайты, где можно скачать модели.

Книги для изучения

Перечислим книги, которые пригодятся для изучения. Список мы разбили на 3 категории, движки для ПК и смартфонов, фреймворки для создания браузерных игр, книги “физика в игре”.

1. 3D Game Development with Unity (Franz Lanzinger) – в книге описано как создавать игры для Unity, автор использует бесплатные графические пакеты Blender и Gimp.
2. Mastering Unreal Engine: A Beginner's Guide (Sufyan bin Uzayr) 
3. Practical GameMaker Projects: Build Games with GameMaker Studio 2 (Ben Tyers), в книге рассказывают как создать 10 игр, что будет полезно для новичков. Для каждой игры отведена отдельная глава.
4. Godot – про этот движок есть сборник книг. 

Godot from Zero to Proficiency (Beginner, Foundations, Intermediate, Advanced) Patrick Felicia

Книги для создания браузерных игр

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

1. Three.js Essentials (Dirksen, Jos)
2. Learning Babylon.js: Learn the basics of the 3D framework Babylon.js by creating a whole game - 2017 (Julian Chenard)
3. Making Strategy Browser Games (Stephen Gose) 
4. Beginning HTML5 Games with CreateJS: (Manderscheid, Brad) – в этой книге с нуля показывают как делать игры. Начиная с основ и заканчивая полноценной игрой, которую можно размещать в сети.
5. Learning Construct 2 (Aryadi Subagio) 

Книги по WebGL

WebGL – библиотека для 3d графики, которая позволяет обеспечивать поддержку 3d без использования дополнительных библиотек.

1. WebGL. Программирование трехмерной графики - Мацуда, Ли – учебник расскажет, как создать игру онлайн без скачивания используя технологиею WebGl.
2. Introduction to Computer Graphics: A Practical Learning Approach (Fabio Ganovelli, Massimiliano Corsini, Sumanta Pattanaik, Marco Di Benedetto) – группа авторов этой книги откроют секреты создания гонок, ниже показан готовый результат который получит читатель после изучения книги.

Физика в играх

1. Две книги с Box2D от автора Makzan “HTML5 Game Development by Example : Beginner's Guide – Second Edition” и “HTML5 Game Development”. Много интересных примеров на реальных игровых ситуациях. Будет полезна для тех, кто хочет создать свою онлайн игру.

2. Advanced Game Design with HTML5 and JavaScript 1st ed. Edition (Rex van der Spuy).

3. Physics for JavaScript Games, Animation, and Simulations with HTML5 Games (Adrian Dobre, Dev Ramtal) – примеры работы с физикой, вращение по орбите вокруг планет, падение объектов и несколько примеров с three.js (в трехмерном пространстве). 

4. Foundation HTML5 Animation with JavaScrip книга Билли Ламберта и Кит Питерс – здесь объясняется как сделать так, чтобы объекты перемещались, сталкивались вращались. Есть много примеров связанных с трехмерным пространством на чистом HTML5 без использования специальных библиотек. 

Ниже пример наложения источника света на 3d-объект.

Большинство перечисленных книг на английском языке. При плохом владении иностранным в github доступны исходники для изучения. 

Как заработать на своих играх?

Самый популярный способ это продажа через специальные площадки Steam и Google Play. Условия сотрудничества.

1. Стим – за каждую игру, которая будет продаваться, нужно заплатить 100$.
2. Google Play – зарегистрировать аккаунт, как разработчик Android и заплатить единовременно 25$.

Другие способы заработка.

1. Поискать площадки по продажам игр.
2. Браузерные игры – внутреигровые покупки, контекстная реклама от поисковых систем.
3. Найти спонсора – предложить профинансировать идею и начать совместное сотрудничество. Первоначально нужно научиться вести переговоры, про это написано много разных книг.   
4. Найти работу в GameDev – создать несколько небольших “демо-версий” и отправить в крупные компании как резюме. Разумеется, здесь нужно уметь владеть мастерством письма, про это также есть подходящая литература.

Как придать игре реиграбельности?

Что такое реиграбельность? – это когда игроки возвращаются в игру спустя время. Как сделать проект интересным. 

Для начала изучите популярные проекты за последние несколько лет, узнайте, чем им удалось заманить игроков. Например, в Wold of Tanks можно улучшать танк и сражаться с другими пользователями. War Thunder – реалистичные поединки и техника времен второй мировой войны, которую также можно улучшать.  

Вот 10 советов по улучшению игровой механики.

• Строительство – многие любят игры про строительство, где можно построить дом, купить мебель и т.д. Например, успех Maincraft’а обусловлен тем, что в нем можно построить все что угодно, все зависит от фантазии игрока.
• Кастомизация – это изменения внешнего вида персонажа или любого другого объекта (танк, корабль). Пользователям нравится менять внешний вид героя, особенно если это дает какие-то плюсы. Например, в Lionheart герой получал расовые бонусы, а в Hogwarts Legacy вначале можно воссоздать персонажа, а потом отправится в путешествие по сказочной стране. 
• Дайте пользователю возможность выбирать, чтобы от действия завесила судьба королевства или будущего персонажа. Игрок захочет перепройти игру, чтобы открыть новую концовку. В игре Detroit: Become Human несколько сюжетных линий.
• Экономика – подойдет для тех, кто любит накапливать богатства. Если вся игра построена на накоплении богатств, то игроки будут возвращаться, с целью увеличить свое благосостояние, чтобы потом построить новый заводик или фабрику.
• Генерируемый контент. Самый действенный вариант подогреть интерес пользователя, это сделать случайно генерируемый контент. То есть обнаруживать оружие, которое ранее не было в доступе или создавать новые неизведанные земли. Однако, с точки зрения реализации это сложно сделать.
• Исследования. Многим игрокам нравится исследовать окружающий мир, особенно если эти территории существуют в реальности.  Всегда интересно побывать в городе, в котором никогда не был, пусть даже в виртуальном. К примеру, игра Stalker.
• Бонусы за выполнения каких-то действий. Например, в большинстве современных мобильных приложений игрокам дают виртуальные ресурсы за каждый заход в игру.
• Новая игра+ - после завершения основной сюжетной линии, предлагается пройти игру еще раз, только сложность будет увеличена, а все накопленные предметы сохранятся. Такую систему можно встретить в Dead Space, после прохождения можно начать заново. Оружие и броня будут сохранены вместе с улучшениями.
• Достижения. За выполнение сложных заданий нужно давать награды, к примеру, уникальный значок. Во многих играх присутствует рейтинг лучших игроков, там показывают награды, опыт и уровень. Обычно все это оформлено в виде таблицы. Сам факт, наличия такого рейтинга позволит игроку гордиться собой. В итоге игрок захочет продолжить покорять вершины, чтобы получать новые награды.
• Общение. Большинство игроков заходит в игру только ради общения. Если вспомнить древние бойцовские клубы (БК), то там всегда присутствовал чат. Например, в популярной MMORPG World of Warcraft, игроки могли не просто общаться, а заставлять героев жестикулировать.

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