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.]