Computer Science Canada

Simple GDI+ Introduction For 2D Game Programming

Author:  XvI Beta IvX [ Thu Dec 29, 2011 8:14 am ]
Post subject:  Simple GDI+ Introduction For 2D Game Programming

XvI Beta IvX's GDI+ Tutorial

Note: Links below instructions show a picture of what you should do.

You will need:

VB.Net
Photo Editing Application (Make sure it can save files as .bmp aka Bitmap)
--------------------------
Tutorial:

P1) Making Image
Make a new 60 x 60 Image in your photo editor
Color the whole thing Fuschia or in HTML #ff00ff
Draw your character, but not the whole box (leave some Fuschia around it)
Draw Eyes on the character looking to the right.

http://img7.imageshack.us/img7/8135/tut1ig.png

Save it as rightcharacter.bmp (Use .BMP Format because it works best with GDI+)

http://img513.imageshack.us/img513/1551/tut2x.png

Make it's eyes look up then save it as upcharacter.bmp.
Make one for left and down also. (leftcharacter and downcharacter)
You should end up with four photos with names like downcharacter.bmp and leftcharacter.bmp etc.

P2) Application and Code
Open up Visual Basic and Make a new project with whatever name you like.
Save the project after you create it and put the four pictures in AppName/Bin/Debug
Make the Form's Size 600, 600
Drag A Timer into the form, name it Game, Set Interval to 1.
Double Click the Form for code

Under Public Class Form1 write
CODE:

     'NEEDED FOR DRAWING AND MOVEMENT
     Dim G As Graphics
     Dim goingx As Boolean = True 'True means adding to X, False means subracting from X
     Dim goingy As Boolean = True 'True means adding to Y, False means subracting from Y
     Dim myway As Boolean = True 'True means moving X false means moving Y
     'CHARACTER VARIABLES
     Dim character As String = "rightcharacter.bmp" 'The image path
     Dim characterpos As Point 'X and Y Location Storage

Under Form.Load write
CODE:
        Me.DoubleBuffered = True
         G = Me.CreateGraphics
         characterpos.X = "10"
         characterpos.Y = "10"


While looking at the Code go up to General, Form1 or (Form1 Events) and switch it to (Form1 Events) then to the right of it select paint
http://img714.imageshack.us/img714/7495/tut3e.png

When you click it a new Sub will appear, Under there paste this in:
CODE:
Dim characterBMP As New Bitmap(character) 'Switches it so that it's a Bitmap (so it works)
 characterBMP.MakeTransparent(Color.Fuchsia)
 e.Graphics.DrawImage(New Bitmap(characterBMP), characterpos) ' Do the Drawing

Now go into your Game timer and put this code in.
CODE:

  'Go Right
         If goingx = True And myway = True Then
             If characterpos.X = "500" Then
                goingx = False
                 myway = False
             Else
                 characterpos.X = characterpos.X + 5 'Move X Right
                 character = "rightcharacter.bmp"
                Me.Invalidate() 'Re-Draw All Graphics
                 Exit Sub
             End If
         End If
 
        'Go Down
         If goingy = True And myway = False Then
             If characterpos.Y = "500" Then
                 goingy = False
                 myway = True
             Else
                 characterpos.Y = characterpos.Y + 5 'Move Y Down
                 character = "downcharacter.bmp"
                 Me.Invalidate() 'Re-Draw All Graphics
                 Exit Sub
             End If
         End If
 
        'Go Left
         If goingx = False And myway = True Then
             If characterpos.X = "0" Then
                 goingx = True
                 myway = False
             Else
                 characterpos.X = characterpos.X - 5 'Move X Left
                 character = "leftcharacter.bmp"
                 Me.Invalidate() 'Re-Draw All Graphics
                 Exit Sub
             End If
         End If
 
        'Go Up
         If goingy = False And myway = False Then
             If characterpos.Y = "0" Then
                 goingy = True
                 myway = True
             Else
                 characterpos.Y = characterpos.Y - 5 'Move Y Up
                 character = "upcharacter.bmp"
                Me.Invalidate() 'Re-Draw All Graphics
                 Exit Sub
             End If
         End If


Now go back to your form, add a button in the middle with text saying "start" double click it then write
CODE:
Game.Start


-------------------------
Finished

Debug your program and press the start button,
Your character should move from edge to edge and switch images when switching position!
------------------------
SRC

Source Code: http://www.mediafire.com/?2x2qewzi2c020m1
No Virus Scan Needed As All .exe Files have been removed but here it is anyway: http://www.virustotal.com/file-scan/report.html?id=6a76b1320b628964a3b7fbf94a93c77dc8eece91ca431fc6fba7a4b9827382b6-1325163771

------------------------

XvI Beta IvX
Canada


: