1. Animation
Frame Animation

2. Roots…
As mentioned in the Game Loop and Frame Rate lessons, these things are inspired by the classical animation process
Frame animation IS the classical animation process.
We have a sequence of pictures where each is slightly different from the last where each picture (frame) is shown individually in quick succession.
This will trick our brain into thinking the image on screen is in fact animating.

3. Resource
Here is a fantastic source to find sprite sheets for your games:
If you cannot find what you want here, Google is your next resource, followed by making your own artwork.

4. Image Setup
The image containing all of the frames is called a sprite sheet.
The frames are arranged either in a single numbered row starting from 0
Or they may be arranged in a grid formation as shown in the previous slide, numbered from left to right, top to bottom starting at 0 again.
The most important factor of a well made sprite sheet is that each frame has the EXACT same width and height as all the other frames
Your sprite sheet should be stored with all other game sprites in the sprites folder located in the res/images folder
Do not forget to refresh your project in the package explorer of Eclipse

5. Code Setup
Unlike most low-level Game Libraries like XNA, the Java Game Engine does most of the heavy lifting for you when it comes to animation.
You simply need to load the sprite sheet, setup any options you want and tell it to start animating.
Working with animation is nearly identical to working with standard images using the Java Game Engine:
Load the Image (requires more data than standard images)
Setup Options (e.g. transparency)
Start Animation
Stop Animation (Optional)

6. Load the Image
Previously we simply created a SpriteSheet variable for each image and loaded its image in LoadContent.
We will still do this globally:
SpriteSheet walkerImg;
Inside LoadContent: For standard images (not animations) it is simply: walkerImg = new SpriteSheet(LoadImage.FromFile(your image location here));
Now we need to include 5 extra pieces of information to tell the Java Game Engine how to break up the frame correctly:
Number of rows in the grid (must be at least 1)
Number of columns in the grid (must be at least 1)
Frame number to start animating at (typically 0)
Total number of frames in the animation (rows x columns if the grid is full)
How many consecutive updates to repeat frames (typically 1, higher numbers will slow the animation)

7. Load the Image So to load the walker image here:
Rows = 5
Columns = 6
Start Frame = 0
Number of Frames = 30
Repeated Frames = 1 (programmer’s choice)
Final Load code would be
walkerImg = new SpriteSheet(LoadImage.FromFile(“/images/sprites/walker.png”),5,6,0,30,1);

8. Load the Image
Once the image is loaded, you still need to decide where you will draw it on the screen. Just like regular images we need to set its destRec variable
The x, y components can be whatever you want on the screen.
The width and height need to be multiples of the frame size. Luckily the Java Game Engine calculated this for you.
You can retrieve the width and height using the GetFrameWidth() and GetFrameHeight() commands
Example: No image scaling, located at 400,250
walkerImg.destRec = new Rectangle(400,250,walkerImg.GetFrameWidth(), walkerImg.GetFrameHeight());
Example: Frame scaled by half, located at 100,250
walkerImg.destRec = new Rectangle(100,250,(int)(walkerImg.GetFrameWidth() * 0.5f), (int)(walkerImg.GetFrameHeight() * 0.5f));

9. Setup Options These are the same options you can setup for any image:
SetTransparency(float from 0 to 1)
FlipHorizontally()
FlipVertically()
Rotate(deltaAngle)
RotateTo(angle)
SetVisible(boolean)
Although these can be done in Update, they are commonly done in LoadContent after the image is loaded

10. Start Animation
Starting the Animation can be done using one of two options:
StartAnimation()
StartAnimation(number of full frame cycles)
Example: Loop forever and Loop 3 times:
walkerImg.StartAnimation();
walkerImg.StartAnimation(3);
The real question is WHEN do you start the animation
That depends on what you are animating.
If it is a camp fire, it should probably be started immediately, maybe in LoadContent()
If it is a punch animation, you should probably start the animation when the user hits the punch button in Update()

11. Stop Animation
There may be a time when you want to stop an infinite animation or stop a numbered animation due to an interrupting action.
For example, a person punching in a fighting game gets hit in mid animation. You would want to stop the current animation and trigger a getting hit or falling animation.
Simply call the StopAnimation() command
walkerImg.StopAnimation();