components used: TImage

this tutorial will work with borland kylix

In this first tutorial we're going to find out about what you can do with the TImage component. We're basically going to cover the different properties of the TImage and how they can be put into use. Below is a diagram showing all the properties that define both where the image is placed and how wide and how tall it is. As well as that I've shown how the height and width of the form is defined.

TImage Diagram

As you can see, the Image.Left and Image.Top are effectively the X and Y coordinates that the images top left corner is on, while the image width and heights are self explanatory. The way of thinking about the Image.Left and Image.Top is that the first is how many pixels the image is from the left, and the later is how many pixels from the top. Presumably somebody thought that would be simpler.

It should be pointed out that the Image.Height and Image.Width properties need only be set if you've not got AutoSize set to true. AutoSize can often be very useful if you plan on changing the size of the image placed in that particular TImage during the game, as you don't have to supply the altered widths and heights. Why manually put them in then? Well, it is possible that putting AutoSize on could slow things down (albeit minimally), so it could be more useful to set AutoSize to true and then back to false as the coordinates it changes to will remain the same. This is only appropriate though if you know your image will be the same all the way through the game. The decision is yours, but I usually just opt for AutoSize for the sake of easiness.

This property should almost always be set to true so that any background images or players are not obliterated by the surrounding 'backing' of the player. You can see below exactly what I mean.

Non-Transparent Image
Transparent is set to false

Transparent Image
Transparent is set to true

It should be pointed out that the above two pictures of an alien are © Peter Watt 2000. If you're interested in using this image in a game of your own, you can contact me and we'll see if we can arrange something. He has drawn many a character for me in the past and I'm sure you'll agree, the above alien looks pretty good for you're simple game needs. Anyway, going back to the subject at hand, you have to make sure that you do have a transparent colour set in your bitmap already. In general if you're creating a picture in something like Windows Paint, the transparent colour is white but you can change it easily enough.

The visible property does just what its name suggests. When set to false it is invisible and when set to true, you guessed it, it's visible. This is used in later tutorials to hide images on the design form from being seen until they are required. The line below sets them back to visible again when needed.

Image1.Visible := True;

Enough said.

This property I have to say, I hardly ever set to true, but it can have its uses. Basically what it does is stretch the picture you place in the TImage to the size the image.width and image.height properties are set to. This can look pretty ugly if it is stretched too much but if you wanted your characters to suddenly become larger during a game then this 'could' be the command for you. You do however, need the AutoSize property set to false.

So, how do these all come together in the end? Well, as you'll see later it can often be quite useful to know the image width or height as you approach the edge of the screen so that it doesn't move off, as knowing the left and top values is not enough in some cases. This is explained more in tutorial three so we'll not go on too much about it. There is the potential to change all these properties throughout your game to create the desired effect, so experiment a bit and get to know these properties, they're used quite a lot.

That's all for just now. If you have any questions or suggestions, then do e-mail them to me.

Subscribe to the feed NEWS Feed
archived news | mailing list

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