Professional HTML5 Mobile Game Development

Implementing DOM Support

Quintus can add DOM support to the engine via a module called Quintus.DOM. This module creates DOM-based equivalents of the Sprite and Stage classes called, perhaps not surprisingly, DOMSprite and DOMStage. The setup method can also have a DOM-based equivalent called setupDOM.

Considering DOM Specifics

At an API level, the Quintus DOM classes behave much like their Canvas counterparts. On the inside, however, because the DOM provides a persistent scene graph, the classes behave quite differently. The step method of DOMStage still steps though each sprite, but the DOMSprite step method has the additional duty to update the element that represents the sprite on the document. Because the browser takes care of actually drawing the element, the draw method consists of nothing but a trigger call.

Sprites will be added to the page as <div> elements of set width and height with a background image adjusted using an offset position calculated by the element’s sprite map. Changing the frame consists of moving the background position around.

Next the sprites need to be positioned. Although this might at first glance seem to be as easy as using the traditional left and top CSS properties along with absolute positioning, to get the best performance you must use the new CSS3 transform property, which benefits from hardware-accelerated rendering.

Because the transform property comes with the usual host of vendor-specific prefixes, the engine looks at what’s supported ...