components used: TImage TButton

this tutorial will work with borland kylix

download source code

Everything has to start somewhere and before we even begin to make games in Delphi, this is the place to start. To make a simple game you would probably want to move round a character. This needn't be overly complicated just now as we can use Delphi's own component, TImage and adjust the position on the form as buttons for the different directions are pressed.

After starting a new application the first thing we want to do is create four standard buttons (TButton) from the Standard menu and one image component (TImage) from the Additional menu. You can now change the captions for each of the buttons to represent the four direction; up, down, left and right. You can also give them suitable names such as LeftBtn, RightBtn etc. From here on we will assume you have used these suggested names, but if you haven't you need only change them to what you have chosen as you go along.

While we're changing names we may as well change the name of the image component to ImgCharacter. Also, using the Image Editor that came with Delphi, create an icon of a small character and when saved, choose this file for the image in you TImage component. Now change the value in the object inspector for the AutoSize image property to true so that there are no large gaps around the image. When you've finished all this you should have a layout similar to that shown below (although slightly clearer to see):

Example layout of our form

Still with me? Then we're ready to actually do some programming. The TImage component has two coordinate settings: the left and top settings that tell Delphi how far from the left and how far down from the top of the screen, the image should be placed. In runtime we need to be able to change these properties to move the image around the screen and to do this we use these two settings. To move left and up is the easiest as it only involves one line for each of the two directions.

The Left Direction
The first thing to do is double click on the left button to create the procedure for the LeftBtnClick. Now, inbetween the begin and end; lines you need only enter the following line:

ImgCharacter.Left := ImgCharacter.Left-10;

This line basically just tells the program to move ten pixels to the left by taking ten away from the left coordinates.

The Up Direction
We can do a similar thing with the up button. Again, double click on the up button to create the procedure for the UpBtnClick. This time enter the line:

ImgCharacter.Top := ImgCharacter.Top-10;

Again, this takes ten away from the top coordinates to move the image up the screen ten pixels. To move right or down we need only change the negative sign to a positive one.

The Right Direction
As before double click on the right button to create the procedure RightBtnClick. Now enter the following lines after the begin line:

ImgCharacter.Left := ImgCharacter.Left+10;

This time we are adding onto the left coordinates to move the image further to the right. Simple.

The Down Direction
Double click on the down button to create the procedure DownBtnClick. Now just add this line after the begin line:

ImgCharacter.Top := ImgCharacter.Top+10;

In this case ten has been added to the top coordinate to move the image further down from the top of the screen.

The End
That's all there is to it. Now all you need do is compile and run your new program and click on the buttons to move your character about the screen. One thing you will notice is that you can move the character off the screen. We'll be solving this problem in the next tutorial, but in the meantime see if you can work out how it can be done. If you have any queries about this tutorial please do ask them in our forums.

download source code

Subscribe to the feed NEWS Feed
archived news | mailing list

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