Create an Over-The-Shoulder Camera in Away3D

The Backstory

This tutorial is an accident. No really, a total accident. I was putting together a totally different tutorial when I thought it would be cool to throw Boba Fett in it and explore stuff. So, that unfinished tutorial gave rise to this tutorial.

The Description

I’m not actually sure if it’s called an Over-The-Shoulder camera, but if you’ve ever played any modern 3D adventure game (i.e. Tomb Raider, World of Warcraft, Fable, etc) your camera is usually following behind your character and looking over their shoulder.

I’m sure there are multiple ways to implement an Over-The-Shoulder camera and although this method is far from perfect it is pretty simple.

The Setup

You don’t need anything special. There are really only two basics necessary, a subject (I’m using Boba Fett) and a trusty Camera3D.

The How-To

Please Note: The code snippets here won’t compile if they’re pasted in an actionscript file. You’ll need to refer to the full source code so see how everything fits together.

The first thing you’ll need to do is create Boba. If you’re not sure how to do this go see my MD2 tutorial.

Next we want our camera to follow Boba when ever he moves around. Solutions for this can be complex or surprisingly simple. I like simple, so I just threw Boba and my camera in an ObjectContainer3D.

this.bobaGroup = new ObjectContainer3D();
this.bobaGroup.addChild(this.bobaModel);
this.bobaGroup.addChild(this.view.camera);
this.view.scene.addChild(this.bobaGroup);

So, instead of interacting with the Boba model, you interact with the group and the camera will always be along for the ride.

Now we just need to adjust the cameras position within the group, so we add this line after the camera is added to the group:

this.view.camera.position = new Number3D(75, 300, -1000);

At this point we now have a camera that will always follow Boba Fett around and it positioned behind his right shoulder. Now all we have to do is add in some logic for moving him around:

protected function move():void
{
	if(this.keys[87]) this.bobaGroup.moveForward(10);	// w
	if(this.keys[65]) this.bobaGroup.moveLeft(10);		// a
	if(this.keys[83]) this.bobaGroup.moveBackward(10);	// s
	if(this.keys[68]) this.bobaGroup.moveRight(10);		// d
}
 
private function onEnterFrame(e:Event):void
{
	this.move();
	this.view.render();
}

Now he should move move forward, backward, left and right and the camera should be following along. Albeit, he looks a little odd without any animations but that’s an entirely different beast so we’re not going to worry about it in this tutorial.

The tricky part is using the mouse to look around. We basically have to treat the camera like a TargetCamera3D but have it look at a point in space rather than an actual model.

protected function look():void
{
	var amt:Number;
	var percent:Number;
 
	// left-right camera movement
	if(this.stage.mouseX != this.lastMouseX)
	{
		amt = this.stage.mouseX - this.lastMouseX;
		percent = amt / this.stage.stageWidth;
		this.bobaGroup.rotationY += percent * 360;
		this.lastMouseX = this.stage.mouseX;
	}
 
	// up-down camera movement
	if(this.stage.mouseY != this.lastMouseY)
	{
		amt = this.stage.mouseY - this.lastMouseY;
		this.view.camera.y += amt * 2;
		this.lastMouseY = this.stage.mouseY;
		this.view.camera.lookAt(new Number3D(75, 250));
	}
}
 
private function onEnterFrame(e:Event):void
{
	if(this.mouseDown) this.look();
	this.move();
 
	this.view.render();
}

The camera only moves if it’s vertical movement, horizontal rotation is applied to the group (which is used for turning). The trick to making this work is the lookAt call after moving the camera vertically, this ensures that the camrea is always looking at the right spot in space.

The Example

The Code

Download the code for this example here. Keep in mind that this was built using Flash 10, so if you’re using Eclipse or Flex Builder then you’ll have to change some stuff in your project before it will compile.