Spritely 0.4 Examples

Here's a sneak preview of some new Spritely methods (version 0.4). Check the source code to see how these functions work - they should be fairly easy to follow and we hope you have fun using them. Check back on this site or follow our Twitter page where we'll be announcing the final release and full documentation when it's ready. Click here to visit our website.


The lockTo example, introduced in spritely 0.4 can be found in lockTo.html



Moving background elements at fixed speeds

You can move multiple background elements together, and they will all move at the same speed...


Vertical Panning (New!)

Moving background elements at relative speeds


You can change the relative speed of a number of background elements at once with the .spRelSpeed() method. However, before you do this, you must set a 'depth' parameter for each element when you create them with the .pan() method. Please look at the source code of this page for an example.

The 'depth' method is a value between 0 and 100 where 0 is the horizon (distant objects which do not move at all) and 100 is for very close-up objects which move very quickly:

Changing the speed of and stopping and starting sprites; changing sprite 'states'.


To change a sprite's 'state', you need an image with multiple rows, where each row is a 'state' (1, 2, 3, etc.) and each row contains multiple frames, like the following image:

Combining actions to modify a whole scene

Take a look at the source code to see how this is done. It's amazingly easy to do.