SECTION 6

6. Color, Animation and Sprite Graphics Statements Unique to the C128

TABLE OF CONTENTS * 6.1 GRAPHICS OVERVIEW * 6.1.1 Graphics Features * 6.1.2 Command Summary * 6.2 GRAPHICS PROGRAMMING ON THE COMMODORE 128 * 6.2.1 Choosing Colors * Figure 6-1. Source Numbers. * Figure 6-2. Color Numbers in 40-Column Format. * Figure 6-3. Color Numbers in 80-Column Format. * 6.2.2 Types of Screen Display * 6.2.3 Selecting the Graphic Mode * Figure 6-4. Graphic Modes. * Figure 6-5. Clear Parameters. * 6.2.4 Displaying Graphics on the Screen * 6.2.4.1 Drawing a Circle - The CIRCLE Command * Figure 6-6. Arrangement of x and y coordinates. * 6.2.4.2 Drawing a Box - The BOX Command * 6.2.4.3 Drawing Lines, Points and Other Shapes - The DRAW Command * 6.2.4.4 Painting Outlined Areas - The PAINT Command * 6.2.4.5 Displaying Characters on a Bit-Mapped-Screen - The CHAR Command * 6.2.4.6 Creating a Graphics Sample Program * 6.2.4.7 Changing the Size of Graphics Images - The SCALE Command

* 6.3 SPRITES: PROGRAMMABLE, MOVABLE OBJECT BLOCKS * 6.3.1 Sprite Creation * 6.3.2 Using Sprite Statements in a Program * 6.3.3 Drawing the Sprite Image * 6.3.4 Storing the Sprite Data with SSHAPE * 6.3.5 Saving the Picture Data in a Sprite * 6.3.6 Turning on Sprites * 6.3.7 Moving Sprites with MOVSPR * Figure 6-7. Visible Sprite coordinates. * 6.3.8 Creating a Sprite Program * 6.3.9 Sprite Definition Mode - The SPRDEF Command * 6.3.10 Sprite Creation Procedure in SPRite DEFinition Mode * 6.3.11 Adjoining Sprites * 6.3.12 Storing Sprite Data in Binary Files * Figure 6-8. Sprite Data Requirements. * Figure 6-9. Memory Address Ranges for Sprite Storage. * 6.3.12.1 BSAVE * 6.3.12.2 BLOAD

6.1 GRAPHICS OVERVIEW

In C128 mode, the Commodore 128 BASIC 7.0 language provides may new and powerful commands and statements that make graphics programming much easier. Each of the two screen formats available in C128 mode (40 columns and 80 columns) is controlled by a seperate microprocessor chip. The 40-column chip is called the Video Interface Controller, or VIC for short. The 80-column chip is referred to as the 8563, or Video Display Controller (VDC). The VIC chip, which provides 16 colors, controls all the highly detailed graphics called bit-mapped graphics. The 80-column chip, which also offers 16 colors, only displays characters and character graphics. Thus, all detailed graphic programs in C128 mode must be done in 40-column format.

6.1.1 Graphics Features

As part of its impressive C128 mode graphics capabilities, the Commodore 128 provides:

• 13 specialized graphics commands
• 16 colors
• Six different display modes
• Eight programmable movable objects called SPRITES
• Combined graphics/text displays

All these formats can be integrated to provide a versatile, easy to use graphics system.

6.1.2 Command Summary

Here is a brief explanation of each graphic command:

BOX

Draws rectangles on the bit map screen.

CHAR

Displays characters on the bit map screen.

CIRCLE

Draws circles, ellipses and other geometric shapes on the bit map screen.

COLOR

Selects colors for screen border, foreground, background and characters.

DRAW

Draws lines and points on the bit map screen.

GRAPHIC

Selects a screen display (text, bit map or split screen bit map).

GSHAPE

Places the image stored into a text string variable on the bit map screen.

PAINT

Fill areas on the bit map screen with color.

SCALE

Sets the relative size of the images on the bit map screen.

SPRDEF

Enters sprite definitions mode to edit sprites.

SPRITE

Enables, colors, sets sprite screen priorities, and expands a sprite.

SPRSAV

Stores a text string variable into a sprite storage area and vice versa.

SSHAPE

Stores the image of a portion of the bit map screen into a text string variable.

Most of these commands are described in the examples in this section. See Chapter V, BASIC 7.0 Encyclopaedia for detailed format and information on all graphic commands, and BASIC Functions for all graphic functions discussed in this section.

6.2 GRAPHICS PROGRAMMING ON THE COMMODORE 128

This following section describes a step-by-step graphics programming example. As you learn each graphics command, add it to a program, you will build as you read this section. When you are finished, you will have a complete graphics program.

6.2.1 Choosing Colors

The first step in graphics programming is to choose colors for the screen background, foreground and border. To select colors, type:

COLOR source, color

Figure 6-1. Source Numbers.

Number	Source
0	40-column background color (VIC)
1	Foreground for the graphics screen (VIC)
2	Foreground color 1 for the multicolor screen (VIC)
3	Foreground color 2 for the multicolor screen (VIC)
4	40-column (VIC) border (whether in text or graphics mode)
5	Character color for 40- or 80-column text screen
6	80-column background color (8563)

Figure 6-2. Color Numbers in 40-Column Format.

Color Code	Color		Color Code	Color
1	Black		9	Orange
2	White		10	Brown
3	Red		11	Light Red
4	Cyan		12	Dark Gray
5	Purple		13	Medium Gray
6	Green		14	Light Green
7	Blue		15	Light Blue
8	Yellow		16	Light Gray

Figure 6-3. Color Numbers in 80-Column Format.

Color Code	Color		Color Code	Color
1	Black		9	Dark Purple
2	White		10	Brown
3	Dark Red		11	Light Red
4	Light Cyan		12	Dark Cyan
5	Light Purple		13	Medium Gray
6	Dark Green		14	Light Green
7	Dark Blue		15	Light Blue
8	Light Yellow		16	Light Gray

6.2.2 Types of Screen Display

Your C128 has several different ways of displaying information on the screen; the parameter "source" in the COLOR command pertains to different modes of screen display. The types of video display fall into three categories.

The first one is text display, which displays only characters, such as letters, numbers, special symbols and the graphics characters on the front faces of most C128 keys. The C128 can display text in both 40-column and 80-column screen formats.

The second category of display mode is used for highly detailed graphics, such as pictures and intricate drawings. This type of display mode includes standard bit map mode and multicolor bit map mode. Bit map modes allow you to control each and every individual screen dot or pixel (picture element). This allows considerable detail in drawing pictures and other computer art. The 80 column display is intended to display text.

The difference between text and bit map lies in the way in which each screen addresses and stores information. The text screen can only manipulate entire characters, each of which covers an area of 8 by 8 pixels on your screen. The more powerful bit map mode exercises control over each and every pixel on your screen.

The third type of screen display, split screen, is a mixture of the first two types. The split screen display outputs part of the screen as text and part in bit map mode (either standard or multicolor). The C128 is capable of this because it uses two seperate and different parts of the computer's memory to store the two screens: one part for the text, and the other for the graphics screen.

Type the following short program:

10 COLOR 0,1:REM TEXT BACKGROUND COLOR = BLACK
20 COLOR 1,3:REM FOREGROUND COLOR FOR BIT MAP SCREEN = RED
30 COLOR 4,1:REM BORDER COLOR = BLACK

This example colors the background black, the foreground red and the border black.

6.2.3 Selecting the Graphic Mode

The next graphics programming step is to select the appropriate graphic mode. This is done using the GRAPHIC command, whose format is as follows:

GRAPHIC <mode[,c] [,s] / CLR>

Figure 6-4. Graphic Modes.

Mode	Description
0	40-column (VIC) standard text
1	Standard bit map
2	Standard bit map (split screen)
3	Multicolor bit map
4	Multicolor bit map (split screen)
5	80-column text

The parameter c stands for CLEAR. Figure 6-5 explains the values associated with CLEAR.

Figure 6-5. Clear Parameters.

C Value	Description
0	Do not clear the graphics screen
1	Clear the graphics screen

When you first run your program, you still want to clear the graphics screen for the first time, so set c equal to 1 in the GRAPHIC command. If you run it a second time, you may want your picture on the screen, instead of drawing it all over again. In this case, set c equal to 0.

The s parameter specifies in split screen mode at which line number the text screen starts (line numbers start counting at zero, so line 10 is the eleventh line). If you omit the s parameter and select a split screen graphic mode (2 or 4), the text screen portion is displayed in rows 19 through 24; the portion above is bit mapped. The s parameter allows you to change the starting line of the text screen to any line on the screen, ranging from 1 through 24. A zero as s parameter indicates the screen is not split, and all is text.

The final GRAPHIC command parameter is CLR. When you first issue a bit map GRAPHIC command, the Commodore 128 allocates a 9K area for your bit mapped screen information. 8K is reserved for the data for your bit map and the additional 1K is dedicated for the color data (video matrix). Since 9K is a substantial block of memory, you may want to use it again for another purpose later in your program. This is the purpose of CLR. It reorganizes the Commodore 128 memory and gives you back the 9K of memory that was dedicated to the bit map screen, so you can use it for other purposes.

The format for CLR is as follows:

GRAPHIC CLR

When using this format, omit all other GRAPHIC command parameters.

Add the following command to your program. It places the C128 in standard bit map mode and allocates an 8K bit map screen (and 1K of color data) for you to create graphics.

40 GRAPHIC 1,1

The second 1 in this command clears the bit map screen. If you do not want to clear the screen, change to second 1 to 0 (or omit it completely).

NOTE: If you are in bit map mode and are unable to return to the text screen, press the {run/stop} and {restore} keys at the same time, or press the {esc} key followed by {x}, to return to the 80-column screen. Even though you can only display graphics with the VIC (40-column) chip, you can still write graphic programs in 80-column format. If you have the Commodore 1901 and you want to view your graphics program while it is running, you must select the 40-column output by switching the slide switch on the monitor to 40-column output.

6.2.4 Displaying Graphics on the Screen

So far, you have selected a graphics mode and the colors you want. Now you can start displaying graphics on the screen. Start with a circle.

6.2.4.1 Drawing a Circle - The CIRCLE Command

To draw a circle, use the CIRCLE statement as follows:

60 CIRCLE 1,160,100,40,40

This displays a circle in the center of the screen. The CIRCLE statement has nine parameters you can select to achieve various types of circles and geometric shapes. For example, by changing the numbers in the CIRCLE statement in line 60 you can obtain different size circles or variations in the shape (e.g. an oval). The CIRCLE statement adds power and versatility in programming Commodore 128 graphics in BASIC. The meaning of the numbers in the CIRCLE statement is explained under the CIRCLE listing in Chapter V, BASIC 7.0 Encyclopaedia.

On your Commodore 128 screen, the point where x=0 and y=0 is at the top left corner of the screen and is referred as the HOME position. In standard geometry however, the point where x and y equal 0 is in the bottom left corner of a graph. Figure 6-6 shows the arrangement of x (horizontal) and y (vertical) screen coordinates and the four points at the corners of the C128 screen.

Figure 6-6. Arrangement of x and y coordinates.

Here's what the numbers mean:

• 1 is the color source (in this case the foreground).
• 160 is the starting x (horizontal) coordinate.
• 100 is the starting y (vertical) coordinate.
• 40 is the radius.

6.2.4.2 Drawing a Box - The BOX Command

Now try a box. To draw a box, type:

80 BOX 1,20,60,100,140,0,1

This draws a solid box to the left of the circle. To find out what the numbers in the BOX statement mean, consult Commands and Statements. The BOX statement has seven parameters you can select and modify to produce different types of boxes. Change the foreground color an draw the outline of a box to the right of the CIRCLE with these statements:

90 COLOR 1,9:REM CHANGE FOREGROUND COLOR
100 BOX 1,220,60,300,140,0,0

Experiment with the BOX statement to produce different variations of rectangles and boxes.

6.2.4.3 Drawing Lines, Points and Other Shapes - The DRAW Command

You now know how to select graphic modes and colors and how to display circles and boxes on the screen. Another graphics statement, DRAW, lets you draw lines on the screen just as you would with a pencil and a piece of paper. The following statement draws a line below the boxes and circle.

120 DRAW 1,20,180 TO 300,180

To erase a drawn line, change the source (1) in the DRAW statement to 0. The line is drawn with the background color which actually erases the line. Try using different coordinates and other sources to become accustomed to the DRAW statement.

The DRAW statement can take another form that allows you to DRAW a line, change direction and then DRAW another line, so the lines are continuous. For example, try this statement:

130 DRAW 1,250,0 TO 30,0 TO 40,40 TO 250,0

This statement DRAWs a triangle on the top of the screen. The four pairs of number represent the x and y coordinates for the three points on the triangle. Notice the first and last coordinates are the same, since you must finish drawing the triangle on the same point you started. This form of DRAW statement gives you the power to DRAW almost any geometric shape, such as trapezoids, parallellograms and polygons.

The DRAW statement also has a third form.

You can DRAW one point at a time by specifying the starting x and y values as follows:

150 DRAW 1,160,160

As you can see, the DRAW statement has versatile features which give you the capability to create shapes, lines, points and a virtually unlimited number of computer drawings on your screen.

6.2.4.4 Painting Outlined Areas - The PAINT Command

The DRAW statement allows you to outline areas on the screen. What if you want to fill areas within your drawn lines? That's where the PAINT statement comes in. The PAINT statement does exactly what the name implies - it fills in, or PAINTs, outlined areas with color. Just as a painter covers the canvas with paint, the PAINT statement covers the areas of the screen with one of the 16 colors. For example, type:

160 PAINT 1,150,97

Line 160 PAINTS the circle you have drawn in line 60. The PAINT statement fills a defined area until a specific boundery is detected according to which color source is indicated. When the Commodore 128 finishes PAINTing, it leaves the pixel cursor at the point where PAINTing began (in this case, at point 150,97).

Here are two more PAINT statements:

180 PAINT 1,50,25
200 PAINT 1,255,125

Line 180 PAINTs the triangle and line 200 PAINTs the empty box.

*IMPORTANT PAINTING TIP: If you choose a starting point in you PAINT statement which is already colored from the same color source, Commodore 128 will not PAINT the area. You must choose a starting point which is entirely inside the boundery of the shape you want to PAINT. The starting point cannot be on the boundery line of a pixel that is colored from the same source. If you specify a PAINT coordinate that is the same color you are PAINTing, nothing happens.

6.2.4.5 Displaying Characters on a Bit-Mapped-Screen - The CHAR Command

So far, the example program has operated in standard bit map mode. Bit map mode uses a completely different area of memory to store the screen data than text mode (the mode in which you enter programs and text). If you enter bit map mode, and try to type characters onto the screen, nothing happens. This is because the characters you are typing are being displayed on the text screen and you are looking at the bit map screen. Sometimes it is necessary to display characters on the bit map screen, when you are creating an plotting charts and graphs. The CHAR command is designed especially for this purpose. To display standard characters on a bit map screen, use the CHAR statement as follows:

220 CHAR 1,11,24,"GRAPHIC EXAMPLE"

This displays the text "GRAPHIC EXAMPLE" starting at line 25, column 12. The CHAR command can also be used in text mode, however it is primarily designed for the bit map screen.

6.2.4.6 Creating a Graphics Sample Program

So far, you have learned several graphic statements. Now tie the program together and see how the statements work at the same time. Here's how the program looks now. The color statements in lines 70, 110, 140, 170, 190 and 210 are added to display each object in a different color.

10 COLOR 0,1                            :REM SELECT BACKGROUND COLOR
20 COLOR 1,3                            :REM SELECT FOREGROUND COLOR
30 COLOR 4,1                            :REM SELECT BORDER COLOR
40 GRAPHIC 1,1                          :REM SELECT BIT MAP MODE
60 CIRCLE 1,160,100,40,40               :REM DRAW A CIRCLE
70 COLOR 1,6                            :REM CHANGE FOREGROUND COLOR
80 BOX 1,20,60,100,140,0,1              :REM DRAW A BLOCK
90 COLOR 1,9                            :REM CHANGE FOREGROUND COLOR
100 BOX 1,220,62,300,140,0,0            :REM DRAW A BOX
110 COLOR 1,9                           :REM CHANGE FOREGROUND COLOR
120 DRAW 1,20,180 TO 300,180            :REM DRAW A LINE
130 DRAW 1,250,0 TO 30,0 TO 40,40 TO 250,0:REM DRAW A TRIANGLE
140 COLOR 1,15                          :REM CHANGE FOREGROUND COLOR
150 DRAW 1,160,160                      :REM DRAW A POINT
160 PAINT 1,150,97                      :REM PAINT IN CIRCLE
170 COLOR 1,5                           :REM CHANGE FOREGROUND COLOR
180 PAINT 1,50,25                       :REM PAINT IN TRIANGLE
190 COLOR 1,7                           :REM CHANGE FOREGROUND COLOR
200 PAINT 1,225,125                     :REM PAINT IN EMPTY BOX
210 COLOR 1,11                          :REM CHANGE FOREGROUND COLOR
220 CHAR 1,11,24,"GRAPHIC EXAMPLE"      :REM DISPLAY TEXT
230 FOR I=1 TO 5000:NEXT:GRAPHIC 0,1:COLOR 1,2

Here's what the program does:

• Lines 10 through 30 select a COLOR for the background, foreground and border, respectively.
• Line 40 chooses a graphic mode.
• Line 60 displays a CIRCLE.
• Line 80 draws a colored-in BOX.
• Line 100 draws a outline of a BOX.
• Line 120 DRAWs a straight line at the bottom of the screen.
• Line 130 DRAWs a triangle.
• Line 150 DRAWs a single point below the circle.
• Line 160 PAINTs the circle.
• Line 180 PAINTs the triangle.
• Line 200 PAINTs the empty box.
• Line 220 prints the CHARacters "GRAPHICS EXAMPLE" at the bottom of the screen.
• Line 230 delays the program so you can watch the graphics on the screen, switches back to text mode and colors the characters black.

If you want the graphics to remain on the screen, omit the GRAPHIC statement in line 230.

6.2.4.7 Changing the Size of Graphics Images - The SCALE Command

The Commodore 128 has another graphics statement which offers additional power to your graphics system. The SCALE statement offers the ability to scale down (reduce) the size of graphic images on your screen. The SCALE statement also accomplishes another task, which can be explained as follows.

In standard bit map mode, the 40 column screen has 320 horizontal coordinates and 200 vertical coordinates. In multicolor bit map mode, the 40 column screen has only half the horizontal resolution of standard bit map mode, which is 160 by 200. This reduction in resolution is compensated for by the additional capability of using two additional colors for a total of four colors, within an 8 by 8 character matrix. Standard bit map mode can only display two colors within an 8 by 8 character matrix.

When you use the SCALE statement, both standard bit map and multicolor bit map modes have coordinates which are proportional to another. The scale ranges for 0 through a maximum of 1023 horizontal coordinates. This is true regardless of whether you are in standard bit map or multicolor mode.

The SCALE your screen, use:

SCALE 1,x,y

To turn off SCALEing, type:

SCALE 0

To see the effect of SCALEing on your program add in line 50:

50 SCALE 1,500,500

See Section 17, paragraph 17.81, of Chapter V for more details on the SCALE command.

NOTE: SCALE comes after GRAPHIC and does not affect CHAR.

Here are some additional example programs using the graphics statements you just learned:

10 COLOR 0,1
20 COLOR 1,8
30 COLOR 4,1
40 GRAPHIC 1,1
50 FOR I=80 TO 240 STEP 10
60 CIRCLE 1,I,100,75,75
70 NEXT I
80 COLOR 1,5
90 FOR I=80 TO 250 STEP 10
100 CIRCLE 1,I,100,50,50
110 NEXT I
120 COLOR 1,7
130 FOR I=50 TO 280 STEP 10
140 CIRCLE 1,I,100,25,25
150 NEXT I
160 FOR I=1 TO 7500:NEXT I
170 GRAPHIC 0,1:COLOR 1,2

10 GRAPHIC 1,1
20 COLOR 0,1
30 COLOR 4,1
40 FOR I=1 TO 50
50 Z=INT (((RND (1))*16)+1)*1
60 COLOR 1,Z
70 X=INT (((RND (1))*30)+1)*10
80 Y=INT (((RND (1))*20)+1)*10
90 U=INT (((RND (1))*30)+1)*10
100 V=INT (((RND (1))*20)+1)*10
110 DRAW 1,X,Y TO U,V
120 NEXT I
130 SCNCLR
140 GOTO 40

10 COLOR 4,7:COLOR 0,7:COLOR 1,1
20 GRAPHIC 1,1
30 FOR I=400 TO 1 STEP -5
40 DRAW 1,150,100 TO I,1
50 NEXT I
60 FOR I=1 TO 400 STEP 5
70 DRAW 1,150,100 TO 1,I
80 NEXT I
90 FOR I=40 TO 320 STEP 5
100 DRAW 1,150,100 TO I,320
110 NEXT I
120 FOR I=320 TO 30 STEP -5
130 DRAW 1,150,100 TO 320,I
140 NEXT I
150 FOR I=1 TO 7500:NEXT I
160 GRAPHIC 0,1:COLOR 1,1

Type the examples into your computer. RUN and SAVE them for future reference. One of the best ways to learn programming is to study program examples and see how the statements perform their functions. You'll soon be able to use graphics statements to create impressive graphics with your Commodore 128.

If you need more information on any BASIC statement or command, consult Chapter V, BASIC 7.0 Encyclopaedia.

You now have a set of graphic commands that allows you to create an almost unlimited number of graphics displays. But Commodore 128 graphics abilities do not end here. The Commodore 128 has another set of statements, known as SPRITE graphics, which make the creation and control of graphic images fast, easy and sophisticated. These high-level statements allow you to create sprites - movable graphic objects - the C128 has its own built-in SPRite DEFinition ability. These statements represent the new technology for creating and controlling sprites. Read the next section and take you first step in learning computer animation.