Results 1 to 15 of 15

Thread: GDI+ For Beginners

  1. #1

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    GDI+ For Beginners

    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.

  2. #2

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    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:
    Code:
    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:
    Code:
    Overr{tab}OnPai{tab}{return/enter}
    You should get:
    Code:
    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":
    Code:
    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!
    Last edited by minitech; Jun 7th, 2010 at 04:54 PM.

  3. #3

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    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:
    Code:
    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:
    Code:
    Dim b As New Bitmap(Image.FromFile("location of your image"))
    You can even draw to a bitmap by using Graphics.FromImage():
    Code:
    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:
    Code:
    My.Resources.NameOfYourImage
    So, if you were making a Pong game, you could have something like:
    Code:
    Dim ball_image As Bitmap = My.Resources.Ball
    or something along those lines.

    Next: a pong game is made!

  4. #4

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    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.
    Last edited by minitech; Jun 7th, 2010 at 06:01 PM.

  5. #5

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    So, starting out with an empty form, go to code view:
    Code:
    Public Class Form1
    
    End Class
    Let's put our image variables in:
    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
    End Class
    Okay! Now, the "real" variables:
    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
    
    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:
    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.
    Code:
    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:
    Code:
    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:
    Code:
    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:
    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
    		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!

  6. #6
    Fanatic Member coolcurrent4u's Avatar
    Join Date
    Apr 2008
    Location
    *****
    Posts
    993

    Re: GDI+ For Beginners

    good tutorial, but you might spark our interest by showing off some cool stuffs
    Programming is all about good logic. Spend more time here


    (Generate pronounceable password) (Generate random number c#) (Filter array with another array)

  7. #7

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

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

  8. #8
    New Member
    Join Date
    Oct 2013
    Posts
    9

    Re: GDI+ For Beginners

    Hello minitech,
    i'am new in programming in vb.
    I have working on my first project making a cd cover.
    I have on the standard form (form1) create tw text boxes for text input
    and two buttons button 1 drawing a rectangle and button 2 must printing this on the paper with the input text.

    My problem is that if i click button 1 i want that the rectangle is drawing in form2 that i have add on the project.
    Can sombody give me the code to realise this i give my code what i self have made already.
    I have trying everything and i' am surging for the solution can you help me please !!!

    thanks and regards Bert

    Public Class Form1

    ' Declareren van alle variabelen
    Dim genrevierkant = New Rectangle(0, (475 + 80) - 100, 475, 40)
    Dim titelvierkant = New Rectangle(0, (475 + 80) - 100, 475, 60)

    Dim titelplaatsing As New StringFormat
    Dim genreplaatsing As New StringFormat

    Dim titelkleur As Color = Color.Black
    Dim genrekleur As Color = Color.Black

    Dim titelfont As Font = New Font("Segoe UI", 14, FontStyle.Bold)
    Dim genrefont As Font = New Font("Segoe UI", 12, FontStyle.Bold)

    Dim cdhoes As Bitmap


    WithEvents documentPrinter As New Printing.PrintDocument


    Private Sub btnTekenUitslag_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnTekenUitslag.Click

    Dim bmp As New Bitmap(476, 475 + 81)

    Dim g As Graphics = Graphics.FromImage(bmp)

    g.SmoothingMode = Drawing2D.SmoothingMode.HighQuality

    Dim pen As New Pen(Brushes.Black, 1)

    g.FillRectangle(Brushes.White, New Rectangle(0, 0, bmp.Width, bmp.Height))

    g.DrawRectangle(pen, 0, 80, 475, 475)

    Me.BackgroundImage = bmp
    cdhoes = bmp

    End Sub
    End Class

  9. #9

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    Please ask about that on the main Visual Basic .NET forum.

  10. #10
    Member pocket's Avatar
    Join Date
    Oct 2013
    Location
    Greater London
    Posts
    37

    Re: GDI+ For Beginners

    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
    This is interesting, how ever if you want a vertex graphics drawn ship, how do you get that moving around?

    Almost all graphics used in 2D games are usuall bitmap.

  11. #11

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    Quote Originally Posted by pocket View Post
    This is interesting, how ever if you want a vertex graphics drawn ship, how do you get that moving around?

    Almost all graphics used in 2D games are usuall bitmap.
    There's also DrawImage, for drawing an Image object on to a Graphics surface.
    ​​​​

  12. #12
    Member pocket's Avatar
    Join Date
    Oct 2013
    Location
    Greater London
    Posts
    37

    Re: GDI+ For Beginners

    Dim p1 As New Point(20,20)
    Dim p2 As New Point(100,100)
    g.DrawLine(Pens.Red, p1, p2)
    But for this example, move this line with the arrow key up, then rotate left using the left arrow key or whatever key as an example?

    Actually vertex graphics positioning is complex, especially for a ship rocket shape at least in Python it is.
    Last edited by pocket; Oct 27th, 2013 at 02:38 PM.

  13. #13
    Member pocket's Avatar
    Join Date
    Oct 2013
    Location
    Greater London
    Posts
    37

    Re: GDI+ For Beginners

    Name:  animatelinesincloseproximity.JPG
Views: 1070
Size:  1.1 KB

    How about animating some lines using vertex, sort of like a sequence, each one moving about at different moments, like a flickering light bulb?

  14. #14

    Thread Starter
    Stack Overflow mod​erator
    Join Date
    May 2008
    Location
    British Columbia, Canada
    Posts
    2,824

    Re: GDI+ For Beginners

    (Does that look like a flickering lightbulb?) Anyways, please ask this on the main VB.NET forum. I might have time to continue this tutorial now and include animation in a bit, but you’re not going to have much luck asking questions here…

  15. #15
    Member pocket's Avatar
    Join Date
    Oct 2013
    Location
    Greater London
    Posts
    37

    Re: GDI+ For Beginners

    Sure, Well it was what came to my mind. The movement of the lines would animated one at a time quickly, or a bunch of them would, and would go through a sequence.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width