OpenFL-bitfive, alternative HTML5 backend for OpenFL, is now out!

[ozdy]

Thank you, I can cap the frames now, but I get smaller real frame rate. Tested on Desktop Firefox, Chrome and iPhone4s Safari and Chrome:

 

setting 30 fps gets ~20

setting 40 fps gets ~30

setting 50 fps gets ~30

setting 60 fps gets ~40

[damir]

I'm very interested in this, but I'm having trouble using it.

 

I've added it into haxelib. Are you compiling using NME, or haxe directly? I try to do 'nme build openfl-bitfive', but I get 'unknown target' error. What do I need to add to project.nmml or game.hxproj?

 

On related note, what disadvantages (except performance) did you notice in OpenFL HTML5 backend - especially on mobile devices?

 

Thanks!

[YellowAfterlife]

Thank you, I can cap the frames now, but I get smaller real frame rate. Tested on Desktop Firefox, Chrome and iPhone4s Safari and Chrome:

 

setting 30 fps gets ~20

setting 40 fps gets ~30

setting 50 fps gets ~30

setting 60 fps gets ~40

Currently a new frame is handled as soon as enough time (1000 / frameRate ms) has passed since last frame. This indeed can result in slightly lower than real framerate. I'll get to improving this once things get less crowded in my current activities.

I've added it into haxelib. Are you compiling using NME, or haxe directly? I try to do 'nme build openfl-bitfive', but I get 'unknown target' error. What do I need to add to project.nmml or game.hxproj?

First things first, you need to use OpenFL, and not NME. "haxelib install openfl". It should also be a relatively recent version since support for custom backends wasn't added as long ago.

Then you add a line into project.xml as specified in Usage section.

On related note, what disadvantages (except performance) did you notice in OpenFL HTML5 backend - especially on mobile devices?

As the introduction post states in fair detail, primary differences are filesize (not that much of a deal - it primarily determines how long it takes before you see any kind of loading done game-side), garbage generation (browser may as well choke if there's too much to handle) and actual performance. There's also a slight factor of backwards compatibility (e.g. earlier Android browser implementations tended to miss the Context.clip() method, which original backend uses at a couple of areas) but I wouldn't say that it is driving here.

[ozdy]

On related note, what disadvantages (except performance) did you notice in OpenFL HTML5 backend - especially on mobile devices?

 

I have two drawing classes for my multiplatform haxe+openfl engine - using drawTiles (for opengl platforms) and using BitmapData.draw()/copyPixels() (for Flash).

 

In the original openfl html5, using drawTiles is very slow, like 4-5fps on iphone 4s.

Using BitmapData tiles doesn't allow to have alpha when drawing - not only does it not display alpha images, it somehow breaks any next draw calls in the frame even if not alpha.

 

On a related note, using drawTiles with Bitfive is not working for me using the TRANS_2x2 flag, but it doesn't matter much as bitmapdata.draw()/copyPixels() framework is working flawlessly and should be fastest way to draw

[YellowAfterlife]

On a related note, using drawTiles with Bitfive is not working for me using the TRANS_2x2 flag

Fixed. copyPixels & draw indeed remain the preferred method of drawing though.

Testing validity of implementation is hard sometimes.

[damir]

I've successfully used the bitfive backend, it works great!

 

So the best way (to maximize performance), is to only have 1 Bitmap attached to stage, and render everything on the associated BitmapData? Are you guys following this strictly? What about text, do you display it using TextField? If so, is it move efficient to add the TextField to stage, or draw it onto BitmapData?

 

Thanks!

[ozdy]

I use custom bitmap fonts from a font texture.

[CrazySam]

Hi there! I just found out about this, HaxeFlixel uses both Tilesheet rendering and draw / blit rendering on Flash + HTML5. It would be awesome if we converted a demo (FlxBunnyMark for example) to run on top of this platform for HTML5, to see what kind of gains we can get. Do you know what we would need to do to make HaxeFlixel use your lib?

[ozdy]

Let me show you my first complete openfl bitfive game (also my first ever html5 game!) Hooda Stacker . I've got also 2 more physics games close to finishing. Let me again give my huge thanks to YellowAfterLife for this amazing html5 openfl target and making it possible to make a flexible haxe game framework that supports html5 The only slight thing is the frame cap issue, but I've set it to 45 hoping to get 30 (getting 28-38 fps )

[damir]

I used succecsfully Bitfive for our games too! Big thanks to YellowAfterLife!

 

The issue I have is that something weird happens only on iOS6 when rotating device (see http://www.html5gamedevs.com/topic/1727-lolipop-crush-please-help-with-testing/?p=11869 - Lolipop Crush is our first game HTML5 game and it uses Bitfive). (the link has since moved to http://silvertowerstudio.com/lolipopcrush/index.html if you want to try it).

 

I only use 1 canvas in the html and render everything on a single BitmapData. I never render black (and it's not the html background color either), so I'm guessing something weird happens in the browser.

Let me know if you have the same problems. I will try to debug it and report the fix if I'm successful.

 

On a different matter, you guys were discussing alpha (render sprite with 50% transparency for instance) - were you able to use it on mobile targets? I can't seem to get it to work with BitmapData.draw and ColorFilter (works in flash target, but not HTML5). Is this even possible at the moment?

 

Cheers

 

 

[ozdy]

On a different matter, you guys were discussing alpha (render sprite with 50% transparency for instance) - were you able to use it on mobile targets? I can't seem to get it to work with BitmapData.draw and ColorFilter (works in flash target, but not HTML5). Is this even possible at the moment?

 

I use bitmapdata.draw colortransform.alphaMultiplier for alpha - please check if it works on your device with Hooda Stacker . Whenever you place a shape while holding your finger down, the shape should be partly transparent.

 

The issue I have is that something weird happens only on iOS6 when rotating device (see http://www.html5gamedevs.com/topic/1727-lolipop-crush-please-help-with-testing/?p=11869 - Lolipop Crush is our first game HTML5 game and it uses Bitfive). (the link has since moved to http://silvertowerstudio.com/lolipopcrush/index.html if you want to try it).

 

Can't check at the moment, but again, you should see if you get the problem with my game too.

[damir]

Yes alpha seems to be working in your game. I tried colortransform.alphaMultiplier too, but it didn't work. Probably my error, will try again. One problem with BitmapData.draw is that it doesn't seem to support source rectangle clipping in HTML5, so it's useless for spritesheets/fonts.

 

I can't test for the bug since I don't have any iOS6 device at the moment (the bug seems to be specific for that). On other devices rotation works OK.

[ozdy]

I've got ios6 and indeed you have the bug and i don't. I have a custom resize handler though using the js.* haxe classes and offsetting the canvas div container, so the game is centered and has best fit in area. I also believe that I check innerWidth and Height each frame rather than relying only on resize events...

[YellowAfterlife]

The issue I have is that something weird happens only on iOS6 when rotating device (see http://www.html5gamedevs.com/topic/1727-lolipop-crush-please-help-with-testing/?p=11869 - Lolipop Crush is our first game HTML5 game and it uses Bitfive). (the link has since moved to http://silvertowerstudio.com/lolipopcrush/index.html if you want to try it).

 

I only use 1 canvas in the html and render everything on a single BitmapData. I never render black (and it's not the html background color either), so I'm guessing something weird happens in the browser.

Let me know if you have the same problems. I will try to debug it and report the fix if I'm successful.

What exactly happens? I don't have an iOS6 device, thus can't even guess.

If game is not snapping accordingly, you could took ozdy's suggestion - try polling innerWidth/innerHeight (these can be accessed via stage.stageWidth/stage.stageHeight, by the way) and resize the canvas accordingly (default x/y/xscale/yscale should work fine, though manual style modification may work faster. This needs testing).

 

On a different matter, you guys were discussing alpha (render sprite with 50% transparency for instance) - were you able to use it on mobile targets? I can't seem to get it to work with BitmapData.draw and ColorFilter (works in flash target, but not HTML5). Is this even possible at the moment?

ColorFilter is not going to work - filters were one of sacrifices to permit higher performance and simpler structure here.

BitmapData.draw should work as long as your ColorTransform only modifies alpha value, e.g.

var ctAlpha = new ColorTransform(1, 1, 1, 0.7);// ...bitmapData.draw(image, matrix, ctAlpha);

Modifying other properties will void the effect.

This happens because a alpha-only transform allows to use HTML5 RenderingContext2D' globalAlpha property for fast alpha transformations.

While color manipulations via .colorTransform will still work, these are not too fast and are not recommended to be applied mid-run without a good reason. This is also a reason why draw() does not even attempt at applying these - if it were to, it would only make it simpler to cripple performance of application without knowing specifics.

colorTransform also takes shortcuts where appropriate, by the way.

[damir]

I have found the reason for the iOS6 rotation bug, the fix is fortunately very easy.

 

In current index.html that is generated by Bitfive, there is a line:

<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, height=device-height' />

It should be changed to:

<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width' />

And it starts working properly.

 

Cheers

[ozdy]

Hi again,

I have a small bug to report. The way I decided to draw lines in game is the following - make a (10x4) bitmapFill from a checkerboard bitmapdata (4x4), and center it between the two endpoints, scale it on X as much as I need (so it fits point distance), and then rotate it as needed. In Flash it works ok, in Bitfive the fill isn't repeated, and there is a cutting off in line beginning (antialias?)

 

Left-Flash, how it should be, Right-Bitfive:

Here is how I create the line:

    public function createLineGFX(fillBmd:BitmapData,lineWidth:Float=-1,lineLength:Float=10):Void {        if(lineWidth < 0)lineWidth = fillBmd.height;        flSprite.graphics.clear();        flSprite.graphics.beginBitmapFill(fillBmd);        flSprite.graphics.moveTo(-lineLength/2,-lineWidth/2);        flSprite.graphics.lineTo(lineLength/2,-lineWidth/2);        flSprite.graphics.lineTo(lineLength/2,lineWidth/2);        flSprite.graphics.lineTo(-lineLength/2,lineWidth/2);        flSprite.graphics.lineTo(-lineLength/2,-lineWidth/2);        flSprite.graphics.endFill();    }

[ozdy]

Hi Yellow,

I've got another minor bug report for you regarding bitmap scaling in Preloader. This seems to happen only on mobile browser (tested on iPhone 4s Safari and Chrome). In Preloader, NME puts it's preloader bar based on getWidth() and getHeight(), and it is drawn in constructor.

 

During update/loading events in Preloader, I try to draw a Bitmap (after bitmapdata is available in assets) that should take whole screen horizontally, so I use this function:

public function putBitmap(bmd:BitmapData):Void {        visible = true;        bm = new Bitmap(bmd);        bm.scaleX = bm.scaleY = getWidth() / bmd.width; //trying to scale it	Lib.current.addChildAt(bm, 0);    }

However, in phone I get this:

 

 

Notice how bar takes whole screen, but image is bigger, in fact I tried to change the getWidth() to the value it gets in the beginning with initializing of preloader bar (should be same?) but error still persists in mobile browser.

 

EDIT: Actually, it happens in desktop browser too, if I test remotely.

[ozdy]

Hi Yellow, I want to report another minor thing, not sure if intended or not or if it's OpenFL general bug:

 

I have my own preloader inheriting from NMEPreloader.hx, I want to add my own additional loading event (for createjs sound loading), so I don't want the preloader to end before sounds are loaded, or preloader to start if only sounds are loaded but before it has loaded. So I do this:

   public function audioLoadComplete(event:Dynamic):Void {	Audio.loaded = true;	if(assetsLoaded)onLoaded();}override public function onLoaded():Void {	assetsLoaded = true;        #if html5	if (!Audio.loaded) return;        #else	if(bm!=null && bm.parent!=null)Lib.current.removeChild(bm);        Lib.current.removeChild(outline);        Lib.current.removeChild(progress);        dispatchEvent (new Event (Event.COMPLETE));        #end    }

The problem is that "this" is null after system calls onLoaded even if you don't dispatch the Event.Complete event. Do you know any way around that?

[ozdy]

Hi Yellow, I'd like to report another bug, I wonder how I caught it in my 7th game and not previously:

 

In my Input class I do:

 

        doc.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
        doc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

 

While everything is ok on desktop, on mobile a single tap always fires two mousedownhandlers and one mouseup ...

[vasylbo]

Hi Yellow!

 

I know that you havent integrated bitfive with HaxeFlixel. After small fix in its BitmapFrontEnd it works fine on simple stage. But I have troubles in very simple code which is in update function: 

var fps:Int = Math.floor(1 / FlxG.elapsed);_fps.text = "fps " + fps

Where _fps is:

_fps = new FlxText(5, 30, 100, "fps is ");add(_fps);

After couple seconds whole scene becomes black without any console warnings or errors. 

 

Without updating the text everythings works fine. 

[YellowAfterlife]

Hi Yellow!

 

I know that you havent integrated bitfive with HaxeFlixel. After small fix in its BitmapFrontEnd it works fine on simple stage. But I have troubles in very simple code which is in update function: 

var fps:Int = Math.floor(1 / FlxG.elapsed);_fps.text = "fps " + fps

Where _fps is:

_fps = new FlxText(5, 30, 100, "fps is ");add(_fps);

After couple seconds whole scene becomes black without any console warnings or errors. 

 

Without updating the text everythings works fine.

I haven't specifically optimized bitfive for use with HaxeFlixel (Graphics and TileSheet classes need a rewrite to be used as often), but I did get it working as such.

To say, I'm also not getting said crash with current version of Flixel and sample highlighted in that twitter image. Perhaps it's not the only thing that contributes?

You could try dev branch of HaxeFlixel. Some people are working on improving HTML5 compatibility, among other things.

Also, if anyone asks, most of issues listed on this forum page are fixed by now.

[DangerPenguin]

Holy cow! I used Haxe/OpenFL(NME) quite a while ago and liked it, but the HTML5 export just wasn't where it needed to be for me to use it.

 

I'm gonna have to take another swing at OpenFL with this HTML5 backend, awesome job man!

[pepperpunk]

Great library, I'm just getting started with making my first properly multi-platform game using openfl and hoping this will work great for the html5 export. Thanks for making it and I'll let you know how I get on with it.

[Neoprofessor]

I was looking at the post about Flambe which requires Haxe and a few other things, lets you publish HTML5 or Flash and for any platform. Just saying, looks interesting more people are starting to think and building cross platform to support flash output.

[pepperpunk]

How do I install the library?

 

openfl install bitfive doesn't work, and your documentation is probably the most unhelpful thing I've ever seen written in a guide about how to install something.

 

Compiling (or at least trying to) your projects with openfl-bitfive is pretty straightforward: Install the library. I suppose that you can figure this out on your own.

 

Normally, I'm more patient, but I've found that 60-70% of Haxe documentation is either missing, incomplete, outdated or placeholder so I've simply lost patience after dealing with all of that over the last few days.