Введение в разработку Web-игр

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

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

Игровая платформа HTML5

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

Функционал Технология
Звук Web Audio API
Графика WebGL (OpenGL ES 2.0)
Ввод Touch events, Gamepad API, датчики устройства, WebRTC, Full Screen API, Pointer Lock API
Язык программирования JavaScript (или C/C++ с использованием Emscripten для компиляции в JavaScript)
Сеть WebRTC и/или WebSockets
Хранилище IndexedDB или "облако"
Веб HTML, CSS, SVG (и много других!)

Экономическое обоснование

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

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

Веб-технологии для разработчиков игр

Эта информация будет полезна техническим специалистам. Давайте углубимся в API-интерфейсы, которые веб-технологии предлагают разработчикам игр. Вот подробный список, который даст вам представление об этом:

Fetch API

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

Full Screen API

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

Gamepad API

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

HTML и CSS

Эти технологии помогут вам создать и разместить UI вашей игры, а HTML-элемент <canvas> это один из способов создать 2D-графику

HTML audio

Элемент <audio> позволяет легко воспроизводить простые звуковые эффекты и музыку. Если ваше потребности выше, ознакомьтесь с Web Audio API для полной мощности обработки звука!

IndexedDB

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

JavaScript

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

Pointer Lock API

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

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

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

Typed Arrays

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

Web Audio API

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

WebGL

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

WebRTC

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

WebSockets

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

Web Workers

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