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
- Cool combined actions to modify a whole scene
- Moving background elements at fixed speeds; stopping and starting backgrounds & changing direction
- Moving background elements at relative speeds
- Changing the speed of and stopping and starting sprites; changing sprite 'states'
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.