First Step CSharp - Adding an Image

From SwinGame

This step of the tutorial gets you to add a background image for your game. This will be the start of a small 2 player Pong like game. This article will go through the following activities:

• Loading images into your game
• Drawing images onto the screen

Starting a new project

C# Template

Lets start by creating a new project.

1. Open Visual Studio, and click File > New > Project.
2. Select the Visual C# Language and Click the SwinGame C# Project Template. Click OK.
3. Select File - Save.
4. 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 code and put some new code in there, we want to start making a simple Pong/Breakout style game with a ball a paddle and a background. Double click on Gamelogic file in the solution explorer and Delete the following code:

Graphics.FillRectangle(Color.Red, 20, 200, 200, 100);
Graphics.FillRectangle(Color.Green, 220, 200, 200, 100);
Graphics.FillRectangle(Color.Blue, 420, 200, 200, 100);
 
Text.DrawText("Hello World", Color.Red, Resources.GameFont("Courier"), 20, 310);
Text.DrawText("Hello World", Color.Green, Resources.GameFont("Courier"), 220, 310);
Text.DrawText("Hello World", Color.Blue, Resources.GameFont("Courier"), 420, 310);
 
Text.DrawFramerate(0, 0, Resources.GameFont("Courier"));
Text.DrawText("Hello World", Color.White, Resources.GameFont("ArialLarge"), 50, 50);

Now if you run the program by clicking on "Start Debugging" then you should be able to see nothing but a black empty screen 800x600 pixels in size. Close the Window.

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:

• Background (800 x 600 in size)
• Ball
• Paddle

Save these images in the images folder of your resources folder of your project. For example on my computer the path is: 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 file from the Solution Explorer and scroll down to the section titled: "private static void LoadImages()" and add the following code directly below it within the braces (i.e. between the { .. }):

NewImage("Ball", "ball.png");
NewImage("Background", "Background.png");
NewImage("Paddle", "Paddle.png");

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", "Background", or "Paddle"

Drawing the images

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:

Graphics.DrawBitmap(Resources.GameImage("Background"), 0, 0);

This code basically says you are drawing 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.

And that is it now we can make a static image appear of whatever we want where ever we want on the screen the next question is how to get things moving with Sprites and Movement...

• First Step CSharp - Getting started and compiling "Hello World"
  • Adding an Image - How to add an image and draw it
  • Sprites and Movement - Getting the image to move
  • Playing Sounds - Loading and playing a sound
  • Keyboard Input - Moving a sprite with keys
  • Sprite Collisions - Adding a "bounce" to the game
  • Scoring - Adding a score to your game
  • Mouse Input - Clicking sprites in your game