components used: TDXDraw TDXImageList TDXSprite

delphix does NOT work with borland kylix

Part 1Part 2Part 3 download source code

The DXSpriteEngine Component
This component allows us to introduce as many sprites as we need, making moving them around, animating them and dealing with collision as well as the destroying of them, very easy.

Once you've added the component to the form, first set its DXDraw property as DXDraw1 as before. You should get into the way of doing this first whenever you add a DelphiX component that has this entry, as it can be easy to forget later, resulting in a lot of unnecessary confusion!

Where this component differs from those you've used so far, is in the fact that it has no Event entries. The component instead simply gives us more features to play with in the code and to make use of them we need to set up our sprite with the following code placed before the var and implementation lines:

TPacman = class(TImageSprite)
 procedure DoMove(MoveCount: Integer); override;

This sets up a type of image sprite called TPacman and adds a procedure related to it, to let us deal with the moving of our sprite. We can then add the following line in the var section of our code just after the above code to effectively, set up a variable of this type of sprite, which we're going to call Pacman.

Pacman: TPacman;

You can set up as many sprites as you like that make use of TPacman allowing us to, say, have many enemies moving around with the same code and look, without repeating code again and again. In this case though, we only want one sprite using TPacman. At this point we still haven't physically created the sprite, but instead the foundations are in place for our little yellow guy to be made on. To actually create the sprite on the screen we're going to need to add the following code to our form's OnCreate event:

Pacman := TPacman.Create(DXSpriteEngine1.Engine);
Pacman.Image := Form1.DXImageList1.Items.Find('Pacman');
Pacman.X := 10;
Pacman.Y := 10;
Pacman.Height := Pacman.Image.Height;
Pacman.AnimCount := 2;
Pacman.AnimStart := 0;
Pacman.AnimLooped := True;
Pacman.AnimSpeed := 50/1000;

This code first creates our Pacman variable that we've just created, and then on the following line, assigns an image to it from our DXImageList component. The image which I've used is shown below, and I've named it Pacman in my image list. This and the ghost sprites that we will shortly be using were kindly supplied by Dicon Peeke, who has given us permission to freely use them in our games if we want. You'll see from the line of code that instead of finding the image by its number, we have instead used its name. This has the advantages of both being able to clearly see which image we've used, and also that if the order of the images in our image list get altered, no problems will arise.

Pacman Sprites

The two lines after this simply set the starting points on the screen of our sprite to the co-ordinates (10,10). We then have the height of our sprite being set to the images height. We'll come to setting its width in a second. The next line sets the number of animation 'cells' we want to use. You'll see that our image above has eight cells, but for this demo we only want to use the first two, and the following line specifies which of the eight cells should be the first of the two, in this case the first, cell 0. If we specified this as being cell 2, we'd get the third and fourth sprites being used. The line after this sets our animation to be looped rather than just the once, and the final line sets how quickly the frames of our sprite animation are changed.

I mentioned before that we still needed to set the width of our sprite. Obviously, our program cannot tell where each of our sprite pictures start and finish, so we need to tell it the width of each, in this case 28 pixels. To specify this we need to go back to our Pacman entry in our items dialog box of the DXImageList1. When you select it, you should see a new range of properties to change, the one we need being PatternWidth. This needs to be set to 28. While we have the Items dialog box up, you might want to add a new image called Background, which can be any bitmap of your choice, size 640x480, which we'll funnily enough, use as our background on the screen.

DXImageList.Item Properties

The properties given to us when we select our Pacman sprite from the Items dialog box of our DXImageList.

It's now time to introduce our third and final component of this tutorial, DXTimer. This works in just the same way as that of the normal Timer we've used before, but just with some additional features. Once you've added the component to your form, set it's Enabled property to false and its interval property to 1. Then we need to enter the following code for our DXTimer's OnTimer event. Note that whereas before you could just double-click on the Timer to bring up this event, this will not work with the DXTimer as it will bring up the OnActivate event instead. You'll need to go to the event in the list and double-click beside it instead.





Let's go through each of these four lines then. The first line draws our background onto the surface of our screen, which has the effect of drawing over anything drawn on top previously, allowing us to draw the sprites in their new positions. The second line, tells the program to carry out any movements that the sprite engine needs to carry out. This will have the effect, in this case, of activating our DoMove procedure for the Pacman sprite. We'll write the code for that shortly. The number in the brackets, represents how quickly animations are carried out. Seems to do the same as the AnimSpeed property of our individual sprite, but when you've got lots of sprites you could use this to speed up all animations at the same time. If you wanted to. Anyway, line three sees us drawing everything we've just done with the sprites onto the surface, over the background. We then on the fourth line, just have to flip everything we've done into view on the screen. All this together then, is going to have the effect of moving our sprite across the screen without any flicker and without leaving a 'trail' of images behind, covering our background. All that remains to be done is to set when the timer is activated and deactivated, and how we move our sprite across the screen. As far as the timer goes, we need to put the following code in the OnInitialize event of our DXDraw component:

DXTimer1.Enabled := True;

and the following code in the OnFinalize event:

DXTimer1.Enabled := False;

This will have the effect of enabling the timer when our DXDraw component is activated, and disabling it, when the program is closed with the ESC key. We now need to write the code for moving our pacman which can be done by placing the following code somewhere within our program (it's up to you where, as long as it's after the implementation line and before the end. line).

procedure TPacman.DoMove(MoveCount: Integer);

 Pacman.X := Pacman.X + 1;

This basically moves the pacman's X coordinate by one to the right. Simple. You could obviously do all sorts of things here if you wanted to, including placing code to stop the sprite moving off the screen, and moving along the y-axis. This will do for now though, and you can now finally run your masterpiece, hopefully without any major hitches. Not bad, eh? It may have been fairly complicated, but you should see how you can modify the code to suit your own needs. As well as the code and images used for this part of the tutorial, you'll also find that the zip file for this tutorial has a second program, this time with a second sprite, a ghost. The final third part of this tutorial goes over this, and then we're done!

Part 1Part 2Part 3 download source code

Subscribe to the feed NEWS Feed
archived news | mailing list

[ all tutorials found at are Copyright © 2008 Ben Watt ]