Tutorial index

In this tutorial we will add a animated powerup to the previous tutorial.

You can download the source for this tutorial here.

shooter.phximg

powerup.phxani

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[0]);
  // 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.

Back to tutorial index