|
PictureBoxes
The
next item on the list is one we're going to be using a lot. It is a
PictureBox! First, delete all the code you created in the previous exercise
(CheckBoxes and RadioButtons with GroupBoxes), leave the automated code alone.
You should only have this:
Public
Class Form1
Inherits System.Windows.Forms.Form
"Windows Form Designer
generated Code"
End
Class
Remember this
code above (not because its going to be used in this program, because if you
ever want to delete all your code, don't delete the code above.)
Delete all the
objects in the form, too.
First of all you are going to need some graphics! I have uploaded 3 "Mario"
graphics here. You
need WinZip to extract them. Extract them to the bin folder of your
application (by default our program is: My Documents | Visual Studio
Projects | Properties | Bin). The graphics show 3 states of Mario walking
right. NOTE: The Bitmap names are not named 1,2, and 3. They are named 0,1
and 2. This shows good programming practice (when you get deeper into
programming you will notice that all values start at 0, so this is why I named
the first Mario right graphic marioright0 instead of marioright1.
Double-Click "PictureBox" to draw a PictureBox to the form. Set
the Image property to marioright0.bmp - located in your Bin folder. Notice
how the image is smaller than the picture box (unless you had it perfectly
aligned and sized beforehand). The way we can make it "fit" is be
setting the SizeMode property to AutoSize. This will make the PictureBox the
same size as the picture! If you want the picture to be the same size as the PictureBox,
you would set the SizeMode to Stretch. If you wanted the image to be in the
center of the PictureBox, you would set the SizeMode to CenterImage.
Wait a minute!
Who would want a green background around a picture of Mario? Well, sorry, this
is one of the limitations of PictureBoxes (contact and correct me if I'm wrong).
One way you could go around this is convert them to icons (icons have a
"transparent color" in which you can draw onto the picture. If you
want to know how to do this, ask me on the vbProgramming Forums) The best way to
go around this is use GDI+, which we'll get into in the later chapters. Its a
simple, fast way to draw images. PictureBoxes aren't really used in Game
Programming because if you try to animate with them, they will flicker. But the
game we'll program for this section will probably use PictureBoxes, as it wont
be a complex game.
Anyway! Back to
the PictureBox! We have a PictureBox which displays marioright0.bmp. Now what do
we do? How about we make it so that when we click on it, it will change to
marioright1.bmp. The next time you click on it, it will change to
marioright2.bmp. After you click on that, it will change back to marioright1.bmp
and continue the cycle all over again!
Here's some
explaining on how to do this: Each PictureBox has an Image property. That image
property stores the location where the picture is located. Name the PictureBox
you created to "Mario." So, what we do is, draw 3 more PictureBoxes
(each with the SizeMode property set to AutoSize) place them next to each other.
The first PictureBox will have the Image Property of marioright1, so also set
the name to marioright1. Do the same for the second and third PictureBox and use
1 and 2 instead. For those PictureBoxes, set the visibility property to False To
be more clear you should have the following PictureBoxes:
Name
| Image
| Visible
| SizeMode
Mario
marioright0.bmp
True
AutoSize
marioright0
marioright0.bmp
False
AutoSize
marioright1
marioright1.bmp
False
AutoSize
marioright2
marioright2.bmp
False
AutoSize
I'm assuming the paragraph above confused you, so I made this table above. It
shows that you need to make 4 PictureBoxes and set their Name, Image, Visible,
and SizeMode properties to match the table above. Run your program, you should
only see one PictureBox (Name : Mario ; Image : marioright0)Now, for some
coding:
In the Declarations event type in this:
Dim MarioRight0Displayed
As Boolean
= True
Dim MarioRight1Displayed
As Boolean
Dim MarioRight2Displayed As
Boolean
A Boolean is a
variable that can only hold 2 values, True or False. We are using these Boolean
variables to check whether the bitmaps are being displayed currently. For
instance, if marioright0 is being displayed (in the Mario PictureBox) then we
would say, MarioRight0 = True. Same goes for MarioRight1 and MarioRight2. The
reason why the first line has
= True at
the end of it is because you are setting it to be True by default. Booleans are
always False by default. You could also go to MyBase. Load (When your program
loads) and say MarioRight0Displayed
= True But
this is a short way of doing this.
In the Mario. Click event type in this:
If
MarioRight0Displayed = True
Then '
You are checking if the Boolean is True.
Mario.Image = marioright1.Image 'You
are changing Mario's image to MarioRight1's image
MarioRight1Displayed = True
MarioRight0Displayed = False
ElseIf MarioRight1Displayed = True
Then
Mario.Image = marioright2.Image
MarioRight2Displayed = True
MarioRight1Displayed = False
ElseIf
MarioRight2Displayed = True
Then
Mario.Image = marioright0.Image
MarioRight0Displayed = True
MarioRight2Displayed = False
End
If
Now for an
explanation. Remember that we set MarioRight0Displayed to True? Well read the
first line:
If
MarioRight0Displayed = True
Then
OK,
we know that MarioRight0Displayed = True, so we have to read below what it
says,
Mario.Image = marioright1.Image
Basically,
we are setting the PictureBox, Mario's Image property to marioright1's Image. We
know that marioright1 holds the image of marioright1.bmp. So basically we are
changing the PictureBox, Mario's image to marioright1.bmp. I'm sure you
understood that, its simple, the picture changes. The 2 lines are:
MarioRight1Displayed = True
MarioRight0Displayed = False
Read the
second line first. Its pretty obvious, it tells us that marioright0.bmp isn't
being displayed anymore. We say this because if we didn't set
MarioRight0Displayed to false, look what would happen. This line would repeat
again:
If
MarioRight0Displayed = True
Then
We'd
end up in a big loop! So, we set it to True. Ignore this line:
MarioRight1Displayed
= True
Look and see what would happen if nothing is set to true (if you ignore the
first line, nothing WOULD be set to True, as you know when you declare booleans,
they are automatically False. MarioRight1Displayed is by default False,
MarioRight2Displayed is by default False, MarioRight0 is set to False because of
this line):
MarioRight0Displayed
= False
If
everything is false, then the whole If statement would collapse. The If
statement above is designed to check weather MarioRight0Displayed,
MarioRight1Displayed,MarioRight2Displayed, are True, but nothing is True. The
purpose of the line below is to ensure nothing gets in a loop:
MarioRight1Displayed
= True
What
happens is the line mentioned below gets executed:
ElseIf
MarioRight1Displayed = True
Then
Basically,
all the things I mentioned above starts again, this time with one number above
(instead of 0, its 1, instead of 1, its 2) The last ElseIf might seem weird to
you because the numbers don't go up to 3, they go down to 0. Well, that's
something easy to explain. We don't have any more bitmaps of Mario facing right,
so we go in a big loop(0,1,2, 0,1,2 etc.)
Run your
program. When you click on it, it should walk. The only downside is, it goes
slow. But this is a PictureBox, its not really designed for animation, only
still images. A nice, easy way to go about doing animation is using GDI+, which
we'll get into in later tutorials.
The Source Code
for this tutorial is located here:
You can also
locate this by logging in to vbProgramming Forums and going to:
Tutorials > Tutorial Source Code > Source Code
The Source Code
for this tutorial is located here:
You can also
locate this by logging in to vbProgramming Forums and going to:
Tutorials > Tutorial Source Code > Source Code
|
|
