ANIMATED GRAPHICS IN QBASIC
a tutorial by Mallard
型[ note - this tutorial focuses on EGA graphics. ]��
型[ for information on VGA graphics, send e-mail ]��
型[ to Mallard at mallard@gcomm.com. ]��
This tutorial is intended for intermediate programmers
who are proficient with standard QBasic commands.
taken from The QBasic Page at http://www.wp.com/80948/qb/
컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴
型[table of contents]��
(1) what can QBasic do?
(2) using DATA to create graphics
(3) GETting and PUTting graphics
(4) so how does this work?
컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴
型[what can QBasic do?]��
QBasic was not meant to be a great environment for graphic-oriented
applications. Instead, it was meant to be a learner's language for struc-
tured programming as well as basic programming techniques. However, using
some of its functions, we can achieve some level of graphic quality while
keeping in the language's power.
The best screen mode for this is SCREEN 7, a 320 x 200 16-color
screen mode. While this may seem primitive, the mode is fast and has mul-
tiple "pages" to eliminate any flicker whatsoever. VGA graphics can be
done, but without a very fast computer, huge amounts of flicker occur.
Of course, without this tutorial, you can use LINEs, CIRCLEs, and
PSETs, but this method is far faster, better, and more professional.
All methods explained in this document are MY OWN, developed by myself
over the years.
�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-
型[using DATA to create graphics]��
Graphics using this method are created beforehand using the GRAPHICS
editor written by myself specifically for this tutorial, or using the DATA
statement to read in color values. I'll start by explaining how to use the
DATA statement to create graphics.
First, you have to start off by deciding how large your graphic is
going to be. For instance, you might choose 10 pixels by 10 pixels. To
make the graphic, start by creating a table like this:
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
DATA 00,00,00,00,00,00,00,00,00,00
Then, changing the QB editor from insert to overwrite using the
INSERT key on your keyboard, change the color value of black (your back-
ground color as 00) to the color you desire. The color table is as foll-
ows:
00 - black 08 - dark grey
01 - dark blue 09 - light blue
02 - dark green 10 - light green
03 - dark cyan 11 - light cyan
04 - dark red 12 - light red
05 - dark purple 13 - magenta
06 - orange brown 14 - yellow
07 - grey 15 - bright white
For instance, to create a graphic of a fire, use this set of DATA
statements:
DATA 00,00,00,04,00,00,04,00,00,00
DATA 00,00,04,04,00,04,04,04,00,00
DATA 00,00,04,04,04,04,04,04,00,00
DATA 00,04,04,12,12,04,04,04,00,00
DATA 00,04,04,12,12,04,04,00,00,00
DATA 00,04,04,12,12,04,04,00,00,00
DATA 00,04,12,12,12,04,04,04,00,00
DATA 00,04,12,14,14,12,04,04,00,00
DATA 04,04,12,14,14,14,12,04,00,00
DATA 04,04,12,14,14,14,12,04,00,00
Note that these DATA statements do nothing without using the method
explained below to READ these color values into usable form. Before going
on, however, try making some graphics on your own of varying sizes to try
out using the following method.
컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴컴
型[GETting and PUTting graphics]��
Now you should have a set of DATA statements that you think will look
like an object of some sort. What next? You'll have to use this routine
to read the values into an array and then place them on the screen. Make
sure you've already used the SCREEN 7 statement first.
xlength = 10 'replace 10 with the length of your picture
ylength = 10 'replace 10 with the width of your picture
FOR y = 1 to ylength
FOR x = 1 to xlength
READ z
PSET(x, y), z
NEXT
NEXT
This should give you what your graphic looks like. If you're satis-
fied with it, go on. If not, alter it and try loading it again.
Now that you've got a good picture, you'll need to put it into memory
so the program doesn't have to redraw it every time. This saves a LOT of
computing power. To do this, you'll have to DIM an array and then GET the
graphic into the array. Here's how:
DIM graphicname(xlength * ylength) 'replace graphicname with a good name
'for your graphic
GET (0,0)-(xlength, ylength), graphicname
CLS
Okay! You've got your picture saved in the computer's temporary
memory. To view the graphic, use the PUT statement like this:
PUT (x, y), graphicname 'replace x & y with where you want
'the graphic & change graphicname
That's it for this section. You can now do simple graphics. For
a good way to create smooth animation, read on to the next section.
�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-�-
型[So how does this work?]��
You now know how to create graphic data using the DATA statement,
how to read that data and place it on the screen, and how to GET and PUT
the graphic itself. However, creating graphics that move is a bit more
complex, though not terribly difficult.
What you'll have to do is set the number of *screen pages* you'll
be using. When you use the SCREEN statement, you're only using one page-
page 0. However, with modifications of the SCREEN statement, you can
create graphics on a different "page" and then copy them to the screen.
This eliminates CLS'ing all the time.
First off, your SCREEN 7 statement should be changed to SCREEN
7,0,1,0. This means that you'll be using page 1 to do graphics and page
0 will be what the user sees. Once you've done this, all your graphics
work WON'T be shown to the user until you use the PCOPY 1,0 statement.
Here's an example of moving your graphic that you created earlier
(see above) across the screen.
SCREEN 7,0,1,0 '- using page 1 as work page & page
'0 as visual.
.... '- insert the code you used to create
'your graphic using the method above
CLS
WHILE x < 270
PUT (x, 100), graphicname '- replace graphicname w/ the name of
PCOPY 1,0 'your graphic
CLS
x = x + 1
WEND
The code above can be modified to whatever your needs. If you need
more help with using the graphic techniques explained in this tutorial,
please feel free to e-mail Mallard at mallard@gcomm.com or visit The QBasic
Page at http://www.wp.com/80948/qb/.
[End of Document.]
(
geocities.com/siliconvalley/pines) (
geocities.com/siliconvalley)