Sandy 3D Heightmap Terrain

A few people asked how i created the terrain in Nimian Garden. I modified Collin Cusce’s original Sandy 3d Terrain class (link offline) to work with a heightmap, or black and white image, that you import into your flash file.

You can download the source files here:

Unfortunately in my version the texture map needs to be rotated before it is imported into flash to match up with the heightmap. With some tweaking perhaps someone will figure out how to fix this. mclelun has fixed the rotation issue in the class, now you can just compile with a heightmap and terrain texture as is.You can export a heightmap from most terrain editors (see below). To get a picture of the texture, i just position the camera above it and look straight down in my terrain editor and render an image to use as a texture.

In the game Nimian Garden i also created a custom loop to handle collision detection when running over terrain. Basically you can do this by reading your position of the heightmap using getPixel, and use that value to set the y position of whatever object you like in your Sandy 3D app.

As for creating the heightmap and the texture itself, there are many options. Try using Vue (free personal learning version is available)  or Terragen Classic (free, excellent landscape generator), which i prefer to the also amazing but more complex Terragen 2.

with 7 comments

Written by protopop

January 20th, 2010

Posted in Uncategorized

7 Responses to 'Sandy 3D Heightmap Terrain'

Subscribe to comments with RSS or TrackBack to 'Sandy 3D Heightmap Terrain'.

  1. thanks for sharing! :)
    Hope I can get some free time to do something with this soon.


    21 Jan 10 at 1:20 pm

  2. That’s a fine protopinon :)

    Thanks for sharing such hard to get experience on terrain creation. The Nimian Garden is a really fine piece of art and many of us could learn a lot from thes work.


    21 Jan 10 at 10:56 pm

  3. I rotate the heightmap bitmapdata in the SandyHeightmap class. It is working correctly, but not sure if this is a good way to do it.

    var m:Matrix = new Matrix();
    m.translate(-src.width / 2, -src.height / 2);
    m.rotate(90 * (Math.PI / 180));
    m.translate(src.height / 2, src.width / 2);
    var src_r:BitmapData = new BitmapData(src.height, src.width, false, 0x00000000);
    src_r.draw(src, m);

    perlin = new BitmapData(perlinWidth , perlinHeight , false, 0x000000);
    perlin = src_r;


    23 Jan 10 at 6:27 am

  4. Wow – this is amazing, and beyond my abilities – very nice work!
    If you can tell me where to place it in the code or email me the updated version ill replace the old download with your version:)


    28 Jan 10 at 5:58 pm

  5. I send the updated version to popopt gmail


    30 Jan 10 at 1:18 pm

  6. can you send me the source files ? Regards


    20 Apr 10 at 3:40 pm

  7. My server crashed so the files were offline for a bit. I’ve reuploaded the files here:

    If you have any trouble downloading it, let me know your email and i will email them to you:)


    20 Apr 10 at 3:51 pm

Leave a Reply