Help me make this Canvas benchmark faster
I'm doing another round of benchmarks at the moment. This new one is called PirateMark. It tests how many big rotating sprites can run on a particular engine/platform at 960x720 resolution, at 60fps. So far it's not looking very promising for HTML5 canvas - I can't get 60fps even with just 1 sprite, and at 30fps I can only get 10 sprites going. But as you may know, I'm not really a canvas/javascript expert, so maybe you can help. JavaScripters - I am laying down the gauntlet! Make this faster! Please leave suggestions and links to your own version in the comments. Because there's no native sprites with rotation in canvas, the code uses a light framework I wrote at Seb's creative JS course. It may be that I'm doing it hopelessly wrong.
Comments
Havent tested as yet however!
Cheers,
Tyson (www.tysonross.com)
Not an exact replica, but near enough:
www.brokenbutton.com/pirates/
I think you must be doing something wrong, because I built this with haxeNME, and I seem to be getting better results than you. Feel free to look at the js source, but you're a better man than me if you can understand it. It's quite verbose.
Another weird thing, the NME version seems to run fine in IE9, yours is missing some pirates.
....this html5 business is a bloody minefield.
That's worth looking into, though I think you'd have to code an optimisation like that by hand. They do rotate individually, it's just incidental that they start from the same position and rotate by the same amount every frame.
When I get a moment I'll throw some randomisation in there and repost.
One thing that I think your tests really need is animation within the sprite, as this may change how you do things. You could either use spritesheets (if 3D in Flash), or bitmap blitting from arrays, or, if you're going to go crazy, animate each section using your bones framework (might actually work out best).
I think Aquaria (http://bit-blot.com/aquaria/) used this last idea. Their source is available too if you want to have a snoop.
------------------------
Also, you said you were having problems with large round items in your 'drawn in Flash' engine? If you don't treat them as circles, but instead have a hitpoint at their base (and rotate the object in the direction it is moving) then you'll have no problems in having large rolling objects. You just have to make sure their friction is low.
I wrote a Flash/JS haXe port for fun over at http://aduros.com/piratemark. Surprisingly it runs faster in FF than Chrome, which pretty much never happens for me...