Разработка HTML5 игр

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

Игры на HTML5 не ограничены в жанрах.

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

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

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

Вот некоторые технологии, которые чаще всего применяются для создания игры на HTML5.

Construct 2

Мощный фреймворк для разработки 2D-игр. Он предоставляет более 20 плагинов и 70 эффектов для визуального оформления, а также дает возможность настраивать физику и управление объектами в считанные минуты, даже не прибегая к программированию. Это существенно ускоряет процесс продакшена игры и экономит бюджет.

CreateJS

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

• EaselJS — для создания графики и настройки взаимодействий с HTML5 Canvas.
• TweenJS — для работы с анимациями.
• SoundJS — для воспроизведения аудио и создания звуковых эффектов.
• PreloadJS — для предварительной загрузки ресурсов приложения.

Phaser

Бесплатный движок с открытым исходным кодом, который дает возможность разрабатывать игровые проекты с применением элемента Canvas и библиотеки WebGL.

PlayCanvas

Популярный игровой движок, который используется в играх таких компаний, как Nickelodeon, IGT и Zynga. Он может работать с 2D и 3D-графикой, и идеально подходит для создания HTML5 игр. Основные преимущества:

• Открытый исходный код.
• Поддержка браузеров на устаревших мобильных устройствах, например на iPhone 4S.
• Обеспечивает высокую скорость загрузки, за счет использования отложенной загрузки второстепенных ресурсов, функции объединения скриптов и других возможностей.
• Содержит множество командных функций, упрощающих взаимодействие технических специалистов, задействованных в разработке проекта.
• Есть официальная бесплатная версия PlayCanvas для публичных проектов.

PixiJS

Open Source движок с мощным комьюнити, который крайне эффективен для рендеринга двухмерной графики. К преимуществам технологии можно отнести:

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

Враппер — это оболочка, которая инкапсулирует программный продукт и делает его совместимым с разными операционными системами. С помощью таких инструментов можно «превратить» игру разработанную HTML5 в нативную для IOS и Android, и разместить ее в соответствующих маркетах приложений.

Вот несколько примеров врапперов, которые можно использовать:

• Ejecta — библиотека, которая в прошлом являлась частью игрового движка Impact, но в последующем стала применяться и в других проектах. Используется для адаптации HTML5-игр на iOS.
• PhoneGap — бесплатный фреймворк созданный на основе Apache Cordova, который применяется для преобразования JavaScript, HTML5 и CSS в приложения для мобильных операционных систем.

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

• Размещение на сайте. Игры на HTML5 корректно работают в браузерах разных устройств, благодаря чему их можно публиковать прямо на сайте компании. Такой вариант будет особенно актуальным, если речь идет о промо-играх, использующихся для геймификации маркетинга и привлечения клиентов.
• Галереи игр в соцсетях и мессенджерах. Многие популярные компании развивают собственные платформы для распространения HTML5-игр. Например, для размещения проекта в Facebook можно использовать специальные плагины или движок Cocos2d-X, а в мессенджере Telegram публикация осуществляется с помощью официального бота @BotFather.

• Публикация в маркетах приложений. Благодаря возможности размещения в PlayMarket и AppStore, HTML5-проекты могут рекламироваться как обычные игры на смартфон.
• Размещение на специализированных платформах. В сети существует множество площадок, которые используются преимущественно для публикации и распространения HTML5-игр. Вот несколько наиболее популярных из них: html5games, kongregate, newgrounds.

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

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

Компания AVADA MEDIA поможет вам воплотить в жизнь проект любой сложности: начиная с разработки концепции и наброски первых прототипов, и заканчивая размещением на релевантных платформах.