(7/8/2013 - This Unit is still a work-in-progress - There's missing notes on transformations and explanations on the code


This is a fun Unit, as you'll really start seeing the fruits of your hard work! Expect it to take about 3 hours, depending on your comfort with Linear Algebra. To demonstrate what you should have at the end of this Unit, check out the Demo for Unit 9.

Two big things we're going to talk about this Unit are Sprites and Sprite Sheets. This will be a big setup going into building an Animation system in the next Unit.

Sprites are essentially GameObjects, but have the ability to be drawn. We are going to have some math-y stuff in order to deal with transformations (position, rotation, and scale), as well as getting more comfortable with the Canvas API, otherwise are very straightforward and nearly the same to the Test Code and demo from the previous Unit.

A Sprite Sheet is an important feature that should solidify our comfortability with build layers of encapsulation. It is a single texture that can represent lots of smaller images, and we want to support it for many good reasons, but primarily it's a lot easier and faster if we get one larger image from the server rather than lots of little images. The game loads faster and your teammates and players are both happy.

The three sections of this Unit are:

Sprite GameObject class

Sprite properties

For simplicity, all sprites are going to use a SpriteSheet whether there are sub-images in the image or not.

API Source Code:


Implementation Source Code:


If you played around with your homework from the previous unit, you might have noticed that when you render an image it draws it so that the top-left corner of the image is at the position you provided to the canvas. Sometimes that can cause other behavior that you don't want - say you were to adjust the scale of the sprite, it would scale outward from the top-left corner but that corner will still be in the same position. Now if the sprite were centered around the position you meant to draw it at, then it would grow outward in all directions (and this is typically what most developers want).

Implementation Source Code:

SpriteSheet class

There's not a lot to this class, as it's mostly a holder of data.

A SpriteSheet is not an Image. It is a wrapper of data, that knows about a set of sub-images within a larger image. A single image might have more than one Sprite Sheet associated with it!

This approach is also called a Texture Atlas, and there is a good amount of reading material available.

The real magic is in the data file (JSON) it gets associated with.

Implementation Source Code:

SpriteSheet management

Create new Sprite Sheets. Creating multiple sprite sheets from a single image and data file.

Accessing sprite sheets by name.

Implementation Source Code:

Test Code

Source Code:


Part 1. Create and add sprites.js to your project, filling it out with the code from this Unit.

Part 2. In your test code, create a new sprite instance.

Part 3. Load a

Extra Credit

The SpriteSheet class makes an assumption: all frames have the same tile width and tile height. If we are going to say that a SpriteSheet has

Part 2. In your test code, create a new sprite instance.

Part 3. Load a