Inspired by
Kamil Trebunia's speech on FrontTrends so as "
Practical HTML5" presentation by
Jeremy Orlow &
Malte Ubl on
Google Developer Day in Munich two days ago, I decide to test if using transformations provided by CSS3 really improves performance of JavaScript games for mobile devices. Kamil said about fastest page redrawing using
translate instead of
position absolute & top/left attributes. Google guys presented css3 transformations with hardware acceleration. It looks nice so I made a little performance test.
I create simple 'Frames per seconds' counter and run it with 100 animated sprites, each with 4 frames (actually every sprite has 8 frames, but I used only 4 of them) and random movement. The sprites were penguins drawn by me some time ago, based on
Antarctic Adventures for NES (one of my favorite games back in '90). I made three tests on my Samsung bada - one using canvas for rendering everything, second one with '
Div with overflow:hidden' method I described in one of the latest posts, and the third one similar to 2nd, but with css3 translation instead of top/left changes. The result was quite surprising - classical DOM manipulation animation had
11-12fps, Css3 transition method reached
10-13fps, and canvas rendering about
27fps. I know that there is wrong way of thinking somewhere, but I have no idea what exactly goes wrong.
Any suggestions? You can find the source on my github account: [
michalbe]
