For the game I'm working on I built a super tiny tweening system for making it easier to move things around. This cart demonstrates a few different easing functions that plug into the system.
Tweening is a way of moving an object from point A to B. You specify where you want the object to go, and how long you want it to take to get there, and the tweening system takes care of the motion. I find it super useful for making games, especially for adding little bits of polish to your game. It's easier to just say "move the ball to x=104 in 60 frames" than it would be to calclate the required speed every time. You can also use an easing function to tell how it should get there, allowing it to accelerate slowly or bounce or spring back.
Tweens have four parameters: the property we want to update, the value we want to end up with, the length of time we want it to take to reach the target value, and the easing function. We'll store those values in a table, and each frame we'll look at each entry in the table and update the target property as needed.
The tween function begins tweening a property:
function tween(target, property, destination, duration, func)
local tween_info = {
target = target,
property = property,
base_value = target[property],
change = destination - target[property],
duration = duration,
elapsed = 0,
func = func
}
add(tweens, tween_info)
end
|
Each frame, we loop through that list and update everything. The update function removes any tweens that have reached their duration. Other than tracking this timing information, the tween_update function leaves most of the work to the selected easing function.
function tween_update()
for t in all(tweens) do
if t.elapsed > t.duration then
t.target[t.property] = t.base_value + t.change
del(tweens, t)
else
t.elapsed += 1
t.target[t.property] = t.func(
t.elapsed,
t.base_value,
t.change,
t.duration)
end
end
end
|
So the easing functions are the ones that actually move our stuff… how do they work? Well the simplest easing function is linear, which is really no “easing” at all. It just moves the object from a to b at a constant speed. Here's what it looks like:
function linear(elapsed, base_value, change, duration) return change * (elapsed / duration) + base_value end |
So far in my game I've only needed one other easing function, In/Out Quadratic. This simulates acceleration and deceleration. It looks like this:
function in_out_quad(t,b,c,d) t/=d/2 if (t<1) return c/2*t*t+b t-=1 return -c/2*(t*(t-2)-1)+b end |
The cart also has a bouncy tween function that is super useful for menus and other UI.
The great thing is that by plugging in different easing functions you can reuse the same simple framework to accomplish many different effects. And tweening doesn't just have to affect movement. You can tween sizes, rotations, color… any numeric value you want to change over time.
[Please log in to post a comment]
