Animating images

Introduction

Create patterns

First we have to add the 16 patterns needed for the animation. They are located on the right side of the image in a rectangular grid. The easiest way to create patterns for this is to use the tile wizard.

Start the image editor and open the Shooter.phximg that you created in the previous tutorial then select the Tile Wizard from the image menu.

Then setup the wizard to generate the 16 tiles we want, dont forget to select Append instead of Replace the current patterns. Also check the Center Pivots option.

Press the okey button and make shure the patterns was added succsessfully

Creating the animation

Start the animation editor and load the Shooter.phximg containing the animation frames. Then add all 16 Powerup patterns to the animation by double clicking on them. Then mark the animation as Looped and save it as Powerup.phxani

Loading the animation

Create the variable for the animation list that contains all the avaiable animations, and then we need one state for each animation instance.

// List of animations
Animations: TPHXAnimationList;// The animation state for the powerup
State : TPHXAnimationState;

To initialize the animation we first have to create a animation list and then load the animation from the file we created earlier, finally we have to reset the animation state using the previously loaded animation.