|
This project is in two parts - follow the above the link to access the
second part. In this project you will learn about:
 | the PictureBox control |
 | animation using the Timer control |
 | the Visual Basic coordinate system |
 | nesting |
 | variables |
 | declaring variables |
This project will show a picture of an Apollo lunar lander vehicle above the
surface of the moon. The objective will be to use rocket thrusters (controlled
by buttons) to guide the lunar lander onto a small landing pad on the
lunar surface.
Create a new project (File>New Project), making sure you specify a Windows
Application and giving the name 'Lander'. Save the project
immediately with File>Save All (not Ctrl-S, for that only saves the form file).
Give the name Lander, the location
H:\VB
if you are at EEB3 (otherwise use the default location), give the solution name
Lander and leave the box checked for the automatic creation of a folder
with that name to hold your project.
ALWAYS set the location to
H:\VB if you are saving a project at school. Don't forget to
save your work every 10 minutes or so (you CAN use Ctrl-S for this).
Add a PictureBox control and a Timer control
(not available in the common controls group but available in the components
group)
to the form. If you try to draw a Timer control onto the form VB will display
the Timer control below the form, not on it (it will be invisible when the
program is running). You will be putting the following picture into the
picturebox so save it already into your Lander folder (right-click and choose
'Save Picture As...', giving the image the name 'lander').

Then set the properties to:
 | Form:
 | text = Lunar Lander by (YOUR NAME HERE) |
 | backcolor = black (always use the 'Custom' palette of colors) |
 | size = 700,500 Note that setting the size to this value is the
same as expanding the size property (click the + sign) and setting
size.width to 700 and size.height to 500. Since this form is larger
than the previous ones this might be a good time to 'unpin' the
Toolbox so that it hides itself when not needed.
|
|
 | PictureBox (put it somewhere towards the top left corner of the form):
 | name = picLander |
 | image: With the Picturebox selected, click the ellipsis (...)
next to image property in the properties window, then choose
Local Resource>Import and navigate to the image you saved
earlier into the project folder. |
 | sizemode = autosize (so that the control has just the right
dimensions to contain the picture of the lander
|
|
 | Timer control:
 | name = tmr1 |
 | enabled = true |
 | interval = 50 |
|
Think of the Timer control as like an egg
timer - it can be set to go off after a certain period of time and when it does
go off its code is activated. Unlike an egg timer, the Timer control goes off
repeatedly, at regular intervals. The interval property of the Timer control is
measured in milliseconds or thousandths of a second. Here the interval
has been set to 50 milliseconds, or 0.05 seconds. This means that the timer
control will 'go off' 20 times every second. Each time the Timer goes off, its
code will move the picture into a new position and since it goes off so often,
the motion should seem quite smooth (compare it to your television, which shows
you 25 pictures every second and seems VERY smooth).
You might be thinking that
a shorter interval might give even smoother motion - that's true but it might
not be a good idea because it might cause your program to behave differently on
a fast computer and a slow one (ask me why if you are interested).
How can we make the lander picture move to the right? You must understand the
Visual Basic Coordinate system before you can answer that question. Unlike in
your math class, where x and y coordinates are measured to the right and
then up, Visual Basic coordinates are measured from the top left corner, to the right and then down,
using the properties location.x and location.y as shown in the diagram below (your form should be black but I have made mine gray so that you can see the
details more clearly).

There also exist other properties for position, although
they do not appear in the properties window: left, right,
top and bottom, as shown in the picture above. Microsoft
encourages you to use location.x and location.y rather
than left and right but although location.x and location.y
can be easily read they cannot be easily set. If you want to set
piclander.location.x to 100, for example, this does not work:
piclander.location.x = 100
But this does work:
piclander.left = 100
This might be a good time to mention that Visual Basic
measures distance in pixels. Pixels are the tiny square dots that make
up your monitor screen - typically a school monitor is just over one
thousand pixels wide. The
good thing about working with pixels rather than millimeters or centimeters is
that pixels are so small that we never have
to work with fractions of a pixel. Since this unit is small, a movement of 5 pixels to the right would be quite modest, as we shall see...
In order to make the picturebox move to the right, we must
increase the value of the picLander.left property. Double-click the Timer
control and type or paste this code between the wrapper lines of the tmr1_Tick
subroutine:
picLander.left = picLander.left + 5
When you run the program, you should see the PictureBox control move smoothly
towards the right. The line of code aboveis taking the existing value of picLander.left, then adding 5 to it, then storing the result in
PicLander.left so that this property gets the new value. The overall effect is that each
time this line is run the 'left' property is increased (or 'incremented') by 5.
If you need more reminders about how the assignment operator '=' works then look
back to the calculator project.
How would you make the picture go left instead of right? TRY IT! Also try changing the code so that picture moves faster or
slower. Then try changing the code so that the
picture moves down the form instead of horizontally. When you are satisfied that
you understand how the code works, change it back to the code above.
You have made a program that makes the lander move, but the program is not
yet interactive - all we can do while the program is running is watch. Now we
will add some buttons to allow us control the thruster rockets that
will push the lander in different directions.
You probably noticed that when you changed the number 5 in the above code to
a bigger number, the speed of the lander increased, thus this number is
equivalent to the speed of the lander. We would like the speed of the lander to
be variable, so we will replace the value
5 with a variable called vx, meaning
velocity in the x (horizontal) direction. You have met variables already in your math class,
so you know that a variable is like a container. In Visual Basic, variables can
contain numbers, text strings, dates etc. according to how they have been
declared. Declare the variable now by putting the following line just after the
top wrapper line of the class (not the tmr1_Tick subroutine).
Dim vx as double
The reason why we do not want to paste the above declaration in the
tmr1_Tick subroutine is that we also want to be able to access and modify
this variable from within other subroutines that we will create later. Since
the tmr1_Tick subroutine is a private subroutine other subroutines
would not be able to access or modify vx if it were declared inside the
tmr1_Tick subroutine.
Now change the line of code that moves picLander so that it
looks like this:
picLander.left = picLander.left + vx
Now add two buttons so that we can control the horizontal motion of
the lander (we will tackle the vertical motion later). Set the text properties and
names as shown here. I've used the characters 'less than' (<) and 'greater than'
(>) to get the arrow shapes (text size 20, bold). Your form should be much bigger than this, and black rather
than gray.

The btnRight button should increase the speed of the lander to
the right, so double-click it and type this between the procedure's wrapper
lines:
The above line will add 2 to the existing value of vx, then
store the result back in vx.
The btnLeft button should decrease the speed to the right
so double-click it and type this between the wrapper lines:
If clicking this button causes vx to become negative, that
simply means the lander will move to the left rather than to the right.
Try running the program now and you should find that it works
very nicely - we have realistic control over the lander's horizontal motion.
Now for the vertical motion - should we add a button for
an upward thruster and another for a downward thruster? Because you are so
smart, you will have realized that a real lander would not have a downward
thruster, since the moon's gravity already provides a downward force. So add a
single button for the upward thruster called btnUp, as shown (I used text
size 28, not bold):

This thruster should change the vertical speed, which is
described by the variable vy, but should the button add to vy or subtract
from it?? Since VB measures down rather than up, vy is the downward
speed, and an upward pushing thruster will subtract from the downward speed. Make
the following changes to the code:
Change Dim vx as double to Dim vx, vy as double
Double-click the new btnUp button and add this line between
its wrapper lines:
Add an extra line to the tmr1_Tick subroutine:
picLander.top = picLander.top + vy
Your complete code should now look like this:

The program should work just fine, except that we have not yet
added the moon's gravity so we can make the lander move up but cannot bring it
back down again.
How exactly should we add gravity to the program? Should we make
another button, so that gravity pulls on the lander each time we click
the button? That would be wrong, for gravity acts on the lander continuously.
This means that every time the timer control goes off the moon's gravity will
have caused the lander's vertical speed to change, so we must add the 'gravity
code' to the code for the timer. Change the tmr1_Tick subroutine until it
contains this:
picLander.location.x = picLander.location.x + vx
picLander.location.y = picLander.location.y + vy
vy = vy + 0.2
so that each time the timer goes off the downward speed, vy,
increases by 0.2 (we don't want to increase it by a big number since this number
is going to be added to vy twenty times every second). Now run the program, and
enjoy flying the lander in all directions in a very realistic fashion. If you
have successfully got this far... WELL DONE!
If you want to adjust the number values for the thrusters or
for the gravity then go ahead - it's YOUR lander after all!
The lander project is nearly finished now - we can fly the
lander, but we can't land it... we have no moon to land on! Click HERE
to move to the next lesson and see how this can be done.
|