Текущее состояние и будущее игр HTML5

1. Почему не флеш?
2. HTML5
3. Почему HTML5?
4. Давайте создадим игру!
5. Рендеринг графики
6. физика
7. Частицы
8. Анимации
9. Skytte
10. Казуальная Арена
11. Резюме

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

Ответу на этот вопрос должно предшествовать краткое объяснение: HTML5 не является языком программирования (несмотря на общую фразу « приложения HTML5 », игры программируются на языке JavaScript), а скорее предоставляет API для новых решений, таких как Canvas, WebGL. или WebAudio , которые отвечают за важные компоненты в процессе создания игр, позволяя им запускаться в браузере.
Основой игры является холст, на котором, в разговорной речи, мы рисуем; этот конкретный элемент делает возможным программирование графических дисплеев. Кроме того, благодаря WebGL , Canvas позволяет рисовать графику с аппаратным ускорением на GPU . Кроме того, WebGL, основанный на OpenGL ES 2.0, предоставляет двух- и трехмерные графические интерфейсы. Благодаря всем этим возможностям, HTML5-игры могут быть очень эффективными, играбельными и в то же время действительно впечатляющими.

Почему не флеш?

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

HTML5

Выгоды:

• работает напрямую в браузере без каких-либо дополнительных плагинов;
• одна кодовая база позволяет запускать игры на любом устройстве, поддерживающем HTML5;
• позволяет создавать игры как для мобильных устройств, так и для ПК;
• огромное, динамично развивающееся общество;
• игра не должна быть установлена ​​на устройстве;
• предоставляет возможность создавать многопользовательские игры, используя, например, технологию WebSockets для взаимодействия клиент-сервер.

Недостатки:

• отсутствие или только частичная поддержка WebGL на мобильных устройствах;
• все еще неполная спецификация;
• низкая эффективность на мобильных устройствах, если оптимизация не проводится.

Flash / AS3

Выгоды:

• развитая технология, большое влияние на отображение графики;
• большое количество инструментов поддерживает создание приложений;
• Плагин Flash Player, позволяющий запускать игру везде, где она доступна;
• Технология AIR, упаковывающая приложения в собственные приложения для мобильных устройств и ПК.

Недостатки:

• Плагин Flash: слабая поддержка на мобильных устройствах, iOS не поддерживает Flash;
• низкая эффективность AIR на мобильных устройствах.

Итак, Flash не так страшен, как может показаться?

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

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

Почему HTML5?

На GDC 2014 Unity Technology Conference компания, занимающаяся разработкой популярных движков для 3D и 2D игр, представила свою новую версию. В Единство 5 плагин Unity Player, позволяющий запускать игры в браузере, разработанные на этом движке, был заменен экспортером HTML5 с использованием WebGL .

Кроме того, Epic Games работает над Нереальный Двигатель переход на HTML5 в течение длительного времени. Его последняя версия Unreal Engine 4 обеспечивает поддержку этой технологии, что-то похожее на GameMaker , популярный редактор и движок, используемый для разработки 2D игр.

Помимо этих продвинутых движков, создается множество фреймворков и движков, предназначенных для разработки игр строго на HTML5 / JavaScript , или инструментов, предназначенных для экспорта игр в HTML5. Некоторые из самых популярных из них перечислены ниже:

Pixi.js | фазовращатель | Построить 2 | ImpactJS | Вавилон | Turbulenz

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

На рынке появляется все больше и больше игр HTML5, и их авторы пытаются оптимизировать их для максимально возможного количества устройств и платформ. В игру HTML5 можно играть не только на ПК, Mac и устройствах на базе Android или iOS, но и на Firefox OS, Tizen и всех других, поддерживающих стандарт HTML5. Это значительно увеличивает количество потенциальных клиентов.

Давайте создадим игру!

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

Рендеринг графики

Для рендеринга графики мы используем Pixi.js 2D рендеринг графики на элементе Canvas , работающий с поддержкой WebGL, благодаря которому возможно аппаратное ускорение графики. На устройствах, для которых WebGL недоступен, рендерер использует только элемент canvas и производит то же поведение, что и при использовании WebGL.

Pixi.js - 2D рендеринг webGL с откатом холста

физика

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

Частицы

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

Анимации

Анимации в 2D играх обычно основаны на кадрах . Однако есть и инструменты, позволяющие создавать скелетные анимации. Во втором случае мы всегда используем Редактор позвоночника ,

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

При создании игр, предназначенных для мобильных устройств, стоит учитывать использование контейнеров, которые «обернут» нашу игру в нативные приложения. Одним из таких инструментов является CocoonJS , Она превращает нашу игру HTML5 в собственное приложение для конкретной мобильной платформы, благодаря чему мы получаем поддержку WebGL, более быструю визуализацию графики в Canvas и доступ к аппаратным компонентам, таким как GPS, акселерометр и т. Д.

Skytte

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

Казуальная Арена

Этот сайт изначально разрабатывался с использованием технологии Flash, а недавно полностью перешел на WebGL и HTML5. многопользовательские игры Casual Arena представляют собой еще один хороший пример HTML5-игр, разработанных Unity. Эта технология позволяет разработчикам выпускать свои игры для браузеров и устройств Android и iOS, используя практически одинаковый код, и практически любой современный браузер корректно отображает WebGL. Обнаружение столкновений, поддержка клавиатуры, мыши и сенсорного экрана, системы частиц и многие другие функции предлагаются Unity и могут быть легко реализованы в проекте.

Резюме

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

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

Похожие

Комментарии