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
work.
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({
top:0,
position:'relative'
}).appendTo(Q.el);
this.dom = this.el[0];
this.wrapper = this.el.wrap('<div>').parent().css({
position:'absolute',
left:0,
top:0
});
this.scale = 1;
this.wrapper_dom = this.wrapper[0];
this._super(scene);
},
