Building a Dynamic Shadow Casting Engine in AS3

Dynamic shadows give game developers a way to recreate real life experience with lights and shadows. Every time we move, we cast shadows according to the position of the light sources around us. Dynamic shadows are no different than that. Our goal is to transfer this experience to the virtual world by creating an engine that will be able to cast these shadows.

These are common in 3D games. You have probably played a 3D game or watched a gameplay video and noticed that the shadows in most of them are dynamic. However, due to the complexity of the code, 2D games lack a good implementation of shadows, and often end up using a static alternative. The objective of this tutorial is to implement dynamic shadows in a 2D environment.

What Will You Need?

These two .swc files are used in this tutorial, so it's better to grab them now!

Light ball

Texture

Step 1: Defining Terms

During this tutorial we will use some terms that might not be common in your vocabulary, so here's a quick explanation of all of them:

Light source: any object that will create light. It will be represented by a single point and will have the following properties: range (radius of the circle created by the light), color (of the light), intensity (amount of light in the middle of the circle) and fall off (the amount of light that will still be present at the edges of the circle).
Light ball: if stated in the engine that they must be shown, the light ball will be in the center of a light source's circle and will represent the light source.
Solid object: any object that will cast shadows when illuminated by a light source. Will be defined by its vertices (defined in the counter-clockwise direction) and can have any shape you want, as long as it's a convex shape.
Display area: the area in which all the lights and objects are contained.
Light map: the sprite in which we will draw all the lights and shadows of the display area.
Objects map: the sprite in which we will draw all the objects of the display area.
Ambient light: it acts like sunlight, except that it can have any color you want. It will be applied to the entire light map, independant of the presence of lights and/or objects.

Important: Please note that the solid objects must be convex shapes and their vertices are defined in the counter-clockwise direction. This is very important and you may get different results if you don't do it (the reason for that will be explained later in the tutorial).

Step 2: An Example of Static Shadow

Static shadows are not what we want, but they are shown here to explain how they are done and in which cases having them isn't a problem.

Description: the circles below the characters are static shadows that only give the impression of a light source from the sky, like the sun.

Static shadows are simple circles with a radial alpha gradient (the most advanced ones have the shape of the object, for example) that lie below a character or an object. Sometimes their radii change if a character jumps or an object gets more distant from the gound, but they will always have a defined shape. Shadows like that are used when the light source is very distant from the objects, giving the impression that the shadows don't change. This is common in platform games or flying games, but not what we want to achieve here.

Step 3: Creating the Classes

Let's begin the code! First of all, we must set up all the classes that we will work with. For this tutorial, we will need three initial classes: ShadowEngine, Light and SolidObject. They must be created this way:

The classes don't need to extend any other class.

Step 4: Defining the Light

We will now start adding code to the classes. The first one will be the light. Here's the basic code:

 
package lightning 
{ 
	import flash.display.Sprite; 
	import flash.geom.Point; 
	 
	public class Light 
	{ 
		protected var _color:uint; 
		protected var _intensity:Number; 
		protected var _range:Number; 
		protected var _fallOff:Number; 
		 
		protected var _x:Number; 
		protected var _y:Number; 
		 
		protected var _drawingArea:Sprite; 
		 
		protected var _shadowArea:Sprite; 
		 
		public function Light(initialPosition:Point, color:uint, range:Number, intensity:Number = 1, fallOff:Number = 0) 
		{ 
			_x = initialPosition.x; 
			_y = initialPosition.y; 
			 
			_color = color; 
			_range = range; 
			_intensity = intensity; 
			_fallOff = fallOff; 
			 
			initializeDrawingArea(); 
		} 
		 
		private function initializeDrawingArea():void 
		{ 
			_drawingArea = new Sprite(); 
			 
			_shadowArea = new Sprite(); 
		} 
		 
		public function get x():Number 
		{ 
			return _x; 
		} 
		 
		public function set x(value:Number):void 
		{ 
			_x = value; 
		} 
		 
		public function get y():Number 
		{ 
			return _y; 
		} 
		 
		public function set y(value:Number):void 
		{ 
			_y = value; 
		} 
		 
		public function get drawingArea():Sprite 
		{ 
			return _drawingArea; 
		} 
		 
		public function get shadowArea():Sprite 
		{ 
			return _shadowArea; 
		} 
	} 
}

We defined the _x and _y properties of the light, the _color, _range, _intensity and _fallOff. Since we will need to access the x and y properties, we created getter and setter functions for them. They might look useless, but we will add more content in the functions as we start giving more "life" to our engine. The drawing area is a Sprite in which the light will be drawn, and the shadow area is the sprite in which all the shadows related to that light will be drawn. The drawing area and shadow area will blend together later. The initializeDrawingArea() function sets the drawing area and shadow area up for drawing. More will be added into that function later.

Step 5: Defining the Solid Object

Now we must define the SolidObject class. This contains a Vector of all the vertices (corners) that make up a solid object:

 
package objects 
{ 
	import flash.display.Sprite; 
	import flash.geom.Point; 
	 
	public class SolidObject 
	{ 
		protected var _vertices:Vector.<Point>; 
		protected var _numberOfVertices:int; 
		 
		protected var _x:Number; 
		protected var _y:Number; 
		 
		protected var _drawingArea:Sprite; 
		 
		public function SolidObject(initialPosition:Point, vertices:Vector.<Point>)  
		{ 
			// Getting a clean "version" of the vertices vector 
			_vertices = vertices.concat(); 
			 
			_numberOfVertices = _vertices.length; 
			 
			_x = initialPosition.x; 
			_y = initialPosition.y; 
			 
			initializeDrawingArea(); 
		} 
		 
		private function initializeDrawingArea():void 
		{ 
			_drawingArea = new Sprite(); 
		} 
		 
		public function get x():Number 
		{ 
			return _x; 
		} 
		 
		public function set x(value:Number):void 
		{ 
			_x = value; 
		} 
		 
		public function get y():Number 
		{ 
			return _y; 
		} 
		 
		public function set y(value:Number):void 
		{ 
			_y = value; 
		} 
		 
		public function get drawingArea():Sprite 
		{ 
			return _drawingArea; 
		} 
	} 
}

As we did with the light, the getter and setter functions for the _x and _y properties will have more content as we keep adding more things in the tutorial. You must notice line 19, which is highlighted; in this line we call the concat() function of the vertices argument passed to the constructor in order to provide a new Vector of points to our class. This way, our class can make changes to this Vector without changing the original one, which is the Vector passed as an argument. The drawing area of our solid object will be the Sprite in which we draw its image.

Step 6: Starting the Shadow Engine

We must now start coding the mechanics behind displaying the objects and lights! Here is the code for it:

 
package 
{ 
	import flash.display.Sprite; 
	 
	public class ShadowEngine 
	{ 
		public static var WIDTH:int; 
		public static var HEIGHT:int; 
		 
		private var _ambientLight:uint; 
		private var _ambientLightAlpha:Number; 
		 
		private var _drawBalls:Boolean; 
		 
		private var _drawingArea:Sprite; 
		 
		public function ShadowEngine(width:int, height:int, ambientLight:uint, ambientLightAlpha:Number, drawBalls:Boolean = true)  
		{ 
			// These will be accessed later by many parts of the code 
			ShadowEngine.WIDTH = width; 
			ShadowEngine.HEIGHT = height; 
			 
			_ambientLight = ambientLight; 
			_ambientLightAlpha = ambientLightAlpha; 
			 
			_drawBalls = drawBalls; 
			 
			_drawingArea = new Sprite(); 
			 
			trace("Shadow engine instantiated with success!"); 
			trace("Working on a rectangle " + ShadowEngine.WIDTH + " pixels wide and " + ShadowEngine.HEIGHT + " pixels high."); 
		} 
		 
		public function get drawingArea():Sprite 
		{ 
			return _drawingArea; 
		} 
	} 
}

The _ambientLight and _ambientLightAlpha properties will be used for applying the ambient light in the light map. The _drawBalls property indicates to the engine whether or not to draw the light sources' balls (that is, whether to render instances of the LightBall class, contained in the SWC you downloaded earlier). The WIDTH and HEIGHT properties are the width and height of the display area of the engine. They are created as "public static" properties because they will be later accessed in our other classes. The drawing area is what all the maps will be added to.

If we head to the Main class and create a new instance of the shadow engine, we will see the nice message in the output window!

 
private var _shadowEngine:ShadowEngine; 
 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.6, true); 
	 
	addChild(_shadowEngine.drawingArea); 
}

Note that we already added the engine's drawing area to Main's child list. This is the part of the code responsible for displaying everything in the screen.

Step 7: Adding and Removing Objects and Lights

Now we need to make our engine recognize objects and lights. This code will go into the ShadowEngine class:

 
private var _objects:Vector.<SolidObject>; 
private var _lights:Vector.<Light>; 
 
private var _objectMap:Sprite; 
private var _lightMap:Sprite; 
private var _ballsMap:Sprite; 
 
private var _numberOfObjects:int; 
private var _numberOfLights:int; 
 
private function createObjectMap():void 
{ 
	_objects = new Vector.<SolidObject>(); 
	 
	_objectMap = new Sprite(); 
	 
	// Creates a scroll rect to render only what is on the screen 
	_objectMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	 
	_drawingArea.addChild(_objectMap); 
	 
	trace("Object map created with success!"); 
} 
 
private function createLightMap():void 
{ 
	_lights = new Vector.<Light>(); 
	 
	_lightMap = new Sprite(); 
	 
	// Creates a scroll rect to render only what is on the screen 
	_lightMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	 
	_drawingArea.addChild(_lightMap); 
	 
	trace("Light map created with success!"); 
	 
	if (_drawBalls) 
	{ 
		_ballsMap = new Sprite(); 
		 
		// Creates a scroll rect to render only what is on the screen 
		_ballsMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
		 
		_drawingArea.addChild(_ballsMap); 
		 
		trace("Balls map created with success!"); 
	} 
} 
 
public function addObject(object:SolidObject):void 
{ 
	if (_objects.indexOf(object) < 0) 
	{ 
		_objects.push(object); 
		 
		_objectMap.addChild(object.drawingArea); 
		 
		_numberOfObjects = _objects.length; 
		 
		trace("Object added with success!"); 
	} 
} 
 
public function removeObject(object:SolidObject):void 
{ 
	if (_objects.indexOf(object) >= 0) 
	{ 
		_objects.splice(_objects.indexOf(object), 1); 
		 
		_objectMap.removeChild(object.drawingArea); 
		 
		_numberOfObjects = _objects.length; 
		 
		trace("Object removed with success!"); 
	} 
} 
 
public function addLight(lightObject:Light):void 
{ 
	if (_lights.indexOf(lightObject) < 0) 
	{ 
		_lights.push(lightObject); 
		 
		_lightMap.addChild(lightObject.drawingArea); 
		 
		_numberOfLights = _lights.length; 
		 
		trace("Light added with success!"); 
	} 
} 
 
public function removeLight(lightObject:Light):void 
{ 
	if (_lights.indexOf(lightObject) >= 0) 
	{ 
		_lights.splice(_lights.indexOf(lightObject), 1); 
		 
		_lightMap.removeChild(lightObject.drawingArea); 
		 
		_numberOfLights = _lights.length; 
		 
		trace("Light removed with success!"); 
	} 
}

And don't forget to add the following import statements:

1
2	import flash.geom.Rectangle;
3	import lightning.Light;
4	import objects.SolidObject;

In the code above, createObjectMap() and createLightMap() must be called when the ShadowEngine class is instantiated, because they are responsible for setting up all the maps used in the engine. The addObject(), removeObject(), addLight() and removeLight() functions do what their names suggest. Note that when we add or remove a light, we don't add their balls to the ball map yet, because they haven't been created in the Light class. This will be done on the later steps.

As said, in order to set up the light map and the object map, we must run createObjectMap() and createLightMap(). Let's add this code to the ShadowEngine constructor:

 
public function ShadowEngine(width:int, height:int, ambientLight:uint, ambientLightAlpha:Number, drawBalls:Boolean = true)  
{ 
	ShadowEngine.WIDTH = width; 
	ShadowEngine.HEIGHT = height; 
	 
	_ambientLight = ambientLight; 
	_ambientLightAlpha = ambientLightAlpha; 
	 
	_drawBalls = drawBalls; 
	 
	_drawingArea = new Sprite(); 
	 
	createObjectMap(); 
	createLightMap(); 
	 
	trace("Shadow engine instantiated with success!"); 
	trace("Working on a rectangle " + ShadowEngine.WIDTH + " pixels wide and " + ShadowEngine.HEIGHT + " pixels high."); 
}

With this code you can already add objects and lights inside the engine! Let's give it a try. In the Main class we will add two lights and one solid object with the following code:

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.6, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 500, 1, 0.15)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(250, 250), temporaryVertices)); 
}

Use these import statements:

1
2	import flash.geom.Point;
3	import lightning.Light;
4	import objects.SolidObject;

And this is what we get in the output window (don't worry, in the next steps we will actually draw the objects and lights)!

Step 8: Drawing the Object

It's time for some action: what do you think of drawing all the objects to the screen? In order to do that, we need to add draw() functions inside the SolidObject class.

The object will be drawn using Flash Player's drawing capabilities: we will begin filling the shape with a half-transparent red color, then run through each of the vertices creating lines, and then end the fill. Let's add this code to the SolidObject class:

 
private var _iterator:int; 
 
public function draw():void 
{ 
	_drawingArea.graphics.clear(); 
	_drawingArea.graphics.beginFill(0xFF0000, 0.5); 
	 
	_drawingArea.graphics.moveTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_iterator = 1; 
	 
	// Looping through each vertex 
	while (_iterator < _numberOfVertices) 
	{ 
		_drawingArea.graphics.lineTo(_vertices[_iterator].x + _x, _vertices[_iterator].y + _y); 
		 
		_iterator++; 
	} 
	 
	_drawingArea.graphics.lineTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_drawingArea.graphics.endFill(); 
}

The _iterator variable will be used throughout the class. It was created in order to help our engine's performance. Note that we add the object's current x and y positions to the vertices' positions before moving or drawing lines to them. That way we are able to draw in the exact position of our objects.

Step 9: Drawing the Light

In order to draw our light, we will need to create a gradient fill and draw a circle starting in our light's position. If you want to learn more about gradient fills, you can check this tutorial: How to Create Gradients with ActionScript.

Now, let's create some functions inside our Light class:

 
protected var _lightGradientMatrix:Matrix; 
 
private function initializeDrawingArea():void  
{ 
	_drawingArea = new Sprite(); 
	 
	_shadowArea = new Sprite(); 
	 
	_lightGradientMatrix = new Matrix(); 
	_lightGradientMatrix.createGradientBox(_range * 2, _range * 2, 0, _x - _range, _y - _range); 
} 
 
public function draw():void 
{ 
	_drawingArea.graphics.clear(); 
	_drawingArea.graphics.beginGradientFill(GradientType.RADIAL, [_color, _color], [_intensity, _fallOff], [0, 255], _lightGradientMatrix, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB); 
	_drawingArea.graphics.drawCircle(_x, _y, _range); 
	_drawingArea.graphics.endFill(); 
}

We created a gradient circle centered in the light's x and y positions in this code. The _lightGradientMatrix property needs to be inside a variable because we will later have to update it. We will also need to create the light's "ball" -- a graphic to represent the light source. Let's use the LightBall image provided in DynamicShadows.swc as the light ball. Inside the Light class, let's add a createBall() function and call it in the constructor:

 
protected var _ball:Sprite; 
protected var _ballColorTransform:ColorTransform; 
 
public function Light(initialPosition:Point, color:uint, range:Number, intensity:Number = 1, fallOff:Number = 0)  
{ 
	_x = initialPosition.x; 
	_y = initialPosition.y; 
	 
	_color = color; 
	_range = range; 
	_intensity = intensity; 
	_fallOff = fallOff; 
	 
	initializeDrawingArea(); 
	createBall(); 
} 
 
private function createBall():void 
{ 
	_ball = new LightBall(); 
	 
	_ball.x = _x; 
	_ball.y = _y; 
	 
	// Giving the color of our light to the ball 
	_ballColorTransform = new ColorTransform(); 
	_ballColorTransform.color = _color; 
	 
	_ball.transform.colorTransform = _ballColorTransform; 
} 
 
public function get ball():Sprite 
{ 
	return _ball; 
}

Don't forget that we need to add some import statements in our Light class!

 
import flash.display.GradientType; 
import flash.display.InterpolationMethod; 
import flash.display.SpreadMethod; 
import flash.geom.ColorTransform; 
import flash.geom.Matrix; 
import SWCAssets.LightBall;

The ColorTransform was used here in order to give the same color of our light source to the ball. The getter function for the ball property was created in order to add the light's ball in the ball map, and later in the ShadowEngine class. Now, everything should be right for adding these objects in the screen.

Step 10: Adding the Objects to the Screen

Back in our ShadowEngine class, we need now to draw our objects in the screen. In order to do that, we need to update our engine every frame and then ask every object to draw itself. Since the objects are added to the object map, they will be automatically displayed on the screen.

Our engine will be updated through the updateEngine() function. It should be called every frame. Let's add that in the ShadowEngine class:

 
public function updateEngine():void 
{ 
	drawObjects(); 
} 
 
private function drawObjects():void 
{ 
	var iterator:int = 0; 
	 
	// Looping through each object 
	while (iterator < _numberOfObjects) 
	{ 
		_objects[iterator].draw(); 
		 
		iterator++; 
	} 
}

We can now go to the Main class and create an Event.ENTER_FRAME event listener, then update the engine. Add the following code in the Main class:

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.6, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 500, 1, 0.15)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(250, 250), temporaryVertices)); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
} 
 
private function engineLoop(e:Event):void 
{ 
	_shadowEngine.updateEngine(); 
}

When compiling the project, we can see the result: our object (drawn in red):

Step 11: Drawing the Lights

Drawing our lights on the screen will be a bit more complicated. In the ShadowEngine class, let's create a drawLights() function and add the call to this function in the updateEngine() function. Let's also not forget to update the addLight() and removeLight() functions to make them add the Light's ball in the ball map:

 
private var _currentLight:Light; 
private var _lightIterator:int; 
 
public function updateEngine():void 
{ 
	drawObjects(); 
	drawLights(); 
} 
 
private function drawLights():void 
{ 
	// Applying the ambient light 
	_lightMap.graphics.clear(); 
	_lightMap.graphics.beginFill(_ambientLight, _ambientLightAlpha); 
	_lightMap.graphics.drawRect(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	_lightMap.graphics.endFill(); 
	 
	_lightIterator = 0; 
	 
	// Looping through each light and making it draw 
	while (_lightIterator < _numberOfLights) 
	{ 
		_currentLight = _lights[_lightIterator]; 
		 
		_currentLight.draw(); 
		 
		_lightIterator++; 
	} 
} 
 
public function addLight(lightObject:Light):void 
{ 
	if (_lights.indexOf(lightObject) < 0) 
	{ 
		_lights.push(lightObject); 
		 
		_lightMap.addChild(lightObject.drawingArea); 
		 
		_numberOfLights = _lights.length; 
		 
		trace("Light added with success!"); 
		 
		if (_drawBalls) 
		{ 
			_ballsMap.addChild(lightObject.ball); 
			 
			trace("Draw Balls is true. Light's ball added with success!"); 
		} 
	} 
} 
 
public function removeLight(lightObject:Light):void 
{ 
	if (_lights.indexOf(lightObject) >= 0) 
	{ 
		_lights.splice(_lights.indexOf(lightObject), 1); 
		 
		_lightMap.removeChild(lightObject.drawingArea); 
		 
		_numberOfLights = _lights.length; 
		 
		trace("Light removed with success!"); 
		 
		if (_drawBalls) 
		{ 
			_ballsMap.removeChild(lightObject.ball); 
			 
			trace("Draw Balls is true. Light's ball removed with success!"); 
		} 
	} 
}

This code clears the light map in order to apply the ambient light, and also loops through each light and makes the light draw itself in its drawing area. Since each light's drawing area is added to the light map, they will be automatically shown.

We can now add lights into the engine! Take a look at our result:

You can see the two light sources that we added back in Step 7: one cyan and one red. You can also just about see the solid object, but it's drowned out by the cyan light!

Step 12: Improving the Lights

In our last build, the lights are too much bright, and this makes it hard to see other objects. This happens because we are only drawing the lights in the screen, so the raw color data is being used. What if we wanted to have more than a light (like in our example)? Their colors would need to mix up a bit in their intersection. In our example, the red light can barely be seen. And we can't forget the ambient light, which is present at all the time, but is covered by the lights now. This can be easily changed by using Blend Modes.

The Blend Mode we will use in our engine at this time is the Multiply mode. The Multiply mode must be added in our light map, so that it affects every light added to it. Let's add it in the ShadowEngine class:

 
private function createLightMap():void 
{ 
	_lights = new Vector.<Light>(); 
	 
	_lightMap = new Sprite(); 
	 
	_lightMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	 
	_lightMap.blendMode = BlendMode.MULTIPLY; 
	 
	_drawingArea.addChild(_lightMap); 
	 
	trace("Light map created with success!"); 
	 
	if (_drawBalls) 
	{ 
		_ballsMap = new Sprite(); 
		 
		_ballsMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
		 
		_drawingArea.addChild(_ballsMap); 
		 
		trace("Balls map created with success!"); 
	} 
}

And let's not forget the import statement:

1
2	import flash.display.BlendMode;

Hit the compile button and this is the screen we get:

It looks much better now! We can see that in the non-red corners the ambient light starts to kick in! However, the cyan light still looks too bright. What about reducing its range to 300 pixels and fall off to 0 in the Main class? Let's also increase the ambient light's alpha to 1. That way we can create a totally dark environment with only the two lights illuminating it.

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 1, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 300, 1, 0)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(250, 250), temporaryVertices)); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
}

Let's take a look at our result:

This is starting to take shape, isn't it?

Step 13: Introducing the Hard-Edged Shadow Casting

Now that we have our classes displaying in the screen properly and that our lights draw themselves correctly in the screen, it's time to begin our work towards shadow casting. The first method we will use is called the Hard-edged Shadow Casting. It is called that way because we assume the light is a single point and every light ray comes only from this point, creating a solid shadow behind the objects.

In order to draw the shadows, we need to set up a strategy. This is ours:

Draw a line connecting the light source and a vertex in our shape.
Identify whether this vertex is totally illuminated by the light (i.e. is in the "front"), is totally immersed in the shadow (i.e. is in the "back"), or is a boundary vertex. A boundary vertex lies in the intersection between front faced and back faced edges.
Create a Vector with all the back-facing vertices and both boundary vertices.
Draw triangles, connecting all the back facing and boundary vertices, in the light's shadow area.

All this code will be within the SolidObject class, because it is the only one that should know about its vertices. We will pass the light properties used in our class through a function called castShadows().

Step 14: A bit About Vectors

If you are not familiar with vectors yet, I suggest you take a look at my earlier tutorial, Euclidean Vectors in Flash.

In the next steps we will need to find the normal for every edge of our shape, then make a dot product between the normal and the vector passing through the light's point and the middle of the edge. If this dot product is less than 0, then the edge is back facing. If not, then it is front facing. We will not store the edges that are back and front facing, but instead we will store the index to the first point that makes the edge. This will make things easier later when determining the back facing vertices.

Description: Normals are shown in green. We will do a dot product between each normal and its corresponding orange vector (the vector from the light source to the middle of edge)

Step 15: Classifying the Edges

It is time to begin coding, and the first thing is to loop through each vertex and check if it belongs to an edge that is back facing or front facing. We will then store this in a Vector called _backFacing. We will be using the method described in the tutorial linked in the previous step in order to calculate the dot product and the normal of the edge, and we will have a function called checkEdgeBackFacing() to determine if an edge is back facing. In the SolidObject class:

 
private var _edgeNormalX:Number; 
private var _edgeNormalY:Number; 
 
private var _lightDirectionX:Number; 
private var _lightDirectionY:Number; 
 
private var _backFacing:Vector.<Boolean>; 
 
private function checkEdgeBackFacing(lightSourcePosition:Point, firstEdge:Point, secondEdge:Point):Boolean 
{ 
	// Normal 
	_edgeNormalX = -(secondEdge.y - firstEdge.y); 
	_edgeNormalY = secondEdge.x - firstEdge.x; 
	 
	// Vector from the light position to the edge's middle point 
	_lightDirectionX = lightSourcePosition.x - ((firstEdge.x + secondEdge.x) / 2); 
	_lightDirectionY = lightSourcePosition.y - ((firstEdge.y + secondEdge.y) / 2); 
	 
	// Dot product 
	if ((_edgeNormalX * _lightDirectionX) + (_edgeNormalY * _lightDirectionY) > 0) 
	{ 
		return false; 
	} 
	 
	return true; 
} 
 
public function castShadows(lightSourcePosition:Point):void 
{ 
	_backFacing = new Vector.<Boolean>(); 
	 
	var currentEdgeSecondPoint:int; 
	 
	_iterator = 0; 
	 
	// Looping through each vertex 
	while (_iterator < _numberOfVertices) 
	{ 
		// Calculating what is the next vertex that makes an edge 
		currentEdgeSecondPoint = (_iterator + 1) % _numberOfVertices; 
		 
		_backFacing[_iterator] = checkEdgeBackFacing(lightSourcePosition, new Point(_x + _vertices[_iterator].x, _y + _vertices[_iterator].y), new Point(_x + _vertices[currentEdgeSecondPoint].x, _y + _vertices[currentEdgeSecondPoint].y)); 
		 
		_iterator++; 
	} 
}

In the above code, note the importance of defining the vertices in a counter-clockwise direction. When we loop through the edges, we are running in a counter-clockwise direction and storing the facing of the edges in the same direction. If there wasn't an order when defining the vertices of each object, then this code would all get messed up.

Step 16: Defining the Boundary Vertices

Now that we know the facing of each edge, we can determine which vertices are the boundary vertices. We will determine the "starting" boundary vertex and the "ending" boundary vertex. The starting vertex is in the intersection with a front facing edge followed by a back facing edge. The ending vertex is in the intersection with a back facing edge followed by a front facing edge. Take a look at the image below:

Let's go to our code. In the SolidObject class, we will add the following code to the castShadows() function.

 
private var _currentPoint:int; 
private var _nextPoint:int; 
 
private var _startingBoundaryVertexIndex:int; 
private var _endingBoundaryVertexIndex:int; 
 
public function castShadows(lightSourcePosition:Point):void 
{ 
	_backFacing = new Vector.<Boolean>(); 
	 
	var currentEdgeSecondPoint:int; 
	 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		currentEdgeSecondPoint = (_iterator + 1) % _numberOfVertices; 
		 
		_backFacing[_iterator] = checkEdgeBackFacing(lightSourcePosition, new Point(_x + _vertices[_iterator].x, _y + _vertices[_iterator].y), new Point(_x + _vertices[currentEdgeSecondPoint].x, _y + _vertices[currentEdgeSecondPoint].y)); 
		 
		_iterator++; 
	} 
	 
	_startingBoundaryVertexIndex = 0; 
	_endingBoundaryVertexIndex = 0; 
	 
	_iterator = 0; 
	 
	_currentPoint = 0; 
	_nextPoint = 0; 
	 
	// Looping again through each vertex 
	while (_iterator < _numberOfVertices) 
	{ 
		_currentPoint = _iterator; 
		_nextPoint = (_iterator + 1) % _numberOfVertices; 
		 
		if (!_backFacing[_currentPoint] && _backFacing[_nextPoint]) 
			_startingBoundaryVertexIndex = _nextPoint; 
		 
		if (_backFacing[_currentPoint] && !_backFacing[_nextPoint]) 
			_endingBoundaryVertexIndex = _nextPoint; 
		 
		_iterator++; 
	} 
}

Step 17: Determining the Number of Vertices in the Shadow and Looping Through Them

Now that we know the starting and ending boundary vertices, we can tell which vertices are in the shadow, so we can draw the shadows later. However, this task is not as easy as it sounds. One may infer that it is just about looping from the _startingBoundaryVertexIndex to the _endingBoundaryVertexIndex, but what if we have the _endingBoundaryVertexIndex lower than the _startingBoundaryVertexIndex? We need to take care of this issue, while still being able to loop through all the vertices. Here is the code for it:

 
private var _shadowPointCount:int; 
private var _currentHullIndex:int; 
 
public function castShadows(lightSourcePosition:Point):void 
{ 
	_backFacing = new Vector.<Boolean>(); 
	 
	var currentEdgeSecondPoint:int; 
	 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		currentEdgeSecondPoint = (_iterator + 1) % _numberOfVertices; 
		 
		_backFacing[_iterator] = checkEdgeBackFacing(lightSourcePosition, new Point(_x + _vertices[_iterator].x, _y + _vertices[_iterator].y), new Point(_x + _vertices[currentEdgeSecondPoint].x, _y + _vertices[currentEdgeSecondPoint].y)); 
		 
		_iterator++; 
	} 
	 
	_startingBoundaryVertexIndex = 0; 
	_endingBoundaryVertexIndex = 0; 
	 
	_iterator = 0; 
	 
	_currentPoint = 0; 
	_nextPoint = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_currentPoint = _iterator; 
		_nextPoint = (_iterator + 1) % _numberOfVertices; 
		 
		if (!_backFacing[_currentPoint] && _backFacing[_nextPoint]) 
			_startingBoundaryVertexIndex = _nextPoint; 
		 
		if (_backFacing[_currentPoint] && !_backFacing[_nextPoint]) 
			_endingBoundaryVertexIndex = _nextPoint; 
		 
		_iterator++; 
	} 
	 
	// Counting how many points are in the shadow 
	_shadowPointCount = _endingBoundaryVertexIndex > _startingBoundaryVertexIndex ? _endingBoundaryVertexIndex - _startingBoundaryVertexIndex + 1 : _numberOfVertices - _startingBoundaryVertexIndex + _endingBoundaryVertexIndex + 1; 
	 
	_iterator = 0; 
	 
	// This will be used to access each point in the shadow 
	_currentHullIndex = _startingBoundaryVertexIndex; 
	 
	// Creating a loop with the same amount of iterations as there are points in the shadow 
	while (_iterator < _shadowPointCount) 
	{ 
		_currentHullIndex = (_currentHullIndex + 1) % _numberOfVertices; 
		 
		_iterator++; 
	} 
}

The code added counts the number of vertices in the shadows, then creates a _currentHullIndex property (named after the idea of a convex hull). The _currentHullIndex will loop through our vertices in the shadow. This will be the index used to access the vertices.

Step 18: The Light-to-Vertex Vectors

As stated in Step 13, we will have to draw triangles in order to build our shadow. The triangles will be based on the vertices in the shadow, but they aren't enough. We need a few extra points, which we will call the light-to-vertex vectors, that will give the illusion that the shadow goes to the infinity. In order to do that, we need to first determine these vectors, and then multiply them (refer to the tutorial pointed in Step 14 to learn how to multiply vectors) by a very big scalar number, so that they give the illusion we want.

Here is how we determine them:

 
private var _currentLightToVertex:Point; 
 
public function castShadows(lightSourcePosition:Point):void 
{ 
	_backFacing = new Vector.<Boolean>(); 
	 
	var currentEdgeSecondPoint:int; 
	 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		currentEdgeSecondPoint = (_iterator + 1) % _numberOfVertices; 
		 
		_backFacing[_iterator] = checkEdgeBackFacing(lightSourcePosition, new Point(_x + _vertices[_iterator].x, _y + _vertices[_iterator].y), new Point(_x + _vertices[currentEdgeSecondPoint].x, _y + _vertices[currentEdgeSecondPoint].y)); 
		 
		_iterator++; 
	} 
	 
	_startingBoundaryVertexIndex = 0; 
	_endingBoundaryVertexIndex = 0; 
	 
	_iterator = 0; 
	 
	_currentPoint = 0; 
	_nextPoint = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_currentPoint = _iterator; 
		_nextPoint = (_iterator + 1) % _numberOfVertices; 
		 
		if (!_backFacing[_currentPoint] && _backFacing[_nextPoint]) 
			_startingBoundaryVertexIndex = _nextPoint; 
		 
		if (_backFacing[_currentPoint] && !_backFacing[_nextPoint]) 
			_endingBoundaryVertexIndex = _nextPoint; 
		 
		_iterator++; 
	} 
	 
	_shadowPointCount = _endingBoundaryVertexIndex > _startingBoundaryVertexIndex ? _endingBoundaryVertexIndex - _startingBoundaryVertexIndex + 1 : _numberOfVertices - _startingBoundaryVertexIndex + _endingBoundaryVertexIndex + 1; 
	 
	_iterator = 0; 
	 
	_currentHullIndex = _startingBoundaryVertexIndex; 
	 
	while (_iterator < _shadowPointCount) 
	{ 
		_currentLightToVertex = new Point(); 
		 
		_currentLightToVertex.x = _x + _vertices[_currentHullIndex].x - lightSourcePosition.x; 
		_currentLightToVertex.y = _y + _vertices[_currentHullIndex].y - lightSourcePosition.y; 
		 
		// Normalizing the vector so that we can later multiply it by a big number 
		_currentLightToVertex.normalize(1); 
		 
		_currentHullIndex = (_currentHullIndex + 1) % _numberOfVertices; 
		 
		_iterator++; 
	} 
}

This code gives us the vector that goes from the light source to the vertex we want. In the next steps we will use it to draw the shadows we want.

Step 19: Details on drawing the shadows

We can now finally draw the shadows, but we must first create a more complete strategy for drawing them. We will need to draw a lot of triangles in order, so if we don't get it organized now, our code will become messy.

According to the image, we will start in the starting boundary vertex. Then a line will be drawn to the first light-to-vertex, and then another line will be drawn to the next shadow point. In order to complete the triangle, we will draw a line back to the starting boundary vertex.

Going to the next vertex, we will do the same thing, but now notice that there is a gap between both triangles. In order to fill this gap, we also must begin in the second vertex, then draw a line to the light-to-vertex of this vertex, and then draw another line to the previous light-to-vertex point. Then we complete the triangle drawing back to the second vertex.

Notice that we will need to hold the previous light-to-vertex as well, in order for this strategy to work.

When we reach the last vertex in the shadows, we will only draw a triangle using the light-to-vertex point for the last vertex and the previous light-to-vertex point.

Step 20: Drawing the Shadows

In order to draw the shadows, we will need the light source's shadow area to draw into them. Let's add a parameter to the castShadows() function and create our code!

 
private var _previousLightToVertex:Point; 
 
public function castShadows(lightSourcePosition:Point, drawToArea:Sprite):void 
{ 
	_backFacing = new Vector.<Boolean>(); 
	 
	var currentEdgeSecondPoint:int; 
	 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		currentEdgeSecondPoint = (_iterator + 1) % _numberOfVertices; 
		 
		_backFacing[_iterator] = checkEdgeBackFacing(lightSourcePosition, new Point(_x + _vertices[_iterator].x, _y + _vertices[_iterator].y), new Point(_x + _vertices[currentEdgeSecondPoint].x, _y + _vertices[currentEdgeSecondPoint].y)); 
		 
		_iterator++; 
	} 
	 
	_startingBoundaryVertexIndex = 0; 
	_endingBoundaryVertexIndex = 0; 
	 
	_iterator = 0; 
	 
	_currentPoint = 0; 
	_nextPoint = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_currentPoint = _iterator; 
		_nextPoint = (_iterator + 1) % _numberOfVertices; 
		 
		if (!_backFacing[_currentPoint] && _backFacing[_nextPoint]) 
			_startingBoundaryVertexIndex = _nextPoint; 
		 
		if (_backFacing[_currentPoint] && !_backFacing[_nextPoint]) 
			_endingBoundaryVertexIndex = _nextPoint; 
		 
		_iterator++; 
	} 
	 
	_shadowPointCount = _endingBoundaryVertexIndex > _startingBoundaryVertexIndex ? _endingBoundaryVertexIndex - _startingBoundaryVertexIndex + 1 : _numberOfVertices - _startingBoundaryVertexIndex + _endingBoundaryVertexIndex + 1; 
	 
	_iterator = 0; 
	 
	_currentHullIndex = _startingBoundaryVertexIndex; 
	 
	_currentLightToVertex = null; 
	_previousLightToVertex = null; 
	 
	while (_iterator < _shadowPointCount) 
	{ 
		if (_iterator != _shadowPointCount - 1) 
		{ 
			// This code will run for every point in the shadow, not including the last point (which will only draw one triangle instead of two) 
			 
			drawToArea.graphics.beginFill(0x000000, 1); 
			drawToArea.graphics.moveTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			_currentLightToVertex = new Point(); 
			 
			_currentLightToVertex.x = _x + _vertices[_currentHullIndex].x - lightSourcePosition.x; 
			_currentLightToVertex.y = _y + _vertices[_currentHullIndex].y - lightSourcePosition.y; 
			 
			_currentLightToVertex.normalize(1); 
			 
			drawToArea.graphics.lineTo(lightSourcePosition.x + (_currentLightToVertex.x * 10000), lightSourcePosition.y + (_currentLightToVertex.y * 10000)); 
			 
			drawToArea.graphics.lineTo(_x + _vertices[(_currentHullIndex + 1) % _numberOfVertices].x, _y + _vertices[(_currentHullIndex + 1) % _numberOfVertices].y); 
			 
			drawToArea.graphics.lineTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			drawToArea.graphics.endFill(); 
			 
			// Checking if we are past the first vector and start drawing the second "type" of triangle to give a full shadow idea 
			if (_previousLightToVertex) 
			{ 
				drawToArea.graphics.beginFill(0x000000, 1); 
				drawToArea.graphics.moveTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
				 
				drawToArea.graphics.lineTo(lightSourcePosition.x + (_currentLightToVertex.x * 10000), lightSourcePosition.y + (_currentLightToVertex.y * 10000)); 
				 
				drawToArea.graphics.lineTo(lightSourcePosition.x + (_previousLightToVertex.x * 10000), lightSourcePosition.y + (_previousLightToVertex.y * 10000)); 
				 
				drawToArea.graphics.lineTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
				 
				drawToArea.graphics.endFill(); 
			} 
		} 
		else 
		{ 
			// This code will only run for the last shadow point 
			 
			drawToArea.graphics.beginFill(0x000000, 1); 
			drawToArea.graphics.moveTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			_currentLightToVertex = new Point(); 
			 
			_currentLightToVertex.x = _x + _vertices[_currentHullIndex].x - lightSourcePosition.x; 
			_currentLightToVertex.y = _y + _vertices[_currentHullIndex].y - lightSourcePosition.y; 
			 
			_currentLightToVertex.normalize(1); 
			 
			drawToArea.graphics.lineTo(lightSourcePosition.x + (_currentLightToVertex.x * 10000), lightSourcePosition.y + (_currentLightToVertex.y * 10000)); 
			 
			drawToArea.graphics.lineTo(lightSourcePosition.x + (_previousLightToVertex.x * 10000), lightSourcePosition.y + (_previousLightToVertex.y * 10000)); 
			 
			drawToArea.graphics.lineTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			drawToArea.graphics.endFill(); 
		} 
		 
		_previousLightToVertex = _currentLightToVertex; 
		 
		_currentHullIndex = (_currentHullIndex + 1) % _numberOfVertices; 
		 
		_iterator++; 
	} 
}

Notice that we multiply the light-to-vertex points by 10000, a reasonable number to give the illusion of a shadow going to the infinity.

Step 21: Adding the Drawing Code to the Engine

In order to have our engine drawing the shadows, we need to add some code in the ShadowEngine class. Let's do it!

 
private var _currentObject:SolidObject; 
private var _objectIterator:int; 
 
private function drawLights():void 
{ 
	_lightMap.graphics.clear(); 
	_lightMap.graphics.beginFill(_ambientLight, _ambientLightAlpha); 
	_lightMap.graphics.drawRect(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	_lightMap.graphics.endFill(); 
	 
	_lightIterator = 0; 
	 
	while (_lightIterator < _numberOfLights) 
	{ 
		_currentLight = _lights[_lightIterator]; 
		 
		_currentLight.draw(); 
		 
		_objectIterator = 0; 
		 
		while (_objectIterator < _numberOfObjects) 
		{ 
			_currentObject = _objects[_objectIterator]; 
			 
			_currentObject.castShadows(new Point(_currentLight.x, _currentLight.y), _currentLight.shadowArea); 
			 
			_objectIterator++; 
		} 
		 
		_lightIterator++; 
	} 
}

Don't forget to add the following import statement:

1
2	import flash.geom.Point;

With that code in the function, all left to do is make the Light's shadow area visible. Let's head to the Light class and add this code in initializeDrawingArea():

 
		private function initializeDrawingArea():void  
		{ 
			_drawingArea = new Sprite(); 
			 
			_shadowArea = new Sprite(); 
			 
			_drawingArea.addChild(_shadowArea); 
			 
			_lightGradientMatrix = new Matrix(); 
			_lightGradientMatrix.createGradientBox(_range * 2, _range * 2, 0, _x - _range, _y - _range); 
		}

Now, let's compile the project aaaaand...

Check out the result!

Congratulations!!! You have just made the first step to an awesome dynamic shadows engine! However, there are more things that we should do before using it.

Step 22: Creating Bounds

In order to optimize our engine, we must save processing time. Right now, our engine is looping through every light and making every object draw shadows in their drawing areas. Let's add bounds to every object and light and check whether the bounds of an object touch the bounds of a light. If this happens, then we draw the object's shadow into the light's drawing area. If not, then we skip the drawing. That will save a lot of performance.

Inside the Light class:

 
protected var _AABB:Rectangle; 
 
public function Light(initialPosition:Point, color:uint, range:Number, intensity:Number = 1, fallOff:Number = 0)  
{ 
	_x = initialPosition.x; 
	_y = initialPosition.y; 
	 
	_color = color; 
	_range = range; 
	_intensity = intensity; 
	_fallOff = fallOff; 
	 
	_AABB = new Rectangle(); 
	 
	initializeDrawingArea(); 
	createBall(); 
	updateAABB(); 
} 
 
protected function updateAABB():void 
{ 
	_AABB.x = _x - _range; 
	_AABB.y = _y - _range; 
	 
	_AABB.left = _x - _range; 
	_AABB.right = _x + _range; 
	 
	_AABB.top = _y - _range; 
	_AABB.bottom = _y + _range; 
} 
 
public function set x(value:Number):void 
{ 
	_x = value; 
	 
	updateAABB(); 
} 
 
public function set y(value:Number):void 
{ 
	_y = value; 
	 
	updateAABB(); 
} 
 
public function get AABB():Rectangle 
{ 
	return _AABB; 
}

(AABB stands for Axis-Aligned Bounding Box.)

This code will create the bounds of our light as a square, centred on the light, and update it every time we change our light's position. Don't forget to import the Rectangle class:

1
2	import flash.geom.Rectangle;

Now, inside SolidObject:

 
protected var _AABB:Rectangle; 
 
public function SolidObject(initialPosition:Point, vertices:Vector.<Point>)  
{ 
	_vertices = vertices.concat(); 
	 
	_numberOfVertices = _vertices.length; 
	 
	_x = initialPosition.x; 
	_y = initialPosition.y; 
	 
	createAABB(); 
	initializeDrawingArea(); 
} 
 
private function createAABB():void 
{ 
	_AABB = new Rectangle(0, 0, 0, 0); 
	 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		if (_vertices[_iterator].x < _AABB.left) 
		{ 
			_AABB.left = _vertices[_iterator].x; 
		} 
		else if (_vertices[_iterator].x > _AABB.right) 
		{ 
			_AABB.right = _vertices[_iterator].x; 
		} 
		 
		if (_vertices[_iterator].y < _AABB.top) 
		{ 
			_AABB.top = _vertices[_iterator].y; 
		} 
		else if (_vertices[_iterator].y > _AABB.bottom) 
		{ 
			_AABB.bottom = _vertices[_iterator].y; 
		} 
		 
		_iterator++; 
	} 
	 
	_AABB.x += _x; 
	_AABB.y += _y; 
} 
 
public function set x(value:Number):void 
{ 
	_AABB.x -= _x; 
	 
	_x = value; 
	 
	_AABB.x += _x; 
} 
 
public function set y(value:Number):void 
{ 
	_AABB.y -= _y; 
	 
	_y = value; 
	 
	_AABB.y += _y; 
} 
 
public function get AABB():Rectangle 
{ 
	return _AABB; 
}

Don't forget the import statement here, either:

1
2	import flash.geom.Rectangle;

The createAABB() function creates the bounds of our object based on the position the vertices were created. The reason we don't have an updateAABB() function in the SolidObject class is that, when the x or y properties change, all we need to do is bring the AABB rectangle to the new position, and that can easily be handled in the setter functions themselves.

Step 23: Simple Boundary Check

Now that we have our boundaries created in each object, let's do a quick check in the ShadowEngine class: if the bounds of an object intersect the bounds of a light, then the object's shadow should be cast in the light. If not, then nothing happens. The code:

 
		private function drawLights():void 
		{ 
			// Applying the ambient light 
			_lightMap.graphics.clear(); 
			_lightMap.graphics.beginFill(_ambientLight, _ambientLightAlpha); 
			_lightMap.graphics.drawRect(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
			_lightMap.graphics.endFill(); 
			 
			_lightIterator = 0; 
			 
			// Looping through each light and making it draw 
			while (_lightIterator < _numberOfLights) 
			{ 
				_currentLight = _lights[_lightIterator]; 
				 
				_currentLight.draw(); 
				 
				_objectIterator = 0; 
				 
				while (_objectIterator < _numberOfObjects) 
				{ 
					_currentObject = _objects[_objectIterator]; 
					 
					// Checking for bounding rectangle intersection 
					if (_currentLight.AABB.intersects(_currentObject.AABB)) 
					{ 
						_currentObject.castShadows(new Point(_currentLight.x, _currentLight.y), _currentLight.shadowArea); 
					} 
					 
					_objectIterator++; 
				} 
				 
				_lightIterator++; 
			} 
		}

With that code, we saved a lot of process time when our engine begins to have more objects and lights!

Step 24: Correction of the Light's Matrix

If we take another look at our code in our Light class, we will notice that our _lightGradientMatrix depends on the Light's x and y properties, and it doesn't update when these properties change. Let's fix that:

 
protected function updateGradientMatrix():void 
{ 
	_lightGradientMatrix.createGradientBox(_range * 2, _range * 2, 0, _x - _range, _y - _range); 
} 
 
public function set x(value:Number):void 
{ 
	_x = value; 
	 
	updateAABB(); 
	updateGradientMatrix(); 
} 
 
public function set y(value:Number):void 
{ 
	_y = value; 
	 
	updateAABB(); 
	updateGradientMatrix(); 
}

With this code, everything should be right for our Light class. Everything that depends on the x and y properties are updated.

Step 25: Creating a Mask for the Light

If you had the interest to try a few things in our current engine, you will notice that if you change the ambient light, you will notice something very weird.

Description: our engine with the ambient light set to full green (0x00FF00) with an alpha of 0.3 and a white (0xFFFFFF) background.

See that our object's shadow extends to the infinity and takes up the space (the red rectangle) that should be the ambient light's space, since the cyan light doesn't have "power" to illuminate everything in the stage? We need to fix that, and for that we can simply add a circular mask to the Light. The code:

 
protected var _drawingAreaMask:Sprite; 
 
private function initializeDrawingArea():void  
{ 
	_drawingArea = new Sprite(); 
	 
	_shadowArea = new Sprite(); 
	 
	_drawingArea.addChild(_shadowArea); 
	 
	_lightGradientMatrix = new Matrix(); 
	_lightGradientMatrix.createGradientBox(_range * 2, _range * 2, 0, _x - _range, _y - _range); 
	 
	_drawingAreaMask = new Sprite(); 
	_drawingAreaMask.graphics.beginFill(0x000000, 1); 
	_drawingAreaMask.graphics.drawCircle(_x, _y, _range); 
	_drawingAreaMask.graphics.endFill(); 
	 
	_drawingArea.mask = _drawingAreaMask; 
} 
 
protected function updateDrawingAreaMask():void 
{ 
	_drawingAreaMask.graphics.clear(); 
	_drawingAreaMask.graphics.beginFill(0x000000, 1); 
	_drawingAreaMask.graphics.drawCircle(_x, _y, _range); 
	_drawingAreaMask.graphics.endFill(); 
} 
 
public function set x(value:Number):void 
{ 
	_x = value; 
	 
	updateAABB(); 
	updateGradientMatrix(); 
	updateDrawingAreaMask(); 
} 
 
public function set y(value:Number):void 
{ 
	_y = value; 
	 
	updateAABB(); 
	updateGradientMatrix(); 
	updateDrawingAreaMask(); 
}

The code part is done. If we compile our project (maintaining the properties in the description of this step's image), this is what we will see:

Still doesn't look quite right, does it? Time to fix those shadows!

Step 26: Using the Erase Blend Mode and Cleaning the Shadows

Right now our engine draws shadows in a full black (0x000000) color. The problem with this is that not always we have a full black ambient light and the shadows should be the absence of light. Our objective in this step is to completely remove the shadows from the visible area, while still leaving an empty space in its location. In order to do that, we need to simply add a BlendMode.ERASE in our Light's shadow area. However, this requires that the parent display object container (in our case, the Light's drawing area) has a blend mode set to Layer.

Let's do it. In Light.as:

 
private function initializeDrawingArea():void  
{ 
	_drawingArea = new Sprite(); 
	 
	_shadowArea = new Sprite(); 
	 
	_drawingArea.addChild(_shadowArea); 
	 
	_drawingArea.blendMode = BlendMode.LAYER; 
	 
	_shadowArea.blendMode = BlendMode.ERASE; 
	 
	_lightGradientMatrix = new Matrix(); 
	_lightGradientMatrix.createGradientBox(_range * 2, _range * 2, 0, _x - _range, _y - _range); 
	 
	_drawingAreaMask = new Sprite(); 
	_drawingAreaMask.graphics.beginFill(0x000000, 1); 
	_drawingAreaMask.graphics.drawCircle(_x, _y, _range); 
	_drawingAreaMask.graphics.endFill(); 
	 
	_drawingArea.mask = _drawingAreaMask; 
}

And add the following import statement:

1
2	import flash.display.BlendMode;

We also must notice that our Light's shadow area isn't being cleared on every frame. That way, if any object moves, the shadows will "sum up", which definitely isn't what we want. It also starts to lag after some time, due to not clearing the shadow area before drawing the new shadow. Let's go to ShadowEngine and add a single line of code to fix that:

 
private function drawLights():void 
{ 
	// Applying the ambient light 
	_lightMap.graphics.clear(); 
	_lightMap.graphics.beginFill(_ambientLight, _ambientLightAlpha); 
	_lightMap.graphics.drawRect(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	_lightMap.graphics.endFill(); 
	 
	_lightIterator = 0; 
	 
	// Looping through each light and making it draw 
	while (_lightIterator < _numberOfLights) 
	{ 
		_currentLight = _lights[_lightIterator]; 
		 
		_currentLight.shadowArea.graphics.clear(); 
		 
		_currentLight.draw(); 
		 
		_objectIterator = 0; 
		 
		while (_objectIterator < _numberOfObjects) 
		{ 
			_currentObject = _objects[_objectIterator]; 
			 
			if (_currentLight.AABB.intersects(_currentObject.AABB)) 
			{ 
				_currentObject.castShadows(new Point(_currentLight.x, _currentLight.y), _currentLight.shadowArea); 
			} 
			 
			_objectIterator++; 
		} 
		 
		//_currentLight.clearShadowsFromDrawingArea(); 
		 
		_lightIterator++; 
	} 
}

If we compile our project now, that's what we should get:

Works like a charm! You see how the shadow of the solid object is now the absence of cyan light, rather than the absence of all light, including the ambient light?

Our next step is to improve the look of our shadows.

Step 27: Introducing Soft-Edged Shadow Casting

Our engine has been using hard-edged shadow casting until now. This isn't a problem, since it is, in theory, how shadows should work with lights represented as points. However, in reality there isn't a source of light that behaves as a single point: every light source has some kind of dimension, even if it's small. We can view these light sources as an infinity of other tiny light sources, so tiny that they can be considered points. That way, a real light source can be represented as being made up of many of these "tiny light sources". We would spend a lot of time adding this to our engine, since this would require a lot of processing, and Flash wouldn't handle that for a few light sources per frame.

Instead of taking the approach cited above, we are going to use a small trick to give the impression of soft-edged shadow casting. Compare both images below:

Can you guess what are we going to do? That's right: we will add a small blur filter to our lights, to give the same idea of soft-edged shadow casting. Let's do that in ShadowEngine:

 
private function createLightMap():void 
{ 
	_lights = new Vector.<Light>(); 
	 
	_lightMap = new Sprite(); 
	 
	_lightMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	 
	_lightMap.blendMode = BlendMode.MULTIPLY; 
	 
	_lightMap.filters = [new BlurFilter(5, 5, 1)]; 
	 
	_drawingArea.addChild(_lightMap); 
	 
	trace("Light map created with success!"); 
	 
	if (_drawBalls) 
	{ 
		_ballsMap = new Sprite(); 
		 
		_ballsMap.scrollRect = new Rectangle(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
		 
		_drawingArea.addChild(_ballsMap); 
		 
		trace("Balls map created with success!"); 
	} 
}

And don't forget the import statement:

1
2	import flash.filters.BlurFilter;

Let's change our ambient light back to full black (0x000000) with an alpha of 1 to see the effect better. When we compile our project, this is what we see:

Notice something weird around our object? Me too. Let's see what's causing the problem and how to fix that.

Step 28: Adding the Shadows on our Objects' Shapes

The problem with our engine right now is that we are only drawing the shadows behind our objects. However, we forgot that in the place where our objects are, there is also shadow! We can easily fix that by drawing their shape in the castShadows() function, in the SolidObject class. Remember the process used in the draw() function for our solid objects? We will do the same thing:

 
public function castShadows(lightSourcePosition:Point, drawToArea:Sprite):void 
{ 
	_backFacing = new Vector.<Boolean>(); 
	 
	var currentEdgeSecondPoint:int; 
	 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		currentEdgeSecondPoint = (_iterator + 1) % _numberOfVertices; 
		 
		_backFacing[_iterator] = checkEdgeBackFacing(lightSourcePosition, new Point(_x + _vertices[_iterator].x, _y + _vertices[_iterator].y), new Point(_x + _vertices[currentEdgeSecondPoint].x, _y + _vertices[currentEdgeSecondPoint].y)); 
		 
		_iterator++; 
	} 
	 
	_startingBoundaryVertexIndex = 0; 
	_endingBoundaryVertexIndex = 0; 
	 
	_iterator = 0; 
	 
	_currentPoint = 0; 
	_nextPoint = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_currentPoint = _iterator; 
		_nextPoint = (_iterator + 1) % _numberOfVertices; 
		 
		if (!_backFacing[_currentPoint] && _backFacing[_nextPoint]) 
			_startingBoundaryVertexIndex = _nextPoint; 
		 
		if (_backFacing[_currentPoint] && !_backFacing[_nextPoint]) 
			_endingBoundaryVertexIndex = _nextPoint; 
		 
		_iterator++; 
	} 
	 
	_shadowPointCount = _endingBoundaryVertexIndex > _startingBoundaryVertexIndex ? _endingBoundaryVertexIndex - _startingBoundaryVertexIndex + 1 : _numberOfVertices - _startingBoundaryVertexIndex + _endingBoundaryVertexIndex + 1; 
	 
	_iterator = 0; 
	 
	_currentHullIndex = _startingBoundaryVertexIndex; 
	 
	_currentLightToVertex = null; 
	_previousLightToVertex = null; 
	 
	while (_iterator < _shadowPointCount) 
	{ 
		if (_iterator != _shadowPointCount - 1) 
		{ 
			drawToArea.graphics.beginFill(0x000000, 1); 
			drawToArea.graphics.moveTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			_currentLightToVertex = new Point(); 
			 
			_currentLightToVertex.x = _x + _vertices[_currentHullIndex].x - lightSourcePosition.x; 
			_currentLightToVertex.y = _y + _vertices[_currentHullIndex].y - lightSourcePosition.y; 
			 
			_currentLightToVertex.normalize(1); 
			 
			drawToArea.graphics.lineTo(lightSourcePosition.x + (_currentLightToVertex.x * 10000), lightSourcePosition.y + (_currentLightToVertex.y * 10000)); 
			 
			drawToArea.graphics.lineTo(_x + _vertices[(_currentHullIndex + 1) % _numberOfVertices].x, _y + _vertices[(_currentHullIndex + 1) % _numberOfVertices].y); 
			 
			drawToArea.graphics.lineTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			drawToArea.graphics.endFill(); 
			 
			if (_previousLightToVertex) 
			{ 
				drawToArea.graphics.beginFill(0x000000, 1); 
				drawToArea.graphics.moveTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
				 
				drawToArea.graphics.lineTo(lightSourcePosition.x + (_currentLightToVertex.x * 10000), lightSourcePosition.y + (_currentLightToVertex.y * 10000)); 
				 
				drawToArea.graphics.lineTo(lightSourcePosition.x + (_previousLightToVertex.x * 10000), lightSourcePosition.y + (_previousLightToVertex.y * 10000)); 
				 
				drawToArea.graphics.lineTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
				 
				drawToArea.graphics.endFill(); 
			} 
		} 
		else 
		{ 
			drawToArea.graphics.beginFill(0x000000, 1); 
			drawToArea.graphics.moveTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			_currentLightToVertex = new Point(); 
			 
			_currentLightToVertex.x = _x + _vertices[_currentHullIndex].x - lightSourcePosition.x; 
			_currentLightToVertex.y = _y + _vertices[_currentHullIndex].y - lightSourcePosition.y; 
			 
			_currentLightToVertex.normalize(1); 
			 
			drawToArea.graphics.lineTo(lightSourcePosition.x + (_currentLightToVertex.x * 10000), lightSourcePosition.y + (_currentLightToVertex.y * 10000)); 
			 
			drawToArea.graphics.lineTo(lightSourcePosition.x + (_previousLightToVertex.x * 10000), lightSourcePosition.y + (_previousLightToVertex.y * 10000)); 
			 
			drawToArea.graphics.lineTo(_x + _vertices[_currentHullIndex].x, _y + _vertices[_currentHullIndex].y); 
			 
			drawToArea.graphics.endFill(); 
		} 
		 
		_previousLightToVertex = _currentLightToVertex; 
		 
		_currentHullIndex = (_currentHullIndex + 1) % _numberOfVertices; 
		 
		_iterator++; 
	} 
	 
	drawToArea.graphics.beginFill(0x000000, 1); 
	 
	drawToArea.graphics.moveTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_iterator = 1; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		drawToArea.graphics.lineTo(_vertices[_iterator].x + _x, _vertices[_iterator].y + _y); 
		 
		_iterator++; 
	} 
	 
	drawToArea.graphics.lineTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	drawToArea.graphics.endFill(); 
}

After compiling, this is what we get:

Did you notice that our object has disappeared? This happened because the light map is being added over the object map, and since our ambient light is totally black with an alpha of 1, our object can't be seen. Let's change that by making our ambient light a bit transparent. In the Main class:

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.7, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 300, 1, 0)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(250, 250), temporaryVertices)); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
}

If we compile our project now, we can see that everything works fine!

Step 29: Adding More Objects and a Problem

It's time to add some more objects in the screen. Let's create two more objects in the Main init() function:

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.7, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 300, 1, 0)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(250, 250), temporaryVertices)); 
	 
	temporaryVertices = new Vector.<Point>(4); 
	 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 60); 
	temporaryVertices[2] = new Point(30, 60); 
	temporaryVertices[3] = new Point(30, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(280, 170), temporaryVertices)); 
	 
	temporaryVertices = new Vector.<Point>(3); 
	 
	temporaryVertices[0] = new Point(30, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(60, 40); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(450, 320), temporaryVertices)); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
}

Don't forget: the vertices must be always declared in the counter-clockwise direction!

After we compile our project, this is what we get:

Hey! Something is wrong! We added an object "around" our light source, and that caused it not to create light anymore! How can we fix that?

Step 30: Checking if the Light Source is Inside a Polygon

In order to fix our problem, we must, in addition to checking whether the bounds of a light intersects with the bounds of an object, check whether the light is inside the shape. If that is true, we simply will not ask that object to cast shadows on our light, giving the illusion that the light is over the object.

Do you remember the tutorial about vectors? It also explains a few methods of checking if a point is inside any shape (Steps 15-22).

We can implement any method that deals with convex shapes, since our engine uses convex shapes. Let's instead add the universal method of the even-odd check, because someone might want to change this engine to work with other shapes, and thus the rest of our code has to work with it.

Let's add a function checkLightInsideShape() in our ShadowEngine class:

 
private function checkLightInsideShape(point:Point, shapeVertices:Vector.<Point>):Boolean 
{ 
	var numberOfSides:int = shapeVertices.length; 
	 
	var i:int = 0; 
	var j:int = numberOfSides - 1; 
	 
	var oddNodes:Boolean = false; 
	 
	while (i < numberOfSides) 
	{ 
		if ((shapeVertices[i].y < point.y && shapeVertices[j].y >= point.y) || 
			(shapeVertices[j].y < point.y && shapeVertices[i].y >= point.y)) 
		{ 
			if (shapeVertices[i].x + (((point.y - shapeVertices[i].y) / (shapeVertices[j].y - shapeVertices[i].y)) * 
				(shapeVertices[j].x - shapeVertices[i].x)) < point.x) 
			{ 
				oddNodes = !oddNodes; 
			} 
		} 
		 
		j = i; 
		 
		i++; 
	} 
	 
	return oddNodes; 
}

And then, let's check this in our drawLights() function:

 
private function drawLights():void 
{ 
	_lightMap.graphics.clear(); 
	_lightMap.graphics.beginFill(_ambientLight, _ambientLightAlpha); 
	_lightMap.graphics.drawRect(0, 0, ShadowEngine.WIDTH, ShadowEngine.HEIGHT); 
	_lightMap.graphics.endFill(); 
	 
	_lightIterator = 0; 
	 
	while (_lightIterator < _numberOfLights) 
	{ 
		_currentLight = _lights[_lightIterator]; 
		 
		_currentLight.shadowArea.graphics.clear(); 
		 
		_currentLight.draw(); 
		 
		_objectIterator = 0; 
		 
		while (_objectIterator < _numberOfObjects) 
		{ 
			_currentObject = _objects[_objectIterator]; 
			 
			if (_currentLight.AABB.intersects(_currentObject.AABB)) 
			{ 
				if (!checkLightInsideShape(new Point(_currentLight.x - _currentObject.x, _currentLight.y - _currentObject.y), _currentObject.vertices)) 
				{ 
					_currentObject.castShadows(new Point(_currentLight.x, _currentLight.y), _currentLight.shadowArea); 
				} 
			} 
			 
			_objectIterator++; 
		} 
		 
		_lightIterator++; 
	} 
}

Notice that we must access the current object's vertices, but currently there's no way to do that. Let's go to our SolidObject class and add a small getter function:

 
public function get vertices():Vector.<Point> 
{ 
	return _vertices; 
}

With that, we can hit compile and see our result:

Check out the result!

Isn't it getting good?

Step 31: Further Improvements

Our engine is almost ready to use, but what do you think of making some improvements first? There's also a bug in our current code, so let's fix it first. In our Light class, we forgot to change the ball's x and y positions when our light moved too, so let's add this code in there:

 
public function set x(value:Number):void 
{ 
	_x = value; 
	 
	_ball.x = _x; 
	 
	updateAABB(); 
	updateGradientMatrix(); 
	updateDrawingAreaMask(); 
} 
 
public function set y(value:Number):void 
{ 
	_y = value; 
	 
	_ball.y = _y; 
	 
	updateAABB(); 
	updateGradientMatrix(); 
	updateDrawingAreaMask(); 
}

Now our engine is free of bugs and you can already use it, but what's next? There is so much we could do with it! The classes in our engine were built in order to aid the creation of many types of objects and lights. For example, we could create a spot light, or we could create a RegularPolygon class that will represent a solid object in a regular polygon shape with the amount of sides we want. We could create support for rotation, and even add support to using different images for the solid objects, other than only drawing a half-transparent red shape!

In the next steps, you will learn how to create different objects and add support for different images, as well as for rotation.

Step 32: Creating a RegularPolygon Class

Our RegularPolygon class will be created to ease the process of creating regular polygons for the shadow engine. The class will create automatically a polygon once we pass the required parameters to it.

Regular polygons share the property of having all of its vertices defined in a single circle. We will use that to create our class. Basically, we will loop through the circle, defining the vertices as the current cosine and sine values of the angle. We will need the circle's radius in order to do that, as well as the number of sides. Take a look at the code:

 
package objects  
{ 
	import flash.geom.Point; 
	 
	public class RegularPolygon extends SolidObject  
	{ 
		protected var _circleRadius:Number; 
		protected var _numberOfSides:int; 
		 
		public function RegularPolygon(initialPosition:Point, circleRadius:Number, sides:int)  
		{ 
			_circleRadius = circleRadius; 
			_numberOfSides = sides; 
			 
			var points:Vector.<Point> = new Vector.<Point>(_numberOfSides); 
			 
			var iterator:int = 0; 
			 
			var angleStep:Number = 2 * Math.PI / _numberOfSides; 
			 
			while (iterator < _numberOfSides) 
			{ 
				points[iterator] = new Point((Math.cos(iterator * angleStep) * _circleRadius), (Math.sin(iterator * angleStep) * _circleRadius)); 
				 
				iterator++; 
			} 
			 
			super(initialPosition, points); 
		} 
		 
	} 
 
}

In the code, we define the angleStep property. This property is the amount of radians we will "walk" in each iteration of the loop, completing the circle on the last iteration. Take a look at the image:

Our Regular Polygon class is almost done! It would be really cool if we could define the radius of our circle based on the amount of sides our polygon has and the size of each side. Here is a quick formula for getting the circle's radius given the size (length) of a side and number of sides:

Let's add it to our code and make our class able to receive either the circle's radius or the size of each side:

 
package objects  
{ 
	import flash.geom.Point; 
	 
	public class RegularPolygon extends SolidObject  
	{ 
		protected var _circleRadius:Number; 
		protected var _numberOfSides:int; 
		protected var _sideSize:Number; 
		 
		public function RegularPolygon(initialPosition:Point, sides:int, radiusOrSideSize:Object)  
		{ 
			_numberOfSides = sides; 
			 
			if (radiusOrSideSize.radius) 
			{ 
				_circleRadius = radiusOrSideSize.radius; 
				 
				_sideSize = _circleRadius * 2 * Math.sin(Math.PI / _numberOfSides); 
			} 
			else if (radiusOrSideSize.size) 
			{ 
				_sideSize = radiusOrSideSize.size; 
				 
				_circleRadius = _sideSize / (2 * Math.sin(Math.PI / _numberOfSides)); 
			} 
			 
			var points:Vector.<Point> = new Vector.<Point>(_numberOfSides); 
			 
			var iterator:int = 0; 
			 
			var angleStep:Number = 2 * Math.PI / _numberOfSides; 
			 
			while (iterator < _numberOfSides) 
			{ 
				points[iterator] = new Point((Math.cos(iterator * angleStep) * _circleRadius), (Math.sin(iterator * angleStep) * _circleRadius)); 
				 
				iterator++; 
			} 
			 
			super(initialPosition, points); 
		} 
		 
	} 
 
}

And that's our RegularPolygon class! We can add a regular polygon to our engine with the following code in Main:

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.7, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 300, 1, 0)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(250, 250), temporaryVertices)); 
	 
	temporaryVertices = new Vector.<Point>(4); 
	 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 60); 
	temporaryVertices[2] = new Point(30, 60); 
	temporaryVertices[3] = new Point(30, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(280, 170), temporaryVertices)); 
	 
	temporaryVertices = new Vector.<Point>(3); 
	 
	temporaryVertices[0] = new Point(30, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(60, 40); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(450, 320), temporaryVertices)); 
	 
	_shadowEngine.addObject(new RegularPolygon(new Point(400, 150), 5, { size: 30 } )); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
}

And here's our result:

Step 33: Rotating our Shapes

It's about time to let our shapes rotate, but as you may have seen, we will have to rotate the vertices according to the origin point of our shape! Let's take another look at the Euclidean Vectors tutorial in order to get an idea of how to rotate our shapes.

Did you see it? Let's create a applyVerticesRotation() function in our SolidObject class:

 
public function applyVerticesRotation(rotationAngle:Number):void 
{ 
	_iterator = 0; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_vertices[_iterator] = rotatePoint(_vertices[_iterator], rotationAngle); 
		 
		_iterator++; 
	} 
} 
 
private function rotatePoint(point:Point, angleRadians:Number):Point 
{ 
	var tempX:Number = point.x * Math.cos(angleRadians) - point.y * Math.sin(angleRadians); 
	var tempY:Number = point.x * Math.sin(angleRadians) + point.y * Math.cos(angleRadians); 
	 
	return new Point(tempX, tempY); 
}

After that, let's do a quick change in our init() and engineLoop() function in the Main class, so that we rotate a shape 5 degrees every frame. Here is the code:

 
private var _randomShape:SolidObject; 
 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.7, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 300, 1, 0)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_randomShape = new SolidObject(new Point(250, 250), temporaryVertices); 
	 
	_shadowEngine.addObject(_randomShape); 
	 
	temporaryVertices = new Vector.<Point>(4); 
	 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 60); 
	temporaryVertices[2] = new Point(30, 60); 
	temporaryVertices[3] = new Point(30, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(280, 170), temporaryVertices)); 
	 
	temporaryVertices = new Vector.<Point>(3); 
	 
	temporaryVertices[0] = new Point(30, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(60, 40); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(450, 320), temporaryVertices)); 
	 
	_shadowEngine.addObject(new RegularPolygon(new Point(400, 150), 5, { size: 30 } )); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
} 
 
private function engineLoop(e:Event):void 
{ 
	_shadowEngine.updateEngine(); 
	 
	// Rotating a shape 5 degrees every frame 
	_randomShape.applyVerticesRotation(5 * Math.PI / 180); 
}

And here's our result!

Check out the result!

Step 34: Adding Textures or Another Image to Your SolidObject Class

So I heard you are getting sick of the half-transparent red shapes in our engine. That's serious. What about making it better by adding any kind of image you want? In this example, I will use one of the great texture packs made by Georges Grondin, which are free to use by anyone. The texture I'm using is available in the Texture.swc file.

In order to draw any image we want, we must use what is currently being drawn in the object's drawing area as a mask. To do that, let's create two other properties, another function and modify a few functions to make it work. In the SolidObject class:

 
protected var _image:Sprite; 
 
protected var _imageMask:Sprite; 
 
private function initializeDrawingArea():void 
{ 
	_drawingArea = new Sprite(); 
	 
	_image = new Sprite(); 
	 
	_imageMask = new Sprite(); 
	 
	_image.mask = _imageMask; 
	 
	_drawingArea.addChild(_image); 
} 
 
public function draw():void 
{ 
	_imageMask.graphics.clear(); 
	_imageMask.graphics.beginFill(0xFF0000, 0.5); 
	 
	_imageMask.graphics.moveTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_iterator = 1; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_imageMask.graphics.lineTo(_vertices[_iterator].x + _x, _vertices[_iterator].y + _y); 
		 
		_iterator++; 
	} 
	 
	_imageMask.graphics.lineTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_imageMask.graphics.endFill(); 
} 
 
public function setImage(image:Sprite):void 
{ 
	if (_drawingArea.contains(_image)) 
		_drawingArea.removeChild(_image); 
	 
	_image = image; 
	 
	_image.x = _x; 
	_image.y = _y; 
	 
	_image.mask = _imageMask; 
	 
	_drawingArea.addChild(_image); 
} 
 
public function set x(value:Number):void 
{ 
	_AABB.x -= _x; 
	 
	_x = value; 
	 
	_AABB.x += _x; 
	 
	_image.x = _x; 
} 
 
public function set y(value:Number):void 
{ 
	_AABB.y -= _y; 
	 
	_y = value; 
	 
	_AABB.y += _y; 
	 
	_image.y = _y; 
}

Let's add a piece of code to set the image of a shape in the Main class and remove our rotating code:

 
private function init(e:Event):void  
{ 
	_shadowEngine = new ShadowEngine(640, 480, 0x000000, 0.7, true); 
	 
	addChild(_shadowEngine.drawingArea); 
	 
	_shadowEngine.addLight(new Light(new Point(0, 0), 0xFF0000, 200, 1, 0)); 
	_shadowEngine.addLight(new Light(new Point(300, 200), 0x00FFFF, 300, 1, 0)); 
	 
	var temporaryVertices:Vector.<Point> = new Vector.<Point>(5); 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(30, 50); 
	temporaryVertices[3] = new Point(60, 25); 
	temporaryVertices[4] = new Point(15, 0); 
	 
	_randomShape = new SolidObject(new Point(250, 250), temporaryVertices); 
	 
	_randomShape.setImage(new DemoImage()); 
	 
	_shadowEngine.addObject(_randomShape); 
	 
	temporaryVertices = new Vector.<Point>(4); 
	 
	temporaryVertices[0] = new Point(0, 0); 
	temporaryVertices[1] = new Point(0, 60); 
	temporaryVertices[2] = new Point(30, 60); 
	temporaryVertices[3] = new Point(30, 0); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(280, 170), temporaryVertices)); 
	 
	temporaryVertices = new Vector.<Point>(3); 
	 
	temporaryVertices[0] = new Point(30, 0); 
	temporaryVertices[1] = new Point(0, 40); 
	temporaryVertices[2] = new Point(60, 40); 
	 
	_shadowEngine.addObject(new SolidObject(new Point(450, 320), temporaryVertices)); 
	 
	_shadowEngine.addObject(new RegularPolygon(new Point(400, 150), 5, { size: 30 } )); 
	 
	addEventListener(Event.ENTER_FRAME, engineLoop); 
} 
 
private function engineLoop(e:Event):void 
{ 
	_shadowEngine.updateEngine(); 
}

(The DemoImage is from Texture.swc.)

After hitting compile, this is our result:

We can see that our texture works, but the default image for the other shapes doesn't. What could be wrong? Let's fix it in the next step.

Step 35: Fixing our Solid Objects' Image

In the previous step, we noticed a problem after adding custom images to a shape: the others lost their default image. What's wrong? Let's take a look at this part of code from our SolidObject class:

 
private function initializeDrawingArea():void 
{ 
	_drawingArea = new Sprite(); 
	 
	_image = new Sprite(); 
	 
	_imageMask = new Sprite(); 
	 
	_image.mask = _imageMask; 
	 
	_drawingArea.addChild(_image); 
} 
 
public function draw():void 
{ 
	_imageMask.graphics.clear(); 
	_imageMask.graphics.beginFill(0xFF0000, 0.5); 
	 
	_imageMask.graphics.moveTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_iterator = 1; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_imageMask.graphics.lineTo(_vertices[_iterator].x + _x, _vertices[_iterator].y + _y); 
		 
		_iterator++; 
	} 
	 
	_imageMask.graphics.lineTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_imageMask.graphics.endFill(); 
}

Did you notice that we are only drawing on our _imageMask property? In order to have the default image, we will also need to change a bit of code to set a default image. Let's do it:

 
private function createDefaultImage():void 
{ 
	_image.graphics.clear(); 
	_image.graphics.beginFill(0xFF0000, 0.5); 
	 
	_image.graphics.moveTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_iterator = 1; 
	 
	while (_iterator < _numberOfVertices) 
	{ 
		_image.graphics.lineTo(_vertices[_iterator].x + _x, _vertices[_iterator].y + _y); 
		 
		_iterator++; 
	} 
	 
	_image.graphics.lineTo(_vertices[0].x + _x, _vertices[0].y + _y); 
	 
	_image.graphics.endFill(); 
} 
 
private function initializeDrawingArea():void 
{ 
	_drawingArea = new Sprite(); 
	 
	_image = new Sprite(); 
	 
	_imageMask = new Sprite(); 
	 
	_image.mask = _imageMask; 
	 
	_drawingArea.addChild(_image); 
	 
	createDefaultImage(); 
}

The createDefaultImage() function is just a modified version of draw(). It runs only once and creates the default image. If we set another image, the default one will be lost and the new image will be added, and so everything will be working again. Let's hit compile and see what we get:

Success! We can now use custom images in our engine.

Step 36: Making an Object Move With the Mouse

If you would like to have a moving object so you can play with its shadows, let's add a very simple code to make an object follow the mouse's position! In the Main class:

 
private function engineLoop(e:Event):void 
{ 
	_randomShape.x = stage.mouseX; 
	_randomShape.y = stage.mouseY; 
	 
	_shadowEngine.updateEngine(); 
}

This is the result:

Check out the result!

Conclusion

If you are reading this, congratulations. You have just created your very own Dynamic Shadows engine, and can now use it freely for any project you want! That was a tough task, and I hope you have learned a lot from this. Feel free to post anything you make with this engine in the comments, and don't forget to put a link so that everyone can play with it! Thank you for reading this tutorial.