HTML and CSS Reference
In-Depth Information
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 ad-
justed 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 in the browser and generates a single method for positioning that falls back to left and
top support if necessary.
Finally there's the issue of animation. Manually animating a bunch of DOM elements every frame can cer-
tainly be done, but at a large scale it gets quite taxing on the browser, especially on mobile. Luckily CSS3 has
support for animation baked in via transitions and key frame animations. In this case using transitions makes
a lot of sense because the game can update an object's state once and count on the browser to transition the
property from one spot to another.
CSS3 transitions are unfortunately in the same vendor-prefix quagmire as transforms , so you need a
method to detect the best way to add support to all browsers as well.
Bootstrapping the Quintus DOM Module
Start the Quintus.DOM module by opening a new file called quintus_dom.js and entering the code from List-
ing 12-1 into it.
Listing 12-1: Bootstrapped Quintus DOM module
Quintus.DOM = function(Q) {
Q.setupDOM = function(id,options) {
options = options || {};
id = id || "quintus";
Q.el = $(_.isString(id) ? "#" + id : id);
if(Q.el.length === 0) {
Q.el = $("<div>")
Search WWH ::

Custom Search