HTML and CSS Reference
In-Depth Information
hide: function() {
this.dom.style.display = 'none';
},
show: function() {
this.dom.style.display = 'block';
},
draw: function(ctx) {
this.trigger('draw');
},
step: function(dt) {
this.trigger('step',dt);
this.setTransform();
},
destroy: function() {
if(this.destroyed) return false;
this._super();
this.el.remove();
}
});
The
init
method has the responsibility to create the actual DOM
<div>
that contains the background im-
age. It uses jQuery to create the
<div>
and sets the dimensions and
zIndex
on the object. Using jQuery adds
a little bit of overhead to any DOM operation, so for operations that will potentially be done each frame, the
method also grabs the actual DOM object and stores it in
this.dom
.
Next, it creates an object called
rp
, which stores the real properties of the DOM as they have been set. Mak-
ing changes to DOM objects is relatively expensive performance-wise, so in lieu of updating those properties in
each frame, the sprite's
step
method compares its properties hash
p
against the values in
rp
and only updates
the DOM object when there is a discrepancy. Finally, the
init
method calls
this.setImage()
, which sets
the
backgroundImage
on the div, and
setTransform()
, which sets the element's position in the con-
tainer as well as the background image position (which corresponds to the frame of the sprite map).
The
setImage
method is straightforward because all it does is set the
backgroundImage
property by
grabbing it from the spritesheet or from the asset.
setTransform
is more complicated. You can see it checks for a difference in the frame, and
x
and
y
prop-
erties between the
p
and
rp
objects as described. If the frame needs to be updated, it calculates the position
using either the spritesheet helper methods
fx
and
fy
or just sets the position to
0
if there isn't a spritesheet
attached to the Sprite.
For the position, the
Q.positionDOM
method created earlier is used to set the position in whatever best
way is supported by the browser.
Because the
rp
object is initialized to the empty object, the first time
setTransform
is run. The frame
and position are guaranteed to be set.
