How mature is HTML5 in HaxeFlixel?



  • Hi.

    I wanted to know mature was the support for HTML5 in HaxeFlixel. So I downloaded HaxeFlixel demos and tested each one of them to see how they would behave in HTML5.

    In order to have something to compare, Flash versions were taken as the default behavior and apparency for each demo.

    So, I first generated Flash binary, tested it and then I repeated the process using HTML5 version. For HTML5, I performed tests in 3 browsers: Chrome, Firefox and Internet Explorer Edge.

    It seems to me that HTML5 target is far behind Flash. My doubt is: the problems I've came across when testing HTML5 version of demos are caused by the fact that HTML5 backend is not mature in Openfl or it's the HaxeFlixel integration with HTML5 backend that is not mature?

    Also, how is the roadmap for HTML5 target?

    Below are the list of folders / subfolders / game names of demo that didn't work as expected (in HTML5).
    Whenever possible I put some brief comments explaining the problem. I've put some pictures too.

    Note that I ignored errors like sound not been played when the type of audio file provided wasn't supported by the browser.
    Also, if the demo worked well in at least one of the browsers, I didn't counted it as not working.

    I'm considering to repeat all tests for Android and see what happens. But it probably will take much more time.

    All comments are very welcome.

    Arcades: (100% OK)
    Editors (2/4 - 50%): For demos in Editors folder, I could not test the projects FlxPexParser and FlxSpine because they didn't compiled even for Flash.
    FlxPexParser - error on both Flash and HTML5.
    message: source/PlayState.hx:31: characters 87-92 : Too many arguments
    Solution: line 31 is
    FlxPexParser.parse("assets/data/particle.pex", "assets/images/texture.png", emitter, scale);
    but should be
    FlxPexParser.parse("assets/data/particle.pex", "assets/images/texture.png", emitter);
    FlxSpine - error on both Flash and HTML5.
    message: Error: Could not find haxelib "spinehaxe", does it need to be installed?

    Effects (10/16 - 62.5% failed)
    BlendModes - there is no blend effect.
    DynamicShadows - shows a red point in a magenta background instead of the imaghes and the shadow.
    Filters - sometimes it shows a black screen and sometimes it show the screen but it doesn't apply any filter.
    FlxBloom - just a black screen.
    FlxBlur - my English is not good enough for explain the problem in a clear way but it is like it shows just lines instead of a "3d" effect.
    FlxClothSprite - just a black screen.
    FlxEffectSprite - quality of images and effects are not exactly the same.
    FlxSpriteFilters - shows a message "Filters are currently not supported on HTML5.
    FlxTween - it just shows the drop boxes.
    PostProcess - justa a black screen.

    Features (6/21 - 28.5% failed):
    FlxFSM - just a blank screen (error on console: Uncaught TypeError: Cannot read property 'name' of undefined - FlxFSM.js:4288)
    FlxNapeTerrain - effects work but images are not loaded.
    FlxPieDial - it doesn't draw all images.
    FlxSound - Only .ogg files were been copied to assets folder on HTML5 target. After I put .mp3 files on assets file, sound was successfully played on IE Edge and Firefox. No sound at all on Chrome. Taking a look on Network tab of Chrome's developer console, it just downloaded 74 bytes of each .ogg file (all of them have their correct size and could be successfully played using a VLC player).
    SplitScreen - no images. Just a screen in 2 colors.
    SubState - just show buttons OpenPersitant and OpenTemp (that don't work) in a white background.

    Input (100% OK):
    FlxAccelerometer - only for mobile devices.
    GamepadTest - I didn't test (I don't have game pad).

    Other (2/6 - 33.33% failed):
    BSPMapGen - Image appears blurred.
    Calculator - error on both Flash and HTML5: source/State.hx:20: characters 7-19 : Type not found : hscript.Expr
    line: import hscript.Expr;

    Performance (1/4 - 25% failed):
    NeonVector - Effects are too poor compared to Flash version.

    Platformers (1/7 - 14.3% failed):
    FlipRotationAnimationTiles - black screen. error message: FlipRotationAnimationTiles.js:9427 Uncaught Error: HTML5 doesn't support compressed data! Use Base64 (uncompressed) when you save the map or install the library 'format' and use it

    Tutorials (1/1 - 100% OK):

    UserInterface (2/7 - 28.6% failed):
    FileBrowse - Black screen on Firefox and IE. In Chrome we see the button but it doesn't respond to clicks.
    FlxTextFormat - Text appears completely different from Flash version.

    My Environment:
    O.S. - Windows 10 Version 1511 (build 10586.589)
    Internet Explorer Edge - 25.10586.0.0
    Firefox - 48.0.2
    Chrome - 53.0.2785.116 m
    Haxe - 3.2.1
    Haxelibs:
    actuate - 1.8.7
    box2d - 1.2.3
    firetongue - 2.0.0
    flixel-addons - 2.1.0
    flixel-demos - 2.2.0
    flixel-templates - 2.1.0
    flixel-tools - 1.2.0
    flixel-ui - 2.1.0
    flixel - 4.1.1
    hxcpp - 3.3.49
    layout - 1.2.1
    lime-samples - 2.6.0
    lime - 2.9.1
    nape - 2.0.20
    openfl-bitfive - 3.3.3
    openfl-samples - 4.0.0
    openfl - 3.6.1
    poly2trihx - 0.1.4
    spinehx - 0.2.0
    swf - 2.2.4
    systools - 1.1.0
    task - 1.0.7

    Dynamic Shadows - HTML5
    Dynamic Shadows

    BSPMapGen - HTML5
    BSPMapGen - HTML5

    SplitScreen - Flash
    SplitScreen - Flash

    SplitScreen - HTML5
    SplitScreen - HTML5

    FlxNapeTerrain - Flash
    FlxNapeTerrain - Flash

    FlxNapeTerrain - HTML5
    alt text

    FlxPieDial - Flash
    alt text

    FlxPieDial - HTML5
    FlxPieDial - HTML5

    FlxTextFormat - Flash
    FlxTextFormat - Flash

    FlxTextFormat - HTML5
    FlxTextFormat - HTML5

    NeonVector - Flash
    NeonVector - Flash

    NeonVector - HTML5
    NeonVector - HTML5


Log in to reply