Как я 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. Причём, через раз и не на всех устройствах. Может, это из-за хостинга; может, из-за браузеров. Уменьшить количество ассетов помогло.

Вываливается на 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

Комментарии (57)

+1
Полезный пост, спасибо!
OpenFL, конечно, разочаровывает. Больше на натив ориентируются, видимо. Вся надежда на 3-ю версию.

Если flash-порт не критичен, то советую обратить внимание на flambe, работает быстро и качественно, webgl-рендер с фолбэком на canvas, поддержка webaudio/багов мало, все фиксится довольно быстро (могу помочь, если что, кое-какого опыта набрался). Единственная проблема — подозрительно давно не обновляется.
0
Спасибо за совет!
На самом деле, игру-то я писал почти полтора года назад (всё остальное время это было вялое перебрасывание письмами со спиловским QA с частотой раз в две-три недели), и сейчас всё может быть уже значительно лучше в OpenFL.
Flambe я в глаза не видел, только название слышал такое. Отпугнуло от него, что, мол, «всё делается не так, как во флеше, API совсем другое» — вот я и не трогал.
Вообще, менять коней на переправе не хотел бы — потому что уже вроде вот как раз совладал с чёртовым OpenFL; может, дальше всё проще будет :)
0
Ну, желаю удачи :) И держи в курсе!

Насчет другого API — правда, компонентная система, которая, оказывается, довольно могучая, хотя я долго мучился и, можно сказать, забивал гвозди микроскопом, пытаясь писать на ней, как на это принято на флеше.
0
Только щас прочел что игру полтора года назад делал, это выходит что ставка была более года назад еще? Интересно щас за сколько подобное продается
0
Думаю, что за прошедшее время планка качества повысилась, и это бы уже не продалось, если бы я не добавил эффектов, всяких партиклов, твинов побольше, анимаций и юзабилити.
0
аа, беда, блин даже жаление пропало игру дальше делать, я вот пару недель назад физ.пушки выложил на фгл, понятное дело пушки уже никому не нужны, но там графика норм такая, да и вообще вроде не самые плохие пушечки, и щас вот последний час last call идёт, ставка 70 баксов, придется продавать хоть за столько :)
+1
«Продавая сегодня за 70, лишаешь себя заказов завтра» ©
0
А что делать, единственная и максимальная ставка, вот кстати сама игра
0
Игра довольно забавная, громкость звуков уменьшить бы.

Вставить рекламу и выпустить самому, должно отбить.
Можно упаковать и выпустить на андроиде, правда без продвижения шансы невелики.
0
Честно сказать не уверен что на рекламе игра заработает хотяб те же 70 баксов, а какую рекламу нынче ставят вообще, CPMStar? Для андроида щас на юнити доделываю игру, а как быстро портировать с флеша на мобилки не знаю)
0
CPMstar и FGLads.
Можно попробовать без модификации собрать проект под андроид или упаковать swf. Если производительность будет нормальная, то в самом простом случае надо будет подгонку под экраны сделать.
0
Спасибо за советы, да буду думать :)
0
Спасибо за статью, а как спонсорам показывал? На своем хостинге выложил да ссылку давал? Не лочил ли никак?
0
Вообще никак не лочил. Выкладывал на FGL, некоторым просто ссылку напрямую кидал — тем, у кого на Девгамме визитку взял (предполагая, что если у человека есть визитка — значит, он не мошенник и воровать ничего не будет :) ).
0
:) Вот еще интересно бы почитать первые шаги с этим OpenFL, я до этого не слышал о нем щас скачал Haxe и OpenFL, пытаюсь разбираться по тутору их, так вот создал проект командой
openfl create project Proj111
, далее пытаюсь компилировать его командой
openfl test html5
, однак пишет что-то типа «You must have Project.xml...blabla» хотя такой файл есть в директории с проектом, ты как его компилировал? )
0
Нуууууууу, я просто взял FlashDevelop и создал проект в нём, а там уже есть переключалка таргета ^__^
0
Можешь пожалуйста сказать подробнее, вот я создал в FlashDevelop проект OpenFL, написал там некий маленький код и делаю Build, выдает вот такой лог:
Running process: C:\Program Files (x86)\FlashDevelop\Tools\fdbuild\fdbuild.exe "D:\HTML5\Testovig\Testovig.hxproj" -ipc 09c52a78-7258-4c99-b11b-3c5b8692671d -version "3.2.0" -compiler "D:\HaxeToolkit\haxe" -notrace -library "C:\Program Files (x86)\FlashDevelop\Library"
Building Testovig
Automatic NME/OpenFL build by FDBuild is deprecated.
Build succeeded
Done(0)

Тож самое и Run если нажимаю, а как сам проект затестить, не видно куда он компилируется… Что там переключать и как его запустить? Спасибо ))
UPD: щас увидел что у меня поле Select Target Build вообще пустое и там нелзя выбрать ничего, буду разбираться наверно в этом проблема
0
Да, в этом точно проблема, потому что всё остальное ты делаешь точно так же, как и я: новый проект -> Haxe / OpenFL -> компилировать.

0
0
Да, спасибо, уже разобрался! Оказывается надо было перезапустить FlashDevelop и все там появилось :) Все работает как часы уже проверил на андроиде столкнулся с проблемой которой ты описал — двоится в браузере, благо решение есть)) Класс, можно пробовать делать чтото как в старом добром флеше, а то я на юнити уже игру доделываю для андроида, думал на него полностью переходить :)
0
Выложи куда-нибудь архив с проектом.
Можно добавиться в скайп или slack-чат хакса.
0
Файл точно так зовется, а не с маленькой буквы например?
Если да, то
openfl test project.xml html5
0
Scorp, извини за офтоп, но ты не из Кировской области случайно?
0
Неа, я из Киева, в России вообще не был никогда.
0
Ответил на твой комментарий, а потом понял, что он был адресован не мне

Потому вот картинка с котиком
0
гы… у меня такойже, только рыжий. )))
0
Нет, в Кировской области никогда не находился :)
0
Кстати — давненько не было свежих бенчмарков — Adobe AIR vs OpenFL — можно найти только что-то из 2013 (когда OpenFL еще в виде NME был)
0
А что там сравнивать? Итак ясно все, достаточно понимать суть обеих технологий.
OpenFL будет быстрее как минимум в процессорных операциях, тк натив, нет виртуальной машины.
Рендер вероятнее всего тоже, но думаю разница будет небольшой, тк у AIR все лучше с этим стало со временем.
Также при выборе технологии, помимо производительности, крайне важными критериями будут:
-Pipeline. Насколько удобно работать с ассетами. Насколько удобно тестировать.
-Общая популярность технологии. Сюда входит поддержка комьюнити и наличие библиотек.
0
Кстати, я вот только недавно узнал (хотя мог бы и сам догадаться), что Unity — это ведь не нативный код, это Mono!
0
ага — меня кстати интересует каким образом Unity производительнее Adobe AIR получается — просто потому что виртуалка оптимальнее?
0
0
вот — это как раз то о чем я говрил, несколькими постами выше — все тесты сравнительные производительности остались в 2013 году :) какая ситуация сейчас — неизвестно — ведь Starling и Adobe AIR проделали некоторую работу по оптимизации с тех пор.
0
Это другие тесты, и тут Аир делает Юнити
0
Компания, в которой я работаю (~1200 человек, достаточно крупная), например, принципиально не хочет связываться с Haxe/OpenFL, и использует Unity3d из-за поддержки: в первом случае банально не к кому обратиться, если что-то работает не так (имеется в виду не написать вопрос на StackOverflow, а именно открыть тикет, заплатить денег и получить коммерческую поддержку).
+1
haxe.org/foundation

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
0
да, очень часто замечаю что большие компании предпочитают выбрать что-то редкое, неизвестное и не всегда хорошее (не имею ввиду Unity в данном случае — я в целом), но чтобы был суппорт за который можно заплатить :)
0
Про «неизвестное» удивил, но насчёт платного суппорта — 10000%. Речь ведь идёт о том, чтобы сделать процесс контролируемым.
Вон, с тем же флешем я точно знал, что сделаю, и как оно будет работать. А эта игрулька на OpenFL работала, наоборот, так (и тогда), как хотелось ей, а не мне.

А если б я инвестировал деньги, то было бы грустненько как-то, что планировал сделать за месяц, а растянулось на полтора года из-за того, что платформа сама себе на уме :)
0
ну «неизвестное» я ж не про Unity — а например когда выбирают платный и менее известный Perforce вместо бесплатного народного Git или Svn :)
0
Это все понятно — тем не менее как-то вот AIR по рендеру спрайтов в 2013 году даже умудрялся немного побить OpenFL, который по сути нативный перформанс должен был давать. Мне понятно что натив будет быстрее работать, чем виртуалка на CPU интенсивных задачах — меня же интересует насколько продвинулись с 2013 года виртуалка и компилятор AIR-а или продвинулись ли вообще.
+1
Если бы я умел рисовать — я бы нарисовал и запостил анимацию, где в стиле «Терминатора» из ниоткуда появляется сияющий сгусток энергии, а в нём — TheRabbit.
0
Вот еще такой вопрос возник насчет разрешений, вот он на весь экран браузера растягивается (игра), вместе с тем растягиваются и спрайты и выглядят не очень (а также если даже уменьшаются от оригинального размера то выглядят плохо), ты как-то с этим боролся или ты ставил чтоб она не растягивалась на всю страницу а отображалась всегда в одном размере?
+2
Нет, напротив, разрешал ей растягиваться самой, потому что тогда я уверен, что на разных девайсах оно будет занимать всё пространство, а не будет крохотной игрусецькой в центре какого-нибудь 2к ретина экрана.
0
Но ведь размазываются спрайты в таком случае если разрешение будет достаточно высоко? И кстати черные полосы будут на некоторых девайсах из-за соотношений сторон?
+1
Спрайты — размазываются, полос — не будет, если ты фон сделаешь под игрой.
Но вообще, надо реквестировать сюда специалистов по HTML5. Я в нём разбираюсь примерно так же, как в Unity3d, стоматологии и My Little Pony — знаю, что оно есть, и видел, но хрен знает как работает.
0
Я про это однажды тоже спрашивал, так оказалось, никто не парится по поводу размазанности графики (то есть, никаких дополнительных наборов графики, как это делается в нативных игрулях). Максимум, удваивают размер канваса для ретин, затем впихивают его в экран с помощью css-скейлинга.
0
А я что-то щас демку набросал с Nape — в хроме вроде работает, доволен, а проверил на firefox — не пашет, там черный экран только, на андроиде посмотрел — тож черный экран просто… мда, странное дело
0
Выложи посмотреть где-то.
Локально смотришь? Если да, попробуй залить куда-то (дропбокс например)
0
super-mult.ru/testh4/ — вот, щас залил новую демку в фаерфоксе стало видно вроде, однако не отображается там текст сверху (с координатами куда кликаешь) и сами клики не работают, на андроиде тож самое. в IE тож самое — текста нет, клики не обрабатываются… оч странно только в хроме все работает как надо
0
А оно вообще не работает нигде кроме хрома просто колом стоит оказывается, будто 1 кадр виден и далее зависает все
0
В консоли ошибка
«IndexSizeError: Index or size is negative or greater than the allowed amount»

Можно попробовать подключить github.com/YellowAfterlife/openfl-bitfive
или выложи проект посмотреть.
0
Хм удивительно но щас закоментил строки с драв дебагом, линии эти дебажные которые рисует — и все норм заработало super-mult.ru/testh5/ :)
если надо могу скинуть проект… на андроиде правда если быстро ткнуть то появляются 2 шара вместо 1, а если нажать и чрез пару сек отпустить то 1)) и подтормаживает, но эт наверно от телефона уже зависит.
0
А ты какую версию openfl используешь?
0
Последнюю, версию не знаю даже, скачал Haxe 3.2, установил его, далее прописал в командой строке
haxelib install openfl
haxelib run openfl setup
и дело в шляпе. вчера ток первый раз в глаза его увидел, щас уже прототип игры почти готов, единственное что у меня на телефоне тормозит это дело, видимо требовательная вещь (конкретно nape на openfl), потому что даж юнити игры с 3д несложные идут нормально без лагов, а тут…
0
Понял, значит третью.
Помни, что она еще в бете, так что баги надо репортить, чтобы поскорей поправили :)
0
Когда я пробовал нейп довольно неплохо работал, попробуй подключить bitfive вместо родного openfl html5
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.