The adventure of creating… an adventure! Episode 1: Setting up the images [Quick Basic/ QB64 Tutorial]

Introduction

Programming is fun!

What does that have to do with a philosophy portal?

Well… I do not know!

But then again…

What do we know about life or death?

Goal

The goal of this series of tutorials is to show how to create a small (or big?) adventure game with Quick Basic, so as to disseminate programming knowledge. Even if you do not have prior programming knowledge you will be able to follow the series with some additional effort to clear up some programming details we will encounter along the way.

The source code of the program will always be provided at all steps of the tutorial. Reuse of the code is allowed as long as the source is mentioned properly.

Tools needed

To follow the tutorial you just need the Quick Basic in your computer. Just download the latest QB64 from the relative site here for free.

Designing

Before doing any programming one must design what he wants to do. This applies to small as well as big programs.

So what do we want to do?

To create an adventure game!

This game will utilize simple images that we will show to the users as they progress along the game. All the typical adventure game commands will be allowed: Look at, Walk to, Pick up, Use, Talk to, Give, Push, Pull.

The game scenario is something I have not yet thought in its entirety. However I know that the game will start from a room where you are and where you will need to stay alive for at least one day before the rescue team comes and saves you.

The beginning

From where to start from?

Well, from the start (welcome) screen!

To do that we use the PRINT command to print the game title on the screen.

The game will be called…

First Adventure!

Since it is our first adventure.

'Introduction
LOCATE 10, 32: PRINT "First Adventure!"
LOCATE 11, 30: PRINT "Greece, Athens, 2022"
LOCATE 13, 25: PRINT "Seek the moon under the sun…"
SLEEP

The LOCATE commands puts the cursor in a specific line and then we print what we want.

Setting up the images

Each game takes place in a… place.

To illustrate things we need graphics.

We will use basic graphics in our game, i.e. images we will load into the screen to show things. The first thing is to get the images, right? For the purposes of our tutorial we will use images that are 580×420 pixels in dimension. These images will be shown in a window that is 800×600 in dimensions.

Why these dimensions?

First, for no reason. Just because.

Secondly, I like to have a small window for the program to show small images. You guessed it, the program will not utilize the full screen and will not resize based on the resolution of your screen. Let’s start with the basics and build a bike and we will go to building a spaceship after that…

Images are loaded with the _LOADIMAGE command as it is shown below.

IF GameResolution = 800 THEN
    imgBgrd& = _LOADIMAGE("FA_image_Background_800.png", 32) 'Background image
ELSEIF GameResolution = 1280 THEN
    imgBgrd& = _LOADIMAGE("FA_image_Background_1280.png", 32) 'Background image
END IF

You also guessed it right: We have introduced a variable that indicates the resolution of the game. So when I told you that the game will not take into account the resolution of your computer, I lied a bit. Just a bit. We introduce a variable to indicate the resolution used and we will embed it in the code and… we will see how to use it the future.

For now, let’s set the resolution at 800×600…

CONST GameResolution = 800 'Set for resolution 800x600

We repeat the same loading of images for all images of the game. For now, we only have three images: the background image (that is loaded in the beginning and… stays there for ever) and two more images that we put on the background when he game starts.

The background

The image I have created for background is a black colour image with a white line. This line will be the border between the upper and the lower part of the screen.

In the upper part we will show images that are related to the gameplay, e.g. the photo of a room you are in.
In the lower part of the screen we will show to the user the possible commands allowed for the game, his inventory of objects (if and when we add one) and any messages.

Simple enough. Yet, nice and effective.

How are those images put in the screen though?

Well, with the PUTIMAGE command…

IF GameResolution = 800 THEN
    _PUTIMAGE (100, 20)-(680, 440), imgStart&, 0
ELSEIF GameResolution = 1280 THEN
    _PUTIMAGE (80, 20)-(660, 500), imgStart&, 0
END IF

With the PUTIMAGE command you can set where to place your image upper-left corner (100,20) and where the lower-right corner will be (680,440), which image to load (imgStart&) and where to show it (0 denotes the screen). In that way we can put any of the images we have loaded wherever we want.

Show the initial messages

When the game starts and the background image is loaded, we print the initial messages to the user. We use the LOCATE command and print the messages in the lower part of the screen, as mentioned above…

'Print text to begin the adventure...
LOCATE 33, 1: PRINT "You are in a room... Alone..."
LOCATE 34, 1: PRINT "There is a snow storm raging outside..."
SLEEP

'Show the trees!
_PUTIMAGE (100, 20)-(680, 440), imgTrees1&, 0

LOCATE 33, 1: PRINT "You must survive for one day..."
LOCATE 34, 1: PRINT "Until the rescue party comes to save the day!"
SLEEP

And as you see in the code, we can load new images whenever we want to show new things. In that case we have loaded a trees picture. After all, we are in a snow storm…

Important Notes

Guess what the SLEEP command does. Try to remove it and see what happens.
Experiment with the coordinates in the PUTIMAGE command to see how that command can be used. (seek some additional examples commented out in the source code provided)

An epilogue and a promise…

We have just set up the scenery for our game. We have the initial screens and we have understood how images are loaded. We will build on this to expand the game and take it to the next level…

APENDIX I – The source code

Please see below for the full source code of the game.

'Declare variables
DIM imgBgrd&
DIM imgStart&
CONST GameResolution = 800 'Set for resolution 800x600
'const GameResolution = 1280 'Set for resolution 1280x720

'Introduction
LOCATE 10, 32: PRINT "First Adventure!"
LOCATE 11, 30: PRINT "Greece, Athens, 2022"
LOCATE 13, 25: PRINT "Seek the moon under the sun..."
SLEEP

'Load the background from an image in a file
'Load different pictures depending on the resolution we want
'(because the image will be used to set the screen)
'imgBgrd& = _LOADIMAGE("FA_image_Background_800.png", 32) 'Background image

IF GameResolution = 800 THEN
    imgBgrd& = _LOADIMAGE("FA_image_Background_800.png", 32) 'Background image
ELSEIF GameResolution = 1280 THEN
    imgBgrd& = _LOADIMAGE("FA_image_Background_1280.png", 32) 'Background image
END IF

'imgStart& = _LOADIMAGE("FA_image_Start_800.png", 32)

'Load images of the game from files
'Images for resolution 800x600 are 580x420
'Images for resolution 1280x720 are 640x480
'Image Start
IF GameResolution = 800 THEN
    imgStart& = _LOADIMAGE("FA_image_Start_800.png", 32)
ELSEIF GameResolution = 1280 THEN
    imgStart& = _LOADIMAGE("FA_image_Start_1280.png", 32)
END IF
'Image trees
imgTrees1& = _LOADIMAGE("FA_trees1.png", 32)

'Set the image as destination
'_DEST img1&

'Set the screen mode based on the background image (800x600 png image)
'SCREEN 12
'SCREEN _NEWIMAGE(800, 600, 32)
SCREEN imgBgrd&

'Set background colour to gray
'CLS , _RGB32(127, 127, 127)

'Present the first image of the game on the black screen
'(i.e. put the image2 on top of image1, which is the background loaded initially)

'_PUTIMAGE (10, 10)-(650, 490), imgStart&, 0
'_PUTIMAGE (200, 200)-(400, 400), img2&, 0, (0, 0)-(400, 400)

IF GameResolution = 800 THEN
    _PUTIMAGE (100, 20)-(680, 440), imgStart&, 0
ELSEIF GameResolution = 1280 THEN
    _PUTIMAGE (80, 20)-(660, 500), imgStart&, 0
END IF

'Set text colour
'COLOR 7, 5

'Print text to begin the adventure...
LOCATE 33, 1: PRINT "You are in a room... Alone..."
LOCATE 34, 1: PRINT "There is a snow storm raging outside..."
SLEEP

'Show the trees!
_PUTIMAGE (100, 20)-(680, 440), imgTrees1&, 0

LOCATE 33, 1: PRINT "You must survive for one day..."
LOCATE 34, 1: PRINT "Until the rescue party comes to save the day!"
SLEEP

Copy this code in your QB64 IDE and try it out.

In order to use it you must also have the images the program loads in the same folder as the QB64.exe program.

APPENDIX II – The images

Please fine here the images used by the program.

FA_image_Background_800 Download

FA_image_Background_1280 Download

FA_image_Start_800 Download

FA_image_Start_1280 Download

FA_trees1 Download

APPENDIX III – Useful resources

One can find many things in the Internet. Information about programming is one of these things. Seek help in the relative QB64 web site or in relevant programming sites to understand how various Quick Basic commands work.

Below I list some resources related to the commands we used.

Feel free to seek knowledge from where you can!

Harmonia Philosophica

The adventure of creating… an adventure! Episode 1: Setting up the images [Quick Basic/ QB64 Tutorial]

Introduction

Goal

Tools needed

The beginning

Setting up the images

The background

Show the initial messages

An epilogue and a promise…

APENDIX I – The source code

APPENDIX II – The images

APPENDIX III – Useful resources

Like this:

Comments (

)

The adventure of creating… an adventure! Episode 1: Setting up the images [Quick Basic/ QB64 Tutorial]

Introduction

Goal

Tools needed

The beginning

Setting up the images

The background

Show the initial messages

An epilogue and a promise…

APENDIX I – The source code

APPENDIX II – The images

APPENDIX III – Useful resources

Share this:

Like this:

Comments (

)