Sprite texture

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.

Creating the image

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.

Loading the image

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

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');

Drawing the image

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.

Adding a asteroid

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.

Adding images via the texture packer

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.