First Step Pascal - 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

Lets start by creating a new project.

1. Extract the files from the Pascal SDK into a folder of your choice
2. Open a console window and navigate to that folder (use the cd command)

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. Open the GameLogic file in an editor of your choice and Delete the following code:

FillRectangle(ColorRed, 20, 200, 200, 100);
FillRectangle(ColorGreen, 220, 200, 200, 100);
FillRectangle(ColorBlue, 420, 200, 200, 100);
 
DrawText('Hello World', ColorRed, GameFont('Courier'), 20, 310);
DrawText('Hello World', ColorGreen, GameFont('Courier'), 220, 310);
DrawText('Hello World', ColorBlue, GameFont('Courier'), 420, 310);
 
DrawFramerate(0, 0, GameFont('Courier'));
DrawText('Hello World', ColorWhite, GameFont('ArialLarge'), 50, 50);

Now if you run the program you should be able to see nothing but a black empty screen pixels in size.

1. Change the OpenGraphicsWindow call to create an 800x600 window
2. Compile from the command line using winbuild.cmd BallGame.exe or ./build.sh BallGame on Mac or Linux
3. Run the game by starting the executable - double click in the file explorer or execute from the command line
4. 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:\temp\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 the GameResources file in your editor and scroll down to the section titled: "procedure LoadImages();" and add the following code directly below it within begin and end:

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: ClearScreen() underneath that is where we want to add the code for the background image which is:

DrawBitmap(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 Pascal - 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