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.
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
-
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
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
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
The final animation looks like this. Spiffy:
[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.