HTML and CSS Reference
In-Depth Information
this.tilew, this.tileh,
Math.floor(x),Math.floor(y),
this.tilew, this.tileh);
}
});
return Q;
};
The
SpiteSheet
class is relatively short, clocking in at fewer than 40 lines of code. The
init
constructor
does nothing but set up the initial values in the object given an asset object and a set of options. It has only three
methods other than its constructor: the
fx
and
fy
methods which calculate the frame
x
and
y
position in the
sheet; and the
draw
method, which draws a specific frame of the
SpriteSheet
at an
x
and
y
location on the
passed-in context.
fy
(short for frame y) is calculated by using
Math.floor
to get the row that a specific frame is in. The
row number is then multiplied by the height of each tile.
fx
is calculated by using the modulus operator to find
how many tiles to index horizontally into each row. The resulting number is then multiplied by the width of
each tile to get the final result. Because of poor support for subpixel rendering (especially on mobile devices),
the
draw
method also turns whatever
x
and
y
values that are passed in into integers using
Math.floor
.
The end result is that given a
SpriteSheet
object, you can quickly draw a specific frame at an
x
and
y
location on the canvas.
Tracking and Loading Sheets
Creating sprite sheets that can draw individual frames gets you a good portion of the way to engine support for
sprite sheets, but Quintus needs a central mechanism for compiling and tracking sheets to make them easy to
reference and look up. Add the code from
Listing 11-2
to the bottom of
quintus_sprites.js
before the
final closing curly brace.
Listing 11-2:
Loading and tracking sheets
Q.sheets = {};
Q.sheet = function(name,asset,options) {
if(asset) {
Q.sheets[name] = new Q.SpriteSheet(name,asset,options);
} else {
return Q.sheets[name];
}
};
Q.compileSheets = function(imageAsset,spriteDataAsset) {
var data = Q.asset(spriteDataAsset);
_(data).each(function(spriteData,name) {
Q.sheet(name,imageAsset,spriteData);
