Thursday, 17 February 2011

BunnyMark compiled from ActionScript to HTML5 with Jangaroo


Jangaroo is a cool opensource project that lets you compile AS3 source code into JavaScript, and as it emulates a subset of Flash player features, you can even use it to port existing Flash games and apps to HTML5 Canvas. I talked about my experiments trying to get it working in the first episode of my and Seb's podcast. I wasn't having much luck at that point, but since then Frank from the Jangaroo team has given me loads of help to get all my demos working, even editing my code and fixing parts of the compiler for me! What I think I didn't stress enough on the podcast was that this project is still very much a work in progress / public alpha - I think it has a lot of potential.

So here I present BunnyMark via Jangaroo and HTML5 Canvas!

BunnyMark - blitted version - 30fps (Windows Vista / Chrome) - Pretty fast!
BunnyMark - bitmap version - 8fps - Really slow for some reason. (any ideas Frank?)
BunnyLandMark - blitted version - 30fps - Pretty fast!


15 comments:

AHOLLA said...

That's pretty cool! Framerate is good presuming you've set it to 30 fps. Keep us informed of its progress.

Ben Reynolds said...

Cool! When running your 4 projects on Firefox on my MacBook the FPS's I got were:

BunnyMark - blitted version - consistent 30

BunnyMark - bitmap version - 3 or 4...

BunnyLandMark - blitted version - only 8?

BunnyLandMark - bitmap version - 10

Doesn't exactly match up with how you labeled them speed-wise. Just wanted to let you know.

Leonard said...

Hm interesting here are my fps:

BunnyMark - blitted version 24-27

BunnyMark - bitmap version 9-12

BunnyLandMark - blitted version 25-30

BunnyLandMark - bitmap version consistent 30

Seems weird and inconsistent with Ben's and your findings...

Browser is the latest version of Chrome.

Anonymous said...

One thing I found is that with the latter two examples the animation would only run when the mouse was in motion. If I didn't move the mouse nothing would happen

Iain said...

@anonymous - that's weird - what browser?

Peixinho said...

Ubuntu 10.04, chrome:
BunnyMark - 30
BunnyMark - 13
BunnyLandMark - 30
BunnyLandMark - 30

Anthony Williams said...

Ubuntu 10.10/Firefox 3.6.13

BunnyMark - blitted version - 31fps
BunnyMark - bitmap version - 10fps
BunnyLandMark - blitted version - 4fps
BunnyLandMark - bitmap version - 20-25fps

des said...

Win7 x64
Chrome 9.0something

BunnyMark - blitted - 30
BunnyMark - bitmap - 14
BunnyLandMark - blitted - 30
BunnyLandMark - bitmap - 30

Seems odd that the Single bunny bitmap would be slower than a bunch of them :S

Good stuff tho

darije said...

1) 20fps
2) 2fps
3) crashed my browser
4) fps

HTC desire, Android 2.2

Frank said...

Cool initiative, thanx Iain!
Regarding BunnyMark, bitmap version, if I remember correctly, that's the one that reuses one BitmapData object for many Bitmap objects, which is not yet supported by Jangaroo's Flash API. Thus, the code computes hundreds of bunnies, but just displays one. So I guess you can safely ignore the results of this benchmark...

PhocsM said...

All in Win XP 32-bit with Chrome 9

1) 30 FPS
2) 12 FPS
3) 29/30 FPS (changes back and forth)
4) 23 FPS

PhocsM said...

Win XP 32- bit IE 8
1) Doesn't work
2) Doesn't work
3) Doesn't work
4) Doesn't work

Win XP 32-bit Firefox 3.6
1) 31/33 FPS
2) 9/10 FPS
3) 22/24 FPS
4) 24/25 FPS

Frank said...

Jangaroo Flash is known to not work on IE < 9. This is because good ol' IE neither supports getter/setter functions nor canvas (and all IE canvas emulations I know of are too slow). In other words, IE 8 and earlier are not HTML5-enabled. Jangaroo in general works in any browser, as long as you refrain from using getters/setters. Using DHTML only, my game Jangaron proves that Jangaroo applications do run on IE8, and even at good frame rates.

Perth web design said...

Looks amazing, thank you for sharing this DHTML it definitely looks very interesting.

Responsive web design said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.