Fundamentals Overview IDE (Editor) Syntax Variables Data Types Declarations Scope Special Values Operators

Standard Functions Arithmetic Trigonometry Strings Arrays Date/Time Flow Control Procedures Printing Files Folders

Additional Capabilities Keyboard Sound Graphics Concepts Screen (text) Screen (drawing) Gaming (sprites) Event Trapping Errors System Calls

Graphics Concepts
QBasic is capable of displaying both text and graphics on the screen. In this section, the graphics output features are discussed.

Looking at it one way, creating graphics is simply about controlling the color of pixels on a screen. Of course, that description leaves out a ton of details but it does describe the basic capability supported by QBasic - setting the colors of pixels - individually, in groups, and quickly.

A QBasic program creates graphics by controlling the color of pixels on the screen, but it can also control the screen resolution. High resolution graphics (more pixels) creates smoother graphics whereas lower resolution graphics (fewer pixels) can be written/updated faster.

Unfortunately the maximum resolution mode in QBasic is only 640x480 and supports only 16 colors. The most colors supported by any QBasic screen mode is 256 at a resolution of 320x200. These modes are useful for creating constrained, but sometimes suprisingly good, graphics - particularly as compared to today's high resolution, 24 bit color graphics modes. Despite those limitations, QBasic games continue to attract programmers and users all over the world, especially in the game arena!

Here is a list of the QBasic functions that are discussed in this section.

Mode	screen
ViewPorts	view, window, pmap
Color Assignment	color, palette, palette using
Page Control	screen, pcopy
Points	pset

Screen Modes
QBasic supports several graphics screen modes, where each screen mode defines a combination of properties - resolution, colors, display pages, text size, and more.

One of the screen modes limits the display to text only, which is the default startup mode for all QBasic programs. In order to display any graphics other than text, a QBasic program must first change the screen mode.

QBasic supports 14 total modes, each assigned a simple number 0-13. Mode 0 is the default mode and allows only text to be displayed. All other modes 1-13 support pixel-by-pixel graphics creation in addition to supporting text display. Of these, only a few are used extensively by programmers. You can look up information on all modes in QBasic Help, but here are the most used graphics modes. All except mode 0 support a combination of text and graphics.

     Mode  Resolution  Colors        Pages     Text
     0     80x25       64 to 16      4         80x25/43/50
     7     320x200     16 to 16      0-7       40x25
     12    640x480     256K to 16    1         80x60/30
     13    320x200     64K to 256    1         40x25

Because of it's extended color range, and despite it low resolution, mode 13 is probably the most popular mode for QBasic programmers. Mode 7 is also popular because it's multiple pages can be used to provide flicker-free graphics animation. Because of it's high resolution, mode 12 is also popular.

Physical Coordinates
The physical coordinates of a screen are the same as the resolution. The maximum X physical coordinate corresponds to the width of the screen in pixels. The maximum Y physical coordinate corresponds to the height of the screen in pixels. Actually, since pixels start counting within zero, the last pixel coordinate is width-1 or height-1.

By default, the (0,0) coordinate center is at the upper-left corner of the screen. Positive X is towards the right of the screen. Positive Y is towards the bottom of the screen.

QBasic also supports the concept of "logical" coordinates. For example, a programmer might want the logical height/width of a screen to be 1.0 to make it easier to plot graphics of trignometric functions, whose values are -1 to +1. Defining a logical screen size is discussed later in this tutorial.

Creating Graphics - Built-In Functions
QBasic has useful, though limited, abilities to create graphics. Here's a list of the basic functions. All of these simply change the color of pixels, but are methods of doing so with minimal code and effort on the part of the programmer.

cls	clears the screen
color	sets the foreground color
point	returns cursor location or pixel color
pset	set the color of a pixel
preset	set the color of a pixel (reverses fg/bg)
circle	draws a circle, arc, or ellipse
line	draws a line or a box
draw	draws point to point composite lines
paint	fills closed areas on the screen

The details of these commands are discussed in a separate section of this tutorial.

Logical Coordinates
It can be convenient to have the screen coordinates (edge-to-edge) be different than the physical (pixel) resolution.

For example, in mode 12 (resolution 640x480) to get a full screen graphic display of trigonometry function, the QBasic programmer has to scale the results. Since trigonometry functions return values of -1 to 1, it would convenient if the center of the screen could be set to (0,0), the upper-left corner to (-1,1), and the lower-right corner to (1,-1). Then trigonometry function value would fill the screen with no further effort on the part of the QBasic programmer.

Simplifying source code by setting the coordinates on the screen to values other than the physical resolution is a common programming practice. The assigned coordinates are called "logical" coordinates and can be accomplished using the window function.

In the first example, the value of sin is plotted over 360 degrees. The resulting value is scaled by 320 to increase the position of the pixel to be seen. In the second example, the scaling is not required because the logical coordinates are to for the screen.

    screen 13                           # 320x200 
    for i = 1 to 360                    # loop over 360 degrees
         pset(i,sin(i*.017)*60+100),14  # sin result scaled
    next i

    screen 13                           # 320x200 
    window (-1,1)-(1,-1)                # set logical coordinate
    for i = 1 to 360                    # loop over 360 degrees
         pset(i,sin(i*.017)),14         # sin result scaled
    next i

For this simple code, the benefits are small. But when a program uses many lines of code and several types of graphics commands, the saving can be substantial, as can the impact on speed by reducing the number of calcuation that must be made within a loop.

Logical coordinates have the added advantage of working in any screen mode without having to change the code to match the screen mode resolution.

Sprites
It's common in gaming to have an image that you want to put on the screen and move around, including changing the image. Typically, these images are small, such as a ball, a gem, a symbol, or even a small figurine (human, animal, or somewhere inbetween). Such sprites are rectangular and generally measure no more than 30 pixels on a side. There can even be many sprites on a screen, new ones appearing, some moving off the screen, and some simply disappearing - all under QBasic program and user control.

A more detailed look at sprites is found in this section of the tutorial.

Pages
QBasic sets aside a fixed amount of memory to display screen content. In lower resolution, where some of the memory is unused, QBasic divides the total memory into equally sized pages, with up to 8 pages available, depending on the screen mode (resolution).

Any of the available pages can be written to, just as though it were a screen. But only one page may be displayed at a time. The advantage of this page management scheme is that writing to a hidden page can take place without being seen by the user. Then, one of the hidden pages can be made visible, making it appear as though the graphics were drawn instantly. This perception of speed is especially useful in creating games.

The screen function sets which pages are active or visible. Also, QBasic provides a pcopy function to quickly transfer information from one page to another. Here are examples of both.

    screen 13,1,2,2               # page 2 becomes active/visible
    pcopy frompage%, topage%      # copies one memory page to another

Text in Graphics Mode
All graphics screen modes support the display of text. QBasic can control font colors but has no built-in method of changing font type or size.

The print/print using/write statements are used to place text onto the screen, each with a different approach to formatting the output. The output of all three can be tailored using the tab/spc functions. Color foreground (the text color) and background (on which the text is written) can be set using the color statement.

Writing takes places at the current cursor location, which is reset under user control at the end of a print/print using/write statement. The cursor position may also be explicitly set using the locate statement.

Information about the screen (cursor position and screen content) can be retrieved using the csrlin, pos, and screen functions. See the reference information below for information on using these functions.

Graphics Viewport
QBasic also supports settings limits to the area where QBasic functions can create graphics or to write text, effectively creating a (usually) smaller "window" on the (usually) larger screen. The window is called a viewport and can be set using the view function as shown in the following example.

    VIEW [[SCREEN] (x1!,y1!)-(x2!,y2!) [,[color%] [,border%]]]

The view function can used multiple times. The viewport defined by the last usage will be used by QBasic's graphics statements.

Note that a viewport does not define a new starting point for coordinates. If the upper left coordinate of a viewport is 100,100, then any graphic function that uses coordinates less than 100,100 will simply not produce a visible result because it falls outside the graphics viewport. Only the results that fall within the viewport coordinates will be displayed.

QBasic also offers a function, pmap, which can convert from windows to viewport (and back) coordinates.

    pmap (coordinate#, n%)     # syntax

        n% = 0   enter window x to get viewport x coordinate
        n% = 1   enter window y to get viewport y coordinate
        n% = 2   enter viewport x to get window x coordinate
        n% = 3   enter viewport y to get window y coordinate

Note that when a graphics viewport is set, graphics function which fall outside the viewport simply do not display. This is different that a text viewport, where text functions may wrap to the next line in the text viewport. Graphics viewports have no wrap equivalent.

Text Viewport
As with graphics, a text viewport can also be created on a screen. The text and graphics viewports are independent of one another.

Normally, a QBasic program can write anywhere on the screen, over the entire width/column settings for the screen mode. However, QBasic also supports settings limits to the area where QBasic functions can write, effectively creating a (usually) smaller "window" on the screen. The window is called a viewport and can be set using the view print statements.

     view print top% to bottom%   # sets top/bottom rows

     the col%/row% values depend on the screen mode
       - col% is limited to 40 or 80 columns
       - row% is limited to 25, 30, 43, 50,or 60 rows

The view print function sets the upper/lower rows which are available for output by QBasic statements. Note that a text viewports always align with the left side of the screen. It does not provide a "window" of print opportunity in the same way that a graphics viewport does.

Note that when a text viewport is set, text output that extends to the right of the screen (or the screen's current WIDTH setting) will wrap to the next line (unlike graphics viewports which have no wrap equivalent).

Screen (Graphics) Function Reference
The following functions are available to display graphics.

• cls - clears the screen of all graphics and text

     
      cls           # clear entire screen
      cls 0         # clear entire screen
      cls 1         # clears viewport (screen if no viewport set)
      cls 2         # clears text viewport
      

• palette - changes color assignments

   
      palette attribute%, color&    # changes a palette attribute
      

  To use palette requires an EGA, VGA, or MCGA adapter.

• palette using - changes color assignment (array based)

     
      palette using myarray(index%)   # array has multiple changes
      

  index% gives the starting index in the array from which to take color values.

  To use palette using requires an EGA, VGA, or MCGA adapter.

• pcopy - copies one video memory page to another

     
      pcopy sourcepage%, destinationpage%   # syntax
      pcopy 1,3                             # copy page 1 to page 3
      

  To use pcopy, the screen mode must support memory pages.

• pmap - returns window coordinate equivalent to a viewport coordinate, or vice versa

     
          pmap (coordinate#, n%)        ' coordinate is window or viewport coordinate
                                        '  n%    value to return
                                        '  0  -  window x coordinate
                                        '  1  -  window y coordinate
                                        '  2  -  viewport x coordinate
                                        '  3  -  viewport y coordinate
  
        result% = pmap(42,1)            ' returns window y coordinate
      

• screen - sets screen resolution/color and manages active/visual pages

     
      SCREEN mode% [,[colorswitch%] [,[activepage%] [,visualpage%]]]
                # colorswitch%:  0-color 1-monocolor
                # activepage%:   page to which graphics are written
                # visualpage%:   page to display
     
      SCREEN 1        '320 x 200 graphics
      LINE (110, 70)-(190, 120), , B
      LINE (0, 0)-(320, 200), 3, , &HFF00
  
      colorswitch%    A value (0 or 1) that switches between color
                      and monocolor display (modes 0 and 1 only):
  
                        Mode    Value       Action
                        ----    --------    --------------
                        0       0           Disables color
                        0       Nonzero     Enables color
                        1       0           Enables color
                        1       Nonzero     Disables color
  
      activepage%     page being written to (may be hidden)
      visualpage%     page currently displayed
  
      

• view - sets size/location of the text and graphics viewports

   
      view (x,y)-(x,y),color%,border%         # syntax
      view (100,100)-(300,300), 12, 4         # relative to viewport
      view screen (100,100)-(300,300), 12, 4  # relative to screen
  
      

• view print - sets boundaries of screen text viewport

      view print top% to bottom%  # syntax
      view print 5 to 10          # viewport is rows 5-10
      

  If you omit the toprow% and bottomrow% arguments, VIEW PRINT sets the entire screen as the text viewport. Ranges for top% and bottom% depend on the screen mode.

• window - sets the logical coordinates of the current graphics viewport

     
      window (50,50)-(200,200)          # (50,50) is lower left
                                        # (200,200) is upper right
  
      window screen (50,50)-(200,200)   # (50,50) is lower left
                                        # (200,200) is upper right
      

If you have any suggestions or correction, please let me know.