HTML and CSS Reference
In-Depth Information
this.tilew, this.tileh,
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) {
Search WWH ::

Custom Search