Spritely 0.2 Examples

Moving background elements at fixed speeds

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

.spSpeed(40) .spSpeed(20) .spSpeed(3) .spSpeed(1) .spStop() .spStart() .spToggle() .spChangeDir('left') .spChangeDir('right')

Moving background elements at relative speeds

.spRelSpeed(40) .spRelSpeed(20) .spRelSpeed(3)

 

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'.

.fps(24) .fps(12) .fps(6) .spStop() .spStop(true) (returns to frame 1) .spStart() .spToggle() .spState(1) .spState(2)

 

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

actions.fly_slowly_forwards(); actions.fly_quickly_forwards(); actions.fly_like_lightning_forwards();
actions.fly_slowly_backwards(); actions.fly_quickly_backwards(); actions.fly_like_lightning_backwards();

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