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]
Nice article.. Good Explanation..
ReplyDeleteJavaScript Training
JavaScript Training in Chennai
javascript tutorial for programmers
Nice article I love it click and read it
ReplyDeleteNice article
ReplyDeletebest rice cooker. gone off message and posted items that were either false
ReplyDeletesad shayari. Training and I wish it will help me or many s
ReplyDeleteVery nice post.
ReplyDeletebet 12
bet 12
bet 12
This article is so interesting i love to share it with you guys.
ReplyDeletebet 12
bet 12
bet 12
Amazing
ReplyDeletebet 12
bet 12
bet 12
bet 12