Q B A S I C    R P G    T U T O R I A L    I S S U E    1

1.0 Creating arrays to hold graphics:
----------

First, there are many better tutorials out there which define what an array is. I will not really go into that here, as I do not think it is necessary. However, if you wish to know exactly what an array is, do a google search, and I'm sure you'll find a good explanation.

The easiest way to use bitmap graphics in Qbasic, is by creating an array to hold your graphic. In this case, we will be using arrays to hold raw image data. For now, I will just show you the basics of creating an array. Later on, we will discuss ways to create these graphics.

First, we need to determine how big to make the array. This can be done by the following equation:

Width * Height / 2 + 1 = ArraySize
Let's break that down. Assume you've drawn a graphic, and it is 16 pixels wide, and 16 pixels tall. Place these numbers into the equation above, and calculate it. You will come up with a result of 129.

Now that we have the size, we must create our array. We will need a name, so for the sake of simplicity, we will call it Array%. Of course, you may use any alphanumeric characters to name it. Your array must, however, begin with a letter. So, Array1% is acceptable, whereas, 1Array% is not. Anyway, this is the code to create the array:

DIM SHARED Array%(129)
Now that we have created an array to store our graphic in, let's look at the ways in which we can create our graphic.

1.1 Using DATA for graphics:
----------

Well, it's not too tough, although, PUT/GET doesn't work directly with data. This is also a rather cumbersome meathod. It is, however, the most simple one to learn. This is what you will need to do:

First, you must initialize a graphics mode. For these tutorials, we will be using 13h, which is a 320x200 screen resolution, with 256 colours. We initialize it, like so:

SCREEN 13
Let's say, you have 16 rows of DATA, with 16 numbers in each row... so, a 16x16 pixel image, then. It would look something like this:

DATA 00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,06,06,06,06,06,06,00,00,00,00,00
DATA 00,00,00,00,06,14,14,14,14,14,14,06,00,00,00,00
DATA 00,00,00,06,14,14,14,14,14,14,14,14,06,00,00,00
DATA 00,00,00,06,14,14,14,14,14,14,14,14,06,00,00,00
DATA 00,00,06,14,14,14,14,14,14,00,00,14,14,06,00,00
DATA 00,00,06,14,14,00,00,14,14,00,15,14,14,06,00,00
DATA 00,00,06,14,14,14,00,14,14,00,15,14,14,06,00,00
DATA 00,00,06,14,14,14,14,14,14,14,14,14,14,06,00,00
DATA 00,00,06,14,14,14,14,14,14,14,14,14,14,06,00,00
DATA 00,00,00,06,14,00,14,14,14,14,00,14,06,00,00,00
DATA 00,00,00,06,14,14,00,00,00,00,14,14,06,00,00,00
DATA 00,00,00,00,06,14,14,14,14,14,14,06,00,00,00,00
DATA 00,00,00,00,00,06,06,06,06,06,06,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00
First, you must create a routine to read the data, and display each pixel. Let's do it this way:

FOR Y = 0 to 15
    FOR X = 0 to 15
        READ DummyData%
        PSET (X, Y), DummyData%
    NEXT X
NEXT Y
The above routine will read your data, and display your 16x16 image on the screen in the upper left corner.

Next, you need to load it into an array, using get... I assume, that you've created an array (we'll call it Sprite%), and dimensioned it properly, DIM SHARED Sprite%(129), in the case of this one.

So, to get the image into an array, we do this:


GET (0, 0) - (15, 15), Sprite%
Anyway, once that is done, you have your image loaded into the Sprite% array, and can put it on the screen like so:

PUT (X, Y), Sprite%, PSET
Where, X is the horizontal pixel location, and Y is the vertical one, of where you want your sprite. So, if you wish to have it in the center of the screen (assming you initialized SCREEN 13), your x would be 151 and y would be 91.

That's all there is to it. I Hope it works for you.

1.2 Using GIFs and custom palettes:
----------

As you can see, using DATA for graphics is simple, however, it isn't entirely too useful. So what about loading a GIF image? This can be done, although, it takes a bit more effort.

First, you'll need some qbasic code than can display a GIF. I've taken the liberty of finding such a file online, and modifiying it for our use. You can grab a copy by clicking here [download currently unavailable].

Before you dive in, allow me to explain what this file does. First, it will ask you for the name of a gif file you wish to load. Note that, this file must be 320x200, 256 colour, and be an 87a, non-interlaced type GIF. Most programs will allow you to save it as such. Next, it will display the gif, and save it as a BSAVEd image, along with the palette. The files will have the same name as your gif, but extensions of .bsv, and .pal, respectively.

Now, allow me to explain how to load these files into your program. First, we will need to load the palette, and change it. This can be done with the following code:

filenum% = FREEFILE
OPEN filename$ FOR INPUT AS #filenum%
FOR DummyColour% = 0 TO 255
    INPUT #filenum%, r, g, b
    OUT &H3C8, DummyColour%

    OUT &H3C9, r
    OUT &H3C9, g
    OUT &H3C9, b
NEXT DummyColour%
Note that, you should have already initialized SCREEN 13 earlier. You should also replace filename$ with the name of the palette file... so, if your GIF was called RPG.GIF, your palette would be RPG.PAL.

So, now that we have loaded the palette in, let's load the BSAVEd image of our GIF. This is accomplished with the following code:

DEF SEG = &HA000
BLOAD "test.bsv"
...and, if everything went well, you should be looking at a BSAVEd version of your GIF on the screen right now.

As you can see, this is great for things like title screens, and other full screen images. However, what if you want to use small images (such as, say, 16x16 tiles), that don't take up the whole screen? This will be explained next!