User Tools

Site Tools


====== Drawing images ====== [[tutorial:index|Tutorial index]] ==== Introduction ==== 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}}. ==== 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) {{:content:shooter.png?direct&200|}} 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. {{tutorial:images-editor-new.png}} After selecting the image it should be shown in the editor. {{tutorial:images-editor-blank.png}} Next step is to add patterns for the sprites in the image, to do this select the //Patterns// tab and press //Add// {{tutorial:images-editor-pattern-add.png}} 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. {{tutorial:images-editor-pattern-player.png}} Save the image as Shooter.phximg. ==== Loading the image ==== Open the previous tutorial project and add the phxImage unit to the uses section. <code pascal> uses ... // Image classes phxImage; </code> Add a image list to your variables. <code pascal> 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; </code> 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. <code pascal> // 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'); </code> ==== Drawing the image ==== To draw the image we have to use the [[|TPHXImage.Draw]] function or any of the other drawing functions. <code pascal> 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; </code> {{:tutorial:images-player.png?direct&200|}} 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 <code pascal> // Draw the asteroid Images.Find('Shooter').Draw(100, 250, 'Asteroid'); </code> {{:tutorial:images-asteroid.png?direct&200|}} Using the timer we can also rotate the asteroid depending on the elapsed time. <code pascal> // Rotate the asteroid Images.Find('Shooter').DrawRotate(250, 250, Timer.ElapsedTime * 45, 'Asteroid'); </code> ==== 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. {{:tutorial:images:images-editor-packer-new.png?direct&200|}} 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. {{:tutorial:images:images-editor-packer-wizar.png?direct&200|}} 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. [[tutorial:index|Back to tutorial index]]

tutorial/images.txt · Last modified: 2013/08/13 10:50 by amnoxx