Как создать браузерную игру

4233 просмотров

Для образовательного проекта Банка России мы сделали яркую веб-игру «Тайна потерянной копилки». Она привлекает внимание школьников к теме финансовой грамотности, знакомит с терминами, учит разумно распоряжаться деньгами. Игра понравилась не только детям, но и взрослым из разных городов России — в неё сыграли более 30 000 человек.

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

Особенности разработки игры для браузера

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

Предположения об особенностях браузерной игры у нас были — значительные ограничения на доступный и используемый размер оперативной памяти (в ТЗ, например, зафиксировано, что для мобильных устройств должно хватать 1 Гб оперативной памяти), баланс между качеством игровых ресурсов (изображения, текстуры, спрайты, звуки, видео) и скоростью их скачивания.

К этому добавились требования от клиента — игра должна запускаться и работать во всех заявленных мобильных и десктопных браузерах (включая IE 11), на минимально возможных аппаратных характеристиках. Требования эти исходили из того, что игру предполагалось показывать при любой удобной возможности, на любом попавшемся под руку устройстве — например, в школе.

Как выбирали движок

У нас уже был опыт игровой разработки, поэтому направления выбора движка обозначили сразу:

• Игровой движок Phaser — мы уже реализовывали на нём игру для Эльдорадо/Майкрософт.
• Unity с возможностью экспорта игры в Web — мы делали игровые проекты на этом движке.
• Также рассматривали малоизвестные нам движки LibGDX, Godot, PlayCanvas.

Неизвестные варианты отвалились по вполне очевидной причине — их надо было осваивать и изучать, что, некоторым образом, пугало, хоть и не казалось невозможным. Вариант с Unity отвалился потому, что ограничения движка и экспорта не позволяли, например, использовать аудио в IE 11. А ещё потому, что экспортируемый из Unity код Javascript получался очень большой, а IE 11 значительно более медленный в парсинге и исполнении кода, чем современные браузеры.

Таким образом, было решено взять свежую версию движка Phaser (на момент начала разработки это была версия Phaser 3.11). Выбрали этот движок ещё и потому, что вся логика и отрисовка — программные, а значит, мы могли контролировать в коде абсолютно любой аспект будущей игры.

Как писали

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

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

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

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

Стек разработки был взят довольно типичный для подобного проекта — webpack, webpack-dev-server, babel, babel/preset-typescript.

Какие трудности были

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

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

Было опробовано несколько теоретических и практических гипотез, из которых родилось финальное решение. Решение состоит в следующем:

• На экране загрузки игры, где идёт прогресс от 0 до 100 %, фактическая загрузка ресурсов заканчивается на 92 %.
• После этого за пределами экрана создаётся сцена, на которую помещаются тяжёлые анимации и немного физики.
• Далее в течение 5 секунд измеряется среднее время отрисовки одного кадра.
• После этого принимается решение о производительности устройства и прогресс доходит до 100 %.

Очень важным было требование полной работоспособности игры в IE 11, что тоже доставляло неудобства. Оказалось, что при запущенных инструментах разработчика, и без того небыстрое выполнение Javascript в этом браузере ещё замедлялось.

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

Игровые механики

Игровые механики сами по себе несложные, во многом вдохновлённые существующими играми.

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

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

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

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

Все остальные механики собственно тем же и являются — срабатывание приближения и пересечения персонажа и игровых объектов в определенные моменты времени и анимации.

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

Выводы и советы

Определитесь с жанром на самом раннем этапе.

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

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

Смотрите подробнее, как мы делали веб-игру «Тайна потерянной копилки».

Введение в разработку игр для Интернета - Разработка игр

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

Диапазон игр, которые можно создать, не уступает настольным и родным аналогам ОС. Благодаря современным веб-технологиям и последнему браузеру вполне возможно создавать потрясающие первоклассные игры для Интернета. И мы не говорим о простых карточных играх или многопользовательских социальных играх, которые в былые времена делались с использованием Flash®. Мы говорим о 3D-шутерах, ролевых играх и многом другом. Благодаря значительным улучшениям производительности технологии JIT-компилятора JavaScript и новым API-интерфейсам вы можете создавать игры, которые запускаются в браузере (или на устройствах с поддержкой HTML5) без каких-либо компромиссов.

Вы действительно можете думать о Сети как о лучшей целевой платформе для вашей игры. Как мы любим говорить, «Интернет — это платформа». Давайте взглянем на ядро ​​веб-платформы:

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

1. Возможности Интернета огромны; это везде. Игры, созданные с помощью HTML, работают на смартфонах, планшетах, ПК и Smart TV.
2. Маркетинг и возможность обнаружения улучшены. Вы не ограничены продвижением своего приложения в чужом магазине приложений. Вместо этого вы можете рекламировать и продвигать свою игру в Интернете, а также в других средствах массовой информации, используя присущую Интернету возможность связывания и обмена для привлечения новых клиентов.
3. У вас есть контроль там, где это важно: Платежи. Вам не нужно передавать кому-то 30% своих доходов только потому, что ваша игра находится в их экосистеме. Вместо этого взимайте плату, которую хотите, и используйте любую услугу обработки платежей, которая вам нравится.
4. Опять же, с большим контролем, вы можете обновить свою игру, когда захотите. Не нужно ждать, затаив дыхание, одобрения, пока кто-то из другой компании решает, будет ли выпущено ваше исправление критической ошибки сегодня или завтра.
5. Контролируйте свою аналитику! Вместо того, чтобы полагаться на кого-то еще, чтобы принять все решения о том, какая аналитика вам нужна, вы можете собрать свою собственную — или выбрать третью сторону, которая вам больше нравится — для сбора информации о ваших продажах и охвате вашей игры.
6. Вы сможете более тесно управлять отношениями с клиентами по-своему. Больше не нужно фильтровать отзывы клиентов через ограниченные механизмы магазина приложений. Взаимодействуйте со своими клиентами так, как вы хотите, без посредников.
7. Ваши игроки могут играть в вашу игру где угодно и когда угодно. Поскольку Интернет вездесущ, ваши клиенты могут проверять статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих компьютерах и т. д.

Что касается технических специалистов, давайте углубимся в API-интерфейсы, которые Интернет предлагает для разработчиков игр. Вот подробный список, чтобы дать вам представление о том, что Интернет может сделать для вас:

Полноэкранный API

Этот простой API позволяет вашей игре занимать весь экран, тем самым погружая игрока в действие.

API геймпада

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

HTML и CSS

Вместе эти две технологии позволяют создавать, стилизовать и компоновать пользовательский интерфейс вашей игры. Часть HTML — это элемент, предоставляющий один из способов создания 2D-графики.

HTML аудио

Элемент позволяет легко воспроизводить простые звуковые эффекты и музыку. Если ваши потребности более сложны, проверьте API веб-аудио для реальной обработки звука!

ИндекседБД

Мощный API для хранения данных для хранения пользовательских данных на их собственном компьютере или устройстве. Отличный способ сохранить состояние игры и другую информацию локально, чтобы ее не приходилось загружать каждый раз, когда это необходимо. Также полезно, чтобы сделать вашу игру играбельной, даже если пользователь не подключен к Интернету (например, когда он часами застревает в самолете).

JavaScript

JavaScript, язык программирования, используемый в Интернете, стремительно развивается в современных браузерах и становится все быстрее. Используйте его возможности для написания кода для своей игры или попробуйте использовать такие технологии, как Emscripten или Asm.js, чтобы легко портировать существующие игры.

API блокировки указателя

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

SVG (масштабируемая векторная графика)

Позволяет создавать векторную графику, которая плавно масштабируется независимо от размера или разрешения экрана пользователя.

Типизированные массивы

Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из JavaScript; это позволяет вам манипулировать текстурами GL, игровыми данными или чем-то еще, даже если это не в родном формате JavaScript.

API веб-аудио

Этот API для управления воспроизведением, синтезом и манипулированием звуком из кода JavaScript позволяет создавать потрясающие звуковые эффекты, а также воспроизводить музыку и управлять ею в режиме реального времени.

WebGL

Позволяет создавать высокопроизводительную трехмерную (и двухмерную) графику с аппаратным ускорением из веб-контента. Это поддерживаемая Интернетом реализация OpenGL ES 2.0.

WebRTC

API WebRTC (коммуникации в реальном времени) дает вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных других приложений туда и обратно между двумя пользователями. Хотите, чтобы ваши игроки могли разговаривать друг с другом во время взрыва монстров? Это API для вас.

Веб-сокеты

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

Веб-работники

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

XMLHttpRequest и файловый API

Комбинация XMLHttpRequest и File API позволяет вам отправлять и получать любые данные, которые вы хотите (не позволяйте «XML» сбить вас с толку!) с веб-сервера. Это отличный способ делать что угодно: от загрузки новых игровых уровней и иллюстраций до передачи информации о состоянии игры не в режиме реального времени туда и обратно.

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 участниками MDN.

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

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

Это явление в значительной степени связано с играми HTML5, которые заполнили пробел, чтобы не отставать от этих нетерпеливых игроков. Кроме того, благодаря развитию технологий и новым платформам разработка игр HTML5 достигла значительных высот, что позволяет использовать многопользовательские игры, трехмерную графику и многое другое! Не будет неразумным сказать, что игры теперь так же жизнеспособны через браузер, как и на многих других устройствах!

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

Содержание

Начнем с полного нуля. Что такое HTML5? это сложный вопрос. Существует официальное определение HTML5, которое просто означает последнюю версию HTML (язык разметки, используемый во всем мире для создания веб-сайтов), и более раскрученное определение (то, что понимает большинство людей, когда упоминается HTML5). это все « новых» особенностей веб-технологий, появившихся за последние несколько лет (JavaScript API, такие как Canvas или WebAudio, семантические теги HTML и т. д.).

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

Наличие HTML вместе со всеми этими сверхспособностями, которые выходят за рамки создания простого веб-сайта, позволяет нам делать, среди прочего, игр . Это игр HTML5 .

СОЗДАЙТЕ СВОИ ИГРЫ

Получите 250+ coding courses for

LEARN MORE

AVAILABLE FOR A LIMITED TIME ONLY

The very basic building blocks of a HTML5 game are those of the web:

• HTML
• CSS
• JavaScript

Подобно тому, что происходит с HTML5, когда люди говорят о CSS3, они обычно ссылаются на новые вещи, которые приходят с последними спецификациями CSS, но, по аналогии, CSS3 — это просто последняя версия CSS. Забудем на секунду о семантике этих определений и подумаем о раскрученных версиях этих терминов, нам также может понадобиться, чтобы делать HTML5-игры:

• HTML5 (JavaScript API)
• CSS3

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

Например, вы можете создавать 3D-игры. Если это так, есть также WebGL, который представляет собой API JavaScript для рендеринга 2D- и 3D-графики в браузере с использованием графического процессора для повышения производительности.

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

• JavaScript (NodeJS)
• PHP
• Java
• Python
• Ruby

Или вы можете использовать сторонний поставщик Backend-as-a-Service, такой как Firebase или Parse. У некоторых есть бесплатные версии, которые вы можете использовать, и они начнут взимать плату, как только вы превысите определенные ограничения. Некоторые из этих провайдеров особенно ориентированы на игры, некоторые в основном предназначены для мобильных приложений, но могут использоваться и для игр.

Самый простой способ распространять HTML5-игру — просто выложить ее! Созданный как веб-сайт, вы можете просто встроить его на страницу и опубликовать. Просто так.

Если вы хотите распространять его через проприетарные платформы, вы должны пройти процесс, называемый обертыванием. По сути, вы создаете нативное приложение для платформы, на которую хотите его распространить (iOS, Android и т. д.), и помещаете внутрь свою игру, чтобы это приложение действовало как веб-браузер и «запускало» вашу игру.

Для настольных платформ, таких как Windows, Mac или Linux, существует инструмент под названием NWjs, который позволяет упаковывать ваши игры HTML5 для этих платформ.

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

Большинство игр имеют общие концепции, такие как спрайты (графические элементы, которые представляют врагов, игроков, элементы в вашей игре), сцены или этапы, анимация, звук, загрузка графических ресурсов и т. д. Поскольку большинство разработчиков игр хотят сосредоточиться на своей реальной игре, а не на создании всего этого уровня абстракции, рекомендуется использовать Игровые фреймворки HTML5 .

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

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

Что может помочь вам сделать выбор:

• Ваша игра для ПК, мобильных устройств или и того, и другого?
• Есть ли у них активное сообщество?
• Много ли людей сейчас используют фреймворк?
• Он поддерживается или страница Github выглядит как заброшенный город?

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

Некоторые популярные бесплатные фреймворки:

• Phaser -> Самые популярные в наши дни0080
• BabylonsJS –> WebGL framework for 3D rendering
• PlayCanvas
• ThreeJS
• KontraJS
• Cannon.js
• Stage.js
• Matter.js

Video courses are отличный способ изучить новые технологии. Основное отличие видеокурса от простого просмотра видео на YouTube в том, что здесь больше структуры. Хорошие курсы имеют четкую цель и строятся на ней шаг за шагом. Ниже приведен список курсов и учебных пособий Zenva, которые могут дать вам инструменты, необходимые для создания игр HTML5.

Общая разработка игр

• 10 лучших способов научиться кодировать
• Как сделать игру — Создание видеоигр с нуля
• Как написать код игры
• Как разработать игру: Документация по дизайну игры
• How to Approach Game Narratives

Phaser

• HTML5 Game Development Mini-Degree (учебная программа премиум-класса, охватывающая создание нескольких мини-игр с помощью Phaser)
• Phaser 4 Tutorials — Complete Guide

WebGL, 3D и XR

• Академия 3D и XR JavaScript (учебная программа премиум-класса, охватывающая различные фреймворки JavaScript для работы с 3D и XR в Интернете)
• WebVR для начинающих. Frame (премиум-курс по A-Frame)
• Изучите основы Babylon.js (бесплатный курс по Babylon.js)

Навыки работы с HTML5

• Изучите HTML и CSS (бесплатный курс)
• Программирование на JavaScript для начинающих
• Мини-проекты JavaScript — игра для изучения языка
• Node.js и Express для начинающих

В GameDev Academy, как вы уже знаете, у нас есть множество руководств по разработке игр HTML5, в основном на Phaser, LimeJs, Quintus и BabylonJS. . Есть и другие замечательные места, где можно найти качественные обучающие материалы по HTML5-разработчикам:

• Build New Games
• Gamedevtuts+
• HTML5 Game Development (новости и ссылки на руководства)
• Phaser Tutorials
• Учебники по играм Mozilla
• Учебники по играм HTML5
• Игры HTML5 с JavaScript и Phaser
• Учебники по разработке игр JavaScript HTML5
• Учебники по разработке игр HTML5

Учебники по HTML5 для школ Помогают ли учителям получить фреймворки

В Интернете можно найти множество активных сообществ, некоторые из которых посвящены разработке игр в целом, а некоторые — только разработке игр HTML5.

Web:

• HTML5GameDevs

Facebook:

• Indie Game Developers
• Indie App and Game Developers Group
• Game Development
• Video Game Developers

Other Communities:

• Phaser Forum
• reddit
• GAMEDEV.JS
• Babylonjs Froum
• Threejs discourse

• The Global Game Jam® is an annual event, usually occurring in January every год.

  ---

  Learn more

  • 
    История файлов отключена как включить в windows 10
  • 
    Айфон и айпад синхронизация
  • 
    Как удалить группу в ватсап админу
  • 
    Бот делающий мемы
  • 
    Как восстановить имей на андроиде
  • 
    Ubuntu yandex browser
  • 
    Как сделать плавное замедление на андроид
  • 
    Как запустить программу через командную строку
  • 
    Все шрифты в ватсапе
  • 
    Встроенная мышь в ноутбуке как называется
  • 
    Лучшие блютуз наушники для телевизора