2D Shadow Effects

3 posts

Flag Post

I’m following the tutorial on 2D shadowing over here and I just can’t seem to get the section where they add the first optimization (not adding un-needed lines). I’m not entirely sure what that section is about, and right now it’s acting funky.

Current code:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	/**
	 * ...
	 * @author RTLShadow
	 */
	public class Main extends Sprite
	{
		private var player:Player = new Player();
		private var polyList:Vector.<Polygon>;
		private var shadows:Sprite = new Sprite();
		
		public function Main():void
		{
			if ( stage )
				init();
			else
				addEventListener( Event.ADDED_TO_STAGE, init );
		}
		
		private function init( e:Event = null ):void
		{
			removeEventListener( Event.ADDED_TO_STAGE, init );
			// entry point
			
			polyList = new Vector.<Polygon>();
			
			var vec:Vector.<Point> = new Vector.<Point>( 4 );
			vec[ 0 ] = new Point( 0, 0 );
			vec[ 1 ] = new Point( 50, 0 );
			vec[ 2 ] = new Point( 50, 50 );
			vec[ 3 ] = new Point( 0, 50 );
			
			addChild( shadows );
			
			for ( var i:int = 0; i < 4; i++ )
			{
				var tempPoly:Polygon = new Polygon( vec );
				addChild( tempPoly );
				tempPoly.x = Math.random() * ( stage.stageWidth - 100 ) + 50;
				tempPoly.y = Math.random() * ( stage.stageHeight - 100 ) + 50;
				tempPoly.addEventListener( MouseEvent.MOUSE_DOWN, polyDown );
				tempPoly.addEventListener( MouseEvent.MOUSE_UP, polyUp );
				polyList.push( tempPoly );
			}
			
			addChild( player );
			player.x = 50;
			player.y = 50;
			addEventListener( Event.ENTER_FRAME, tick );
		}
		
		private function polyDown( e:MouseEvent ):void
		{
			e.target.parent.startDrag();
			//trace( "Starting position: " + new Point( e.target.x, e.target.y ) )
		}
		
		private function polyUp( e:MouseEvent ):void
		{
			e.target.parent.stopDrag();
			//trace( "Ending  position: " + new Point( e.target.x, e.target.y ) )
		
		}
		
		private function tick( e:Event ):void
		{
			player.tick( e );
			
			drawShadows();
		}
		
		private function drawShadows():void
		{
			var currVertexList:Vector.<Point>;
			
			var startVertex:Vector2D = new Vector2D();
			var endVertex:Vector2D = new Vector2D();
			
			var light:Vector2D;
			var projectedPoint:Vector2D;
			
			shadows.graphics.clear();
			shadows.graphics.lineStyle( 2 );
			
			for ( var i:int = 0; i < polyList.length; i++ )
			{
				currVertexList = polyList[ i ].vertexList.concat();
				for ( var j:int = 0; j < currVertexList.length; j++ )
				{
					
					startVertex.x = currVertexList[ j ].x + polyList[ i ].x;
					startVertex.y = currVertexList[ j ].y + polyList[ i ].y;
					
					if ( j != currVertexList.length - 1 )
					{
						endVertex.x = currVertexList[ j + 1 ].x + polyList[ i ].x;
						endVertex.y = currVertexList[ j + 1 ].y + polyList[ i ].y;
					}
					else
					{
						endVertex.x = currVertexList[ 0 ].x + polyList[ i ].x;
						endVertex.y = currVertexList[ 0 ].y + polyList[ i ].y;
					}
					
					light = VectorUtils.getVector( player.x, player.y, startVertex.x, startVertex.y );
					light.x = 200; // Setting magnitude				
					
					if ( doesCastShadow( startVertex, endVertex, light ) )
					{
						projectedPoint = projectPoint( startVertex, light );
						
						shadows.graphics.moveTo( startVertex.x, startVertex.y );
						shadows.graphics.lineTo( projectedPoint.x, projectedPoint.y );
					}
				}
			}
		}
		
		private function projectPoint( currVertex:Vector2D, pTV:Vector2D ):Vector2D
		{
			var projectedPoint:Vector2D = pTV.addToPoint( currVertex );
			return projectedPoint;
		}
		
		private function doesCastShadow( start:Vector2D, end:Vector2D, light:Vector2D ):Boolean
		{
			var startToEnd:Vector2D = new Vector2D( end.x, end.y );
			startToEnd.minusEquals( start );
			
			var normal:Vector2D = new Vector2D( startToEnd.y * -1, startToEnd.x );
			var lightToStart:Vector2D = new Vector2D( start.x, start.y );
			lightToStart.minusEquals( light );
			
			if ( normal.dot( lightToStart ) < 0 )
			{
				return true;
			}
			else
			{
				return false;
			}
		}
	}
}

Vector2D class:

/*
   Copyright (c) 2006, 2007 Alec Cove

   Permission is hereby granted, free of charge, to any person obtaining a copy of this
   software and associated documentation files (the "Software"), to deal in the Software
   without restriction, including without limitation the rights to use, copy, modify,
   merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
   permit persons to whom the Software is furnished to do so, subject to the following
   conditions:

   The above copyright notice and this permission notice shall be included in all copies
   or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
   INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
   PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
   HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
   CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
   OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/*
   TODO:
   - provide passible Vector2Ds for results. too much object creation happening here
   - review the division by zero checks/corrections. why are they needed?
 */

package 
{
	import flash.geom.Point;
	
	public class Vector2D
	{
		
		public var x:Number;
		public var y:Number;
		
		public function Vector2D( px:Number = 0, py:Number = 0 )
		{
			x = px;
			y = py;
		}
		
		public function setTo( px:Number, py:Number ):void
		{
			x = px;
			y = py;
		}
		
		public function copy( v:Vector2D ):void
		{
			x = v.x;
			y = v.y;
		}
		
		public function dot( v:Vector2D ):Number
		{
			return x * v.x + y * v.y;
		}
		
		public function cross( v:Vector2D ):Number
		{
			return x * v.y - y * v.x;
		}
		
		public function plus( v:Vector2D ):Vector2D
		{
			return new Vector2D( x + v.x, y + v.y );
		}
		
		public function plusEquals( v:Vector2D ):Vector2D
		{
			x += v.x;
			y += v.y;
			return this;
		}
		
		public function minus( v:Vector2D ):Vector2D
		{
			return new Vector2D( x - v.x, y - v.y );
		}
		
		public function minusEquals( v:Vector2D ):Vector2D
		{
			x -= v.x;
			y -= v.y;
			return this;
		}
		
		public function mult( s:Number ):Vector2D
		{
			return new Vector2D( x * s, y * s );
		}
		
		public function multEquals( s:Number ):Vector2D
		{
			x *= s;
			y *= s;
			return this;
		}
		
		public function times( v:Vector2D ):Vector2D
		{
			return new Vector2D( x * v.x, y * v.y );
		}
		
		public function divEquals( s:Number ):Vector2D
		{
			if ( s == 0 )
				s = 0.0001;
			x /= s;
			y /= s;
			return this;
		}
		
		public function magnitude():Number
		{
			return Math.sqrt( x * x + y * y );
		}
		
		public function distance( v:Vector2D ):Number
		{
			var delta:Vector2D = this.minus( v );
			return delta.magnitude();
		}
		
		public function normalize():Vector2D
		{
			var m:Number = magnitude();
			if ( m == 0 )
				m = 0.0001;
			return mult( 1 / m );
		}
		
		public function toString():String
		{
			return ( x + " : " + y );
		}
		
		public function addToPoint( startPoint:Vector2D ):Vector2D
		{
			
			var adj:Number = x * Math.sin(( y + 90 ) * VectorUtils.DEGREES_TO_RADIANS );
			var opp:Number = x * Math.cos(( y + 90 ) * VectorUtils.DEGREES_TO_RADIANS );
			
			return new Vector2D( startPoint.x + adj, startPoint.y + opp );
		}
	}
}

and preview: http://www.fastswf.com/ql9hZKM
WASD to move.

I really can’t put my finger on what’s going wrong here.

 
Flag Post

head to tail order of segments inconsistent, most likely.

 
Flag Post

You are taking one normal to the vector, while not checking which one is that. In 2D you have to check two normals, which one is directed outwards, since only that one will determine if the shadow is being cast. Also, why is there a “light.x=200”? You are effectively altering direction of light using this, if I understand it right.