Editing First Step VB.NET - Adding an Image

Starting a new project
Open Visual Studio, and click File > New > Project.

Select the Visual Basic/Basic Language and Click the SwinGame VB.NET Project Template. Click OK.



Select File - Save. Enter "BallProgram" as the file name, and choose the location it is to be saved and click OK.

Editing the code
So it is time to get rid of that Hello World stuff and put some new stuff in there, we want to start making a simple Breakout style game with a ball a paddle and a background. Double click on Gamelogic.vb in the solution explorer and Delete the following code: Now if you run the program by clicking on "Start Debugging" then you should be able to see nothing but a black screen 800x600 pixels in size.

Getting the images
First of all we will need the 3 images which you can make yourself with a graphics editing program like Fireworks and save them as a .png file or just download these ones to start off:
 * [[Media:Background.png|Background]]
 * [[Media:Ball.png|Ball]]
 * [[Media:Paddle.png|Paddle]]

Save these images in the images folder of your resources folder of your project. For example on my computer: C:\Documents and Settings\rmercer\My Documents\Visual Studio 2005\Projects\BallProgram\BallProgram\Resources\images

Once you have done this then we need to add them to the Game Resources part of our program. You will remember we played with the Game Logic before but this time we are adding new element so we need to open up GameResources.vb from the Solution Explorer and scroll down to the section titled: "Private Sub LoadImages" and add the following code directly below it: This will add the pictures to our Game Resources and when we refer to the pictures from now own we can use the name "Ball" or "Paddle"

Now we need to add the background picture to our presently empty black frame. Open up the GameLogic.vb file again from the Project Explorer, find the Do loop in our code then find the following code just below the start of the loop: SwinGame.Graphics.ClearScreen underneath that is where we want to add the code for the background image which is: This code basically says you are adding the "Background" image positioned from the top left corner(0,0), the image is the same size as the window (800,600) so it takes up the whole background.