Как перенести игру на HTML5: подводные камни, ошибки, нюансы

Всё больше разработчиков социальных игр переносят свои проекты с Flash на HTML5. Однако это не такой простой процесс, как кажется. Какие подводные камни могут всплыть при портировании? Какие ошибки рискует допустить разработчик? Можно ли отдать портирование на аутсорс? Разбираемся вместе с техническим специалистом Stark Games.

Для создания этого материала мы поговорили со старшим разработчиком Stark Games. В портфолио студии входит «Ёлочка», которая каждый год стабильно попадает в топ самых популярных игр в «Одноклассниках» и «ВКонтакте». Впервые компания перенесла свою игру на HTML5 в 2019 году, набив по пути ряд шишек. Мы попросили поделится опытом человека, напрямую ответственного за портирование.

Почему HTML5?

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

Нет необходимости покупать API, заключать контракты. В том же Unity надо платить при определённых оборотах. Также HTML5 работает на всех браузерах без всяких плагинов, не надо ничего ставить.

Аналогичный аргумент приводит Ольга Хоменко, сооснователь PlaytoMax, студии-разработчика игр на HTML5:

Главный плюс — универсальность. Платформа работает на ПК, смартфонах, планшетах, Smart-TV и так далее.

Другой фактор, сработавший в пользу HTML5, — смартфоны стали гораздо мощнее, а вокруг платформы появилось больше технологий, инструментов и гайдов. Если ещё 3–4 года назад бюджетные устройства не справлялись с игрой на HTML5, а начинающий разработчик с трудом находил ответы на свои вопросы, то теперь всё иначе.

Стало больше информации: например, кто-то столкнулся с проблемой, написал об этом на том же «Хабре» или Stack Overflow. Если ты джуниор, то нет проблемы писать на HTML5 что хочешь — просто что-то спрашиваешь, открываешь и делаешь. В целом, HTML5 позволяет сейчас делать то же, что и на флеше. Так что лучше оптимизировать HTML5-версию, чем тянуть флеш.

Поэтому HTML5 планомерно захватывает площадки, в том числе социальные сети. Например, недавно «Одноклассники» отчитались, что за первые пять месяцев 2020 года выплатили разработчикам HTML5-игр около 360 миллионов рублей. Это на 80% больше, чем за аналогичный период 2019-го.

Трудности при портировании игры на HTML5

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

Сперва придётся разобраться с кодом.

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

Оптимизация игры

Вторая проблема — вам надо будет подумать, как оптимизировать игру. Если просто перенести проект с Flash на HTML5, то есть вероятность, что он будет тормозить. Особенно на слабых телефонах.

В целом, «флеш» позволяет больше. Поэтому при портировании на HTML5 надо учитывать нюансы. Например, человек может открыть игру на iPhone 5, а этот аппарат не умеет грузить текстуры выше определённого разрешения. И если вы поставите текстуру больше этого размера, то она либо не загрузится, либо вообще что-нибудь упадёт. Если у вас громоздкий интерфейс — его надо облегчить. На мобильном нельзя уместить всё, что у вас есть на десктопе. Все эти рюшечки, красивости, дополнительные кнопки можно убрать. Также у нас работает lazy loading ресурсов. То есть игроку в первую очередь показывают главные сцены, наиболее важное. Остальное не грузится, пока он сам не нажмёт.

О важности оптимизации интерфейса рассказывает и Ольга Хоменко из PlaytoMax:

Всегда помните, что на смартфонах экраны маленькие и все ваши 400 кнопок вы не внесёте.

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

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

Оптимизация команды

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

Наш собеседник из Stark Games пошёл по второму пути.

Команду можно не менять, если вы переходите на язык программирования TypeScript. Считаю, что хороший Flash-разработчик с ним справится. Просто надо познакомиться с языком, почитать о его особенностях и так далее. У меня это заняло примерно неделю — после этого я помог «перейти» остальной команде.

Также эксперт отметил, что если у вас достаточно сложная игра, то лучше прокачать текущую команду, чем брать нового человека и объяснять ему, как устроен ваш продукт.

Мы так и делали, потому что у нас на изучение технологии уходит неделя-другая, а на введение нового человека в проект — около месяца.

Какие ошибки можно допустить при портировании игры на HTML5?

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

В первую очередь — мы ошиблись с распределением ресурсов. Мы решили тянуть сразу две версии: HTML5 и Flash. Поскольку у нас не было специалиста по HTML5, нам показалось, что силами нескольких разработчиков мы всё сделаем. Реальность оказалась сложнее. В итоге мы справились, но с трудом. Когда запускали следующую «Ёлочку», то ограничились только HTML5-версией.

— рассказал старший разработчик Stark Games.

Вторая ошибка — эксперт признался, что не сразу подумал об упрощении интерфейса.

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

Наконец, несколько мелких промахов. Наш собеседник рассказал, что на старте одна из версий «Ёлок» отправляла от игроков сверхподробные логи.

От пользователей иногда шли логи по 500 Мб. Сервера у нас чуть прилегли, да и самим игрокам едва ли понравилось, что ушло столько трафика. К счастью, это было только во «ВКонтакте» — первый билд мы выкатываем именно туда, потому что в «Одноклассниках» у нас игроков в разы больше, перед ними ошибаться совсем не хочется. В целом, исправили косяк за пару дней.

Стоит ли отдавать портирование на HTML5 на аутсорс?

Получается, что портирование игры на HTML5 — не такое простое дело. Может, тогда лучше воспользоваться услугами сторонних команд? Например, есть компания IceStone, которая конвертирует Flash-игры на HTML5.

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

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

— подытоживает специалист.