HTML and CSS Reference
In-Depth Information
frame1 = (frame1+1) % (sheet1.frames * slowDown);
var sheet2 = Q.sheet('blob');
frame2 = (frame2+1) % (sheet2.frames * slowDown);
To run the example, ensure that you have an images/ directory with sprites.png and a data/ direct-
ory containing sprites.json . You may also need to run the code from a server (or off localhost) to prevent
the browser's security protections against loading local files via AJAX (the sprites.json in this case).
Dissecting the preceding code, you can see it starts off by loading and compiling the sprite sheet. After that
it runs a simple game loop that draws a frame of two different named sprites, looping two counters— frame1
and frame2 —over each of the frames, slowing the code down by a slowDown factor to keep the animations
from playing too fast.
The end result is two animations playing back on the page on the Canvas element.
Adding Sprites
With sprite sheets defined, the next task is to create the sprite object. Because sprites are important to Quintus
and games in general, the actual sprite class is most likely going to come as a bit of a surprise: It clocks in at few-
er than 40 lines and doesn't have a lot of built-in functionality. The reason it doesn't have all that much going on
is that most of the important functionality has already been built and resides elsewhere: Events are handled by
Evented , components are handled by GameObject , and graphics are handled by assets and SpriteSheet .
This means that all that's left for the sprite class to do is tie all these pieces together into a single package.
The sprite class built in this chapter will be called Sprite . Chapter 13, “Crafting a CSS3 RPG,” discusses a
DomSprite class which inherits from Sprite that you'll use when you build a game with HTML and CSS3.
Writing the Sprite Class
Add the sprite code from Listing 11-4 into the quintus_sprites.js file before the final closing curly
Listing 11-4: The Sprite class
// Properties:
// x
// y
// z - sort order
// sheet or asset
// frame
Q.Sprite = Q.GameObject.extend({
Search WWH ::

Custom Search