Simple GDI+ Introduction For 2D Game Programming

[XvI Beta IvX]

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