************************************************************************
*                      Qbasic Graphics Tutorial                        *
*                           By James Kinney                            *
************************************************************************
************************************************************************
**                             ~INDEX~                                 *

** I. Example                                                          *
** II. Definition of Sprite                                            *
** III. Explanation of Example                                         *
** IV. How to Add to your Sprite                                       *
** V. Multiple Sprites?                                                *
************************************************************************

For this Tutorial, I will explain how to make a detailed sprite and other Graphics. I will give you the explanations for each example and then some. You may ask, “How can I make a detailed figure with colors in the simplest way.” Well, this tutorial will answer that question along with many others That you may have. Part I. ---Example Lets start with a simple example. This will draw a blue diamond on your screen. Just cut and paste this into the Qbasic screen ( if you already know how to do this, then you can skip this part ) by going into Qbasic, then pressing Alt+enter. You should now see the same screen in a smaller window on your desktop. Right next to the copy button near the top of the window, you will see a clipboard. That will paste the code in the window. Then to make it full screen, press Alt+enter again. Then F5 to run.

‘~~~~~~~Start~~~~~~~~~~~~~

Dim sprite1(10,10)
SCREEN 13
FOR y = 1 to 10
FOR x = 1 to 10
READ clr
PSET(x,y), clr
NEXT:NEXT
GET(1,1)-(10,10), sprite1

DATA 0,0,0,0,1,1,0,0,0,0
DATA 0,0,0,1,0,0,1,0,0,0
DATA 0,0,1,0,0,0,0,1,0,0
DATA 0,1,0,0,0,0,0,0,1,0
DATA 0,1,0,0,0,0,0,0,1,0
DATA 0,1,0,0,0,0,0,0,1,0
DATA 0,0,1,0,0,0,0,1,0,0
DATA 0,0,0,1,0,0,1,0,0,0
DATA 0,0,0,0,1,1,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0

‘~~~~~~~~Stop~~~~~~~~~~~~~

You will notice that the code looks somewhat close to binary code (1001010…), But it is not, it is simple part of the colors on the “sprite”. Now on with the tutorial. Part II. ---Definition of Sprite Sprite – a sprite is a movable/immovable object drawn onto the screen. Part III. ---Explanation of Example First of all, lets explain this.

Dim sprite1(10,10)

This line of code is pretty much self-explanatory. Your dimming the array named “sprite1”. But the second part may not be so easy to understand. Whatever is in parentheses after the array are the dimensions of the sprite. In this case, the sprites dimensions are 10 by 10(xpixels by ypixels). We will go further into this later.

For y = 1 to 10
For x = 1 to 10
Read clr
PSET (x,y), clr
NEXT: NEXT
GET (1,1)-(10,10), sprite1

This code may be a little harder for some people to understand. This is a very complicated command. This goes through the For x = 1 to 10 statement 10 times, putting a pixel at the new x,y coordinates. This is a more detailed explanation… The For, Next command is a loop. In this case, there is a loop inside of a loop. First, it reads the Y coordinate (For y = 1 to 10). It only reads it once. Then it reads the x coordinate (For x = 1 to 10). It does this once. Then, in this line of code: “Read clr, PSET (x,y), clr”, This reads the current x, y coordinates and puts a pixel at that location. The “clr” statement simply means a color. So it has no color until you put one for it. Then, the Next command brings it back to the For command. In this case, it brings it up to the (For x = 1 to 10). It will continue to do this until x = 10, then it brings it up to this for command: “For y = 1 to 10”, then it goes through the (For x = 1 to 10) command 10 times, again. So overall, it will put a pixel x,y 100 times. Example of what the machine is actually doing:

PSET (1,1), clr
PSET (2,1), clr	
PSET (3,1), clr
PSET (1,2), clr
PSET (2,2), clr
PSET (3,2), clr

And so on and so forth…. Now for the next segment of code:

GET (1,1)-(10,10), sprite1

This Piece of code simply gets the array and puts it at the dimensions given. In this case, It gets sprite1 and puts it at the dimensions 1,1-10,10. it also put it at those coordinates. There is another command that will do this but when you dimming the array, this is the best way to do it. Now for the last part of code…

DATA 0,0,0,0,1,1,0,0,0,0
DATA 0,0,0,1,0,0,1,0,0,0
DATA 0,0,1,0,0,0,0,1,0,0
DATA 0,1,0,0,0,0,0,0,1,0
DATA 0,1,0,0,0,0,0,0,1,0
DATA 0,1,0,0,0,0,0,0,1,0
DATA 0,0,1,0,0,0,0,1,0,0
DATA 0,0,0,1,0,0,1,0,0,0
DATA 0,0,0,0,1,1,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0

First off, you may notice the DATA command; this command is necessary at the beginning of each line of this type of code. After the data commands you will notice the numbers. Each number corresponds to a color. 0=black, 1=blue, 2=green, 3=cyan, 4=red, 5=pink, 6=orange, 7=gray, 8=dark gray, 9=powder blue, 10=light green, 11=turquoise, 12=magenta, 13=light pink, 14=yellow, 15=white. You can use the numbers to form a figure, for instance, our blue diamond. In the example, there are a lot of 0’s, because most of the background is black. The others are 1s. That makes the color blue; I put them all into the shape of a diamond so it looks like a diamond in its picture. For the color, it depends on which screen you’re in. If you’re in screen 13, you can use 256 colors, but if your in screen 12, or 8, you can only use 16 colors. Experiment around with this and try and come up with truly unique sprites. Part IV. ---How to add onto your Sprite What if you just wanted to draw a strait line, you’re your not to good at drawing circles, so it would be easier to just use the “circle (x,y), r” command? Remember this piece of code?

FOR y = 1 to 10
FOR x = 1 to 10
READ clr
PSET(x,y), clr
NEXT:NEXT
GET(1,1)-(10,10), sprite1

Well we can very easily add onto it to draw a line/circle/pixel at coordinates given. All you have to remember is, whatever code you put before “get (*,*)-(*,*), sprite” will be added to your sprite, as long as it fits into your given boundaries “(*,*)-(*,*)”. So lets make a new sprite, we will make this a sort of rainbow effect, but with just the primary colors. There are two ways to do this…

‘One way…
For y = 1 to 10
For x = 1 to 10
READ clr
PSET (x,y), clr
NEXT:NEXT
GET(1,1)-(10,10), rainbow

‘Code goes here…

DATA 04,04,04,04,04,04,04,04,04,04
DATA 04,01,01,01,01,01,01,01,01,04
DATA 04,01,02,02,02,02,02,02,01,04
DATA 04,01,02,14,14,14,14,02,01,04
DATA 04,01,02,14,09,09,14,02,01,04
DATA 04,01,02,14,09,09,14,02,01,04
DATA 04,01,02,14,14,14,14,02,01,04
DATA 04,01,02,02,02,02,02,02,01,04
DATA 04,01,01,01,01,01,01,01,01,04
DATA 04,04,04,04,04,04,04,04,04,04

‘The other way…
LINE (1,1)-(10,10), 4, b
LINE (2,2)-(9,9), 1, b
LINE (3,3)-(8,8), 2, b
LINE (4,4)-(7,7), 14, b
LINE (5,5)-(6,6), 9, b
GET (1,1)-(10,10), rainbow

Notice any difference? Don’t get me wrong though, both of those are needed at one point or another, so don’t think one is better just because it is shorter. You can also combine the two for an enhanced look, like so…

For y = 1 to 10
For x = 1 to 10
READ clr
PSET (x,y), clr
NEXT:NEXT
LINE (5,1)-(5,10), 0
LINE (1,5)-(10,5), 0
GET(1,1)-(10,10), rainbow

‘Code goes here…

DATA 04,04,04,04,04,04,04,04,04,04
DATA 04,01,01,01,01,01,01,01,01,04
DATA 04,01,02,02,02,02,02,02,01,04
DATA 04,01,02,14,14,14,14,02,01,04
DATA 04,01,02,14,09,09,14,02,01,04
DATA 04,01,02,14,09,09,14,02,01,04
DATA 04,01,02,14,14,14,14,02,01,04
DATA 04,01,02,02,02,02,02,02,01,04
DATA 04,01,01,01,01,01,01,01,01,04
DATA 04,04,04,04,04,04,04,04,04,04

Part V. ---Multiple Sprites? There are ways in which you can draw multiple sprites on the screen. But there is one thing that you should keep in mind when doing this. Try never to give two sprites the same name. If you make a sprite of a red balloon, and you call it balloon(10,10), you don’t want to make another sprite of a blue balloon, and also give it the name balloon(10,10). Also, try and keep the name short and easy to remember, like, grass, brick, and water; not like, greengrass, redbrick, or murkywater. But how would you go about putting all of your sprites onto the screen. First of all, make an array called map(21,15), this will be your map. Second, you need sprites, so make as many as you want, but for now, I will make 3. flrtile1(10,10), flrtile2(10,10), wall(10,10). So right now, your code should look something like this…

DIM flrtile1(10,10), flrtile2(10,10), wall(10,10)
DIM map(21,15)

Now, we have to get all of our sprites and our map. We do this by using the code we made earlier, like this…

SCREEN 13
FOR y = 1 to 10
FOR x = 1 to 10
READ clr
PSET (x,y), clr
NEXT:NEXT
GET(1,1)-(10,10), flrtile1

FOR y = 1 to 10
FOR x = 1 to 10
READ clr
PSET (x,y), clr
NEXT:NEXT
GET(1,1)-(10,10), flrtile2

FOR y = 1 to 10
FOR x = 1 to 10
READ clr
PSET (x,y), clr
NEXT:NEXT
GET(1,1)-(10,10), wall

CLS
FOR y = 1 to 15
FOR x = 1 to 21
READ map(x,y)
NEXT:NEXT

Now you will notice that the map one is different, you will see where that comes into play in a minute. But for now, we have all of our arrays dimmed and put onto the screen. You will see on the last part of code, that we put a CLS command in front of it, if we did not, you would see all of your sprites you just got in the upper-left hand corner of the screen all crammed into one 10 by 10 area. But look how at the end of each section of code, I put the name of the sprite. You do this so it knows which sprite you are getting, and I put each section of code in order to the way I dimmed them (dim flrtile1(10,10), flrtile2(10,10)……get(1,1)-(10,10), flrtile1……get(1,1)-(10,10), flrtile2). But now it’s time for another very important piece of code. This will determine what sprites go where on the map…

FOR y = 1 to 15
FOR x = 1 to 21
IF map(x,y) = 1 then PUT(x * 10 – 10, y * 10 – 10), flrtile1
IF map(x,y) = 2 THEN PUT(x * 10 – 10, y * 10 – 10), flrtile2
IF map(x,y) = 3 THEN PUT(x * 10 – 10, y * 10 – 10), wall
NEXT
NEXT

This code is just like the code for reading the sprite, except now we don’t have the READ clr statement. There should only be one line of code in this that needs explaining…

IF map(x,y) = 1 then PUT(x * 10 – 10, y * 10 – 10), flrtile1

This code says that if map(x,y) = 1, then put down flrtile1 for that current x,y position. The same goes for the other ones (if map(x,y) = 2, put flrtile2… if map(x,y)=3 put wall). But the PUT statement is a little confusing, what the heck does x * 10 – 10, y * 10 – 10 mean?! Well, it simply means that it will put what you tell it to in a 10 by 10 area. The coordinates x,y just happen to be where it is putting those sprites. Otherwise you could put something like, PUT(personx * 10 – 10, persony * 10 – 10), person, and that would not work the way we want it too in this case, that would put a sprite at personx, persony 315 times (for y = 1 to 15, for x = 1 to 21). **NOTE**, you can only have numbers assigned to sprites (if map(x,y) = 2…), not letters, symbols, or names. **NOTE**. Ok, now that that’s over with, lets move on. You put the code from above into and out of your main loop. When it is out of, you have to put it right after you get the map, when it is in, you put it at the very front of your code. Today, I will not use the main loop, I will just show you how to put it onto the screen. And before I forget, you can use your own sprites, as long as they are 10 by 10, and you only have three. Now here is what the code would look like for the map.

DATA 3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3
DATA 3,2,1,2,1,2,1,2,1,2,3,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,1,2,3,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,3,3,3,3,3,3,3,3,3,3,3
DATA 3,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,3
DATA 3,3,3,3,3,2,3,3,3,3,3,3,3,3,3,3,1,3,3,3,3
DATA 3,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,3,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3

All of the numbers correspond to a sprite. You defined them earlier, 1=flrtile1, 2=flrtile2, 3=wall. You simply put the sprites where you want to, as long as it’s in a 21*15 area. In this case, I made a sort of floor layout, like a room in a mansion. You can make a lot of sprites, and you can get as detailed as you want, but this is as far as I will go into it for now. Last part, I will give you the code as a whole so you can copy/paste it into qb. If you don’t remember how, there is an explanation at the beginning of the tutorial.

‘~~~~~~~~~~Start~~~~~~~~~~
DIM flrtile1(10, 10), flrtile2(10, 10), wall(10, 10)
DIM map(21, 15)
SCREEN 13
FOR y = 1 TO 10
FOR x = 1 TO 10
READ clr
PSET (x, y), clr
NEXT: NEXT
GET (1, 1)-(10, 10), flrtile1

FOR y = 1 TO 10
FOR x = 1 TO 10
READ clr
PSET (x, y), clr
NEXT: NEXT
GET (1, 1)-(10, 10), flrtile2

FOR y = 1 TO 10
FOR x = 1 TO 10
READ clr
PSET (x, y), clr
NEXT: NEXT
GET (1, 1)-(10, 10), wall

CLS
FOR y = 1 TO 15
FOR x = 1 TO 21
READ map(x, y)
NEXT: NEXT

FOR y = 1 TO 15
FOR x = 1 TO 21
IF map(x, y) = 1 THEN PUT (x * 10 - 10, y * 10 - 10), flrtile1
IF map(x, y) = 2 THEN PUT (x * 10 - 10, y * 10 - 10), flrtile2
IF map(x, y) = 3 THEN PUT (x * 10 - 10, y * 10 - 10), wall
NEXT
NEXT
SLEEP

'flrtile1
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0
DATA 0,0,0,0,0,0,0,0,0,0

'flrtile2
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15
DATA 15,15,15,15,15,15,15,15,15,15

'wall
DATA 0,8,8,8,8,8,8,8,8,0
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 8,7,7,7,7,7,7,7,7,8
DATA 0,8,8,8,8,8,8,8,8,0

'map
DATA 3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3
DATA 3,2,1,2,1,2,1,2,1,2,3,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,1,2,3,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,3,3,3,3,3,3,3,3,3,3,3
DATA 3,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,3
DATA 3,3,3,3,3,2,3,3,3,3,3,3,3,3,3,3,1,3,3,3,3
DATA 3,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,1,2,1,2,1,2,1,3,1,2,1,2,1,2,1,2,1,2,1,3
DATA 3,2,1,2,1,2,1,2,3,2,1,2,1,2,1,2,1,2,1,2,3
DATA 3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3

‘~~~~~~~~~~Stop~~~~~~~~~~

****************************************************************************

There, that’s about it. Please feel free to read some of my other tutorials when I make them. ©2003, James Kinney E-mail me and tell me what you think: J_2_k@email.com Fell free to use all of the sprites/maps in this tutorial, seeing as they all suck anyway.