HTML and CSS Reference
In-Depth Information
});
};
The
Q.sheets
object provides a central location to store sheets.
The
Q.sheet
method works double duty as both a setter and a getter method to either return a sheet by
name or create a new
SpriteSheet
. Using one method for multiple purposes (called
method overloading
when done in languages that have native support) helps keep the number of method names a developer needs to
remember at a more manageable number. You can see that
Q.sheet
checks if the user has passed in an asset,
and if so the method creates a new
SpriteSheet
object, looking up the asset in the Quintus engine by calling
Q.asset(asset)
and passing along any additional options. If no asset is passed in, then the method just
looks for a
sheet
by that name and returns it.
data asset to generate one or more sprite sheets automatically from the data generated by the
spriter
gener-
ator from Chapter 8.
Testing the SpriteSheet class
To test the sprite sheet functionality, load up a page with some sprites and play back an animation or two. Fire
Listing 11-3:
Testing the SpriteSheet class
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprite Test</title>
<script src='jquery.min.js'></script>
<script src='underscore.js'></script>
<script src='quintus.js'></script>
<script src='quintus_sprites.js'></script>
</head>
<body>
<script>
var Q = Quintus().include('Sprites').setup();
Q.load(['sprites.png','sprites.json'],function() {
Q.compileSheets('sprites.png','sprites.json');
var slowDown = 4,
frame1 = 0,
frame2 = 0;
Q.gameLoop(function() {
Q.clear();
var sheet1 = Q.sheet('man');
sheet1.draw(Q.ctx,50,50,Math.floor(frame1/slowDown));
