Игры в браузере (часть 1)

Вчера читал доклад на небольшом местном мероприятии GamesLab.

Тема доклада: Игры в браузере – с “чем” готовят и как “едят”. Постарался за 30 минут рассказать про основные технологии и о том что делать с готовой игрой. Все это в первую очередь для инди. Про крупные компании можно и у гугла спросить.

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

Существует 2 варианта сделать игру для браузера: npapi плагины и html5.

Самые популярные плагины: flash player (дальше по тексту просто flash) и unity web player.

После того, как Google решил убить NPAPI из-за проблем с безопасностью (и правильно сделал), unity web player умер. И дело даже не в том, что он больше не работает в хроме, а в том, что сама компания Unity объявила о прекращении развития и поддержки плагина.

Ребята, разрабатывающие Piratecraft, поделились информацией:

после первого этапа отключение npapi в хроме (когда все еще можно было активировать unity плагин вручную через настройки) процент поигравших, среди вновь установивших игру, стал значительно ниже (да и в общем процент “технических отвалов” всегда был выше по сравнению с тем же flash).

А вот Flash Player выжил.

Компания google решила, что умирать flash пока рано. И стала вместе с компанией adobe разрабатывать версию для chrome, которая основана на новом api для браузеров ppapi. Кстати говоря, люди очень жалуются на то, что pepper flash в chrome значительно хуже работает, чем npapi flash в других браузерах.

Я не стану агитировать начинать разработку с flash, если вы до этого с ним не работали. Но вот несколько плюсов “на подумать”:

1. На ActionScript3 огромное количество библиотек и готового кода, который можно использовать в своих проектах. Если вы нашли пример кода 2011-го года – он все еще не потерял актуальность. Все будет работать и прекрасно выполнять свои функции. Все это огромная база для обучения и конечного использования. Так же сама простота, с которой можно получить конечный результат, поражает и является серьезным плюсом.
2.  Flash все еще востребован. После всего шума вокруг его смерти многие бросили технологию, а, между тем, большое количество проектов как разрабатывались, так и разрабатываются на flash. Мне приходит много предложений на linkedin. Работы так же хватает и на upwork, и на freelancer.com (специально изучил спрос)
3. Можно быть ИНДИ! Все же хотят быть инди? =) Пока одни бежали с flash, другие продолжают делать и продавать игры порталам. Конечно, нет уже тех дурманящих разум цифр, но заработать на жизнь можно (подробнее в следующей статье).

Зачастую использование flash оправдано и даже крайне желательно. Просто подумайте, подходит ли этот инструмент для решение вашей задачи.

Идем дальше, что же такое HTML5?

HTML5 – это не язык разметки.

HTML5 – это набор технологий для разработки web приложений.

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

 

• javascript – язык программирования;
• canvas – отрисовка простой 2d графики;
• webgl – низкоуровневая и более тяжелая отрисовка 2d и 3d графики.

Коротко про плюсы:

1. Основным плюсом HTML5 является его кроссплатформенность. В теории, он должен работать на всём, где есть браузер. И когда-нибудь так и будет. А пока, все дружно ждем светлого будущего и ставим костыли, чтобы все работало хорошо и на максимальном количестве платформ.
2. Ситуация с библиотеками не хуже чем на flash. Большинство библиотек и инструментов с открытым исходным кодом (закрыть исходный код js не так уж и просто)
3. Таргет для экспорта из популярных движков (unity , unreal engin и т.д.).

Из-за особенностей технологии и спроса на игры, написанные на HTML5, стоит отдельно рассматривать HTML5 WebGL и HTML5 Canvas.

HTML5 WebGL – “толстый”. Он работает быстрее, т.к. отрисовка идет на видеокарте. Но это же является и минусом, т.к. он поддерживается на меньшем количестве платформ. Больше всего с этим проблем на “стоковых” (встроенных в прошивку телефона) браузерах чуть более старых телефонов.

 

HTML5 Canvas – “тонкий”. Но в тоже время и “хилый”. =) Он поддерживается на всех устройствах (ну кроме откровенной древности). Но при этом производительность оставляет желать лучшего. Несколько движущихся объектов уже могут стать проблемой(очень сильно зависит от браузера и устройства).

Коротко сравним плюсы и минусы платформ. Можно придумать тысячи пунктов для сравнения, но я остановился на этих трех:

1. Чем меньше билд, тем больше пользователей дождутся загрузки игры и поиграют в нее.  У flash и Canvas с этим все хорошо и, в первую очередь, упирается в ресурсы самой игры (графика,звуки и т.п.). А вот на WebGL все чуть хуже. Если это экспорт из большого движка, то он потянет за собой свои “толстые” библиотеки, необходимые для работы. На специально “заточенных” WebGL  движках с этим лучше.
2. Поддержка на мобильных устройствах следующий важный, по моему мнению,  пункт. Flash, по завету Стива, не поддерживается в мобильных браузерах (но собрать мобильную версию приложения в стор можно!). С html5 все лучше, в конце концов, в этом его сильная сторона. WebGL на свежих телефонах  работает очень даже не плохо. По крайне мере, на движках под это “заточенных”(например: threejs). С экспортами из unity и unreal все по прежнему плохо. Даже если игра работает, то весьма не стабильно.
3. Что касается ограничения по жанрам, то тут в лидерах WebGL. По сути, на нем можно сделать все, что душе угодно. Но чем “навороченнее” игра, тем меньше платформ она будет поддерживать. С flash тоже все весьма не плохо. Но многие жанры делать просто нецелесообразно. А вот canvas – сплошное ограничение. В первую очередь из-за производительности. Кроссплатформенность требует жертв. =)

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

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

Буду рад вашим комментариям.

Спасибо.

P.S. Повторюсь, что статья во многом капитанская. Но это обусловлено аудиторией доклада, которой я читал (во многом это студенты).

UPD: Большое спасибо Sergey Batishchev за комментарии. Внес изменения   в статью.