| 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);
begin
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;
end;
{******************************************************}
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! |
