GDI+ For Beginners

[minitech]

The .NET Framework offers GDI+, a simple, yet powerful way of drawing graphics. A lot of people have never even heard of it, and just use PictureBoxes instead. But what about when you're making a serious game? Or a photo editor? That's where GDI+ comes in.

The Graphics object
GDI+ is all encapsulated in a class called "Graphics", in the System.Drawing namespace. There are quite a few ways to get a Graphics object. Controls have the CreateGraphics method, but this is not good to use for a few reasons. The most important one is that graphics drawn this way will be erased the next time the control is re-drawn, that is when part of it is shown after being hidden or when Invalidate is called on it. There are also Paint events of controls, but these cause flicker if you're making any kind of game or serious graphics application. The last one is inherited from Control, and is flickerless if you set DoubleBuffered to True on your control. This is the one I will use in the examples.

Anyways, the Graphics object has a set of interesting methods for drawing pretty much anything. Some simple ones are:

• DrawLine(Pen, Starting X, Starting Y, Ending X, Ending Y) or DrawLine(Pen, Start Point, End Point)
• DrawRectangle(Pen, X, Y, Width, Height) or DrawRectangle(Pen, Location, Size)

All of the shape methods have FillXXX counterparts as well.
There's also DrawImage, for drawing an Image object on to a Graphics surface.

[minitech]

Key Structures and Classes
Ok, so here are some key Structures/Classes:
Point: represents an X,Y point.
Size: represents a size.
Rectangle: a combination of Point and Size that defines a rectangle.

You can use these with the graphics methods, such as using:

Dim p1 As New Point(20,20)
Dim p2 As New Point(100,100)
g.DrawLine(Pens.Red, p1, p2)

How to obtain a graphics object
For now, we'll override OnPaint. In the code editor for your form, type this sequence:

Overr{tab}OnPai{tab}{return/enter}

You should get:

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
     MyBase.OnPaint(e)
End Sub

A useful shortcut to remember. Then, get the graphics object from the Event Arguments in "e":

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
     Dim g As Graphics = e.Graphics
     MyBase.OnPaint(e)
End Sub

That's how you get a Graphics object. So, go ahead and try drawing a line with it, just put in your point values!

[minitech]

Explore the Graphics methods using IntelliSense in the IDE - the documentation is very good and you should spend some time experimenting with it.

How to draw images
DrawImage is possibly the most useful, and it's of course used to draw images. An image can be loaded in many ways. One way is to use the Image.FromFile method, like so:

Dim img As Image = Image.FromFile("location of your image")

Bitmap objects are more useful, however, and can be obtained from a file like so:

Dim b As New Bitmap(Image.FromFile("location of your image"))

You can even draw to a bitmap by using Graphics.FromImage():

Dim b As New Bitmap(Image.FromFile("location of your image"))
Dim g As Graphics = Graphics.FromImage(b)
'Draw stuff on the image
g.Dispose() 'Flush to the bitmap.

But enough of that. You can draw an image with DrawImage:
g.DrawImage(image, x location, y location, width, height)
There are many overloaded variations you can use, such as not specifying width or height, specifying a Rectangle, using a Point or a Point and a Size, etc.. IntelliSense is, as always, your best friend!

By the way, you can also package images with your application. Just double-click on the "My Project" item in the Solution Explorer to open Project Properties, then go to the "Resources" tab and drag some image files in. That way, the only thing people download is your EXE, and there are never any access violations or missing files! You access resource images by using:

My.Resources.NameOfYourImage

So, if you were making a Pong game, you could have something like:

Dim ball_image As Bitmap = My.Resources.Ball

or something along those lines.

Next: a pong game is made!

[minitech]

The Pong Game
Now wasn't that simple? That's all you need (plus a bit of logic) to make your Pong game! Here's a walkthrough of the process. You'll need some things:
- A ball image, made with your favorite image editor. Name it "ball", and save it, with transparency, as a 32-bit PNG file. The transparency part is important. GDI+ has the ability to draw stuff transparently on top of one another - one of the PictureBox's many limitations.

- A paddle image, for paddles. Again, use transparency and save as a 32-bit PNG file.

- A background image. Doesn't need transparency, since it will fill the form. Make it 800x600.

Okay, now we're ready! First of all, what variables are needed? That would be the position of the ball, and the Y coordinate of each paddle and the images. We also need the current direction of the ball. Next, which constants? We'll make this nice and easy to edit, of course, so we'll need constants for the width and height. Then, we'll need a Timer on the form to control the ball. We'll need to handle key events. We'll need a Sub to move the ball. Okay, all set! Drag the images to your resources, and try to make these variables. Code coming next.

[minitech]

So, starting out with an empty form, go to code view:

Public Class Form1

End Class

Let's put our image variables in:

Public Class Form1
	'Image variables
	Private m_BallImage As Bitmap = My.Resources.ball
	Private m_PaddleImage As Bitmap = My.Resources.paddle
	Private m_BackgroundImage As Bitmap = My.Resources.background
End Class

Okay! Now, the "real" variables:

Public Class Form1
	'Image variables
	Private m_BallImage As Bitmap = My.Resources.ball
	Private m_PaddleImage As Bitmap = My.Resources.paddle
	Private m_BackgroundImage As Bitmap = My.Resources.background

	'Variables
	Private m_BallLocation As Point = New Point(0, 0)
        Private m_BallDirection As Point
	Private m_Paddle1 As Integer = 0
	Private m_Paddle2 As Integer = 0

End Class

Next, a method for initialization. We want this to be run when the form loads, so why not just put it in the Load handler? Double-click on your form to bring up this code:

Public Class Form1
	'Image variables
	Private m_BallImage As Bitmap = My.Resources.ball
	Private m_PaddleImage As Bitmap = My.Resources.paddle
	Private m_BackgroundImage As Bitmap = My.Resources.background

	'Variables
	Private m_BallLocation As Point = New Point(0, 0)
	Private m_BallDirection As Point
	Private m_Paddle1 As Integer = 0
	Private m_Paddle2 As Integer = 0

	'Load handler
	Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load

	End Sub
End Class

And we'll put some initialization in there. First of all, we'll set the form's size.

Me.ClientSize = New Size(800, 600)

Another use of the Size type! (Okay, I said I'd use constants, but I don't intend to change it from 800x600. You can if you want.)

Then, we want the ball to start at the center of the form:

m_BallLocation = New Point(CInt(Me.ClientSize.Width / 2 - m_BallImage.Width / 2), CInt(Me.ClientSize.Height / 2 - m_BallImage.Height / 2))

The paddles can start at 0, 0 - that's fine. Now, we want the ball to go in a random direction. We'll set the m_BallDirection variable using the Random object:

Dim r As New Random()
m_BallDirection = New Point(r.Next(-7, 8), r.Next(-7, 8))

There! Your code should now look like this:

Public Class Form1
	'Image variables
	Private m_BallImage As Bitmap = My.Resources.ball
	Private m_PaddleImage As Bitmap = My.Resources.paddle
	Private m_BackgroundImage As Bitmap = My.Resources.background

	'Variables
	Private m_BallLocation As Point = New Point(0, 0)
	Private m_BallDirection As Point
	Private m_Paddle1 As Integer = 0
	Private m_Paddle2 As Integer = 0

	'Load handler
	Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
		Me.ClientSize = New Size(800, 600)
		m_BallLocation = New Point(CInt(Me.ClientSize.Width / 2 - m_BallImage.Width / 2), CInt(Me.ClientSize.Height / 2 - m_BallImage.Height / 2))
		Dim r As New Random()
		m_BallDirection = New Point(r.Next(-7, 8), r.Next(-7, 8))
	End Sub
End Class

Now, all that's left is the true game code, which is not as hard as it sounds. Coming up next!

[coolcurrent4u]

good tutorial, but you might spark our interest by showing off some cool stuffs

[minitech]

Okay... what "cool stuffs" did you have in mind?