воскресенье, 29 июля 2012 г.

NME и HTML5: ready or not?

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

В начале этой недели я в очередной раз попытался скомпилировать простую демку для HaxeFlixel в html5 и сразу же наткнулся на проблему: метод draw() класса BitmapData не учитывал параметры matrix (трансформация положения и формы) и colorTransform (цветовая трансформация), в то время как отрисовка графики в движке полностью строится на двух методах (draw() и copyPixels()). Но за что я люблю NME, так это за отзывчивость разработчиков, и буквально за три дня описанная проблема была исправлена. После этого я занялся непосредственно попыткой скомпилировать демку FlxInvaders в js-код. Сам процесс занял около 6 часов и состоял в основном в дописании параметров условной компиляции (ничего сложного), сам код практически не изменился. И вот, наконец, мне удалось запустить ее, но результат не впечатлил: всего 15-16 фпс против желаемых 30.
После этого началось небольшое исследование + экспериментрирование:
  • где-то полгода назад я услышал о Jangaroo -- специальном SDK, позволяющем компилировать AS3-код в JS, примерно тогда же встретил демку Jumper -- платформер, написанный на AS3 с использованием Flixel и портированный с помощью Jangaroo на html5. То есть успешные попытки портирования Flixel на html5 уже есть, и довольно давно. Так вот, вспомнив об этой технологии, решил поискать еще примеров по ней. Гугл выдал мне следующую страницу, содержащую несколько ссылок по данному предмету, в том числе и на демку FlxInvaders, которая у меня в Хроме выдает в среднем 42-43 фпс, т.е. почти в три раза быстрее.
  • увидев такую разницу в производительности, у меня возникло две мысли: а) мой порт тормозной и б) Jeash тормозной. С первой я спорить не стану, т.к. Flixel использует отрисовку всей графики в одну битмапдату (что является аналогом использования только одного элемента Canvas в JS), а это не самая эффективная техника (но Jangaroo умудряется выдавать при этом гораздо лучший результат), то вторая требовала более подробного изучения.
  • и один день я посвятил данному вопросу. Написал несколько пару простых демок, суть их такова: имеем приложение размером 800х600, в него рисуются спрайты, в каждый из которых вложена битмапа с одним и тем же изображением (30х30 px). В итоге имеем, что при 30 фпс я могу отрисовать 110-120 таких спрайтов, а при 60 — только 45. И это в Хроме, в ФайрФоксе и IE все хуже. Мне такие результаты совсем не нравятся, и Jeash (я так считаю) еще не готов для написания "серьезных" игр (под серьезными здесь я понимаю игры с большим количеством движущихся и трансформируемых объектов).
В итоге родилась следующая, так сказать, "мысль": переписать под себя класс BitmapData (ориентируясь на его текущую реализацию и версию Jangaroo), т.к. практически весь вывод графики в HaxeFlixel зависит от него. Но это, опять же, в отдаленной перспективе, т.к. в приоритете система слоев для C++, которая все так же находится в ранней стадии разработки, а затем stage3D-версия.

UPD: Совершенно забыл приложить скомпилированную версию демки и исходники теста производительности отрисовки спрайтов

7 комментариев:

  1. Your tests of jeash are interesting and I came to similar limitations in complicated bitmapdata/display object hierarchies that didn't perform as good as C++ and flash.

    Jangaroo is very cool, its funny dont want to but Haxe->As3->Jangaroo->html5 may work ;) The projects are so similar I hope they can grow together. I guess https://github.com/elsassph/nme-tilelayer is the best thing performing in jeash right now and pixel blitting is very different?

    I think the chrome translator did a good job. Although I cant understand your last paragraph that well. Good luck with the layers system.

    ОтветитьУдалить
    Ответы
    1. I think that Haxe->As3->Jangaroo->html5 "language chain" is too long and one of chain's element is redundant.
      In the last paragraph I wrote that maybe I'll write/rewrite my implementation of BitmapData class based on Jangaroo's one, but much later since I have other priorities. And layer system is for c++ target, it should help to solve draw order problem on that target.

      Удалить
  2. К сожалению, сколько 2d-canvas не оптимизируй, все равно будет медленно. Советую присмотреться к WebGL, разница в производительности заметна невооруженным глазом.

    ОтветитьУдалить
    Ответы
    1. То, что 2d-canvas медленный, я знаю, просто здесь я пишу о том, что Jeash делает его гораздо медленнее и требует оптимизации.
      Кстати, Артур, не подскажете а возможно ли подключить Mojo HTML5 GL к проекту, не использующему Monkey?

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

      Удалить
  3. Yeah, Jeash by default uses separate canvas elements instead of one big canvas. I think that the performance for many canvas implementations are slow when writing, but DOM manipulation of existing elements works pretty well.

    I'm not sure if the design of Flixel really makes it possible to work with separate object layers instead of one blitted canvas. That method may also perform better for native targets, which also prefer geometry translation instead of changing textures, since they are GPU-accelerated :)

    ОтветитьУдалить
    Ответы
    1. I can make it work with separate objects. It will take some time and will exclude some of the features of original Flixel (such as multiple cameras support).Yes, perfomance will increase, but I think that it won't be very big (at least on desktop)

      Удалить