HTML and CSS Reference
In-Depth Information
hide: function() { = 'none';
show: function() { = 'block';
draw: function(ctx) {
step: function(dt) {
destroy: function() {
if(this.destroyed) return false;
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.
Search WWH ::

Custom Search