Friday, November 12, 2010
Using css3 transformations for sprite animation
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]
Subscribe to:
Post Comments (Atom)
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
An iOS dev course supports structured mobile development learning. It focuses on real-time practice. This ios dev course enhances professional readiness. It is reliable.
ReplyDeleteGreat post! Learn java full stack training
ReplyDeletewith hands-on, job-focused programming exercises.
Nice insights! Hands-on projects in ui ux design training
ReplyDeletetruly enhance practical knowledge.