Consistent Omnidirectional Movement in AS3
One of my biggest gripes in Flash games to date is that of simulated motion that is by no means realistic. True, this may be acceptable for some games, but as a whole, there is something that just doesn’t feel right when your side scrolling shooter plane moves up one unit when you press UP, left one unit when you press LEFT but moves both up and left one entire unit when you have both keys depressed. Logically, by moving in two directions at once, your character or vehicle should not be granted an additional bonus to their movement speed. Not only does it offer unfair advantages to the competent player who learns to use this loophole to his advantage, but it also makes your control somewhat unwieldy. The human brain is able to estimate precise movements and predict where things should go, and some people, though they may not know the precise reasons, will gravitate to those games that their minds can accurately predict the outcome of a motion.
If you have read my last few posts, you understand that this more realistic motion has driven me to all sorts of physics and algorithmic studies in the past weeks. Today, though, I decided to write on something a bit more fun. Those of you who remember the great old days of R. C. Pro-Am, Super Off Road or other top view racing games can attest to both the challenge and creativity about learning to control a car driving in an omnidirectional world without having to sit directly behind the wheel.
This is the basic feel I was after in writing up this simple little script. As with all my posts so far, I have drawn all objects directly using the Graphics object so as to avoid having to attach any images. In this demo, you will see a very simple car driving around on a plain background, giving you full control over its motion. What is novel about that? Nothing, really, except for my focus on trying to get the action of the car to be more realistic to the point of actually having an enjoyable game play experience were I to use this model in a game of some sort. After playing a bit with the demo and reviewing the code, you may notice little nuances I’ve tried to address, such as these:
- Rotating front tires when turning
- Acceleration to speed
- Coasting speed reduction varies from braking speed reduction
- Slower max speed on reverse than in forward
- Pivot point of car set back towards back axle
Here is a demo of the code, if you care to take a moment to try it out at this time: CarStudy01.swf.
While none of these things may seem amazing feats in and of themselves, when they are incorporated into an object’s interaction, they really improve the feel of that object immensely. Go ahead and try it! While there are still things that need ironing out, I think you’ll find it a surprisingly responsive little toy.
Back on the main topic of discussion, the movement of the car is calculated based on its current rotation angle and current velocity. So, no matter if we are traveling directly along the axis or at a steep angle, the forward momentum of the car is always uniform. An added bonus is that we can actually accelerate into a turn using this technique. This tiny adjustment to the way we calculate the directional motion is a huge step over many of the games out there, and if this were applied to more objects (yes, even those somewhat statically controlled shooter games), the feel of them would be much more acceptable to the average player.
As an added feature, I’ve added in some tracking dots that follow the path of the car, so you can actually see the turning radius differential in forward and reverse as well as other paths of motion. The code for the track object is also included in the package at the end of this post, in case you care to do something similar in your own studies. If anyone has ideas or suggestions on ways to improve the handling or other nuances that seem to be missing, please let me know. I’ll be using this model as a base on which to build some of my other motion studies of this type.
One other thing to note: while building this car, I tried to keep all the main variables (acceleration, top speed, braking, turning radius, etc) definable within the constructor. So, if at any time I choose to offer some sort of upgrades to my vehicle during a game, I can very easily do so.
I would also like to say a word of thanks to Richard Lord for his KeyPoll class I used in order to simplify my keyboard interaction. I recommend anyone looking to do simplistic keystroke trapping to consider viewing his site and downloading his KeyPoll class for yourself.
I know this has been a much more quick and dirty post today (and the code is not nearly as well documented as some), but it was just a fun one I wanted to share. As always, your comments are most welcome!
Download: Full Source Code
Garth Henson has been working professionally as a web developer for nearly 10 years. When not coding in PHP, JavaScript or Actionscript, he can usually be found trying to refine his photography skills.






Chris
16 Feb, 2009
Very cool. But I lost my car off the edge of the screen … I was expecting it to wrap. But no big loss; I reloaded the page and then extended the browser window across both monitors. And drove around in long ovals and figure 8’s for a while. Fun stuff. ;D