Tutorial index

The image class are used for rendering non power of two sprites and images. It has support for rotating sprites with defined pivots.

API Documentation for phxImage.pas

You can download the source for this tutorial here.

For this demo you will need the following sprites that is a selection of the wonderful Spaceship sprites by Andy Clifton (offline as of 2012-07-12)

Download this image and put it in the output folder for your tutorial applications.

Now we have to create a phoenix image from this texture, start the phxImageEditor.exe from the binary folder and select File→New then select Import Texture and select shooter.png from the dialog that appears.

After selecting the image it should be shown in the editor.

Next step is to add patterns for the sprites in the image, to do this select the Patterns tab and press Add

Rename the pattern to Player and resize it to fit the first ship in the image, also position the pivot point in the middle of the ship. You can either write the values in the pattern properties box or use the pattern select tool from the toolbar. You can zoom in and out to easier ser what you are doing.

Save the image as Shooter.phximg.

Open the previous tutorial project and add the phxImage unit to the uses section.

uses
  ...
  // Image classes
  phxImage;

Add a image list to your variables.

TGame = class(TPHXApplication)
  private
    Device : TPHXDevice;
    Canvas : TPHXCanvas;
    Texture: TPHXTexture;
    Images : TPHXImageList;
  public
    procedure Init; override;
    procedure Update; override;
    procedure Render; override;
    procedure Shutdown; override;
  end;
 

Create the image list using the default constructor, it requires both your device class and a canvas to render to. Next load the image using the LoadImage function.

  // Create the image list
  Images:= TPHXImageList.Create(Device, Canvas);
    // Load the image, this can both open normal textures and phoenix images
  Images.LoadImage('Shooter.phximg');

To draw the image we have to use the TPHXImage.Draw function or any of the other drawing functions.

procedure TGame.Render;
begin
  // Clear the back buffer
  Device.Clear;
 
  // Draw the image using the image index and pattern index
  Images[0].Draw(50, 50, 0);
  // Draw the image rotated
  Images[0].DrawRotate(100, 50, 45, 0);
  // Draw the image using the image name
  Images.Find('Shooter').Draw(150, 50, 0);
  // Draw the image using the image name and pattern name
  Images.Find('Shooter').Draw(200, 50, 'Player');
 
  // Flush the canvas
  Canvas.Flush;
 
  // Flip the front and back buffers to show the scene
  Device.Flip;
end;

Note that the image is moved so that the position you send to the Draw functions is the pivot position of the pattern, this is also the center of rotation for the image.

For performance purposes you should not find the image and pattern by name every frame. It is better to find it once and then use the index for the following draws.

Open the image editor again and add a pattern for the asteroid sprite, then add the draw call for this image

  // Draw the asteroid
  Images.Find('Shooter').Draw(100, 250, 'Asteroid');

Using the timer we can also rotate the asteroid depending on the elapsed time.

  // Rotate the asteroid
  Images.Find('Shooter').DrawRotate(250, 250, Timer.ElapsedTime * 45, 'Asteroid');  

In this tutorial we started from a completed sprite texture, often you have the sprites seperated in several none power of two textures instead. To merge these into a single image you can use the texture packer that you can select when creating a new image.

In this dialog you can add all the source images via the add button or drag and drop from windows explorer. As default the size of the image is automatically calculated to fit all images while still keeping a power of two size. Note that you can't use this function to add patterns to a existing image through.

You can export all existing patterns as seperate images bu using the Tools→Export→Patterns to images option from the menu of the image editor.

Back to tutorial index