Create an anaglyphic 3D game in Flash ~ Graffititools

With the recent vogue for all things retro 3D, it seemed timely to create a Flash-based example. In this tutorial, Flash developer Charles Maragna shows you how to build up a scene that’s viewable in anaglyphic 3D using a standard set of red and cyan-lensed glasses.

Anaglyph 3D works by superimposing two slightly different versions of an image over each other. These different versions are then tinted, and when viewed using red/cyan glasses create the illusion of depth.

While the anaglyph process can work with some colour schemes, it works best and most consistently with black and white images. In this masterclass you will learn how to create a bitmap duplicate of an existing MovieClip, as well as how to convert it to black and white and tint it correctly for the 3D process.

Your cornerstone will be a static scene which you’ll be able to rework to your own requirements, as shown in Charles’Asteroids-style game.

In our Download Zone, you’ll find a Flash project file to work from, plus a completed project for reference.

Step 1 Open AnaglyphScene.fla. Open the Library panel (Window > Library or Cmd/Ctrl + L), and drag the MovieClip called Scene to the work area of the Scene Layer, but not into the viewable region of the Stage.

Step 2 Select the MovieClip Scene (by clicking on it once) and give it an Instance Name of ‘scene’ in the Properties panel (if this is not visible, select Window > Properties). Click Edit > Edit Selected to work inside that MovieClip, and create a new layer for the graphics (Insert > Timeline > Layer).

Step 3 In the Library panel, open the Cast folder by clicking the small triangle adjacent to it.

Add a ‘backdrop’ MovieClip. Drag it into the work area, and position it using the outline to ensure full coverage. In the Properties panel, name this MovieClip ‘backdrop’. Continue this process for all the other Cast MovieClips, giving each a unique name as you go along.

Step 4 Publishing now you would produce a blank SWF, as the content is out of view. So click Edit > Document to return to the root timeline. Click on the Code Layer, then clickWindow > Actions to bring up the ActionScript editor.

It’s now time to get coding. If you get lost, don’t worry – in the AnaglyphSceneComplete project in the Download Zone, you can find the finished code with explanatory text by each part.

We now want to create a blank bitmap so enter this script:

var bmpScene:Bitmap=new Bitmap(newBitmapData(scene.width,scene.height,true,0));

Next, a copy of the scene will be drawn to the bitmap by you entering:

bmpScene.bitmapData.draw(scene);

At this point you can add the image to the Stage by entering:

addChild(bmpScene);

Step 5 For conversion to black and white, add the code below before the code you’ve written in Step 4. This defines the red, green and blue variables.

var r:Number=0.212671;
var g:Number=0.715160;
var b:Number=0.072169;

To put those variables into an array, enter this code, which applies a filter to the scene, then transforms its colour by using the above matrix array.

var ct_matrix:Array=[];
ct_matrix=ct_matrix.concat([r,g,b,0,0]);// red
ct_matrix=ct_matrix.concat([r,g,b,0,0]);// green
ct_matrix=ct_matrix.concat([r,g,b,0,0]);// blue
ct_matrix=ct_matrix.concat([0,0,0,1,0]);// alpha
scene.filters=[new ColorMatrixFilter(ct_matrix)];

Step 6 We’ll use blend modes to create the red and cyan to work with anaglyphic 3D glasses. These work just like Photoshop’s blending modes. Add this immediately after the code from Step 5 to tint the bitmap.

var ctLeftRed:ColorTransform=new
ColorTransform(1,0,0);
var ctRightCyan:ColorTransform=new
ColorTransform(0,1,1);
bmpScene.bitmapData.draw(scene, null, ctLeftRed,
BlendMode.NORMAL);

On publishing, you’ll see that the output is tinted red. Now add this code after the above line, which will superimpose a second duplicate and tint it cyan:

bmpScene.bitmapData.draw(scene, null, ctRightCyan, BlendMode.ADD);

When you publish this, the output will be monochrome. This is because the left and right views are positioned on top of each other.

Step 7 We need to separate the left and right based on their vertical position (called ‘y’ after the axis), but first we need to know what parameters we’re working within. To find this, add this loop code between the two lines of draw code:

for (var i:String in scene) {trace(scene[i].y);}

Publish your project, and in the Output window there’ll be a list of all the cast members’ vertical positions. Make a note of the largest and smallest.

Step 8 Add in the largest and smallest vertical positions by replacing the lines from Step 7 with this:

for (var i:String in scene) {
var min:Number=-13;
var max:Number=200;

The following lines use each element’s vertical po sition in relation to the maximum and minimum values to give it a depth value, and take the depth value within the range we currently have – between 0 and 1 – scaling the value to be between how many pixels we want to offset it horizontally (between -5 to 5 pixels):

var depth:Number=(scene[i].y/(max-min));
var offset:Number=(depth-0.5)*10;

This code moves each element horizontally based on the offset value. The cyan part of the image is drawn after the update.

scene[i].x-=offset;

Finally, } can be added this at the end to complete the code structure. You now have a fully anaglyphic scene to publish.

Charles Maragna