HTML and CSS Reference
In-Depth Information
Creating a SpriteSheet Class
In this case, a single
Sprite Sheet
object refers only to a single set of like-sized frames of the same sprite.
A single-loaded image asset might be compiled into a number of
SpriteSheet
objects.
The sprite functionality in Quintus is going to go into its own module. Open up a new file called
quin-
tus_sprites.js
and place the code from
Listing 11-1
into it to define the
SpriteSheet
class functionality.
Listing 11-1:
The Q.SpriteSheet class
Quintus.Sprites = function(Q) {
// Create a new sprite sheet
// Options:
// tilew - tile width
// tileh - tile height
// w - width of the sprite block
// h - height of the sprite block
// sx - start x
// sy - start y
// cols - number of columns per row
Q.SpriteSheet = Class.extend({
init: function(name, asset,options) {
_.extend(this,{
name: name,
asset: asset,
w: Q.asset(asset).width,
h: Q.asset(asset).height,
tilew: 64,
tileh: 64,
sx: 0,
sy: 0
},options);
this.cols = this.cols ||
Math.floor(this.w / this.tilew);
},
fx: function(frame) {
return (frame % this.cols) * this.tilew + this.sx;
},
fy: function(frame) {
return Math.floor(frame / this.cols) * this.tileh + this.sy;
},
draw: function(ctx, x, y, frame) {
if(!ctx) { ctx = Q.ctx; }
ctx.drawImage(Q.asset(this.asset),
this.fx(frame),this.fy(frame),
