-
Notifications
You must be signed in to change notification settings - Fork 48
Making Animations
Animations in Rabbit Escape are built up from images.
In the code, the possible states of rabbits and other Things are listed in ChangeDescription.java, and these states are converted into the filename of an animation file (*.rea) in SpriteAnimator.java.
In SpriteAnimator.frameForThing() we convert the state enum value to lowercase, and look up the file that was loaded in AnimationLoader.java's load() method.
So the animation files are inside rabbit-escape-render/src/rabbitescape/render/animations, named after states from the enum in ChangeDescription.java, but lower-cased and with .rea added to the end.
It is an error to add a state to ChangeDescription.java without making a corresponding animation file.
Animation files must have 10 lines (one for each frame of animation in a time step), and each line must look like:
frame [x-offset [y-offset [sound_effect]]]
This file format is implemented in AnimationLoader.readAnimation().
For example, in rabbit_bashing_up_right.rea:
rabbit_bash_right_01 0 -32
rabbit_bash_right_02 0 -32
rabbit_bash_right_03 0 -32
rabbit_bash_right_04 0 -32 rabbit_bashing
rabbit_bash_right_05 0 -32
rabbit_bash_right_06 0 -32
rabbit_bash_right_07 0 -32
rabbit_bash_right_08 0 -32
rabbit_bash_right_09 0 -32
rabbit_bash_right_10 0 -32
We see that all the frames are offset by (0, -32) pixels, and as we render the fourth frame we play the "rabbit_bashing" sound effect.
The pictures that make up animation frames are stored in images-src and are built into various-sized PNG images (for Swing and Android) during the make process.
If you put an SVG or PNG file into images-src and then run make you should be able to refer to it from within an animation file.
The SVG files used in the game have been developed using Inkscape. Some tips:
- When shrinking parts Inkscape may try to thin the strokes (lines around the edge of shapes). This can be avoided http://graphicdesign.stackexchange.com/questions/24736/how-can-i-preserve-border-width-when-scaling-an-object-with-inkscape
If you are developing with Eclipse or another IDE, make sure you run make after you've made changes, so that your animation files and images are processed and copied into the classpath.
To test out your animations, run make runat to use the animation tester utility.
Animation tester is quite a rough and ready developer tool, but basically, you can click on a square to change the animation that is shown in it (and the background block).
The tool just loops (slightly slowly) through 3 time steps, so you can choose 3 animations to play - one in each time step.
The animation tester has keyboard shortcuts. Press 'h' on your keyboard, and the list of shortcuts will be printed to your console. It is possible to speed/slow the animation, step individual frames and enable printing the name of each frame.