SURVIVOR: Performance visualization with paint + compositing borders, Chrome DevTools : 無料・フリー素材/写真
SURVIVOR: Performance visualization with paint + compositing borders, Chrome DevTools / Schill
| ライセンス | クリエイティブ・コモンズ 表示-継承 2.1 |
|---|---|
| 説明 | This is a browser-based remake of an old Commodore 64 game I made in 2012; with Chrome's nifty DevTools, I thought it would be fun to run some performance tests and see what elements of the game could be optimized in terms of hardware acceleration.Via DevTools' "paint borders", you can see areas being repainted (redrawn) in red. Borders around composited areas are brown, with tiles being teal. Generally, more red = bad.There is less repainting here, I think, than previously; this was taken after putting game elements like blocks, turret gunfire, bad guys and so forth on the GPU via transform3d().I think I may be able to improve performance (following my findings from the new Flickr Home Page) further, by using translate3d() to move elements instead of changing the background-position of sprites. The "blocks" which make up the world are numerous and repaint every second (or more.) It may take effort to refactor the code, but the GPU-based compositing just might justify the effort.Side note: I think is some lag/jank from running this full-screen on an external monitor and using my laptop to record this screencast.Debug options are also shown in the UI where elements of the game like the "pulse" effect, background images (sprites) and so on can be disabled as a way of testing performance. Live DOM stats are also displayed. The game uses hundreds of DIV elements.Side note: The base explosion/death sequence flashes the screen red by design, but it could be that the whole screen is also being repainted during the flash as well.www.schillmania.com/survivor/You can also try it with the debug options enabled via profile=1.The full write-up on the game itself, history etc., is on my personal site (from 2012).I started investigating performance in this game after doing a round on the redesigned Flickr Home page in May 2013, which used a good amount of parallax scrolling effects - see Adventures in Jank Busting: Parallax, performance, and the new Flickr Home Page for more. |
| 撮影日 | 2013-06-07 08:20:38 |
| 撮影者 | Schill |
| タグ | |
| 撮影地 |