In this tutorial we will add a animated powerup to the previous tutorial.
You can download the source for this tutorial here.
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
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
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.
procedure TGame.Init; begin ... // Create the animation list Animations:= TPHXAnimationList.Create(Images); // Load the animation from disk Animations.LoadAnimation('Powerup.phxani'); // Iniitalize the animation state State:= TPHXAnimationState.Create(Animations); // Reset the animation state State.Reset; end;
To update the animation we have to call the TPHXAnimationState.Update method with the time of this frame that we get from the timer.
procedure TGame.Update; begin // Update the device Device.Update; // Update the timer Timer.Update; // Update the animation state State.Update(Timer.FrameTime); end;
To draw the animation we can either use the TPHXAnimationState.Draw function or draw it ourself using the TPHXAnimationState.Pattern property of the animation state.
// Draw the animation State.Draw(100, 400); // We can also draw it directly using the pattern index of the state Images.Find('Shooter').DrawRotate(200, 400, Timer.ElapsedTime * 45, State.Pattern);
A static screenshot doesnt give the result justice, but in your application the powerups should animate.
To queue animations you can use the TPHXAnimationSet class.