x.t.r.GRAPHICS
Animation: Part 2:
Motive Power of Animation

Introduction:

     Well in the last tutorial I carried on about the basic parts of animation. I never did tell you how to move them for several reasons. One well, I’m submitting these to Pete’s magazine and left it for something else to submit. Two, moving them is a whole another lesson. And three, I left you to practice with what a taught you to better under stand what I’m about to drop you into... lets carry on now...

Moving the Animation:

    Yes, just like last time, we need frames.. I’ll carry the two we did for the first lesson:

Code:
SCREEN 13
DATA 23,23,23,23,00,00,00,00,00,00,00,00,00,00,00,00,23,23,23,23
DATA 22,22,22,22,00,00,00,00,00,00,00,00,00,00,00,00,22,22,22,22
DATA 21,21,21,21,00,53,53,53,53,53,53,53,53,53,53,00,21,21,21,21
DATA 22,22,22,22,28,55,55,55,55,55,55,55,55,55,55,28,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,28,55,55,55,55,55,55,55,55,55,55,28,21,21,21,21
DATA 22,22,22,22,00,01,01,01,01,01,01,01,01,01,01,00,22,22,22,22
DATA 21,21,21,21,00,00,00,00,00,00,00,00,00,00,00,00,21,21,21,21
DATA 20,20,20,20,00,00,00,00,00,00,00,00,00,00,00,00,20,20,20,20
FOR y = 1 TO 20
   FOR x = 1 TO 20
       READ z
       PSET (x, y), z
   NEXT
NEXT
DIM sprt1(20 * 20): GET (1, 1)-(20, 20), sprt1
CLS
DATA 23,23,23,23,00,00,00,00,00,00,00,00,00,00,00,00,23,23,23,23
DATA 21,21,21,21,00,00,00,00,00,00,00,00,00,00,00,00,21,21,21,21
DATA 22,22,22,22,00,53,53,53,53,53,53,53,53,53,53,00,22,22,22,22
DATA 21,21,21,21,28,55,55,55,55,55,55,55,55,55,55,28,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,28,55,55,55,55,55,55,55,55,55,55,28,22,22,22,22
DATA 21,21,21,21,00,01,01,01,01,01,01,01,01,01,01,00,21,21,21,21
DATA 22,22,22,22,00,00,00,00,00,00,00,00,00,00,00,00,22,22,22,22
DATA 20,20,20,20,00,00,00,00,00,00,00,00,00,00,00,00,20,20,20,20
FOR y = 1 TO 20
   FOR x = 1 TO 20
       READ z
       PSET (x, y), z
   NEXT
NEXT
DIM sprt2(20 * 20): GET (1, 1)-(20, 20), sprt2
/Code:

    Okay, we got the two robots again. Last time I covered just the animation, now I'll cover moving it. First we need to set up some arrays and variables...

Code:
CLS
DIM mask(20 * 20): GET (1, 1)-(20, 20), mask
y = 100: x = 160
ox = x: oy = y
PUT (x, y), sprt1, PSET
/Code:

    CLS, you can guess what that does.. DIM mask(20 * 20): GET (1,1)-(20, 20), mask, this will be a black tile set just before moving the robot, it will prevent smearing.. y = 100: x = 160, Where we want to start the robot at.. ox = x: oy = y, this is the old positions of the robot, we update these in the code just before adding the X, Y. The ox & oy is where the mask is set.. PUT (x, y), sprt1, PSET, this will set the sprite on the screen so we see it from the get go.. Now lets take a look at the main control structure..

Code:
DO ' Master LOOP
  FOR i = 1 TO 10  'Control LOOP
     press$ = INKEY$
     ox = x: oy = y

     {Sub control code here}

     WAIT &H3DA, 8   'Keeps it clean..
     IF press$ = CHR$(27) THEN END 'Ends LOOP on Keypress <Esc>..
     FOR a = 1 TO 1000: NEXT   'Controls speed..
  NEXT
LOOP
/Code:

    All the same except for a few new things: press$ = INKEY$, this will prompt the keyboard.. ox = x: oy = y, this will update the ox & oy so we can place the mask and clear the part of the screen the robot was setting.. WAIT &H3DA, 8 is moved to the bottom,  this just shows you can place it here also. (Can be before you draw or after, effects are the same, stop and think why.) IF press$ = CHR$(27) THEN END, last time I had it on the LOOP UNTIL, but this time its much nicer to have it inside the FOR.. NEXT loop. This way your not waiting for 10 loops to exit.. Now, the code that moves the animation..

Code:
     IF press$ = CHR$(0) + CHR$(72) THEN ' Up Arrow Key
       y = y - 1: PUT (ox, oy), mask, PSET ' Prevents smearing
       IF i <= 5 THEN PUT (x, y), sprt1, PSET 'First frame on LOOP 1 - 5
       IF i > 5 THEN PUT (x, y), sprt2, PSET 'Second frame on LOOP 6 - 10
     ELSEIF press$ = CHR$(0) + CHR$(80) THEN ' Down Arrow Key
       y = y + 1: PUT (ox, oy), mask, PSET ' Prevents smearing
       IF i <= 5 THEN PUT (x, y), sprt1, PSET 'First frame on LOOP 1 - 5
       IF i > 5 THEN PUT (x, y), sprt2, PSET 'Second frame on LOOP 6 - 10
     END IF
/Code:

    Look hard enough yet?? Its not really, lets break this down. IF press$ = CHR$(0) + CHR$(72) THEN, runs a block of code on keypress Up Arrow. It can be wrote like this also: "IF press$ = CHR$(0) + "H" THEN"
    The Up Arrow block of code goes like this: y = y - 1, this will move the robot up the screen.. PUT (ox, oy), mask, PSET, this will clear the last spot where the robot was setting... And if you learned any thing from the last tutorial, the next two lines places the animation according to the loop number..
    ELSEIF press$ = CHR$(0) + CHR$(80) THEN, else if?? You use this in a IF.. THEN block so when you end it you only need one END IF... other wise you would place a END IF for how many IF THEN blocks used. The only thing different about the Down Arrow block is y = y + 1, this moves the robot down the screen. The rest of the code is the same as the above block. END IF closes the IF.. THEN block.. Here is the whole control code:

Code:
DO ' Master LOOP
  FOR i = 1 TO 10  'Control LOOP
     press$ = INKEY$
     ox = x: oy = y
     IF press$ = CHR$(0) + CHR$(72) THEN ' Up Arrow Key
       y = y - 1: PUT (ox, oy), mask, PSET ' Prevents smearing
       IF i <= 5 THEN PUT (x, y), sprt1, PSET 'First frame on LOOP 1 - 5
       IF i > 5 THEN PUT (x, y), sprt2, PSET 'Second frame on LOOP 6 - 10
     ELSEIF press$ = CHR$(0) + CHR$(80) THEN ' Down Arrow Key
       y = y + 1: PUT (ox, oy), mask, PSET ' Prevents smearing
       IF i <= 5 THEN PUT (x, y), sprt1, PSET 'First frame on LOOP 1 - 5
       IF i > 5 THEN PUT (x, y), sprt2, PSET 'Second frame on LOOP 6 - 10
     END IF
     WAIT &H3DA, 8   'Keeps it clean..
     IF press$ = CHR$(27) THEN END 'Ends LOOP on Keypress <Esc>..
     FOR a = 1 TO 1000: NEXT   'Controls speed..
  NEXT
LOOP
/Code:

    Wow, I hope all this helps in creating animations in your QBasic programs. I'll see about doing a animation tutorial with more than two frames. I'll leave you with the complete code of what we did above:

Code:
SCREEN 13
DATA 23,23,23,23,00,00,00,00,00,00,00,00,00,00,00,00,23,23,23,23
DATA 22,22,22,22,00,00,00,00,00,00,00,00,00,00,00,00,22,22,22,22
DATA 21,21,21,21,00,53,53,53,53,53,53,53,53,53,53,00,21,21,21,21
DATA 22,22,22,22,28,55,55,55,55,55,55,55,55,55,55,28,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,28,55,55,55,55,55,55,55,55,55,55,28,21,21,21,21
DATA 22,22,22,22,00,01,01,01,01,01,01,01,01,01,01,00,22,22,22,22
DATA 21,21,21,21,00,00,00,00,00,00,00,00,00,00,00,00,21,21,21,21
DATA 20,20,20,20,00,00,00,00,00,00,00,00,00,00,00,00,20,20,20,20
FOR y = 1 TO 20
   FOR x = 1 TO 20
       READ z
       PSET (x, y), z
   NEXT
NEXT
DIM sprt1(20 * 20): GET (1, 1)-(20, 20), sprt1
CLS
DATA 23,23,23,23,00,00,00,00,00,00,00,00,00,00,00,00,23,23,23,23
DATA 21,21,21,21,00,00,00,00,00,00,00,00,00,00,00,00,21,21,21,21
DATA 22,22,22,22,00,53,53,53,53,53,53,53,53,53,53,00,22,22,22,22
DATA 21,21,21,21,28,55,55,55,55,55,55,55,55,55,55,28,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,00,55,55,55,55,55,55,55,55,55,55,00,22,22,22,22
DATA 21,21,21,21,00,55,55,55,55,55,55,55,55,55,55,00,21,21,21,21
DATA 22,22,22,22,28,55,55,55,55,55,55,55,55,55,55,28,22,22,22,22
DATA 21,21,21,21,00,01,01,01,01,01,01,01,01,01,01,00,21,21,21,21
DATA 22,22,22,22,00,00,00,00,00,00,00,00,00,00,00,00,22,22,22,22
DATA 20,20,20,20,00,00,00,00,00,00,00,00,00,00,00,00,20,20,20,20
FOR y = 1 TO 20
   FOR x = 1 TO 20
       READ z
       PSET (x, y), z
   NEXT
NEXT
DIM sprt2(20 * 20): GET (1, 1)-(20, 20), sprt2
CLS
DIM mask(20 * 20): GET (1, 1)-(20, 20), mask
y = 100: x = 160
ox = x: oy = y
PUT (x, y), sprt1, PSET
DO ' Master LOOP
  FOR i = 1 TO 10  'Control LOOP
     press$ = INKEY$
     ox = x: oy = y
     IF press$ = CHR$(0) + CHR$(72) THEN ' Up Arrow Key
       y = y - 1: PUT (ox, oy), mask, PSET ' Prevents smearing
       IF i <= 5 THEN PUT (x, y), sprt1, PSET 'First frame on LOOP 1 - 5
       IF i > 5 THEN PUT (x, y), sprt2, PSET 'Second frame on LOOP 6 - 10
     ELSEIF press$ = CHR$(0) + CHR$(80) THEN ' Down Arrow Key
       y = y + 1: PUT (ox, oy), mask, PSET ' Prevents smearing
       IF i <= 5 THEN PUT (x, y), sprt1, PSET 'First frame on LOOP 1 - 5
       IF i > 5 THEN PUT (x, y), sprt2, PSET 'Second frame on LOOP 6 - 10
     END IF
     WAIT &H3DA, 8   'Keeps it clean..
     IF press$ = CHR$(27) THEN END 'Ends LOOP on Keypress <Esc>..
     FOR a = 1 TO 1000: NEXT   'Controls speed..
  NEXT
LOOP
/Code:

    Until next time! Happy animating! :D

Contact Me: Rattrapmax6@aol.com
Webpage: http://members.aol.com/rattrapmax6/qbfiles/qbsite.html

-Kevin (x.t.r.GRAPHICS)