Masked, bitmapped animation

Saint Mary's College

Notre Dame, IN
rtarara@saintmarys.edu
MASKED, BITMAPPED ANIMATION
WHAT?
Masked, bitmapped animation is the technique that lets you move an object across a complex background. The object can be of complex shape and can have 'transparent' regions within through which the background will show.
The techniques for accomplishing this kind of animation within Windows are slightly different from the DOS versions (and unfortunately--just like with the old Mac versions, still don't work with Version 5 and above for the Mac). In fact, the new TrueBasic versions allow for a much improvement in the animation appearance.
HOW?
You must begin by drawing the bitmapped images. For illustration, I will show TrueBasic commands for drawing a simple ball, however, the instructions below can be used (with a drawing program) to create complex graphic objects.

1. 
   The background color of the IMAGE must be BLACK. Any transparent areas of the image must also be BLACK.
   

2. 
   The main IMAGE can be any combination of colors from the palette. You can now have up to 256 different colors. The code below draws the main image of a red ball and saves it as ball$.
   

CLEAR

BOX AREA 1,50,1,50

SET COLOR "red"

BOX CIRCLE 1,50,1,50

FLOOD 25,25

BOX KEEP 1,50,1,50 in ball$

3. You must now create a MASK. The background of the MASK must be WHITE and for every non-black pixel in the IMAGE, you need a corresponding BLACK pixel in the MASK. The code below draws the mask for the ball image and saves it as ballmask$.
clear

SET COLOR "white"

BOX AREA 1,50,1,50

SET COLOR "black"

BOX CIRCLE 1,50,1,50

FLOOD 25,25

BOX KEEP 1,50,1,50 in ballmask$
4. Draw any kind of background you want--even use a full color jpeg image. As an example, we'll draw a green rectangular grid as a background.

Clear

FOR x = 1 to xmax step 20

BOX LINES x,x,1,ymax

NEXT x

BOX LINES 1,xmax,y,y

NEXT y
Where xmax is the maximum horizontal coordinate and ymax is the maximum vertical coordinate for the window being used.
5. Save the rectangular area of the background over which you intend to display the ball image. Save this to a string variable.

BOX KEEP x,x+50,y,y-50 in bkground$

6) Then BOX SHOW the MASK using AND.
BOX SHOW ballmask$ at x,y using "and"

7. 
   Then immediately BOX SHOW the IMAGE at the same location using OR.
   

BOX SHOW ball$ at x,y using "or"

7. 
   Pause a short bit
   

Pause .1

7. 
   BOX SHOW the background string over the Image.
   

BOX SHOW bkground$ at x,y

7. 
   Increment x and/or y and repeat--save background, box show mask using and, box show image using or, pause, box show background.
   

This works and you will get animations that will look the same as you could do in the DOS versions. HOWEVER, there is a way to improve this dramatically under Version 5.x and above. By using TWO screens, one invisible, you can avoid the flickering that invevitably occurs with the above technique as you catch screen refreshes in between the BOX SHOW commands.

CALL tc_init

CALL tc_setunitstopixels

CALL tc_show_default (0)

SET MODE "color256"

RANDOMIZE

CALL TC_GETSCREENSIZE(XL,XR,YB,YT)

CALL tc_getsysinfo("MENU HEIGHT",VAL$,VALS())

LET winbar=vals(1)

CALL tc_getsysinfo("TITLE BAR HEIGHT",VAL$,VALS())

LET winbar=winbar+vals(1)

CALL tc_win_create (w1,"close|size|title",0,XR-1,YB-1,WINBAR)

CALL tc_win_settitle(w1,"BOUNCE")

ASK PIXELS xmax,ymax

SET WINDOW 1,xmax,ymax,1

CALL tc_show (w1)
!create a second window (W2) of identical size
CALL tc_win_create (w2,"close|size|title",0,XR-1,YB-1,WINBAR)

CALL tc_win_settitle(w2,"BOUNCE2")

SET WINDOW 1,xmax,ymax,1

CALL tc_show (w2)

SET BACK "white"

CLEAR

SET COLOR "black"

SET COLOR "red"

BOX CIRCLE 1,50,1,50

FLOOD 25,25

BOX KEEP 1,50,1,50 in ball$
! draw ball mask

CLEAR

BOX AREA 1,50,1,50

SET COLOR "black"

BOX CIRCLE 1,50,1,50

FLOOD 25,25

BOX KEEP 1,50,1,50 in ballmask$

SET COLOR "green"

FOR x = 1 to xmax step 20

BOX LINES x,x,1,ymax

NEXT x

FOR y = 1 to ymax step 20

NEXT y
SET COLOR "blue"

PLOT TEXT, AT 250,20:"Hit any key to end"
! draw border

BOX LINES 10,xmax-10,ymax-10,10

BOX LINES 9,xmax-9,ymax-9,9

! Redraw the identical background in W1

SET COLOR "green"

FOR x = 1 to xmax step 20

BOX LINES x,x,1,ymax

NEXT x

FOR y = 1 to ymax step 20

NEXT y

PLOT TEXT, AT 250,20:"Hit any key to end"

BOX LINES 10,xmax-10,ymax-10,10

BOX LINES 9,xmax-9,ymax-9,9

! set starting position of ball and randomly select x and y velocities
LET x = 400

LET y = 300

LET vx = int(8*rnd+2)

LET vy = int(8*rnd+2)

DO while d=0

IF x < 11 then

LET x = 11

LET vx = -vx

END IF

IF x > xmax-60 then

LET vx = -vx

END IF

LET y = y+vy

LET y = 60

LET vy = -vy

END IF

LET y = ymax-11

LET vy = -vy

END IF

BOX SHOW ballmask$ at x,y using "and"

BOX SHOW ball$ at x,y using "or"
! copy the image region of W1 and keep in showball$. A region larger than the image is saved such that the next increment of movement will not extend outside the saved region. On fast enough machines, the ENTIRE screen can be save in showball$.
BOX KEEP x-10,x+60,y+10,y-60 in showball$
! Switch output to the visible Window W2 and display the image region.
CALL tc_win_switch (w2)

BOX SHOW showball$ at x-10,y+10

PAUSE .05
! Switch back to the invisible screen and complete the animation sequence--then repeat.
CALL tc_win_target (w1)

BOX SHOW bkground$ at x,y

IF key input then GET KEY d

LOOP

CALL tc_cleanup