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: 32119

-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 darkangeldev.com (articles/tutorials). Any comments or errors are always welcome, I hope you enjoyed this tutorial and see you  in part 3!

Go to Devcenter.darkangeldev.com for an outlined tutorial including images..

Report Bad Submission
This submission should be removed because:

Your Vote


Other User Comments

 There are no comments on this submission.

Add Your Feedback

To post feedback, first please login.