Adding Basic Animation to a Mini Micro Game
BibleClinger

BibleClinger @bibleclinger

About: Enjoyer of Biblical discussions, programming, and video games. Expect current posts to be mostly about the 6502 processor and MiniScript.

Joined:
Mar 12, 2024

Adding Basic Animation to a Mini Micro Game

Publish Date: May 26
1 0

Recently on the MiniScript Discord, Dat_One_Dev posted code he was using for a YouTube video tutorial on making video games for Mini Micro. It was a game where you simply chase a balloon, clicking on it each time it appears. When you click on it, it moves to a new location, waiting for you to repeat the process.

The Balloon Game

Now this got me thinking. As nice of a simple demo as this was (the code wasn't very long -- about 37 lines in the initial version posted on Discord), something about the balloon seemed off. It wasn't moving at all when it was on the screen. Why not make the balloon move a bit and demonstrate a basic animation technique?

The idea that came to mind first was that we could make the balloon "breathe" -- that is, it would oscillate between shrinking and expanding. Sprites in Mini Micro have a property called scale. We could subtract and add small amounts to this property on the balloon's sprite to achieve each effect respectively.

Variables Required

First we need some variables. Due to how the original script was written[1], I decided to add these as global variables:

breatheTime = 1
currentTime = breatheTime
breatheIncrement = 0.01
Enter fullscreen mode Exit fullscreen mode
  • breatheTime is the amount of time in seconds for the balloon to perform either a shrink or an expansion.
  • currentTime is our current timer. It's how much time is left before we swap between shrinking or expanding.
  • breatheIncrement is how much we want to adjust the scale of the balloon's sprite per tick. In this case, we want to change it by a very small amount, since ticks happen quite frequently -- about 60 times per second.

Breathing Function

breathe = function(dt)
    globals.currentTime -= dt
    if currentTime <= 0 then
        globals.breatheIncrement *= -1
        globals.currentTime = breatheTime
    else
        Balloon.scale += breatheIncrement
    end if
end function
Enter fullscreen mode Exit fullscreen mode

Let's walk through the code. First, our breathe function has one parameter -- the delta time. This is the amount of time that has passed since the last tick or last cycle of the game loop.

We immediately subtract dt -- or delta time -- from currentTime, which is the global timer we just created. We then check to see if our timer is less than or equal to 0. If it is, the timer has been triggered. We have gone far enough in shrinking or expanding. It's time to reverse course!

We reverse course by inverting the sign of breatheIncrement. This is achieved by simple multiplication of -1. We then reset the timer by setting currentTime to breatheTime.

On the other hand, if the timer didn't reach 0, then we continue our current operation by simply adding breatheIncrement to Balloon.scale.

Calculating Time

We have our breathe function, but how do we call it, and how do we pass delta time to it?

First, almost any game in Mini Micro should do something like this for its main game loop:

lastTime = time
while true
    now = time
    dt = now - lastTime

    // Game logic goes here

    lastTime = time
    yield
end while
Enter fullscreen mode Exit fullscreen mode

Within the block where game logic is marked to go, that is where we put code that requires updates per tick -- like breathe. Our new game loop should look something like this:

lastTime = time
while true
    now = time
    dt = now - lastTime

    // Game logic goes here
    breathe dt

    lastTime = time
    yield
end while
Enter fullscreen mode Exit fullscreen mode

The final animation looks like this. Spiffy:

Balloon



[1] Note: Since we're editing someone else's code, the goal is to accomplish what we want by changing as little as possible. We want to work with what exists, not rewrite it, for our purposes.

Comments 0 total

    Add comment