
Как я HTML5-игру с OpenFL делал (и наплодил больше багов, чем там было самой игры)
2
В этом посте я собрал список проблем, с которыми столкнулся при разработке простой HTML5-игры на связке Haxe-OpenFL-Box2D. И самому себе на будущее, и кому-нибудь, может, тоже пригодится.
В первую очередь дисклеймер: мои руки растут из жопы, я плохо разбираюсь в OpenFL и Haxe в целом. Я понимаю, что это опенсорс и «если что-то не устраивает — возьми и почини сам». Также я очень благодарен всему русскому сообществу Haxe за неоднократные консультации и помощь!
На киевском DevGamm 2013 я хотел штурмовать Speed Game Dating, и для этого на пару с художником мы сделали за две недели Cake Break — Box2D-физпаззл на флеше. Времени было немного, поучаствовать хотелось, а игры такого плана делаются как раз быстро.
Спонсоры, глядя на игру, с равнодушным лицом отвечали: «Meh», добавляя, что вот если бы она была на модном HTML5 — то было бы, конечно, совсем другое дело, и что как только её портирую — сразу идти к ним.
Не вопрос! Откопал Haxe, сделал «haxelib install box2d», восхитился: «Как же легко портировать с флешика на хакс! Вот буквально только int на Int заменить и void на Void!», наивно полагая, что раз работает на десктопе и айпаде, то и везде будет работать. Как же я был наивен.

Спилы, как и обещали на девгамме, взялись спонсировать игру. Предложили $800, а я со своим нулевым навыком торговли сразу же согласился, рассчитывая, что «это просто первый эксперимент, а дальше будем эти HTML5 клепать по десятку в неделю и продавать по две тыщи!». Получил деньги, отправил игру на их QA, и стал получать багрепорты. Устранив проблему, переотправлял игру, и получал очередное письмо «QA failed» с новой проблемой.
Кстати, некоторые вещи уже, возможно, неактуальны и были исправлены в последних версиях OpenFL.
В каталоге с ассетами лежало штук 80 спрайтов с персонажами и UI («Мама, смотри, я не умею в спрайтшиты»), и трейс в прелоадере показал, что из них загружается, скажем, 78. Причём, через раз и не на всех устройствах. Может, это из-за хостинга; может, из-за браузеров. Уменьшить количество ассетов помогло.
Если зайти в Settings > General > About > Diagnostics & Usage > Diagnostics & Usage Data — видим запись о LowMemory. Помогло убрать некритичные элементы интерфейса и спрайты, а оставшиеся сжать с помощью tinypng.com/
Ни ошибок в консоли, ничего. Просто пустая полоса загрузки. Так и не поняв в чём дело, убрал bitfive, перейдя на то, что OpenFL предлагает по умолчанию. Проблема ушла, сменившись на…
Об этом я писал отдельный пост. Чинится быстро, хоть и предложенный мной вариант решения напоминает ремонт техники, после которого остаются «лишние» детали. Но пока что ничего не отвалилось и не взорвалось мне прямо в лицо — так что и фиг с ним.
Забавная проблема. Пока не убрал из сгенерированного .js файла все вызовы console.log() — игра не запускалась в IE9 без открытой developer console.
Выглядит так:

Андрей Винчковский подсказал, что проблема вызвана overflow:hidden на самой странице с игрой. Убрал — и стало отлично.
Здесь стало хуже: вкладка стокового браузера на некоторых Android-устройствах натурально крешилась через пару секунд после начала уровня без каких-либо внятных уведомлений об ошибке. На десктопе, в Safari и в Chrome на андроиде всё было нормально.
Убрал всю графику из игры, события на клики/тапы, уменьшил фреймрейт — продолжало валиться. Однако заработало как только закомментил строку _b2dWorld.update().
Игра валилась именно из-за метода update в Box2D. Причём, если закомментировать в методе половину строк (разумеется, физика начинала вести себя чёрт-те как, но я пытался понять, чтО крешит браузер), то выпадение могло произойти не через 1-2 секунды, а через полминуты-минуту. Но валилось всё равно.
Безрезультатно попробовав заменить движок на более старую версию с GitHub, плюнул и прикрутил Nape вместо Box2D. Оказалось, что основы у обоих движков очень похожи и базовые вещи переносится с одного на другой легко и приятно.
В принципе, никаких страшных багов не было. Каждый из них, по большому счёту, чинится за пару часов — и следующую HTML5-игру на OpenFL я буду делать, просто вооружившись этим своим постом-чеклистом, сделанным при содействии великолепного QA Спилов — земной поклон этим ребятам, терпеливо проверявшим все 5347856348 билдов игры.
В первую очередь дисклеймер: мои руки растут из жопы, я плохо разбираюсь в OpenFL и Haxe в целом. Я понимаю, что это опенсорс и «если что-то не устраивает — возьми и почини сам». Также я очень благодарен всему русскому сообществу Haxe за неоднократные консультации и помощь!
На киевском DevGamm 2013 я хотел штурмовать Speed Game Dating, и для этого на пару с художником мы сделали за две недели Cake Break — Box2D-физпаззл на флеше. Времени было немного, поучаствовать хотелось, а игры такого плана делаются как раз быстро.
Спонсоры, глядя на игру, с равнодушным лицом отвечали: «Meh», добавляя, что вот если бы она была на модном HTML5 — то было бы, конечно, совсем другое дело, и что как только её портирую — сразу идти к ним.
Не вопрос! Откопал Haxe, сделал «haxelib install box2d», восхитился: «Как же легко портировать с флешика на хакс! Вот буквально только int на Int заменить и void на Void!», наивно полагая, что раз работает на десктопе и айпаде, то и везде будет работать. Как же я был наивен.

Спилы, как и обещали на девгамме, взялись спонсировать игру. Предложили $800, а я со своим нулевым навыком торговли сразу же согласился, рассчитывая, что «это просто первый эксперимент, а дальше будем эти HTML5 клепать по десятку в неделю и продавать по две тыщи!». Получил деньги, отправил игру на их QA, и стал получать багрепорты. Устранив проблему, переотправлял игру, и получал очередное письмо «QA failed» с новой проблемой.
Кстати, некоторые вещи уже, возможно, неактуальны и были исправлены в последних версиях OpenFL.
Игра грузится через раз, не выдавая никаких ошибок.
В каталоге с ассетами лежало штук 80 спрайтов с персонажами и UI («Мама, смотри, я не умею в спрайтшиты»), и трейс в прелоадере показал, что из них загружается, скажем, 78. Причём, через раз и не на всех устройствах. Может, это из-за хостинга; может, из-за браузеров. Уменьшить количество ассетов помогло.
Вываливается на iPhone 4/4s
Если зайти в Settings > General > About > Diagnostics & Usage > Diagnostics & Usage Data — видим запись о LowMemory. Помогло убрать некритичные элементы интерфейса и спрайты, а оставшиеся сжать с помощью tinypng.com/
IE9 — игра не запускается
Ни ошибок в консоли, ничего. Просто пустая полоса загрузки. Так и не поняв в чём дело, убрал bitfive, перейдя на то, что OpenFL предлагает по умолчанию. Проблема ушла, сменившись на…
…IE9: Float32Array is not defined
Об этом я писал отдельный пост. Чинится быстро, хоть и предложенный мной вариант решения напоминает ремонт техники, после которого остаются «лишние» детали. Но пока что ничего не отвалилось и не взорвалось мне прямо в лицо — так что и фиг с ним.
Не запускается в IE9 без открытой консоли
Забавная проблема. Пока не убрал из сгенерированного .js файла все вызовы console.log() — игра не запускалась в IE9 без открытой developer console.
Нативный браузер Android: изображение двоится
Выглядит так:

Андрей Винчковский подсказал, что проблема вызвана overflow:hidden на самой странице с игрой. Убрал — и стало отлично.
Нативный браузер Android: вкладка с игрой крешится после выбора уровня
Здесь стало хуже: вкладка стокового браузера на некоторых Android-устройствах натурально крешилась через пару секунд после начала уровня без каких-либо внятных уведомлений об ошибке. На десктопе, в Safari и в Chrome на андроиде всё было нормально.
Убрал всю графику из игры, события на клики/тапы, уменьшил фреймрейт — продолжало валиться. Однако заработало как только закомментил строку _b2dWorld.update().
Игра валилась именно из-за метода update в Box2D. Причём, если закомментировать в методе половину строк (разумеется, физика начинала вести себя чёрт-те как, но я пытался понять, чтО крешит браузер), то выпадение могло произойти не через 1-2 секунды, а через полминуты-минуту. Но валилось всё равно.
Безрезультатно попробовав заменить движок на более старую версию с GitHub, плюнул и прикрутил Nape вместо Box2D. Оказалось, что основы у обоих движков очень похожи и базовые вещи переносится с одного на другой легко и приятно.
В принципе, никаких страшных багов не было. Каждый из них, по большому счёту, чинится за пару часов — и следующую HTML5-игру на OpenFL я буду делать, просто вооружившись этим своим постом-чеклистом, сделанным при содействии великолепного QA Спилов — земной поклон этим ребятам, терпеливо проверявшим все 5347856348 билдов игры.
- +9
- SeeD
Комментарии (57)
OpenFL, конечно, разочаровывает. Больше на натив ориентируются, видимо. Вся надежда на 3-ю версию.
Если flash-порт не критичен, то советую обратить внимание на flambe, работает быстро и качественно, webgl-рендер с фолбэком на canvas, поддержка webaudio/багов мало, все фиксится довольно быстро (могу помочь, если что, кое-какого опыта набрался). Единственная проблема — подозрительно давно не обновляется.
На самом деле, игру-то я писал почти полтора года назад (всё остальное время это было вялое перебрасывание письмами со спиловским QA с частотой раз в две-три недели), и сейчас всё может быть уже значительно лучше в OpenFL.
Flambe я в глаза не видел, только название слышал такое. Отпугнуло от него, что, мол, «всё делается не так, как во флеше, API совсем другое» — вот я и не трогал.
Вообще, менять коней на переправе не хотел бы — потому что уже вроде вот как раз совладал с чёртовым OpenFL; может, дальше всё проще будет :)
Насчет другого API — правда, компонентная система, которая, оказывается, довольно могучая, хотя я долго мучился и, можно сказать, забивал гвозди микроскопом, пытаясь писать на ней, как на это принято на флеше.
Вставить рекламу и выпустить самому, должно отбить.
Можно упаковать и выпустить на андроиде, правда без продвижения шансы невелики.
Можно попробовать без модификации собрать проект под андроид или упаковать swf. Если производительность будет нормальная, то в самом простом случае надо будет подгонку под экраны сделать.
Тож самое и Run если нажимаю, а как сам проект затестить, не видно куда он компилируется… Что там переключать и как его запустить? Спасибо ))
UPD: щас увидел что у меня поле Select Target Build вообще пустое и там нелзя выбрать ничего, буду разбираться наверно в этом проблема
Можно добавиться в скайп или slack-чат хакса.
Если да, то
Потому вот картинка с котиком
OpenFL будет быстрее как минимум в процессорных операциях, тк натив, нет виртуальной машины.
Рендер вероятнее всего тоже, но думаю разница будет небольшой, тк у AIR все лучше с этим стало со временем.
Также при выборе технологии, помимо производительности, крайне важными критериями будут:
-Pipeline. Насколько удобно работать с ассетами. Насколько удобно тестировать.
-Общая популярность технологии. Сюда входит поддержка комьюнити и наличие библиотек.
The goals of the Haxe Foundation are:
…
To provide a single point of contact for companies that wish to evaluate Haxe as a potential solution
To offer Paid Support Plans ensuring that somebody will always be available to answer the phone when you need help
haxe.org/foundation/support-plans.html
Вон, с тем же флешем я точно знал, что сделаю, и как оно будет работать. А эта игрулька на OpenFL работала, наоборот, так (и тогда), как хотелось ей, а не мне.
А если б я инвестировал деньги, то было бы грустненько как-то, что планировал сделать за месяц, а растянулось на полтора года из-за того, что платформа сама себе на уме :)
Но вообще, надо реквестировать сюда специалистов по HTML5. Я в нём разбираюсь примерно так же, как в Unity3d, стоматологии и My Little Pony — знаю, что оно есть, и видел, но хрен знает как работает.
Локально смотришь? Если да, попробуй залить куда-то (дропбокс например)
«IndexSizeError: Index or size is negative or greater than the allowed amount»
Можно попробовать подключить github.com/YellowAfterlife/openfl-bitfive
или выложи проект посмотреть.
если надо могу скинуть проект… на андроиде правда если быстро ткнуть то появляются 2 шара вместо 1, а если нажать и чрез пару сек отпустить то 1)) и подтормаживает, но эт наверно от телефона уже зависит.
Помни, что она еще в бете, так что баги надо репортить, чтобы поскорей поправили :)