DragonBones low FPS on html5 target

I try to use DragonBones in my next game for some simple animations. And it works well with flash target, but when I target html5, animation are extremely low and FPS drop on 2. So I made the test. I use part of the code from OpenFl DragonBones sample and tried with 2 different animations: one is created by me, and the second one is from sample project (that funny dragon). On same code, sample Dragon runs on 60 FPS, my animation run on 15-20 FPS.
When I try Erget Preview from DB, it also works well.
Here’s demo:demo animation You can switch between animations and see how FPS rises and falls.
Here is whole test project Link
I use last openFL DragonBones 5.0.0, and newest DB 5.1.0.
I believe something is wrong in export settings but can’t achieve what. I’ll appreciate any suggestion.

Are you using DragonBones with Starling, or without? The render code for DragonBones (outside of Starling) needs to be optimized to use Tilemap instead of drawTriangles, which is known to be slow

Yes, I use it without Starling. In few test I realize that if I export this shark animation(who is designed in full HD environment) with scale .5, I can achieve 60 FPS. Everything with scale 1 (for big resolutions) is useless. Even on Android I get only 20 FPS.
When I test animation in Egret preview, it run really smooth (even with mouse activity). See video
Does this mean that no way to run this animation smoothly in browser with openFl target?

Sure there is, but the dragonbones library was only recently ported to Haxe, so we have not visited the Flash renderer code to implement a faster method than drawTriangles

Well, there isn’t problem with flash target. It run on 60 FPS. Sample video
I’m interested for html5 and mobile target and it doesn’t look good.
Or you use same render code for swf and rest?

Yep, it’s the same code everywhere. The OpenFLSlot code needs to be updated to use Tilemap, which should perform much faster than drawTriangles on all target platforms

It will be really great. Any plans in nearest future? :smiley:

Maybe soon, just hang tight and we’ll see what we can do :slight_smile:

1 Like

Actually, I’m unsure if I will be able to help with this now, but I know a few other developers using Dragonbones who may be interested

OK, let me know, If I can help you somehow you can always contact me privately via email or PM here.

I found quick solution for my game animations. I put all animations in Starling layer and it run at 60 FPS even on mobile browser. In this case this is good solution for me because my animations are in background. I will share game with you after final debug :slight_smile:

Can we move starling layer on the top layer? or arrange the layer like setChildIndex?

Because If I do :

	var starling :Starling = new Starling(Game, stage);
	starling.showStats = true;
	starling.start ();	

	addChild(sptBG);

The dragonbones animation was behind sptBG.

Starling uses Stage3D, which is always below display list content

We need to make a new Armature/Factory for DragonBones, designed for OpenFL’s Tilemap API to take advantage of fast quad batch rendering (instead of the slow drawTriangles API)

Ah Ok, I’ll wait the new update then. For now I’ll using without starling layer.

Anyway can you give me the .fla of knight example? I want see the structure movie on .fla.

As singmajesty explain, Starling is always on bottom layer. Because I run some background animations, It’s OK for me to combine Starling for animations, and openFl for rest of gameplay.
Even if I come from AS3 Starling background, and I use DragonBones in my AS3 projects, I would like to stick with openFl because I build whole framework on top of openFl. This option (combine Starling and openFl) is OK for some simple projects, but I have in my mind some great ideas with lot’s of animations, and I definitely need openFl DragonBones render update. I hope so it will be released soon.

You can see it here. This is first preview of the game. Animations are most interesting part :slight_smile: LINK