FPS low on html5 haxedef nom vs only html5, why?

#1

Hi,

I have tested the game in two version, I am unable to understand why the smooth version (haxedef nom mode) fps are very few as compare to normal mode html5
Normal HTML5 ( number of lines are double the nom ver )

Haxedef NOM Mode

What may be the reason of this behavior, also I am experiencing very low fps on android and it decrease to FPS: 7 or 8. I am testing it on android 2.3.8

[Update]
I have also tested that normal html5 also has different results based on, adding multiple sprites and relocating them on stage (FPS: 60-50) verses drawing circle of radius 10 and relocating them (FPS: 40-50) every frame.

#2

In HTML5, it uses “requestAnimationFrame” in order to perform the animation. However, on some devices (such as an old Android browser), it might not be supported. In these cases, it uses a JavaScript Timer instead, but this is MUCH slower than using requestAnimationFrame.

In canvas, it will blit constantly, so it is reliant on the performance of canvas in the target browser. Older browsers were very slow, but newer ones have quite good performance in canvas (if not as good as WebGL could be, though). The DOM mode, on the other hand, uses CSS3 transforms, which might be hardware accelerated (and thus perform better) on older browsers – in smart TVs, this has been the case. It also depends on how often you change the objects on screen, and it can be highly subjective (due to some of the reasons I mentioned) depending on the browser.

FYI, by default, the canvas mode will all blit to one large canvas, DOM mode will use separate Image objects, or if needed, separate canvas elements, and animate those, unless you use something like “bitmapData.draw” to combine them into one canvas. Having multiple canvas elements can be very slow, so if you can load an image from disk, that would probably perform better in DOM mode than programmatically generating canvas elements.

#3

Thans, I got your point, all cleared.

One more question:
Why performance is down when compiling same game for android its FPS falling to 7-8.

#4

Is that a native Android build, or HTML5? If it’s the browser, it’s surely the difference in browsers (or mobile hardware), if it’s native, are you using the Graphics API a lot? It can be much slower than using bitmaps

#5

Native android build. Yes have used multiple sprites as you can see they are added back to back.

        graphics.beginFill(0x000000);
        graphics.drawCircle(-5,-5,5);
        
        graphics.beginFill(0x999999);
        graphics.drawCircle(0,0,10);
        
        graphics.beginFill(0x000000);
        graphics.drawCircle(5,5,5);        
        
        graphics.endFill();

I am doing this for each dot snake eats. Its a extended class of sprite

#6

If the graphics don’t update often, try committing it to a bitmap:

var bitmapData = new BitmapData (sprite.width, sprite.height);
bitmapData.draw (sprite);
var bitmap = new Bitmap (bitmapData);
addChild (bitmap);

This way, it doesn’t require a graphics renderer more than one frame, and otherwise uses a bitmap (you would do something like the above for each dot, or only once, if you can reuse the same bitmapData for each dot, if they look the same)