|
GDI+ is an extremely powerful
API used for drawing Images quickly to the screen. Its Predecessor, GDI - which was
commonly known as BitBlt - was slightly faster, but GDI+ is much more powerful.
Harnessing the power of this API is a big leap towards Game PRogramming.
Starting Up
First
create a new project. Go to paint(Start | Run | type in "mspaint") and create
an image with a black background and a white circle in the middle. Save the image
as "circle.gif" in the Bin directory of your program.
Code
Go
to your code(F7), and find (Base Class Events).Paint - type in the following code:
e.Graphics.DrawImage(New Bitmap("circle.gif"),
15, 20)
You might be wondering, "why
all this code for displaying an image, you can do it with clicks in a picturebox."
Dont worry - theres a reason. If you had, lets say, 1000 pictureboxes, all moving
at the same time, animating... etc, it will flicker like CRAZY (try this yourself,
just make 1000 pictureboxes from the "intro to animation" tutorial). GDI+ will help
you a LOT with these problems.
Explanation - remember in the Hello World tutorial I said we'd talk about the (ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) mumbo
jumb?
Well we're going to talk about the "e". The "e" stands for "event." Remember, when
you type in something, followed by a dot, a popup box appears to help you; so when
we see the popup box for the "e" and we want to display an image, what do we click?
Graphics of course! The same thing for DrawImage, we want to draw an image, so we
click DrawImage! The next part gets a little tricky. After you type in the "(" after
"DrawImage", a little yellow context menu appears. Use that to help you.
The
first part says "image as system.drawing.image." Normally you would expect to type
in "circle.gif", but here you have to type in New Bitmap("circle.gif"). Why New? It
has a lot to do with OOP(Object Oriented Programming) concepts. You'll learn about
that soon, in another tutorial. Wait a minute.. why New Bitmap when you're
displaying a gif? Well... err.. a GIF is a compressed bitmap... :-p
- so i guess you'll have to live with that.
The next part says "Point As System.Drawing.PointF" Well what is a point? Its just
a set of coordinates - like 1,1 35,35 312.5, 534.3. So we know we need a set
of coordinates - and i just chose (15,20) randomly.
Well, run your program! I really bet you're wondering why we didn't use a
PictureBox... :-p you'll realize why soon enough!
Transparency
The
program displayed a white circle surrounded by a black background. In a gane, you
dont want the character to be surrounded by a background of some sort - you want
him to look like.... himself... without the background!
Darc, from vbProgramming
forums, suggested that you store the location of an image to a string, because if
you don't do that, then the location may get lost sometimes. So we'll do that!
Declare a string in the Declarations
area called imgLoc
Go to Form1.Load and set imgLoc = "circle.gif"
Now go back to the GDI+ code we did in Form1.Paint - Change "circle.gif" to imgLoc
Run the program, it should work
- now let's do transparency!
Remember, the transparent color you want is black, because you don't want to see the
black background.
Here's a good way of doing this, it might seem confusing at first - but it's logical
once you grasp it.
Remember, when we did the GDI+ code, we said New Bitmap. So Dim a New bitmap
called imgBmp:
Type in Dim imgBmp As
New Bitmap(
Make sure you dim it in Form1.Paint
BEFORE the GDI+code and make sure you put the "(" at the end. See the context menu
that pops up? It says "FileName As String."
This means that we need to supply the filename. The filename is "circle.gif" - we
could supply that as the filename, but remember, we already have "circle.gif" stored
in a string called imgLoc. So, lets make it:
Dim imgBmp As
New Bitmap(imgLoc)
OK,
go back to Form1.Paint, and BEFORE the GDI+ code and AFTER you dim imgLoc, type in
imgBmp.MakeTransparent(Color.Black)
This makes the black
portions of the bitmap, transparent...(self explanatory... :-p)
Go
back to the GDI+ code, and change "imgLoc" to "imgBmp." and run the program!
If
you got confused, heres the code for Form1_Paint
Dim imgBmp As
New Bitmap(imgLoc)
imgBmp.MakeTransparent(Color.Black)
e.Graphics.DrawImage(New Bitmap(imgBmp),
15, 20)
Conclusion
This might have seemed confusing, but you only typed in FIVE
lines of code! It might take a while to digest this material.
IMPORTANT: I will not say "look
in the Context Menu that pops up after ( ", from now on. The stuff in the context
menu is referred to as the Arguments. So I will say (for example), the first argument
that DrawImage asks for is a bitmap... etc
The next tutorial will focus
on OOP(Object Oriented Programming), which we discussed earlier, it might be
a new concept, but it is VERY useful and it is used in 99% of all games, unless they're
small games like Tic Tac Toe.
You are getting closer and closer
to making professional games - dont give up here!
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
|
|
