HTML and CSS Reference
In-Depth Information
The show and hide methods adjust the display property of the element to either none or block , which
results in the element either being hidden or visible on the page, respectively.
The draw method is just a stub that triggers a draw event because the browser takes care of actually drawing
the object. The step similarly triggers the step event, but it also calls setTransform afterward in case
any of the positioned attributes are modified.
Lastly, the destroy method needs to clean up the DOM object and its internal record keeping, so it calls
the jQuery remove() method to remove the element from the page after letting the inherited method do its
The Q.DOMSprite class now has a compatible interface to Q.Sprite . However, if you try to use the
standard Q.Stage object to keep track of DOMSprite s, you'll be seriously disappointed because nothing ac-
tually appears on the screen.
Creating a DOM Stage Class
For DOMSprite objects to work correctly, they need to be added to a stage object that has its own container
DOM element and knows how to add DOM elements on to the page. Because the CSS scaling tricks that were
possible using the <canvas> tag aren't possible with DOM elements, the engine must use a different mech-
anism for scaling up content when necessary. Luckily, the same transform CSS3 style used to translate content
also supports the scale value. To make it easier to keep scaling and translating separated on the stage object (the
stage follows the player in the example in the next chapter), the DOMStage class creates a separate wrapper
element used for scaling the view.
Because the Sprite and Stage functionality are stored in different modules, the DOMStage class puts in a
check in case someone tries to build a game with DOMSprite s but does not use the scene and stage module.
Add the code from Listing 12-5 to the bottom of the quintus_dom.js file in the usual spot before the
final closing curly-brace. This rounds out the basic DOM sprite functionality.
Listing 12-5: DOMStage class
if(Q.Stage) {
Q.DOMStage = Q.Stage.extend({
init: function(scene) {
this.el = $("<div>").css({
this.dom = this.el[0];
this.wrapper = this.el.wrap('<div>').parent().css({
this.scale = 1;
this.wrapper_dom = this.wrapper[0];
Search WWH ::

Custom Search