7.3. DESIGNING A SPRITE

   A sprite is made up of 504 dots. These are arranged in a 24 dot wide by 21 dot deep grid. As we mentioned earlier, you can use up to 8 sprites at a time, numbered from 0 to 7. Each dot on the sprite corresponds to a bit. In order to design a sprite, you simply set the relevant bit on the grid. Each line on the grid contains 24 bits (three bytes). Each sprite takes up 64 bytes in memory, i.e. 21 multiplied by 3 plus one spare byte. (For the more technically minded, the number 64 is much easier for the VIC II chip to work with because it is a power of 2 and therefore easier to multiply.)
   Because you can visualize a sprite inside a grid, the design process is greatly simplified. Suppose you want to create a balloon and make it float around the screen. The grid on page 78 shows its shape. You can set up your own grid preferably using lined, or better still, graph paper. Draw a grid that is 21 squares high and 24 squares across. Divide the 24 squares across into 3 sections of 8 spaces.
   The next step is to convert the graphic design into data the computer can use. Number the 8 squares in each of the three sections 128, 64, 32, 16, 8, 4, 2 and 1. These values are equivalent to 2

7, 2

6, 2

5, 2

4, 2

3, 2

2, 2

1 and 2

0.
   Number the squares down the left hand side of the page from 1-21 for each row. Now fill in the grid with any design, or use the balloon that we've drawn. It's easier to outline the shape first, then go back and fill in the grid.
   Think of the squares you have filled in as ON bits, and substitute a 1 for each filled square. Think of the squares that aren't filled as OFF bits, and give them a value of zero.
   Now look along row 1 and think of each 8 square section as a byte. Convert each section of 8 bits into a decimal value. You can even use your Binary to Decimal converter program if you wish. Now convert each of the 21 rows into 3 decimal values, giving 63 values in all.

   Now look at the design of the balloon. The first series of 8 squares on the first row are all blank, therefore the bits are all OFF giving a value of zero. The middle series on row 1 looks like this:

00000000   01111111   00000000

   The third series of 8 squares on the first row also contains only blanks so it also equals zero. So the data for the first line is:
   DATA 0, 127, 0

   The three series of dots that make up row two are calculated like this:

   The data for the second row is:

DATA 1, 255, 192

   Use this method to convert the three series of 8 squares in each of the remaining rows. Once you have completed these calculations, you are ready to write a BASIC program to use the balloon (or any other shape) since the sprite has now been converted into values your computer can understand.
   To demonstrate the use of sprites, type in the following program:

1 REM UP, UP, AND AWAY
5 PRINT "(CLR/HOME)"
10 V = 53248 : REM START OF DISPLAY CHIP
11 POKE V + 21,4 : REM ENABLE SPRITE 2
12 POKE 2042,13 : REM SPRITE 2 DATA FROM BLOCK 13
20 FOR N = 0 TO 62 : READ Q : POKE 832+N,Q : NEXT
30 FOR X = 0 TO 200

GETS ITS INFO. FROM DATA
40 POKE V + 4,X : REM UPDATE X COORDINATES
50 POKE V + 5,X : REM UPDATE Y COORDINATES
60 NEXT X
70 GOTO 30
200 DATA 0,127,0,1,255,192,3,255,224,3,231,224
210 DATA 7,217,240,7,223,240,7,217,240,3,231,224
220 DATA 3,255,224,3,255,224,2,255,160,1,127,64
230 DATA 1,62,64,0,156,128,0,156,128,0,73,0,0,73,0
240 DATA 0,62,0,0,62,0,0,62,0,0,28,0

If you have entered everything correctly, when you type "RUN" and press

, your balloon should sail across the screen. At this stage, you will not understand the meaning of much of the program but, as we explain each stage of sprite handling, we will use the program to illustrate each feature.
Line numbers 200-240 relate to the definition of your balloon and contain 21 sets of three values, i.e. one set for each row on your design chart.