Step by step creation of a 3D helicopter game using Away3D

Do you remember Roger Engelbert and his post about one game, many frameworks?

He’s back with another amazing tutorial I had the permission to share with you. You will learn step by step how to create an helicopter game using Away3D

The 2d logic

In this post I will create a Chopper like game engine where you have a helicopter flying over a city. The same basic engine allows for multiple types of games so I will try to post some of the possible variations (particularly in the way the terrain is built and used).

But all versions will start with a basic 2D collision logic. If you’ve seen my tutorial on Isometric Arches you will recognize the logic I’ve used here. But this is the final result in 2D:

Use arrow keys to move

If you look at the code you will see that I use two views to test for collision. I check for collision on a top view, which is the one shown above, and I check for collision on a side view, when I determine the altitude of the helicopter and compare it to the height of the building(s) returned in the first collision check.

Here’s the main loop:

Here’s the collision logic inside the building class:

Away3D and cubes

The new Away3D api handles primitives and 3D objects in a way similar to how most engines do it: by separating mesh from geometry. That’s cool. And like most engines it has only one viable way to texture a Cube so that a specific material is used on a specific face: using a Cube made of Plane meshes.

The Basic Code to Set Up the View

Here are the ways you can texture a cube in Away3D:

The Wrap Around

The Repeat

The UV Map

And here is the UV map image:


What if you need a certain number of faces to have a specific material, and you need only certain faces to have a different UV scaling? You can’t. Not with a cube.

But you can sort of understand why this apparent limitation exists: An API can’t account for everything, it must simply give you the tools to help you apply your ideas, whatever they are. It would be cool if Away3D had a multi-material cube like ISGL3D has (and if you recall ISGL3D actually creates a 6 plane cube for its multiple material “Cube”.) But it is remarkably easy to build one.

So back to the Game Scene 3D. For the buildings, I created a cube, made out of six planes. Since each building may have a different height, I needed to be able to scale the UV map on the building based on its height so that the material tiles on the correct faces.

This is the result:

Refresh to see different buildings

The building uses two materials. One for its sides and one for its top. Of course the building used in the Game does not actually need 6 faces. Depending on what type of terrain you need for your game you could use only three faces.

Here’s the code to create 6 faces and tile the material accordingly:

Chopper 3D: The Away3D Version

Here is the final version of the Chopper game scene done in Away3D. I ended up making a few changes to the 2D collision code because I decided that allowing the chopper to move backwards, away from the viewer, was too confusing. But I left the commented out lines that do that, in the source code.

NOTE: I updated the logic that recreates the building as it wraps around the screen. I optimized it a little bit so that I don’t end up with so many instantiations inside the main loop.

Use Arrow Keys to Move, Space bar to lift.

Chopper 3D: Endless Terrain

As I said, I wanted to show you a couple of examples on how to build an endless city terrain to be used in a more first-person-shooter type of game.

Here is Option 1

Here is Option 2

Use Arrow Keys to Move

Both options are included in the same source code.

The 2D Grid

As I did with the game scene, I created a 2D version of the grid first. For this example I decided that a 8×6 grid worked best. But when I moved it to 3D, it turned out that a 10×6 grid worked best.

Here is a zoomed out version of the grid. The white rectangle represents the screen.

Use Arrow Keys to Move

Chopper 3D: The iSGL3D Version

And now the final part, this time converting the code to Objective-C and using the iSGL3D engine. This is the second 3D game scene tutorial I do with iSGL but the first one converting from Away3D 4.0. This time it becomes even more noticeable how similar the two engines are and how easy it is to move from Flash to iOS using these engines.

The biggest challenge in my opinion is the scale. In other words, the translation of values from Away3D to iSGL3D. Just as in my previous tutorial, I used a 10:1 scale to all magnitudes related to position, and still I found enough difference in result to force me to do quite a lot of tweaking. I’ll try to hit upon an easier system for this in later tutorials.

But as far as this scene is concerned, I think UV mapping is the biggest topic, so here are the main differences.

UV Mapping in Away3D

UV Mapping in ISGL3D

Then there is also the addition of a simple Accelerometer based control. And here how that’s done in iSGL3D:

So in this version you can only move the helicopter left and right and up and down, so there is no Z movement at all.

Download all the sources of this tutorial

  • Chris

    I Could not find all these examples in the files. There are some x-code project files. Are you sure you uploaded the right archive?:)