HTML and CSS Reference
In-Depth Information
frame1 = (frame1+1) % (sheet1.frames * slowDown);
var sheet2 = Q.sheet('blob');
sheet2.draw(Q.ctx,150,50,Math.floor(frame2/slowDown));
frame2 = (frame2+1) % (sheet2.frames * slowDown);
});
});
</script>
</body>
</html>
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
brace.
Listing 11-4:
The Sprite class
// Properties:
// x
// y
// z - sort order
// sheet or asset
// frame
Q.Sprite = Q.GameObject.extend({
