Survivor prototype: Performance profiling / debugging mode (~47 fps, Safari 5 + Firefox)

This is a rough browser-based recreation of a 30-year-old Atari / Commodore 64 game. See the whole set for more.

 

Shown here: A few live DOM statistics, and options to show/hide certain elements which affect layout, rendering and framerate. For animation, requestAnimationFrame() is being used in the hopes of optimal framerates and being nice to system resources where supported.

 

See original size for best detail.

 

Under the right conditions, a DOM with 800+ elements can animate nearly 550 of them at once, quickly, via a single className change on the parent. Surprisingly fast! This is how the world "pulse" effect is achieved, a sequence that changes the backgroundPosition of all of the block sprites in the game twice a second or more. (See an older video for an example of the effect.)

 

Other animated elements (gunfire, spaceballs, "bad guys" and so on) only have their style.left and style.top properties set when they are supposed to be in view; otherwise, their internal JavaScript properties track the position but are not applied to the DOM.

 

Interestingly, the turret gunfire seems to be the most expensive to animate under Firefox. When using Safari on OS X, all gunfire (including off-screen elements) could be animated with minimal reduction in framerate. Perhaps off-screen element rendering is optimized in Webkit, in addition to presumed gains from hardware acceleration.

 

Firefox slows down most notably when the ship is moving and causing the world to scroll. The effect is achieved by using body { overflow: hidden } and then using window.scrollTo(x,y), presuming that browsers are generally quite fast when using native scrolling and may be smart about not rendering clipped content. (Speaking of this, clip may be another option to explore here.)

 

Interestingly, Firefox does run at 47 FPS when the ship is not flying around, and with the world "pulse" effect turned off, it runs at 50 FPS.

 

Some good progress has been made on the prototype, but a lot remains to be done. Highlights from the to-do list: Improved collision detection, points, lives, smartbombs, intro / level screens and so forth.

3,157 views
1 fave
0 comments
Uploaded on January 15, 2012