DelphiX w. Delphi7 - part 2 - displaying pictures

Submitted on: 1/2/2015 2:26:00 AM
By: Lrd.Sandman (from psc cd)  
Level: Beginner
User Rating: By 3 Users
Compatibility: Delphi 7
Views: 36938
     Part 2 of a tutorial on how to make games using DirectX in Delphi.

-DelphiX for Delphi7


Part 2 - Displaying pictures
Now that we've got our blank project up and running it's time to display some pictures and animations.

First we'll start by making a simple picture. Start up paint or a similar program and create a picture, I used a simple smilie. The background is Fucsia, this might look odd, but when you load the image you can make one color transparent. So all you have to do is choose a color you'll never use and I personally almost never use Fucsia. You could choose any color you like, keep in mind that you have to take a color that is not in the picture itself (or do if you  want part of the picture to be transparent).

Select the DxImagelList and go to the 'items' option (and double-click on the '...' button), a popup will show. Press the 'Add New'-button,  then go to 'Picture' in the OI (click the '...') and select the smilie image. The 'Transparent Color' should set to Fucsia automatically, if it's not then set it to Fucsia.

We now have a picture ready for use, so let's display it on the screen. To do so we'll have to add some code, since this is a simple picture we'll just draw it statically with the timer. Go to the OnTimer event, it should say something like 'DxDraw1.Flip' depending on what you've called it. Add the following code above(!) this line:

dximagelist1.Items[0].Draw(dxdraw1.Surface, 100, 100, 0);

This draws item 0 of the DxImageList to the surface of DxDraw at position 100,100 with an index-pattern of 0 (you can forget the index-pattern for now).

Press F9 and see how the program outputs a smilie on the screen. If you're not seeing anything, you've probably forgot to set the DxDraw option of your DxImageList to DxDraw1.
Eventhough the smilie can't do anything, it does mean you know how to display static images on the screen. 

You'll probably like to know how you can move this image around, well that's pretty simple. Go to Form1 in the OI and double-click 'KeyDown' to get to the code-editor. We'll have to set up x and y variables so we can set the image inside the timer-loop, but with variables from outside it. Insert the following code to the global variable section (under Form1 : TForm1):

x_pos : integer;
y_pos : integer;

Actually a TPoint would be nicer, but that's beyond the scope of this tutorial. In addition you'll have to add some code to actually do something when u press a direction.

if Key = vk_left then
x_pos := x_pos - 1;

if Key = vk_right then
x_pos := x_pos + 1;

if Key = vk_up then
y_pos := y_pos - 1;

if Key = vk_down then
y_pos := y_pos + 1;

The Key value holds the Virtual Keycode (vk) of the pressed key, so what this does is set the x/y position when pressing one of the 4 direction keys. The TForm1.FormKeyDown (double-clickon the OnKeyDown event  in the OI should look like this when you've added the code:


procedure TForm1.FormKeyDown(Sender: TObject; var Key: Word;
Shift: TShiftState);

if Key = vk_left then
x_pos := x_pos - 1;

if Key = vk_right then
x_pos := x_pos + 1;

if Key = vk_up then
y_pos := y_pos - 1;

if Key = vk_down then
y_pos := y_pos + 1;



Go to the OnTimer event again and change the line above dxdraw1.flip to:

dximagelist1.Items[0].Draw(dxdraw1.Surface, x_pos, y_pos, 0);

Just like the first time, this displays the smilie on DxDraw1, but this time at a variable position x_pos, y_pos. In addition we have to set the 'KeyPreview' option (OI) to 'true' so that the form captures our key presses, no matter what component has the focus.
Now press F9 to run the program, it should run despite the fact that we didn't give x_pos, y_pos any starting values. Delphi turns the NULL/nil value to a 0, making the starting point at 0,0. Since you'll want to be able to display images on a different spot we'll add some more code, this time in the Form1 OnCreate event (OI). Simply setting the x and y starting values to 150:

x_pos := 150;
y_pos := 150;

That's all, if you run the program again it will start at 150,150. It's also the end of this part, one note though; The smilie moves quite slow, if you want to speed up the movement change the 'x_pos := x_pos + 1' to a higher integer. Same goes for the other 3. Don't worry about any weird effects, this is because you're not using a background. Head over to the next part to see how to fix that and learn about flickering.

Download the source-code at (articles/tutorials). Any comments or errors are always welcome, I hope you enjoyed this tutorial and see you  in part 3!

Go to for an outlined tutorial including images..

Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)

Other User Comments

 There are no comments on this submission.

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)

To post feedback, first please login.