How to Animate using the Time() Function!

Game Sprites!

You can copy these sprites or make your own! Make sure you draw each of these sprites in the exact same place, because the code will look for their sprite number. But once you understand the code, you can draw as many sprites as you want, where ever you want!

Explanation of Code!

• 1. Set up the Variables

  What is a variable?

  The first code we write at the top of the file are the variables. These help us set up the game and keep track of data.

  frog_sprite=1
  frog_x=59
  frog_y=59

  The first variable is named frog_sprite. Then the equals sign tells the game to remember it with whatever we write next. frog_sprite holds a number and that number is the sprite # of the first frog in the sprite sheet.

  
  

  The next variables are named frog_x and frog_y. Together these tell the game where the frog is on the screen.

  

  x = 59 and y = 59 because the screen has 128 pixels from left-to-right and top-to-bottom (# 0-127), so the screen center is at (63,63) and since the frog is 8 pixels wide and 8 pixels tall, we subtract half of those from the center X and Y to match the frog's center to the screen center.

  These are used to draw the frog in the center of the screen. But only at first...

  

  Eventually, we change this and set frog_x = -8 so that the frog starts 8 pixels to the left of the screen before it hops to the right and into view.

  
  
  
  
  
  

  The next set of variables are for keeping track of the animation timing.

  frog_anim_time=0
  frog_anim_wait=.05

  frog_anim_time is for saving the last time we changed the sprite of the frog.

  frog_anim_wait is for setting a wait time between each animation (sprite change).

  ("ANIM" is short for "animation") We will use these variables to control the animation speed.

  
  
  
  
  
  

• 2. Draw the Sprite

  function _draw()
    cls()
    spr(frog_sprite, frog_x, frog_y)
  end

  _draw() runs after _update and draws to the game screen 30 times every second.

  cls() clears the game screen.

  spr() draws a sprite at X and Y coordinates on the screen.

  spr(frog_sprite, frog_x, frog_y) tells the SPR function to draw the frog sprite at the X and Y variables we set above.

  
  
  
  
  
  

• 3. Simple Sprite Animation

  function _update()
      frog_sprite+=1
      if frog_sprite > 9 then
        frog_sprite=1
      end
  end

  _update() makes changes to the game 30 times every second.

  frog_sprite+=1 increases the saved frog sprite # by 1.

  if frog_sprite > 9 checks if the saved frog sprite # is more than 9 (the last frog sprite).

  frog_sprite=1 resets the frog sprite # back to the first frog, at sprite #1.

  
  

  This is all you need to make an animated sprite. Every tick of _update(), the frog sprite number will increase by 1 and when that is drawn to the screen, the next pose in the sprite sheet will show. This makes it look like the same sprite is moving, but actually it is a new sprite entirely.

  Then we check if the frog sprite # ever goes higher than the last frog sprite. When that happens, we just reset it back to the first frog sprite. This creates an infinite animation loop.

  
  
  
  
  
  

• 4. Time( ) Function

  frog_anim_time = time()

  frog_anim_time is a variable that will save the number of seconds that the animation sprite changed.

  time() or t() is a built-in function that provides the number of seconds (including milliseconds) since the start of a game.

  

  You can imagine time() as a stopwatch that starts when the game starts, and constantly counts up. It is usually a decimal with the fractions of a second down to milliseconds.

  For example, a little after one second of the game running, time() might be: 1.034

  That means it is 1 second, and 34 milliseconds since the game started.

  Like a stopwatch, we can basically record the exact time something happens in a variable. And that is what the code above is for.

  
  
  
  
  
  

• 5. Animation Speed Control

  if time() - frog_anim_time > frog_anim_wait then
  
  end

  frog_anim_wait is a variable used to save the amount of time (# of seconds) to wait before allowing the next step of the animation.

  By taking the current time and subtracting the last saved animation time, we can find the amount of time that has passed since the last animation change occurred. And that difference is what we can compare with frog_anim_wait.

  So if the amount of time since the last animation occurred is more than the wait time, then run the next animation change.

  
  

  That's all there is to it!

  Tip: If you are going to be animating many different but similar sprites on the screen, use tables to organize their data and keep your code concise. Look for more advanced animation lessons in the future.

  
  
  
  
  
  

• Full Code!

  frog_sprite=1
  frog_x=-8
  frog_y=59
  frog_anim_time=0
  frog_anim_wait=.05
  
  function _update()
    frog_x+=1
    if frog_x > 127 then
      frog_x=-8
    end
  
    if time() - frog_anim_time > frog_anim_wait then
      frog_sprite+=1
      frog_anim_time=time()
  
      if frog_sprite > 9 then
        frog_sprite=1
      end
    end
  end
  
  function _draw()
    cls()
    spr(frog_sprite, frog_x, frog_y)
    print( time() )
  end