2011
Simple Animation for Games: part 1
The first time I ever played with the idea of making a game in Flash, was when an advertising firm asked me to modify another developer’s code to fix some problems they were having with the game. It was a simple AS2 game all written on a single frame. It was pretty messy code, but what I remember most were a bunch of calls to the Math class and thinking, “Whoa, math.” Not just math, but cos and sin and a bunch of other trig functions that, at the time, made no sense to me.
As I sat there thinking about how in all my wild imagination, I had never even considered the idea that real math would ever actually be useful in my life, it occurred to me that I might need to pick up a book and try my hand at some math. It didn’t take long to realize that I didn’t need to become a mathematician or really even need to understand trigonometry, I just needed to understand the bit of it that’s useful for building games. Of course, you can always learn more and I’ve picked up a lot of tricks over the years, but there’s a couple of simple building blocks that you don’t even really need to understand, you just need to know how to use the code.
Of course, it always helps to understand what the code is doing and for that, I’d recommend any of Keith Peter’s books on ActionScript Animation. In those books, Keith documents most of the formulas and techniques (more or less) that I’m going to demonstrate in this series and does a good job explaining things in a way that’s understandable to non-mathematicians. It’s a really good read and I use it as a reference on a regular basis. But today, we’re not going to talk trig, we’re just going to see how it’s done.
Smooth Back and Forth Motion:
I come across this all the time when I’m building a game. I need a platform to rise and fall in a regular pattern. Something needs to swing back and forth, or walk back and forth, etc. I do this so often that I don’t even think about the code anymore and what it’s doing. Sure, I know that I’m basically using a sine wave which I’ll use to output a very smooth numeric change from 1 to -1 which I’ll then multiply to blah, blah, blah… Here’s how it works: Our case study will be a platform that needs to rise and fall. It needs to do so very smoothly and naturally.
And we do it like this:
package {
import flash.display.MovieClip;
import flash.events.Event;
public class UpDown extends MovieClip {
private var speed:Number = 0.05;
private var angle:Number = 0;
private var range:Number = 100;
private var startY:Number = 200;
public function UpDown() {
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
platform.y = startY + Math.sin(angle) * range;
angle += speed;
}
}
}
Which makes our platform move like this:
There’s obviously not much code here, so what’s going on? Not much really. We have four variables:
speed – how fast we want to go through the up/down
angle – this is the number that is fed to the Math.sin() function
range – how far above and below the start position we want to go
startY – the center of the two extremes the platform will be traveling
Then, inside an enter frame loop, we have these two simple lines where all the magic happens:
private function onEnterFrame(event:Event):void {
platform.y = startY + Math.sin(angle) * range;
angle += speed;
}
All this does is tell Flash to smoothly move the platform vertically between 100px above startY and 100px below. Very simple and easy, and extremely useful. Like I mentioned, this is the kind of thing I find myself doing over and over again. And it doesn’t just work for up and down. It will work for any property you want to move back and forth, up and down, rotating one way and then the other… you get the idea.
I hope you find this as useful as I do. Play around with it and you’ll find yourself using it in all kinds of situations and your life as a game programmer will become a little bit easier.
