This tutorial will assume you have never used Graphics before in quick basic or in any other programming language. This tutorial will also only show you how to use the "primitives" as their called in Quick basic. (ie. line and circle).
Commands covered
SCREEN Before we jump into creating graphics we first
have to tell the computer we want to work with graphics. When you first run
a program it's in text mode. The command we want to use is "SCREEN". The format
for the screen statement is,
SCREEN [mode][,[colorswitch]][,[activepage]][,[visualpage]]
"Mode" tells the computer what graphics mode is going
to be used(more on modes later).
"Colorswitch" is used for monochrome monitors only and has no real use
anymore so leave it blank.
"Activepage" Tells the computer to make this page active. All work will
be done on this page. The number of pages depends on the mode.
"Visualpage" Tells the computer to make this page Visual.
Screen
modes |
|
Mode | Description |
SCREEN 0: Text only | Either
40 x 25, 40 x 43, 40 x 50, 80 x 25, 80 x 43, or 80 x 50 text format with 8 x 8 character box size (8 x 14, 9 x 14, or 9 x 16 with EGA or VGA) 16 colors assigned to 2 attributes 16 colors assigned to any of 16 attributes (with CGA or EGA) 64 colors assigned to any of 16 attributes (with EGA or VGA) |
SCREEN 1: 320 x 200 graphics |
40 x 25 text format, 8 x 8 character box 16 background colors and one of two sets of 3 foreground colors assigned using COLOR statement with CGA 16 colors assigned to 4 attributes with EGA or VGA |
SCREEN 2: 640 x 200 graphics |
80 x 25 text format with character box size of 8 x 8 16 colors assigned to 2 attributes with EGA or VGA |
SCREEN 3: Hercules adapter required, monochrome monitor only: 720 x 348 graphics |
80 x 25 text format, 9 x 14 character box 2 screen pages (1 only if a second display adapter is installed) PALETTE statement not supported |
SCREEN 4: 640 x 400 graphics |
Supports Olivetti (R) Personal Computers models M24, M240, M28, M280, M380,
M380/C, M380/T and AT&T (R) Personal Computers 6300 series 80 x 25 text format, 8 x 16 character box 1 of 16 colors assigned as the foreground color (selected by the COLOR statement); background is fixed at black. Warning: Olivetti personal computers running
3XBOX under OS/2 should avoid |
SCREEN 7: 320 x 200 graphics |
40 x 25 text format, character box size 8 x 8 32K page size, page ranges are 0-1 (64K), 0-3 (128K), or 0-7 (256K) Assignment of 16 colors to any of 16 attributes |
SCREEN 8: 640 x 200 graphics |
80 x 25 text format, 8 x 8 character box 64K page size, page ranges are 0 (64K), 0-1 (128K), or 0-3 (246K) Assignment of 16 colors to any of 16 attributes |
SCREEN 9: 640 x 350 graphics |
80 x 25 or 80 x 43 text format, 8 x 14 or 8 x 8 character box size |
SCREEN 10: 640 x 350 graphics, monochrome monitor only |
80 x 25 or 80 x 43 text format, 8 x 14 or 8 x 8 character box size 128K page size, page range is 0 (128K) or 0-1 (256K) Up to 9 pseudocolors assigned to 4 attributes |
Screen 11: 640 x 480 graphics |
80 x 30 or 80 x 60 text format, character box size of 8 x 16 or 8 x 8 Assignment of up to 256K colors to 2 attributes |
Screen 12: 640 x 480 graphics |
80 x 30 or 80 x 60 text format, character box size of 8 x 16 or 8 x 8 Assignment of up to 256K colors to 16 attributes VGA required |
Screen 13: 320 x 200 graphics |
40 x 25 text format, character box size of 8 x 8 Assignment of up to 256K colors to up to 256 attributes |
Now that you know about the screen statement
lets show you a few examples of how to use it.
SCREEN 13
This statement puts the monitor into screen mode 13. This is the mode that most
games are made in as it offers 256 colors.
SCREEN 7,,0,1
In the above example the screen is set to mode 7 (320X200 at 16 colors) with
video page 0 being active ready to be drawn on and video page 1 being displayed.
If a screenmode has the ability to use video pages then
USE THEM! It will reduce screen flicker. Sadly if you run any vga mode you can't
use video pages.screen 9 offers the best graphics while still offering video
pages(if you have a 128k ega adapter or better).
Now lets see just how the computer sees the screen.
The computer gives each point on the screen a set of 3 numbers.
1.an x coordinate
2.a y coordinate
3.a color
The X coordinate is a number that comes from along the top of the screen While the Y coordinate is a number that comes from the left side of the screen. Both x and y meat in the upper left side at point (0,0). Because the computer starts counting from 0 a screen that's 320X200 will have 319 as the largest possible x and 199 as the largest possible y. The color starts at 0 and it's max will depend on the screen mode you choose.
In the above example a black dot has been placed at (1,2). This is how all- screenmodes work.
Now it's time to introduce you to your first "primitive".
PSET is the simplest drawing function.
format: PSET (X,Y),C
the x and y are the coordinates while the c is the color of the point. Now lets do something useful with the pset command while at the same time testing what we have learned at the same time.
lets draw a line from (10,10) to (10,20)
screen 13 ' this puts us into 320X200 256 color
graphics
for y=10 to 20 ' This sets up a loop starting at 10 and ending
at 20
pset (10,y),1 'This draws a point at (10,y) in color 1
next y 'if there is more numbers to loop through then loop
end 'Quits the program
Now I be your asking yourself if there is a
easier way to draw a line. Luckily their is as qbasic has a built in command
just for that and more.
At first line seems to be a simple command but it it really quite a powerful tool you'll use often.
Format: LINE (x1, y1)-(x2, y2) [, [color], [B|BF], [style]]
x1 and y1 is the start of the line while x2 and y2 is the end of the line.
Color is well the color of the line :-)
"b" and "bf" both create a box with corners at x1-y1 and x2-y2. "b" creates an outline of a box while bf creates a solid box.
"style" is used to create dashed lines and is outside of the scope of this tutorial.
lets look at that last program again and see what we can do to make it simpler.
screen13 ' this is still needed
for y=10 to 20 ' This can go as the line statement will do the
looping for us
pset (10,y),1 'This needs to be changed to a line command
next y 'This to can go
end 'Quits the program
here is what we end up with
screen13
line (10,10)-(10,20),1
end 'Quits the program
Even though this is a simple program and what we did will have little impact on the program it's good to adopt good programming skills early because later when your programs start growing to hundreds of lines you'll want to trim things down as much as you can.
Now lets draw a box instead of a line.
screen13
line (10,10)-(10,20),1,b
end 'Quits the program
Simple right. Now what about a filled box?
screen13
line (10,10)-(10,20),1,bf
end 'Quits the program
Now for the last command
format: CIRCLE (x, y), radius [, [color],[start], [stop], [ratio]]
The circle command has several functions that go beyond the scope of a basic tutorial so I'll just cover drawing a basic circle.
For those who are a bit rusty on their math the radius of a circle of 1/2 it's diameter. So if you want to draw a circle that's 20 pixels wide you'll need a radius of 10.
The program below draws a circle at point (50,50) in color 2 and is 30 pixels wide.
screen 13The next tutorial will introduce us to sprites and how they work.