The animate action allows you to animate cgs. The animation can be a tween of the sprite properties or a spritesheet animation.
Tweening means to change the properties of an element in time, linearly, from the original values to the new values. For example, we can tween the transparency of an image to make it transparent, by tweening its alpha property to zero.
A time should be specified in milliseconds, that will be how long the tween will take to complete.
The properties we can animate through time are:
- animate cgs_id: time: number [alpha: number] [zoom: number] [position: coordinate] [angle: number]
- show phone1: AT 100 100 - animate phone1: time: 1000 position: 50 50
Spritesheet animation is more like traditional animation: you have different frames for an image, and change them every few miliseconds to give the ilusion of movement.
To animate a cg in this way, we need to load not only the base (static) image that represents the cg, but we need to load every frame of the animation. A cg can have more than one animation too, all of them should be in the same image file, and the height and width of the image should be specified when loading it.
cgs: phone1: assets/phone1.png horse: spritesheet: assets/horse-spritesheet-192x144.png 192 144 animations: run: 1 8 20 jump: 8 12 20
In the example, we load a static cg (phone1), and a spritesheet animated cg, horse. The width and height of each frame, in the file specified is 192x144, and it has 2 animations: - run: from frame 1 to frame 7, with 20 fps - jump: from frame 8 to frame 11, with 20 fps
The frame 0 represents the static view of this cg.
Show horse and animate the ‘run’ animation, looped and in its place, for 1000 miliseconds.
- show horse: AT 180,350 - animate horse: spritesheet: run looped time: 1000
Start the ‘run’ animation, looped and in its place, do some other things and then stop it.
- animate horse: spritesheet: run looped - deuzi says: The horse will stop after this dialogue. - animate horse: spritesheet: stop
Tween and spritesheet animation at the same time to make the horse run across the screen. After the tween is finished, the spritesheet animation will finish too.
- animate horse: spritesheet: run looped position: x: 650 y: 350 time: 2000 zoom: 1.5