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. where we'll be announcing the final release and full documentation when it's ready.

 

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.