Tutorial: Terrain Following in Flash

In this tutorial you will learn how to implement a more advanced style of terrain following using Flash and ActionScript 3. Terrain following is a pretty simple concept in a flat or boxy world, but what if you want a more dynamic world with hills and slopes? Things become a little trickier. Luckily, Flash and AS 3 have some handy built-in functionality that take a lot of the grunt work out of the process. Let's check it out!

First, we should define our goal. The idea is to have a vehicle that can roll over dynamic terrain and properly orient itself while doing so. Using a vehicle is a bit more complicated than a person or other small character. With a humanoid character, you can pretty much just use the bottom center of the object as your point of collision and adjust the character's position as needed. A vehicle is larger than a person and in order to make the terrain following look good, you need to use more than one point of contact. Additionally, you will need to orient the vehicle with respect to the terrain it is driving over to get a realistic look. Through the magic of bad photoshopping, I have brought together two NES classics, Adventure Island 2 and Excitebike, to illustrate the difference.

Character Example

A humanoid on a hill

Bike Example

A vehicle on a hill

As you can see in the images above, our good friend Master Higgins looks right at home on the sloping terrain. However, the bike looks a bit odd; that front tire is just floating in mid-air! Perhaps the rider is exceptionally skilled and is holding a wheelie every time he hits a slope, but I doubt it. We would expect the bike to orient itself to the terrain as in the image below.

Bike Example - Oriented

A vehicle oriented to the terrain

That looks much better, but how do we go about accomplishing such a feat? There are probably many ways, but the way I'm going to show you here involves following a line straight down from each wheel until we intersect with the ground. When we find our point of intersection for both wheels, we will determine the angle between those two points and set the rotation of our vehicle accordingly. After that, we will adjust the y position of our vehicle with respect to which ever point is greater on the y-axis.

Points of contact

Find the points of contact and the angle between them

Pages: 1 2 3

Bookmark and Share

4 Responses to “Tutorial: Terrain Following in Flash”

  1. Eric says:

    Awesome tutorial! Makes me want to create a game!

  2. Psionic says:

    Great tutorial with many uses, Thanks for taking the time to explain this stuff in-depth!!

  3. Joe says:

    Hi! Verygood tutorial, thank you for that! Can you help me how can I add gravity and a jump function to this ? I tried couple of regular ideas yet but none of them are working with this. (They’re working on a simple flat surface, but not with this code) Thank You for your help.

  4. Rhuno says:

    Hi Joe, you can add jumping, but you need to make sure you do not call the orientToPath function while the player is jumping. Once you’ve detected they have hit the ground, you can resume calling it. Otherwise, they will just snap to the ground.

    I did this in the snowboarding section of my game Snow Day.

    if(player.isJumping != true)
    {
    orientToPath();
    }

    This ensures that if the player is jumping, they will not be snapped to the ground. Of course, you will need some way to know if the player is jumping or not; a simple boolean is all I used.

Leave a Reply

Subscribe to RSS feed FGS5 Badge