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.
The last method shown in Listing 11-2 , Q.compileSheets , combines an asset name with a JSON sprite
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
up a new HTML document called spritesheet_test.html and fill in the code from Listing 11-3 .
Listing 11-3: Testing the SpriteSheet class
<html lang="en">
<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>
var Q = Quintus().include('Sprites').setup();
Q.load(['sprites.png','sprites.json'],function() {
var slowDown = 4,
frame1 = 0,
frame2 = 0;
Q.gameLoop(function() {
var sheet1 = Q.sheet('man');
Search WWH ::

Custom Search