components used: TImage TButton

this tutorial will work with borland kylix

download source code

In the last tutorial we learnt how to move a basic image around the screen in Delphi. In this tutorial we'll learn how to stop it from moving off the screen. To do this we will have to add extra lines to each off our button click procedures. As before, we'll go through each button one by one showing you what to do.

The Left Direction - LeftBtnClick
The following line added before our previously added line in the LeftBtnClick procedure will do just that:

if ImgCharacter.Left > 0 then

and the word else placed before the end; line will finish it. When you've added these two lines you're procedure should look something like that shown below.

procedure TForm1.LeftBtnClick(Sender: TObject);
ImgCharacter.Left > 0 then
  ImgCharacter.Left := ImgCharacter.Left-10

What this does is check to see that the left coordinate of the image are always greater than zero as once it becomes less than zero the image is moving off the left of the screen.

The Up Direction
Once again, the Up Button needs more or less the same thing done to it with the only difference being that the following line is added after the begin line instead:

if ImgCharacter.Top > 0 then

Remembering to add the else line before the end; line, you should now find that when the up button is pressed the program checks to make sure the top coordinate is never less than zero. If it would be less than zero if it was to move another ten, then it does not let the image move any further up.

The Right Direction
For the right button (and indeed the down button), as well as using the settings for the left coordinates of the image, we will also need to make use of the size of the form or background image on which we are trying to stop our character moving off. The following line placed after the begin line will stop the image moving off the right hand side of the screen.

if ImgCharacter.Left < Form1.ClientWidth - ImgCharacter.Width - 4 then

What this does is check to make sure that the left coordinates always stay less than the form's width (called ClientWidth). This alone though means that the image will move its width off the right side of the screen so we also have to take the width of our image off the client width. The - 4 is there to take into account the fact that for some reason, when you move over to the right side of the screen the horizontal scroll bar appears and adds a tiny bit of extra screen on the right hand side. This is remedied by either taking four off our client and image width (as shown) or it can be sorted simply by selecting your form and opening the HorzScrollBar settings in the Object Inspector, changin the Visible property in in the list of settings for the scroll bar to false.

The Down Direction
For the down button we do more or less the same thing, except this time we use the Height instead of the Width property to stop the image moving off the screen, and we also only need to take one off the end to stop the Vertical Scroll Bar appearing. Again, you can go into the VertScrollBar settings of the form and set its visible property to false if you wish, instead of taking one off the end. The line needed to be added after the begin line is as follows.

if ImgCharacter.Top < Form1.ClientHeight - ImgCharacter.Height - 1 then

The End
So that's that problem sorted. You will also have to remove the ; at the end of the line placed in the button procedure in the last tutorial but apart from that everything should be okay. If you were wanting to move the character around a background image you could just replace the word Form1 for the name of your background image or whatever. If you have any queries about this tutorial just e-mail me. In the next tutorial we'll look at a couple of tweaks we can make - changing the image to look the way it is moving, and introducing a running score.

download source code

Subscribe to the feed NEWS Feed
archived news | mailing list

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