Test Angles (featured image)

In this simple project, I will show you two scenarios where the use of angles are used. The two most common Trigonometric algorithms you will encounter in game development are to change an object’s:

  1. Rotation: Orienting an Object’s rotation towards a certain target (ex: an Arrow);
  2. Position: Placing an Object along an angular / circular path (ex: Top-down view of a Dog on a leash);

In this demo, we’ll kill two-birds-with-one-stone. We’ll cover both!

package tests {
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	[SWF(width="520",height="420",backgroundColor="0x888888")]
	public class TestAngles extends Sprite {
		
		private var _arrow:Shape;
		private var _circle:Shape;
		
		public function TestAngles() {
			// If the stage is already found, go right to 'main()', otherwise 
			// wait until attached to the stage:
			stage ? main() : addEventListener(Event.ADDED_TO_STAGE, main );
		}
		
		public function main(e:Event = null):void {
			//If this was fired during an ADDED_TO_STAGE event, remove it (only used once):
			e && removeEventListener (Event.ADDED_TO_STAGE, main );
			
			//Create the Arrow and Happy-Face shapes:
			addChild( createArrow() );
			addChild( createHappyFace() );
			
			//Updates the objects when the mouse is moved:
			stage.addEventListener( MouseEvent.MOUSE_MOVE, update );
			
			//Do one update immediatly:
			update();
		}
		
		private function createArrow():Shape {
			_arrow =	new Shape();
			_arrow.x =	stage.stageWidth * .5;
			_arrow.y =	stage.stageHeight * .5;
			
			var length:int =	70;
			var headSize:int =	10;
			var g:Graphics =	_arrow.graphics;
			g.lineStyle(1, 0xff0000);
			g.lineTo(length, 0);
			g.moveTo(length - headSize, -headSize * .5);
			g.lineTo(length, 0);
			g.lineTo(length - headSize, headSize * .5);
			
			return _arrow;
		}
		
		private function createHappyFace():Shape {
			_circle =	new Shape();
			_circle.x =	stage.stageWidth * .5;
			_circle.y =	stage.stageHeight * .5;
			
			var size:Number =	20;
			var g:Graphics =	_circle.graphics;
			
			//Face:
			g.lineStyle(2, 0xffff00);
			g.beginFill(0xffff00, 0.5);
			g.drawCircle(0, 0, size);
			g.endFill();
			
			//Eyes
			g.moveTo( -5, -size * .5);
			g.lineTo( -5, -size * .5 + 3);
			g.moveTo( 5, -size * .5);
			g.lineTo( 5, -size * .5 + 3);
			
			//Mouth
			g.moveTo( -10, size * .5);
			g.curveTo(0, size * .8, 10, size * .5);
			
			return _circle;
		}
		
		private function update(e:MouseEvent = null):void {
			//If fired as a MouseEvent, refresh the DisplayList immediatly (instead of per-frame):
			e && e.updateAfterEvent();
			
			var radian:Number =	180 / Math.PI;
			_arrow.rotation =	Math.atan2(stage.mouseY - _arrow.y, stage.mouseX - _arrow.x) * radian;
			
			//_arrow.rotation is in degrees (-180 to 180 = 360 degrees):
			//trace(_arrow.rotation);
			
			var angle:Number =	_arrow.rotation / radian;
			var distance:Number =	100;
			_circle.x =	stage.stageWidth * .5 + Math.cos(angle) * distance;
			_circle.y =	stage.stageHeight * .5 + Math.sin(angle) * distance;
		}
	}
}

Here it is in action! Move your mouse around. The Arrow and Happy-Face will follow the mouse-cursor:

This area requires
Adobe FlashPlayer version 9.0.0 or above.
iOS Devices are not currently supported.