I think for your game you could probably get away with Flash's built-in "postcard" 3D system. This is the approach I used for a game named FloorPig (look it up on Google Play store if you're interested). It's not true 3D in that it doesn't do any culling, etc., so you will be limited in what you can do, but it's also the path of least resistance and simple to implement.
To accomplish FloorPig's functionality, I first created the tile "floor" using XML coordinates to map individual tiles. In your case you can probably make the entire track one movieclip. To rotate it into perspective, simply adjust the rotateY property of the movieclip:
currentTrack.rotateY=30;
(you'll have to play with the value to get a satisfactory rotation)
Rotating the track to match the movement of the car is simply a matter of rotating around the Z axis:
currentTrack.rotateZ+=10; //Turn right by 10 degrees
currentTrack.rotateZ-=2; //Turn left by 2 degrees
Most likely you will want to add this to a keyboard or mouse event listener so the player can control the movement. Because the keyboard system introduces a delay between first/subsequent keystrokes, you will want to handle keystrokes more directly; something like this:
import flash.ui.Keyboard;
import flash.events.Event;
import flash.events.KeyboardEvent;
private var _currentKey:uint = 0;
private function frameLoop(eventObj:Event):void {
if (this._currentKey == 0 {
return;
}
if (this._currentKey == Keyboard.LEFT) {
currentTrack.rotationX -= 5;
} else if (this._currentKey == Keyboard.RIGHT) {
currentTrack.rotationX += 5;
}
}
private function keyDownHandler(eventObj:KeyboardEvent):void {
this._currentKey = eventObj.keyCode;
}
private function keyUpHandler(eventObj:KeyboardEvent):void {
this._currentKey = 0;
}
stage.addEventListener(Event.ENTER_FRAME, this.frameLoop);
stage.addEventListener(KeyboardEvent.KEY_DOWN, this.keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, this.keyUpHandler);
Note that the rotation values are arbitrary -- you can adjust these based on the turning ability of the car, track conditions, etc. In other words, use variables unlike me :)
Now that it's rotated, the track can be placed "beneath" the car using straightforward Flash display depths (setChildIndex, etc.) Create the track and then just center the car on top. Same for any other elements you want to be visible on top of the track.
Moving the car along the track requires you to simply adjust either the X or Y values of the track clip (probably Y but you'll have to test this out). For example:
private var _carSpeed:Number=0;
private function frameLoop(eventObj:Event):void {
if (this._carSpeed>0) {
currentTrack.y+=this._carSpeed;
}
if (this._currentKey == 0 {
return;
}
if (this._currentKey == Keyboard.LEFT) {
currentTrack.rotationX -= 5;
} else if (this._currentKey == Keyboard.RIGHT) {
currentTrack.rotationX += 5;
}
}
If you find that moving along the Y axis works well, you can introduce a little X axis motion for things like drifting or sliding (wet track, for example).
Finally, you'll want to implement some sort of collision detection. The following is far from the best approach but it worked well enough for FloorPig so it may work for you too. I created 3 (or was it 4?) invisible dots (just movieclips with alpha=0) that sit at the virtual "edges" of the character -- in your case, where the corners of the car should be at the chosen perspective. I adjusted these by hand -- no fancy math. On ever frame loop I check to see if the dots are on top of a tile or not by doing a hit test. For example:
private function frameLoop(eventObj:Event):void {
if (currentTrack.hitTestObject(edgePoint1) &&
currentTrack.hitTestObject(edgePoint2) &&
currentTrack.hitTestObject(edgePoint3) &&
currentTrack.hitTestObject(edgePoint4)) {
//Currently on track
} else {
//On ore more wheels is off track
}
if (this._currentKey == 0 {
return;
}
...
This, however, has one major problem - if your track includes both the road and non-road (grass, etc.) in one graphic, the car will always be "on the track" if it's over any part of the clip. To differentiate between different types of terrain, I'd recommend drawing or somehow separating the various elements within your track clip. For example, you could have one movieclip within "currentTrack" that's the road, something like currentTrack.road. Another internal clip would be the grass: currentTrack.grass -- and so on. With this detection in place, you can produce a basic version of what you're looking to do. For example:
private function frameLoop(eventObj:Event):void {
if (currentTrack.road.hitTestObject(edgePoint1) &&
currentTrack.road.hitTestObject(edgePoint2) &&
currentTrack.road.hitTestObject(edgePoint3) &&
currentTrack.road.hitTestObject(edgePoint4)) {
//Currently on track
}
if (currentTrack.grass.hitTestObject(edgePoint1) &&
currentTrack.grass.hitTestObject(edgePoint2) &&
currentTrack.grass.hitTestObject(edgePoint3) &&
currentTrack.grass.hitTestObject(edgePoint4)) {
//Currently on grass
}
...
Using a similar approach you can place additional objects on top of the track as well as additional "edge points" to detect collisions with them.
Since this isn't true 3D, you will most likely be pre-rendering the car (or maybe video capture?) Just be sure to decide on what angle your track will be at up front, otherwise your car will look odd in the context of the scene.
Good luck
