Flex - TheTechlabs.com

Connecting Flex Calendar With Database Using AMF-PHP

Ankur Arora — Sat, 29 May 2010 13:56:36 +0000

Connecting Flex Calendar with Database using AMF-PHP

Part I: Create a Dynamic Event Calendar in Flex Builder 3 with Actionscript 3.0

This is Part II of Create a Dynamic Event Calendar in Flex Builder 3 with Actionscript 3.0 tutorial. In this tutorial, we will learn how to connect Event Calendar with the database so events will be stored in the database for future reference.

Requirements

Flex Builder

Try/Buy

WAMP (PHP, MYSQL)

Download

AMF-PHP

Download

Sample Files

Flex_Event_Calendar_Source.zip

Pre-Requisites

This tutorial assumes that you have a complete understanding of Part I. Apart from this you know AMF-PHP and you must have a idea to how to connect a Flex application with AMF-PHP using configuration file.

Step 1: Creating Database

The very first step is to create database with desired table. To accomplish this, I used a MySQL database which runs very well with PHP. I have created a new database for this application named calendar_events and within this database I have created a new table called tblcalendarevents. Here is the SQL script to create this database along with a table in it.

-- Database: calendar_events
--
CREATE DATABASE calendar_events DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE calendar_events;

-- --------------------------------------------------------

-- Table structure for table 'tblcalendarevents'

CREATE TABLE IF NOT EXISTS tblcalendarevents (
  str_calendar_events text
);

Your database structure should look like below figure.

Figure 1.1 Database Structure

Similarly, your table structure within this database should look like below figure.

Figure 1.2 Table Structure

Step 2: Creating MySQL Database and PHP Class

Before starting anything in Flex and performing coding we need to make sure that we have our MySQL database in place. I have used WAMP to install PHP and MySQL in my Windows environment. Where I placed amfphp files under www folder of WAMP. Supposing you have installed WAMP in your C: then here is the directory structure for amfphp folder.

c:wampwwwamfphp

Under amfphp folder there is services folder where we need to create a PHP class which will connect with the database and perform insertion and retrieval process. I have named the PHP file SaveEvents.php. Here is the code within PHP file which will do data processing.

In the above code we have 2 functions named storeEvents() and getEvents(). storeEvents function is used to store calendar events in the database and similarly getEvents is used to retrieve those values. Now to make it more easier I have used storing/retrieval of XML rather than a long list of multiple values.

Step 3: Creating services-config.xml file

Moving to Flex, the first step we need to do is to create services-config.xml file. The services-config.xml file is an Extensible Markup Language (XML) document that specifies the properties of the remote services our application will use. To create this file, right click the src folder of your Flex project, then choose New > File. Name the file services-config.xml, then click Finish. You will be presented with the new empty file. The default editor is the built-in XML editor, but you need to open it in the plain text editor by right clicking the file and choosing Open with > Text Editor. Next, paste the following code into the file:

The above XML block contains two key pieces of information specific to this application. The first is the id attribute of the node. You will use this ID to connect to the remote service in the Flex application. The other important attribute is the uri property of the node. Here, you need to place the path to your amfphp gateway file on your web server. The class attributes correspond to the method of communication: you will be using “remoting” to communicate with your services in AMF.

Next, you need to tell the Flex compiler about your services-config.xml file. You do so using the compiler flag -services. To add this flag, click Project > Properties. A new window appears with a list on the left side. From that list, choose Flex Compiler. At the end of the existing text in the Additional compiler arguments box, add the following:

-services "services-config.xml"

The result should look like Figure 1.1

Figure 1.1 Adding compiler arguments

Click Finish, and the workspace refreshes. When complete, you will have access to your amfphp gateway from the client application.

Step 4: Creating Service Connector class

Next step is to create a Service Connector class which will be a singleton class and allow our application to connect with amfphp and process various data calls. To achieve this I have created a new class file under classes.remoting package. I have named this class/file as ServiceConnector.as. Let’s first have a look at the code of this class thereafter we will have description of the code.

package classes.remoting
{
	import classes.events.CustomEvents;
	
	import flash.events.EventDispatcher;
	
	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;
	
	public class ServiceConnector extends EventDispatcher
	{
		private var m_objRemote:RemoteObject;
		private static var m_objServiceConnector:ServiceConnector;
		
		public static function getInstance():ServiceConnector
		{
			if(m_objServiceConnector == null)
				m_objServiceConnector = new ServiceConnector();
				
			return m_objServiceConnector;
		}
		
		public function connect():void
		{
			m_objRemote = new RemoteObject();
			m_objRemote.source = "SaveEvents";
			m_objRemote.destination = "amfphp";
						
			m_objRemote.storeEvents.addEventListener("result", onStoreResult);
			m_objRemote.getEvents.addEventListener("result", onFetchResult);
			m_objRemote.addEventListener("fault", onServiceFault);
			
		}
		
		public function storeEvents(_strEvents:String):void
		{
			if(_strEvents == null || _strEvents == "")
				_strEvents = "";
			
			m_objRemote.getOperation("storeEvents").send(_strEvents);
			
		}
		
		public function getEvents():void
		{
			m_objRemote.getOperation("getEvents").send();
		}
		
		private function onStoreResult(evt:ResultEvent):void
		{
			trace("Data  Stored");
		}
		
		private function onFetchResult(evt:ResultEvent):void
		{
			var obj:Object = new Object();
			obj.data = evt.result.toString();
			dispatchEvent(new CustomEvents(CustomEvents.FETCH_DB_DATA, obj));
		}
		
		private function onServiceFault(evt:FaultEvent):void
		{
			Alert.show("Cannot connect to Web service, Please check your configuration settings!", "Event Calendar");
		}

	}
}

ServiceConnector is a singleton class which allows to connect remote service i.e. amfphp through connect() method. If you see in connect() method we are calling SaveEvents as a source to Remote Object which is the class name in our PHP file. Similarly we have destination as amfphp which we defined as ID in services-config.xml file. We have also result and fault listeners with-in the connect() method which get invoked whenever a result or fault event occurred. Apart from that we have 2 public methods in this class storeEvents() and getEvents() which allows to send and retrieve data respectively to SaveEvents php class. After creating above 2 new files your directory structure should look like this.

Figure 4.1 Directory Structure

Step 5: Changes in main.mxml

I have added couple of new methods and codes in order to achieve the functionality of connecting this application with the database. Let’s start with the main.mxml file because that is the first file which is used by the application as the main file.

Previously we had a method called onApplicationStart() which get executes on creation complete of the main application file. In other words this method is the very first method which gets invoked and starts the application. I have added couple of new code with in this method plus I also removed couple of lines. Let’s have a look:

Previous Version

private function onApplicationStart():void
{
    var objDate:Date = new Date();
    dtPicker.selectedDate = objDate;
    
    // create events
    monthView.addEventListener(CustomEvents.MONTH_VIEW_CLICK, onMonthViewClick);
    DataHolder.getInstance().addEventListener(CustomEvents.ADD_NEW_EVENT, onNewEventAdded);
    
    onDateChange();
}

Current Version

private function onApplicationStart():void
{
    monthView.addEventListener(CustomEvents.MONTH_VIEW_CLICK, onMonthViewClick);
    DataHolder.getInstance().addEventListener(CustomEvents.ADD_NEW_EVENT, onNewEventAdded);
    
    
    DataHolder.getInstance().addEventListener(CustomEvents.DP_CHANGED, onDataProviderChanged);
    
   
    m_objServiceConnector = ServiceConnector.getInstance();
    m_objServiceConnector.addEventListener(CustomEvents.FETCH_DB_DATA, onFetchDBData);
    
    m_objServiceConnector.connect();
    m_objServiceConnector.getEvents();
}

There is a new variable in above method which has to be declared at top level of main.mxml file. Something like this:

private var m_objServiceConnector:ServiceConnector;

As per current version I have added a new listener which will listen to “data provider change” event. I have also added a code to create ServiceConnector object and as well as called connect() method of ServiceConnector class. Afterwards I have invoked getEvents() which allows the application to load data from the database and behave accordingly.

Another method named onDateChange has been modified, let’s go through that as well.

Previous Version

private function onDateChange():void
{
    m_intCurrentDate = new Date(dtPicker.displayedYear, dtPicker.displayedMonth, dtPicker.selectedDate.date);
}

Current Version

private function onDateChange():void
{
    var currentDate:int;
    if(dtPicker.selectedDate == null)
        currentDate = new Date().date;
    else
        currentDate = dtPicker.selectedDate.date;
        
    m_intCurrentDate = new Date(dtPicker.displayedYear, dtPicker.displayedMonth, currentDate);
}

I have just added a validation of the date in this method so it won’t come as null at any point of time.

Next method which will get invoked is onFetchDBData which is being fired from the event listener in onApplicationStart method. Basically when we call getEvents from ServiceConnector class it dispatched FETCH_DB_DATA event which further listened by main.mxml class. Let’s have a look at onFetchDBData method:

private function onFetchDBData(_event:CustomEvents):void
{							
    if(_event.object.data == "empty")
    {
        var objDate:Date = new Date();
        dtPicker.selectedDate = objDate;
        onDateChange();
    }
    else
    {
        dataProvider = _event.object.data;
    }
}

I have just added a validation of the date in this method so it won’t come as null at any point of time.

private function onFetchDBData(_event:CustomEvents):void
{							
    if(_event.object.data == "empty")
    {
        var objDate:Date = new Date();
        dtPicker.selectedDate = objDate;
        onDateChange();
    }
    else
    {
        dataProvider = _event.object.data;
    }
}

Now onFetchDBData method is the one which will either render the views with blank data otherwise if it has any data for a particular date it will list out that and render the view.

If you see in else condition of above method I’m storing all values(returned by our php class) in a property called dataProvider. This dataProvider property which is a getter/setter takes a XML string and converts it into a array which is further used by DataHolder class. Similarly dataProvider takes an array from DataHolder and converts it as per the requirement of the php to store it in the database. Here is the code for dataProvider property.

public function set dataProvider(_strEvents:String):void
{
    var objDataXML:XML = new XML(_strEvents);
    var objArr:Array = new Array();
    for(var i:int=0; i;
    for(var i:int=0; i
        xml.date = obj.date;
        xml.hour = String(obj.hour);
        xml.meridiem = String(obj.meridiem);
        xml.mins = String(obj.mins);
        xml.desc = String(obj.desc);
        
        objCalendarData.appendChild(xml);
    } 
    
    return objCalendarData.toString();
}

We have stored values retrieved from the php class into this dataProvider but we didn’t yet sent this dataProvider to the php class. To accomplish that we need to add a new line of code under onNewEventAdded method so, whenever a new event is added in the calendar it should send that value to the php class. We need to add the below line at the end of this method.

m_objServiceConnector.storeEvents(dataProvider);

One last change in the main.xml file is to create a listeners method for DP_CHANGED event. This event occurs whenever there is a change in the dataProvider in DataHolder. In other words, it only executes for once, when this application load the data from the php class. Have a look at the content of this method.

private function onDataProviderChanged(_event:CustomEvents):void
{
    trace("Data Updated");
    onDateChange();
}

We are through with the necessary changes in main mxml file. Now let’s jump on to the next step where we will modify couple of other files.

Step 6: Changes in CommonUtils and CustomEvents

There are very small changes in both of these classes. I have added a 2 lines with-in the method called createRightHourStrip(). I’m not writing the entire body of that method instead I’m just writing a condition with in which these lines are written.

if(ObjectUtil.dateCompare(obj.date, _savedDate) == 0)
{
    
	obj.hour = String(obj.hour);
	obj.hour = (obj.hour.length < 2) ? ("0" + obj.hour) : obj.hour;
	
    if(obj.hour == strLabel && obj.meridiem == objHourCell.data.meridiem)
    {
        if(obj.mins == 0)
        {
            objHourCell.btnFirstHalf.label = obj.desc;
        }
        else
        {
            objHourCell.btnSecondHalf.label = obj.desc;
        }
    }
}

In case if a value for the hour is stored as a single digit the below line will allow the program to convert it in to double digit.

Apart from this we have declared couple of new constants which are being used in the code. These constants are decal red in CustomEvents class. Here:

public static const FETCH_DB_DATA:String = "fetchDBData";
public static const DP_CHANGED:String = "dpChanged";

Step 7: Final Changes in DataHolder class

There is a single line change in DataHolder class and that is only to dispatch an event of DP_CHANGED when we update dataProvider property with in it. To accomplish this we need to call below code under the setter of dataProvider property. This line has to at last position with in this setter method.

dispatchEvent(new CustomEvents(CustomEvents.DP_CHANGED));

Conclusion

Now you all know how to connect Flex Event Calendar with the Database to store calendar events in the database. In case any help is required feel free to contact me either by commenting or via my website http://www.ankur-arora.com

The post Connecting Flex Calendar With Database Using AMF-PHP first appeared on TheTechlabs.com.

Away3D Shoot’em’Up Tutorial – Powerups

The Tech Labs — Sat, 20 Mar 2010 09:00:05 +0000

In this article we add some powerups to the game.

Result

Requirements

Adobe Flex v3.02

Away3D v3.3.3 source code

Flint 2.1.0 source code

Pre-Requisites

You should read the previous articles in this series.

Create from Scratch a Away3D Shoot’em’Up Game: Part 1
Create from Scratch a Away3D Shoot’em’Up Game: Part 2
Create from Scratch a Away3D Shoot’em’Up Game: Part 3
Create from Scratch a Away3D Shoot’em’Up Game: Part 4

Powerups

In the last article we implemented a new system for defining and creating the weapons. There was no way for the player to change his weapons though – for that we need to add powerups.

Powerup.as

package
{
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Plane;

	public class Powerup extends MeshObject
	{
		protected static const POWERUP_SIZE:Number = 6;
		protected static const POWERUP_SPEED:Number = 30;
		protected static const POWERUP_X_LIMIT:Number = 70;
		protected static const POWERUP_Y_LIMIT:Number = 60;
		protected static const POWERUP_X_START:Number = 65;
		protected static const POWERUP_Y_START:Number = 50;
		protected var weapon:int = 0;
		protected var shields:int = 0;
		protected var score:int = 0;

		public function get Weapon():int
		{
			return weapon;
		}

		public function get Shields():int
		{
			return shields;
		}

		public function get Score():int
		{
			return score;
		}

		public function Powerup()
		{
			super();
		}

		protected function startupPowerup(engineManager:EngineManager, material:BitmapMaterial, weapon:int, score:int, shields:int):Powerup
		{
			var plane:Plane = new Plane(
				{material:material,
				width:POWERUP_SIZE,
				height:POWERUP_SIZE,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			this.collisionName = CollisionIdentifiers.POWERUP;
			this.model.x = POWERUP_X_LIMIT;
			this.model.y = MathUtils.randRange(-POWERUP_Y_START, POWERUP_Y_START);
			this.weapon = weapon;
			this.shields = shields;
			this.score = score;

			return this;
		}

		public function startupRandomPowerup(engineManager:EngineManager):Powerup
		{
			var random:int = int(Math.random() * 2);
			switch (random)
			{
				case 0:
					return startupWeapon1Powerup(engineManager);
				case 1:
					return startupWeapon2Powerup(engineManager);
			}

			return null;
		}

		public function startupWeapon1Powerup(engineManager:EngineManager):Powerup
		{
			return startupPowerup(
				engineManager,
				ResourceManager.Powerup1_Tex,
				1,
				0,
				0);
		}

		public function startupWeapon2Powerup(engineManager:EngineManager):Powerup
		{
			return startupPowerup(
				engineManager,
				ResourceManager.Powerup2_Tex,
				2,
				0,
				0);
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			this.model.x -= POWERUP_SPEED * dt;

			if (this.model.x > POWERUP_X_LIMIT ||
				this.model.x < -POWERUP_X_LIMIT || 				this.model.y > POWERUP_Y_LIMIT ||
				this.model.y < -POWERUP_Y_LIMIT)
				this.shutdown();
		}

		override public function collision(other:MeshObject):void
		{
			this.shutdown();
		}
	}
}

This code should look familiar. We have extended the MeshObject class, which allows us to put a mesh on the screen. Like the weapons and the enemies, the powerup mesh is a Plane orientated to face the camera, and textured with a BitmapMaterial embedded by the ResourceManager class. The collisionName has been set to CollisionIdentifiers.POWERUP to identify this as a powerup to the collision system. The enterFrame functions moves the Powerup across the screen until it is no longer visible, at which point it is shutdown.

The thing that makes the powerup unique are the three properties Shield, Score and Weapon. Each represents the reward that the player will receive when this powerup is collected. You would probably only create powerups that have one of these three properties set to something other than zero, but there is also no reason why you couldn’t have a powerup that gave the player points and some additional shields.

The Powerup class has a number of startup functions, along with a startup function that creates a random Powerup. You may recall from the last article that we spent some time breaking up the Weapon class to avoid using that one class to create multiple enemy types. In this case though, because the properties defined by the Powerup class are shared by all the different types of powerups (every powerup will have a shield, score and weapon property, and move in a straight line across the screen), there is no downside to having the Powerup startup functions create the various different types of powerups.

So here we have defined two powerups, one for weapon 1 (startupWeapon1Powerup), and for weapon 2 (startupWeapon2Powerup). The code for creating powerups for shields and points would be very similar.

Player.as

package
{
	import away3d.core.math.Number3D;
	import away3d.events.MouseEvent3D;
	import away3d.primitives.*;

	import flash.events.*;
	import flash.geom.*;
	import flash.media.*;

	import mx.core.*;

	public class Player extends DamageableObject
	{
		protected static const PLAYER_X_LIMIT:Number = 52;
		protected static const PLAYER_Y_LIMIT:Number = 38;
		protected static const PLAYER_WIDTH:Number = 16;
		protected static const PLAYER_HEIGHT:Number = 5;
		protected static const COLLISION_PLANE_WIDTH:Number = 150;
		protected static const COLLISION_PLANE_HEIGHT:Number = 100;
		protected static const PLAYER_SHIELDS:int = 10;
		protected var collisionPlane:MeshObject = null;
		protected var shooting:Boolean = false;
		protected var timeToNextShot:Number = 0;

		public function Player()
		{
			super();
		}

		public function startupPlayer(engineManager:EngineManager):Player
		{
			var plane:Plane = new Plane(
				{material:ResourceManager.Player_Tex,
				width:PLAYER_WIDTH,
				height:PLAYER_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			var collisionPlaneMesh:Plane = new Plane(
				{material:new NullMaterial(),
				width:COLLISION_PLANE_WIDTH,
				height:COLLISION_PLANE_HEIGHT,
				yUp:false});
			collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
			collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);

			this.collisionName = CollisionIdentifiers.PLAYER;
			this.shields = PLAYER_SHIELDS;

			Application.application.pbarLife.setProgress(this.shields, PLAYER_SHIELDS);

			return this;
		}

		override public function shutdown():void
		{
			collisionPlane.model.removeEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
			collisionPlane.shutdown();
			collisionPlane = null;
			super.shutdown();
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			timeToNextShot -= dt;
			timeToNextShot = timeToNextShot<0?0:timeToNextShot; 			if (timeToNextShot == 0 && shooting) 			{ 				var weaponPosition:Number3D = new Number3D(); 				weaponPosition.add(this.model.position, new Number3D(PLAYER_WIDTH / 2, 0, 0)); 				 				timeToNextShot = this.engineManager.MyApplicationManager.MyWeaponManager.createWeapon( 					this.engineManager.MyApplicationManager.MyPlayerWeapon, 					this.engineManager.MyApplicationManager.MyPlayerWeaponLevel,  					weaponPosition); 			} 				 			if (this.model.x > PLAYER_X_LIMIT)
				this.model.x = PLAYER_X_LIMIT;
			if (this.model.x < -PLAYER_X_LIMIT) 				this.model.x = -PLAYER_X_LIMIT; 			 			if (this.model.y > PLAYER_Y_LIMIT)
				this.model.y = PLAYER_Y_LIMIT;
			if (this.model.y < -PLAYER_Y_LIMIT)
				this.model.y = -PLAYER_Y_LIMIT;
		}

		public function mouseMove3D(event:MouseEvent3D):void
		{
			if (this.model)
			{
				this.model.x = event.sceneX;
				this.model.y = event.sceneY;
			}
		}

		public override function collision(other:MeshObject):void
		{
			if (other.collisionName == CollisionIdentifiers.POWERUP)
			{
				var powerup:Powerup = other as Powerup;
				this.shields += powerup.Shields;
				this.engineManager.MyApplicationManager.MyScore += powerup.Score;
				if (powerup.Weapon != 0)
				{
					this.engineManager.MyApplicationManager.changePlayerWeapon(powerup.Weapon);
				}
			}
		}

		public override function mouseDown(event:MouseEvent):void
		{
			shooting = true;
		}

		public override function damage(amount:int):void
		{
			super.damage(amount);
			Application.application.pbarLife.setProgress(this.shields, PLAYER_SHIELDS);
		}

		public override function mouseUp(event:MouseEvent):void
		{
			shooting = false;
		}

		protected override function die():void
		{
			engineManager.MyApplicationManager.levelEnded();
			super.die();
		}
	}
}

The Player class needs to be modified to respond to a collision with a Powerup.

if (other.collisionName == CollisionIdentifiers.POWERUP)
{
	var powerup:Powerup = other as Powerup;
	this.shields += powerup.Shields;
	this.engineManager.MyApplicationManager.MyScore += powerup.Score;
	if (powerup.Weapon != 0)
	{
		this.engineManager.MyApplicationManager.changePlayerWeapon(powerup.Weapon);
	}
}

In the collision function we test for a collision with a Powerup. When such a collision has been detected, the players shields and score are updated. If the Shields and Score properties have been set to zero then these updates have no effect.

If the Weapon property is not zero we ask the ApplicationManager to update the players weapons by calling the changePlayerWeapon function.

ApplicationManager.as

package
{
	import mx.core.Application;

	public class ApplicationManager extends BaseObject
	{
		protected static const TIME_BETWEEN_BUILDINGS:Number = 2;
		protected static const TIME_BETWEEN_ENEMIES:Number = 1;
		protected static const TIME_BETWEEN_POWERUPS:Number = 10;
		protected static const TIME_TO_LEVEL_END:Number = 1;
		protected var timeToEndGame:Number = TIME_TO_LEVEL_END;
		protected var timeToNextBuilding:Number = 0;
		protected var timeToNextEnemy:Number = TIME_BETWEEN_ENEMIES;
		protected var timeToNextPowerup:Number = 0;//TIME_BETWEEN_POWERUPS;
		protected var levelHasEnded:Boolean = false;
		protected var myPlayerWeapon:int = 1;
		protected var myPlayerWeaponLevel:int = 1;
		protected var myWeaponManager:WeaponManager = null;
		protected var myScore:int = 0;

		public function get MyWeaponManager():WeaponManager
		{
			return myWeaponManager;
		}

		public function get MyPlayerWeapon():int
		{
			return myPlayerWeapon;
		}

		public function get MyPlayerWeaponLevel():int
		{
			return myPlayerWeaponLevel;
		}

		public function set MyScore(value:int):void
		{
			myScore = value;
			Application.application.lblScore.text = myScore;
		}

		public function get MyScore():int
		{
			return myScore;
		}

		public function ApplicationManager()
		{
			super();
		}

		public function startupApplicationManager(engineManager:EngineManager):ApplicationManager
		{
			this.startupBaseObject(engineManager);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYERWEAPON);
			this.engineManager.addCollidingPair(CollisionIdentifiers.PLAYER, CollisionIdentifiers.POWERUP);
			this.myWeaponManager = new WeaponManager().startupWeaponManager(this.engineManager);

			return this;
		}

		public function startLevel1():void
		{
			timeToNextBuilding = 0;
			MyScore = 0;

			new BackgroundPlane().startupBackgroundPlane(engineManager);
			new Player().startupPlayer(engineManager);

			// prepopulate the city
			for (var i:int = 0; i < 5; ++i)
			{
				var building:BackgroundBuilding = new BackgroundBuilding();
				building.startupBackgroundBuilding(engineManager);
				building.enterFrame((i + 1) * 2);
			}
		}

		public function levelEnded():void
		{
			levelHasEnded = true;
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public override function enterFrame(dt:Number):void
		{
			timeToNextBuilding -= dt;
			if (timeToNextBuilding <= 0)
			{
				timeToNextBuilding = TIME_BETWEEN_BUILDINGS;
				new BackgroundBuilding().startupBackgroundBuilding(engineManager);
			}

			timeToNextEnemy -= dt;
			if (timeToNextEnemy <= 0)
			{
				timeToNextEnemy = TIME_BETWEEN_ENEMIES;
				new Enemy().startupBasicEnemy(engineManager);
			}

			timeToNextPowerup -= dt;
			if (timeToNextPowerup <= 0)
			{
				timeToNextPowerup = TIME_BETWEEN_POWERUPS;
				new Powerup().startupRandomPowerup(engineManager);
			}

			if (levelHasEnded)
			{
				timeToEndGame -= dt;
				if (timeToEndGame <= 0)
				{
					engineManager.nextStateChange = "MainMenu";
				}
			}
		}

		public function changePlayerWeapon(weapon:int):void
		{
			if (weapon == this.myPlayerWeapon &&
				this.myWeaponManager.isValidWeapon(
					this.myPlayerWeapon,
					this.myPlayerWeaponLevel + 1))
			{
				++this.myPlayerWeaponLevel;
			}
			else if (this.myWeaponManager.isValidWeapon(weapon, 1))
			{
				this.myPlayerWeapon = weapon;
				while (!this.myWeaponManager.isValidWeapon(
					this.myPlayerWeapon,
					this.myPlayerWeaponLevel))
				{
					--this.myPlayerWeaponLevel;
				}
			}
		}
	}
}

In order for the players weapons to change in response to a powerup, the ApplicationManager gets a new function called changePlayerWeapon.

public function changePlayerWeapon(weapon:int):void
{
	if (weapon == this.myPlayerWeapon &&
		this.myWeaponManager.isValidWeapon(
			this.myPlayerWeapon,
			this.myPlayerWeaponLevel + 1))
	{
		++this.myPlayerWeaponLevel;
	}

If the player has collected a powerup for the current weapon (i.e. the powerups Weapon property equals the ApplicationManagers myPlayerWeapon property) the ApplicationManager will attempt to increase the weapon level. Obviously this can only be done if the current weapon has not been maxed out, so a call to the WeaponManager isValidWeapon function is used to see if such an upgrade is possible.

	else if (this.myWeaponManager.isValidWeapon(weapon, 1))
	{
		this.myPlayerWeapon = weapon;
		while (!this.myWeaponManager.isValidWeapon(
			this.myPlayerWeapon,
			this.myPlayerWeaponLevel))
		{
			--this.myPlayerWeaponLevel;
		}
	}
}

If the player has collected a powerup for a new weapon then the ApplicationManager changes to that weapon. Because weapons may have different levels defined (weapon 1 may have 4 levels, whereas weapon 2 may only have 3), the ApplicationManager will downgrade the weapon level where necessary.

timeToNextPowerup -= dt;
if (timeToNextPowerup <= 0)
{
	timeToNextPowerup = TIME_BETWEEN_POWERUPS;
	new Powerup().startupRandomPowerup(engineManager);
}

The Powerups are added to the game just like the enemies and background buildings. The ApplicationManager is set to add one powerup after a specified amount of time has passed in the enterFrame function.

WeaponManager.as

package
{
	import away3d.core.math.Number3D;
	import away3d.materials.BitmapMaterial;

	import flash.utils.Dictionary;

	public class WeaponManager
	{
		protected var engineManager:EngineManager = null;
		protected var weaponDatabase:Dictionary = new Dictionary();

		public function WeaponManager()
		{
			super();
		}

		public function startupWeaponManager(engineManager:EngineManager):WeaponManager
		{
			this.engineManager = engineManager;

			var weapon1:Dictionary = new Dictionary();
			weaponDatabase[1] = weapon1;

			weapon1[1] = weapon1Level1;
			weapon1[2] = weapon1Level2;

			var weapon2:Dictionary = new Dictionary();
			weaponDatabase[2] = weapon2;

			weapon2[1] = weapon2Level1;
			weapon2[2] = weapon2Level2;

			return this;
		}

		public function createWeapon(weapon:int, weaponLevel:int, position:Number3D):Number
		{
			if (isValidWeapon(weapon, weaponLevel))
			{
				return weaponDatabase[weapon][weaponLevel](position);
			}

			return 0;
		}

		public function isValidWeapon(weapon:int, weaponLevel:int):Boolean
		{
			if (weaponDatabase[weapon] != null)
			{
				if (weaponDatabase[weapon][weaponLevel] != null)
					return true;
			}

			return false;
		}

		public function weapon1Level1(weaponPosition:Number3D):Number
		{
			var material:BitmapMaterial = ResourceManager.Bullet_Tex;
			var timeToNextShot:Number = 0.4;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon1Level2(weaponPosition:Number3D):Number
		{
			var timeToNextShot:Number = 0.4;

			var material:BitmapMaterial = ResourceManager.Bullet_Tex;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var yDir2:Number = 0.5;
			var yDir3:Number = -0.5;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir2, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir3, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon2Level1(weaponPosition:Number3D):Number
		{
			var material:BitmapMaterial = ResourceManager.Bullet2_Tex;
			var timeToNextShot:Number = 1;
			var damage:int = 2;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon2Level2(weaponPosition:Number3D):Number
		{
			var material:BitmapMaterial = ResourceManager.Bullet2_Tex;
			var timeToNextShot:Number = 1;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var yDir2:Number = 0.5;
			var yDir3:Number = -0.5;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir2, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir3, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

	}
}

In order for the player to have weapons to powerup to, we need to add some more weapon definitions to the WeaponManager.

var weapon2:Dictionary = new Dictionary();
weaponDatabase[2] = weapon2;

weapon2[1] = weapon2Level1;
weapon2[2] = weapon2Level2;

The weapon2Level1 and weapon2Level2 functions are added to the weaponDatabase in the startupWeaponManager function. The code for doing this is exactly the same as the code that added the original weapon definitions. This is one of the benefits of having all the weapon creation code separated into it’s own class. With a few lines of code, and a few simple functions, we can create new weapon definitions, without a whole mess of if/else/switch statements in the middle of the Players enterFrame function.

The code required to implement the powerups has been quite straight forward. As we create the base framework additional functionality, like powerups, becomes quite easy to add to the game. In the next article we will look at finalising this base framework by moving away from the ApplicationManager creating an endless number of enemies towards specifically defined the levels.

The post Away3D Shoot’em’Up Tutorial – Powerups first appeared on TheTechlabs.com.

Away3D Shoot’em’Up Tutorial – Sound Effects

The Tech Labs — Mon, 15 Feb 2010 14:59:08 +0000

In this article we add some sound effects to the game.

Result

Requirements

Adobe Flex v3.02

Away3D v3.3.3 source code

Flint 2.1.0 source code

Pre-Requisites

You should read the previous articles in this series.

Sound Effects

I remember playing Unreal when it was first released. The sniper rifle was one of my favourite weapons in multiplayer, but it sounded weak. Thankfully a patch was released that, among other things, gave the sniper rifle a much meatier sound effect. My frag count went up just because I loved the new sound so much.

Sound effects can add a whole new dimension to a game, and here we will look at how to get some sounds into our shoot’em’up.

ResourceManager.as

package
{
	import away3d.materials.BitmapMaterial;
	import away3d.materials.TransformBitmapMaterial;

	import mx.core.BitmapAsset;
	import mx.core.SoundAsset;

	public class ResourceManager
	{
		[Embed (source="../media/building1.png")]
		public static const Building1:Class;
		public static const Building1_BitmapAsset:BitmapAsset = new Building1();
		public static const Building1_Tex:BitmapMaterial = new BitmapMaterial(Building1_BitmapAsset.bitmapData, {smooth:true});

		[Embed (source="../media/building2.png")]
		public static const Building2:Class;
		public static const Building2_BitmapAsset:BitmapAsset = new Building2();
		public static const Building2_Tex:BitmapMaterial = new BitmapMaterial(Building2_BitmapAsset.bitmapData, {smooth:true});

		[Embed (source="../media/building3.png")]
		public static const Building3:Class;
		public static const Building3_BitmapAsset:BitmapAsset = new Building3();
		public static const Building3_Tex:BitmapMaterial = new BitmapMaterial(Building3_BitmapAsset.bitmapData, {smooth:true});

		[Embed (source="../media/roof1.png")]
		public static const Roof1:Class;
		public static const Roof1_BitmapAsset:BitmapAsset = new Roof1();
		public static const Roof1_Tex:BitmapMaterial = new BitmapMaterial(Roof1_BitmapAsset.bitmapData, {smooth:true});

		[Embed (source="../media/background1.png")]
		public static const Background1:Class;
		public static const Background1_BitmapAsset:BitmapAsset = new Background1();
		public static const Background1_Tex:TransformBitmapMaterial = new TransformBitmapMaterial(Background1_BitmapAsset.bitmapData, {smooth:true});

		[Embed (source="../media/player.png")]
		public static const Player:Class;
		public static const Player_BitmapAsset:BitmapAsset = new Player();
		public static const Player_Tex:BitmapMaterial = new BitmapMaterial(Player_BitmapAsset.bitmapData);

		[Embed (source="../media/enemy.png")]
		public static const Enemy:Class;
		public static const Enemy_BitmapAsset:BitmapAsset = new Enemy();
		public static const Enemy_Tex:BitmapMaterial = new BitmapMaterial(Enemy_BitmapAsset.bitmapData);

		[Embed (source="../media/bullet.png")]
		public static const Bullet:Class;
		public static const Bullet_BitmapAsset:BitmapAsset = new Bullet();
		public static const Bullet_Tex:BitmapMaterial = new BitmapMaterial(Bullet_BitmapAsset.bitmapData);

		[Embed(source="../media/gun1.mp3")]
		public static var Gun1Sound:Class;
		public static var Gun1FX:SoundAsset = new Gun1Sound() as SoundAsset;

		[Embed(source="../media/explosion.mp3")]
		public static var ExplosionSound:Class;
		public static var ExplosionFX:SoundAsset = new ExplosionSound() as SoundAsset;
	}
}

Sounds are embedded into the SWF file just like images. Here we embed two MP3 files, and create new SoundAssets from the embedded resources. It’s these SoundAsset objects that we will use to play the sound effects. Because Flash has built in support for MP3, we don’t have to worry about decoding the files before they are played.

As you might have guessed from the names of the sound files, these two sound effects will be played when there is an explosion, and when a weapon is fired. The weapons have been very simple to this point, with the Player creating a new instance of the Weapon class directly when it is time to shoot. This setup does not easily allow the player to have different types of weapons, or to be able to create multiple weapons with every shot. Since the sound effects will be played when the weapons are fired, we first need to create a more flexible system for the weapons.

The Weapon class used to include a logic property, which was a reference to a function to be called during the enterFrame function. My idea for this was to allow the Weapon class to create multiple varieties of weapons, where the function pointed to by the logic property would define how the weapon behaved, and the startup function would initialise the necessary properties. When I looked at this again I realised that the Weapon class would end up having numerous properties that related to only one type of weapon e.g. the simple weapon would have a direction property, and a homing missile might have the a nearest enemy property. This would quickly clutter the Weapon class.

By designing the Weapon class in a way that allowed it to create multiple weapon variations I had hoped to save myself some typing by not having to create a whole bunch of subclasses. It’s a lesson I keep learning over and over: shortcuts will bite you in the ass later on. So here the Weapon class is stripped down to include just the basic functionality common to all weapons.

Weapon.as

package
{
	import away3d.core.math.Number3D;
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Plane;

	public class Weapon extends MeshObject
	{
		protected static const WEAPON_X_LIMIT:Number = 70;
		protected static const WEAPON_Y_LIMIT:Number = 60;
		protected var damage:int = 0;

		public function Weapon()
		{
			super();
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public function startupWeapon(engineManager:EngineManager, material:BitmapMaterial, position:Number3D, sizeX:Number, sizeY:Number, damage:int):Weapon
		{
			var plane:Plane = new Plane(
				{material:material,
				width:sizeX,
				height:sizeY,
				yUp:false});
			super.startupMeshObject(engineManager, plane);
			this.model.position = position;
			this.damage = damage;

			return this;
		}

		public override function enterFrame(dt:Number):void
		{
			if (this.model.x > WEAPON_X_LIMIT ||
				this.model.x < -WEAPON_X_LIMIT || 				this.model.y > WEAPON_Y_LIMIT ||
				this.model.y < -WEAPON_Y_LIMIT)
				this.shutdown();
		}

		public override function collision(other:MeshObject):void
		{
			if (other.collisionName == CollisionIdentifiers.ENEMY ||
				other.collisionName == CollisionIdentifiers.PLAYER)
				(other as DamageableObject).damage(this.damage);
			this.shutdown();
		}
	}
}

A new class, BasicWeapon, is created to define weapons that just move in a straight line. Even though it might not seem like a big deal, splitting the Weapon class in two will make the code a lot more manageable as more weapon types are added.

BasicWeapon.as

package
{
	import away3d.core.math.Number3D;

	public class BasicWeapon extends Weapon
	{
		protected static const WEAPON_SIZE:Number = 2;
		protected var speed:Number = 0;
		protected var direction:Number3D = null;

		public function BasicWeapon()
		{
			super();
		}

		protected function startupBasicWeapon(engineManager:EngineManager, position:Number3D, damage:int, xDir:Number, yDir:Number, speed:Number):BasicWeapon
		{
			this.startupWeapon(engineManager, ResourceManager.Bullet_Tex, position, WEAPON_SIZE, WEAPON_SIZE, damage);
			this.direction = new Number3D(xDir, yDir, 0);
			this.direction.normalize();
			this.speed = speed;
			return this;
		}

		public function startupBasicPlayerWeapon(engineManager:EngineManager, position:Number3D, damage:int, xDir:Number, yDir:Number, speed:Number):BasicWeapon
		{
			startupBasicWeapon(engineManager, position, damage, xDir, yDir, speed);
			this.collisionName = CollisionIdentifiers.PLAYERWEAPON;
			return this;
		}

		public function startupBasicEnemyWeapon(engineManager:EngineManager, position:Number3D, damage:int, xDir:Number, yDir:Number, speed:Number):BasicWeapon
		{
			startupBasicWeapon(engineManager, position, damage, xDir, yDir, speed);
			this.collisionName = CollisionIdentifiers.ENEMYWEAPON;
			return this;
		}

		public override function enterFrame(dt:Number):void
		{
			this.model.x += speed * dt;

			super.enterFrame(dt);
		}

	}
}

In order to easily define a selection of weapons for the player and the enemies to fire at each other, we need to separate the code for the weapon creation out of the Player class. Instead this code will be placed in a new class called WeaponManager.

WeaponManager.as

package
{
	import away3d.core.math.Number3D;

	import flash.utils.Dictionary;

	public class WeaponManager
	{
		protected var engineManager:EngineManager = null;
		protected var weaponDatabase:Dictionary = new Dictionary();

		public function WeaponManager()
		{
			super();
		}

		public function startupWeaponManager(engineManager:EngineManager):WeaponManager
		{
			this.engineManager = engineManager;

			var weapon1:Dictionary = new Dictionary();
			weaponDatabase[1] = weapon1;

			weapon1[1] = weapon1Level1;
			weapon1[2] = weapon1Level2;

			return this;
		}

		public function createWeapon(weapon:int, weaponLevel:int, position:Number3D):Number
		{
			if (isValidWeapon(weapon, weaponLevel))
			{
				return weaponDatabase[weapon][weaponLevel](position);
			}

			return 0;
		}

		public function isValidWeapon(weapon:int, weaponLevel:int):Boolean
		{
			if (weaponDatabase[weapon] != null)
			{
				if (weaponDatabase[weapon][weaponLevel] != null)
					return true;
			}

			return false;
		}

		public function weapon1Level1(weaponPosition:Number3D):Number
		{
			var timeToNextShot:Number = 0.4;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, weaponPosition, damage, xDir, yDir, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon1Level2(weaponPosition:Number3D):Number
		{
			var timeToNextShot:Number = 0.4;

			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var yDir2:Number = 1;
			var yDir3:Number = -1;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, weaponPosition, damage, xDir, yDir, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, weaponPosition, damage, xDir, yDir2, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, weaponPosition, damage, xDir, yDir3, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

	}
}

Each weapon is defined by a number and a level. So weapon number 1 level 1 are simple bullets that move in a straight line. Weapon 1 level 2 might be three bullets fired out by the player.

The weaponDatabase property is a dictionary of weapon numbers mapped to another dictionary. This second dictionary contains the weapon levels mapped to functions. So by calling weaponDatabase[1][2]() you are calling the function that is mapped to weapon number 1 level 2.

For convenience we will refer to a weapon definition as the combination of the weapon number and level, and the functions that are called to create these weapon definitions will be referred to as weapon definition functions.

For this demo we have two weapon definitions, and to them we have mapped two weapon definition functions: weapon1level1 and weapon1level2. The code to populate the weaponDatabase property is in the startupWeaponManager function.

var weapon1:Dictionary = new Dictionary();
weaponDatabase[1] = weapon1;

First we create a new Dictionarty to reperent the weapon number, and assign it to the weaponDatabase dictionary.

weapon1[1] = weapon1Level1;
weapon1[2] = weapon1Level2;

Next the two weapon definition functions are mapped to the appropiate weapon levels.

public function weapon1Level1(weaponPosition:Number3D):Number
{
	var timeToNextShot:Number = 0.4;
	var damage:int = 1;
	var xDir:Number = 1;
	var yDir:Number = 0;
	var speed:Number = 100;
	new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, weaponPosition, damage, xDir, yDir, speed);

	new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

	return timeToNextShot;
}

The weapon definition functions are quite simple. The variables that will be supplied to the Weapon startup function (the BasicWeapon startupBasicPlayerWeapon function in this case) are defined so they can be clearly identified, and then the weapon itself is created. This code is the equivalent of what used to be in the Player class when the Player created the weapons directly. These functions return the time that should elapse before the player or an enemy fires again.

You will also note that we are creating a new SoundEffect object along with the weapon. The SoundEffect class will be discussed later.

public function createWeapon(weapon:int, weaponLevel:int, position:Number3D):Number
{
	if (isValidWeapon(weapon, weaponLevel))
	{
		return weaponDatabase[weapon][weaponLevel](position);
	}

	return 0;
}

public function isValidWeapon(weapon:int, weaponLevel:int):Boolean
{
	if (weaponDatabase[weapon] != null)
	{
		if (weaponDatabase[weapon][weaponLevel] != null)
			return true;
	}

	return false;
}

The createWeapon and isValidWeapon functions provide an easy way to call the weapon definition functions by supplying the weapon number and weapon level, as well as the position that the weapon should be initially created at.

We have only two weapon definitions here, but you can imagine how much code there would be if we had 10 weapons each with 10 levels. That code would make the Player class a complete mess, so it makes sense to separate it out into the WeaponManager class.

Player.as

package
{
	import away3d.core.math.Number3D;
	import away3d.events.MouseEvent3D;
	import away3d.primitives.*;

	import flash.events.*;
	import flash.geom.*;
	import flash.media.*;

	import mx.core.*;

	public class Player extends DamageableObject
	{
		protected static const PLAYER_X_LIMIT:Number = 52;
		protected static const PLAYER_Y_LIMIT:Number = 38;
		protected static const PLAYER_WIDTH:Number = 16;
		protected static const PLAYER_HEIGHT:Number = 5;
		protected static const COLLISION_PLANE_WIDTH:Number = 150;
		protected static const COLLISION_PLANE_HEIGHT:Number = 100;
		protected static const PLAYER_SHIELDS:int = 10;
		protected var collisionPlane:MeshObject = null;
		protected var shooting:Boolean = false;
		protected var timeToNextShot:Number = 0;

		public function Player()
		{
			super();
		}

		public function startupPlayer(engineManager:EngineManager):Player
		{
			var plane:Plane = new Plane(
				{material:ResourceManager.Player_Tex,
				width:PLAYER_WIDTH,
				height:PLAYER_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			var collisionPlaneMesh:Plane = new Plane(
				{material:new NullMaterial(),
				width:COLLISION_PLANE_WIDTH,
				height:COLLISION_PLANE_HEIGHT,
				yUp:false});
			collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
			collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);

			this.collisionName = CollisionIdentifiers.PLAYER;
			this.shields = PLAYER_SHIELDS;

			Application.application.pbarLife.setProgress(this.shields, PLAYER_SHIELDS);

			return this;
		}

		override public function shutdown():void
		{
			collisionPlane.model.removeEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
			collisionPlane.shutdown();
			collisionPlane = null;
			super.shutdown();
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			timeToNextShot -= dt;
			timeToNextShot = timeToNextShot<0?0:timeToNextShot; 			if (timeToNextShot == 0 && shooting) 			{ 				var weaponPosition:Number3D = new Number3D(); 				weaponPosition.add(this.model.position, new Number3D(PLAYER_WIDTH / 2, 0, 0)); 				 				timeToNextShot = this.engineManager.MyApplicationManager.MyWeaponManager.createWeapon( 					this.engineManager.MyApplicationManager.MyPlayerWeapon, 					this.engineManager.MyApplicationManager.MyPlayerWeaponLevel,  					weaponPosition); 			} 				 			if (this.model.x > PLAYER_X_LIMIT)
				this.model.x = PLAYER_X_LIMIT;
			if (this.model.x < -PLAYER_X_LIMIT) 				this.model.x = -PLAYER_X_LIMIT; 			 			if (this.model.y > PLAYER_Y_LIMIT)
				this.model.y = PLAYER_Y_LIMIT;
			if (this.model.y < -PLAYER_Y_LIMIT)
				this.model.y = -PLAYER_Y_LIMIT;
		}

		public function mouseMove3D(event:MouseEvent3D):void
		{
			if (this.model)
			{
				this.model.x = event.sceneX;
				this.model.y = event.sceneY;
			}
		}

		public override function collision(other:MeshObject):void
		{

		}

		public override function mouseDown(event:MouseEvent):void
		{
			shooting = true;
		}

		public override function damage(amount:int):void
		{
			super.damage(amount);
			Application.application.pbarLife.setProgress(this.shields, PLAYER_SHIELDS);
		}

		public override function mouseUp(event:MouseEvent):void
		{
			shooting = false;
		}

		protected override function die():void
		{
			engineManager.MyApplicationManager.levelEnded();
			super.die();
		}
	}
}

With the weapon creation code now in the WeaponManager class, the Player has to be modified to call the createWeapon function instead of creating the weapon directly. The weapon number and weapon level properties are kept in the ApplicationManager.

timeToNextShot = this.engineManager.MyApplicationManager.MyWeaponManager.createWeapon(
		this.engineManager.MyApplicationManager.MyPlayerWeapon,
		this.engineManager.MyApplicationManager.MyPlayerWeaponLevel,
		weaponPosition);

ApplicationManager.as

package
{
	import mx.core.Application;

	public class ApplicationManager extends BaseObject
	{
		protected static const TIME_BETWEEN_BUILDINGS:Number = 2;
		protected static const TIME_BETWEEN_ENEMIES:Number = 1;
		protected static const TIME_TO_LEVEL_END:Number = 1;
		protected var timeToEndGame:Number = TIME_TO_LEVEL_END;
		protected var timeToNextBuilding:Number = 0;
		protected var timeToNextEnemy:Number = TIME_BETWEEN_ENEMIES;
		protected var levelHasEnded:Boolean = false;
		protected var myPlayerWeapon:int = 1;
		protected var myPlayerWeaponLevel:int = 1;
		protected var myWeaponManager:WeaponManager = null;
		public var myScore:int = 0;

		public function get MyWeaponManager():WeaponManager
		{
			return myWeaponManager;
		}

		public function get MyScore():int
		{
			return myScore;
		}

		public function get MyPlayerWeapon():int
		{
			return myPlayerWeapon;
		}

		public function get MyPlayerWeaponLevel():int
		{
			return myPlayerWeaponLevel;
		}

		public function set score(value:int):void
		{
			myScore = value;
			Application.application.lblScore.text = myScore;
		}

		public function ApplicationManager()
		{
			super();
		}

		public function startupApplicationManager(engineManager:EngineManager):ApplicationManager
		{
			this.startupBaseObject(engineManager);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYERWEAPON);
			this.myWeaponManager = new WeaponManager().startupWeaponManager(this.engineManager);

			return this;
		}

		public function startLevel1():void
		{
			timeToNextBuilding = 0;
			score = 0;

			new BackgroundPlane().startupBackgroundPlane(engineManager);
			new Player().startupPlayer(engineManager);

			// prepopulate the city
			for (var i:int = 0; i < 5; ++i)
			{
				var building:BackgroundBuilding = new BackgroundBuilding();
				building.startupBackgroundBuilding(engineManager);
				building.enterFrame((i + 1) * 2);
			}
		}

		public function levelEnded():void
		{
			levelHasEnded = true;
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public override function enterFrame(dt:Number):void
		{
			timeToNextBuilding -= dt;
			if (timeToNextBuilding <= 0)
			{
				timeToNextBuilding = TIME_BETWEEN_BUILDINGS;
				new BackgroundBuilding().startupBackgroundBuilding(engineManager);
			}

			timeToNextEnemy -= dt;
			if (timeToNextEnemy <= 0)
			{
				timeToNextEnemy = TIME_BETWEEN_ENEMIES;
				new Enemy().startupBasicEnemy(engineManager);
			}

			if (levelHasEnded)
			{
				timeToEndGame -= dt;
				if (timeToEndGame <= 0)
				{
					engineManager.nextStateChange = "MainMenu";
				}
			}
		}
	}
}

The ApplicationManager creates the WeaponManager in the startupApplicationManager function, and holds the players weapon definition in the MyPlayerWeapon and MyPlayerWeaponLevel properties.

For a tutorial on adding sound effects we have focused a lot on how the weapons are created. But fear not, now that we have cleaned up the weapon definitions and the code to create these
weapons, we can now add some sound effects.

SoundEffect.as

package
{
	import flash.events.Event;
	import flash.media.SoundChannel;

	import mx.core.SoundAsset;

	public class SoundEffect extends BaseObject
	{
		protected var channel:SoundChannel = null;

		public function SoundEffect()
		{
			super();
		}

		public function startupSoundEffect(engineManager:EngineManager, sound:SoundAsset):SoundEffect
		{
			super.startupBaseObject(engineManager);

			channel = sound.play();
			channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
			return this;
		}

		override public function shutdown():void
		{
			if (channel != null)
			{
				channel.removeEventListener(Event.SOUND_COMPLETE, soundComplete);
				channel.stop();
				channel = null;
			}

			super.shutdown();
		}

		public function soundComplete(event:Event):void
		{
			shutdown();
		}

	}
}

Playing sound effects is actually very simple. The SoundAsset class (created in the ResourceManager) has a play function which returns a SoundChannel object. The function of the SoundEffect class is to play the SoundAsset, and stop the sound when the SoundEffect is shutdown.

public function startupSoundEffect(sound:SoundAsset):SoundEffect
{
	super.startupBaseObject();

	channel = sound.play();
	channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
	return this;
}

The startupSoundEffect takes the SoundAsset to be played, stores the SoundChannel that is returned when the SoundAsset is played, and watches for when the sound has finished playing.

public function soundComplete(event:Event):void
{
	shutdown();
}

The soundComplete function is called when the sound has finished playing. It just calls shutdown.

override public function shutdown():void
{
	if (channel != null)
	{
		channel.removeEventListener(Event.SOUND_COMPLETE, soundComplete);
		channel.stop();
		channel = null;
	}

	super.shutdown();
}

When the SoundEffect is shutdown, either because the sound has finished playing, or the EngineManager has called the shutdown function when changing states, the event listener is removed and the sound effect is stopped.

The SoundEffect class provides a kind of “fire and forget” way to create a sound effect. When you create it the sound will play, and it will clean itself up when the sound effect has finished, or, by virtue of that fact that it extends the BaseObject class, the EngineManager will clean it up when the state changes.

DamageableObject.as

package
{
	public class DamageableObject extends MeshObject
	{
		protected var shields:int = 0;

		public function DamageableObject()
		{
			super();
		}

		protected function die():void
		{
			new EmitterContainer().startupEmitterContainer(engineManager, new Explosion(this.model.position));
			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.ExplosionFX);
			this.shutdown();
		}

		public function damage(amount:int):void
		{
			this.shields -= amount;
			if (this.shields <= 0)
				this.die();
		}
	}
}

We have already seen how the SoundEffect class is used in the WeaponManger. In addition we will add a sound effect when the player or an enemy dies. Because the DamageableObject class defines the die function that is called when an enemy or player dies, this is a logical place to add the sound effect.

We have made quite a few changes to accommodate the sound effects. Some of these changes were needed to fix up some shortsighted code design (it’s a rule I keep catching myself out with, but don’t take shortcuts), and some were needed to implement a more extensible way to define and create the weapons. However these changes did give us a clear place to create the sound effects, and will lead onto the topic of the next article: powerups.

The post Away3D Shoot’em’Up Tutorial – Sound Effects first appeared on TheTechlabs.com.

Create from Scratch a Away3D Shoot’em’Up Game: Part 4

Matthew Casperson — Tue, 28 Jul 2009 12:00:15 +0000

Now that we have the player and some enemies we need for them to be able to interact. This is done through collision detection which you will learn in this fourth part.

Result

Requirements

Adobe Flex v3.02

Away3D v3.3.3 source code

Pre-Requisites

You should read the previous articles in this series.

Adding collisions

Last time we saw how to add a player and some enemies to the level. While they could both move around they did not interact with each other as you would expect; namely by crashing. This is because the neither the player nor the enemies had any idea where the other was. In order for the ships to start colliding we need a way to define the space that they are currently taking up. This is done in the MeshObject class.

MeshObject.as

package
{
	import away3d.core.base.Object3D;

	internal class MeshObject extends BaseObject
	{
		public var model:Object3D = null;
		public var collisionName:String = CollisionIdentifiers.NONE;

		public function MeshObject()
		{
			super();
		}

		public function startupMeshObject(engineManager:EngineManager, model:Object3D):MeshObject
		{
			super.startupBaseObject(engineManager);
			this.model = model;
			this.engineManager.view.scene.addChild(model);
			return this;
		}

		public override function shutdown():void
		{
			if (model != null)
				engineManager.view.scene.removeChild(model);
			model = null;
			super.shutdown();
		}

		public function intersects(other:MeshObject):Boolean
		{
			// Use up to 6 separating planes
			if ( this.model.maxX + this.model.x < other.model.minX + other.model.x )
				return false;
			if ( this.model.maxY + this.model.y < other.model.minY + other.model.y )
 				return false;
			if ( this.model.maxZ + this.model.z < other.model.minZ + other.model.z )
				return false;

   			if ( this.model.minX + this.model.x > other.model.maxX + other.model.x )
   				return false;
   			if ( this.model.minY + this.model.y > other.model.maxY + other.model.y )
   				return false;
   			if ( this.model.minZ + this.model.z > other.model.maxZ + other.model.z)
				return false;

			// otherwise, must be intersecting
			return true;
		}
	}
}

We have added a property called collisionName, which identifies the type of object this is to the collision system (which will be implemented in the EngineManager class later on). This will allow us to specify which objects should collide – like players with enemies, enemies with the players bullets, the player with enemy bullets etc.

There is also a new function called intersects, which is used to find out of two MeshObjects are currently colliding. It does this by using the bounding box defined by the minX, maxX, minY, maxY, minZ and maxZ properties of the Away3D Object3D class. If the two objects are intersecting (or colliding) true is returned, otherwise false is returned.

CollisionIdentifiers.as

package
{
	public class CollisionIdentifiers
	{
		public static const NONE:String = "None";
		public static const PLAYER:String = "Player";
		public static const PLAYERWEAPON:String = "PlayerWeapon";
		public static const ENEMYWEAPON:String = "EnemyWeapon";
		public static const ENEMY:String = "Enemy";
		public static const POWERUP:String = "Powerup";
	}
}

Even though the collisionName property of the MeshObject is a string, it is handy to define these values as constants so the Flex compiler can pick up any spelling mistakes, instead of having to track down a misspelled collisionName yourself.

EngineManager.as

package
{
	import away3d.cameras.Camera3D;
	import away3d.containers.View3D;
	import away3d.core.math.Number3D;
	import away3d.core.render.Renderer;
	import away3d.events.*;

	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;

	import mx.collections.*;
	import mx.core.*;

	public class EngineManager extends UIComponent
	{
		public static const version:String = "1.0.0";
		protected static const MEASURED_MIN_WIDTH:int = 25;
		protected static const MEASURED_MIN_HEIGHT:int = 25;
		protected static const MEASURED_WIDTH:int = 100;
		protected static const MEASURED_HEIGHT:int = 100;

		// Away3D view
		internal var view:View3D = null;
		// Away3D camera
		internal var cam:Camera3D = null;
		// a collection of the BaseObjects
		protected var baseObjects:ArrayCollection = new ArrayCollection();
		// a collection where new BaseObjects are placed, to avoid adding items
		// to baseObjects while in the baseObjects collection while it is in a loop
		protected var newBaseObjects:ArrayCollection = new ArrayCollection();
		// a collection where removed BaseObjects are placed, to avoid removing items
		// to baseObjects while in the baseObjects collection while it is in a loop
		protected var removedBaseObjects:ArrayCollection = new ArrayCollection();
		// the last frame time
		protected var lastFrame:Date;
		// the application manager
		protected var applicationManager:ApplicationManager = null;
		// true if we need to shutdown the engine during the next frame and drop back to the main menu
		protected var myNextStateChange:String = "";
		// collision mappings
		protected var collisionMap:Dictionary = new Dictionary();

		internal function get MyApplicationManager():ApplicationManager
		{
			return applicationManager;
		}

		public function EngineManager()
		{
			super();
			addEventListener(Event.REMOVED_FROM_STAGE, this.shutdown);
			addEventListener(Event.ADDED_TO_STAGE, this.initializeEngine);
		}

		override protected function measure():void
		{
			super.measure();

			// set a bunch of predefined sizes
			this.measuredMinWidth = MEASURED_MIN_WIDTH;
			this.measuredMinHeight = MEASURED_MIN_HEIGHT;
			this.measuredHeight = MEASURED_HEIGHT;
			this.measuredWidth = MEASURED_WIDTH;
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);

			if (view != null)
			{
				// place the viewport in the middle of the control
				if(this.width / 2 != this.view.x)
					this.view.x = this.width / 2;
				if(this.height / 2 != this.view.y)
					this.view.y = this.height / 2;
			}
		}

		public function set nextStateChange(value:String):void
		{
			myNextStateChange = value;
		}

		protected function initializeEngine(event:Event):void
		{
			if (!view)
			{
				myNextStateChange = "";

				cam = new Camera3D({x:0, y:0, z:-100, lookat:new Number3D(0, 0, 0)});

				view = new View3D({x:stage.width/2, y:stage.height/2, camera:cam});
				view.renderer = Renderer.BASIC;
				view.mouseEnabled = true;
				addChild(view);

				addEventListener(Event.ENTER_FRAME, enterFrame);
				addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
				addEventListener(MouseEvent.MOUSE_UP, this.mouseUp);
				addEventListener(MouseEvent.MOUSE_MOVE, this.mouseMove);
				addEventListener(MouseEvent.CLICK, this.click);

				// set the initial frame time
				lastFrame = new Date();

				// start the application manager
				applicationManager = new ApplicationManager().startupApplicationManager(this);
			}
		}

		protected function shutdown(event:Event):void
		{
			if (view)
			{
				applicationManager.shutdown();

				shutdownAll();

				removeChild(view);

				removeEventListener(Event.ENTER_FRAME, enterFrame);
				removeEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
				removeEventListener(MouseEvent.MOUSE_UP, this.mouseUp);
				removeEventListener(MouseEvent.MOUSE_MOVE, this.mouseMove);
				removeEventListener(MouseEvent.CLICK, this.click);

				applicationManager = null;
				view = null;
				cam = null;
				myNextStateChange = "";
			}
		}

		protected function enterFrame(event:Event):void
		{
			if (view != null)
			{
				// Calculate the time since the last frame
				var thisFrame:Date = new Date();
				var seconds:Number = (thisFrame.getTime() - lastFrame.getTime())/1000.0;
		    	lastFrame = thisFrame;

		    	// sync the baseObjects collection with any BaseObjects created or removed during the
		    	// render loop
		    	removeDeletedBaseObjects();
		    	insertNewBaseObjects();

		    	// allow each BaseObject to update itself
		    	for each (var baseObject:BaseObject in baseObjects)
		    		if (baseObject.inuse)
		    			baseObject.enterFrame(seconds);		  

		    	checkCollisions();  			

		    	// render the 3D scene
		    	view.render();
	  		}

	  		// set the currentState to MainMenu, which drops us back to the menu
	  		if (myNextStateChange != "")
	  		{
	  			Application.application.currentState = myNextStateChange;
	  			myNextStateChange = "";
	  		}
		}

		public function addBaseObject(baseObject:BaseObject):void
		{
			newBaseObjects.addItem(baseObject);
		}

		public function removeBaseObject(baseObject:BaseObject):void
		{
			removedBaseObjects.addItem(baseObject);
		}

		protected function insertNewBaseObjects():void
		{
			for each (var baseObject:BaseObject in newBaseObjects)
				baseObjects.addItem(baseObject);

			newBaseObjects.removeAll();
		}

		protected function removeDeletedBaseObjects():void
		{
			for each (var removedObject:BaseObject in removedBaseObjects)
			{
				var i:int = 0;
				for (i = 0; i < baseObjects.length; ++i)
				{
					if (baseObjects.getItemAt(i) == removedObject)
					{
						baseObjects.removeItemAt(i);
						break;
					}
				}

			}

			removedBaseObjects.removeAll();
		}

		public function shutdownAll():void
		{
			// don't dispose objects twice
			for each (var baseObject:BaseObject in baseObjects)
			{
				var found:Boolean = false;
				for each (var removedObject:BaseObject in removedBaseObjects)
				{
					if (removedObject == baseObject)
					{
						found = true;
						break;
					}
				}

				if (!found)
					baseObject.shutdown();
			}

			removeDeletedBaseObjects();
		}

		public function click(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.click(event);
		}

		public function mouseDown(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.mouseDown(event);
		}

		public function mouseUp(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.mouseUp(event);
		}

		public function mouseMove(event:MouseEvent):void
		{
			for each (var gameObject:BaseObject in baseObjects)
				if (gameObject.inuse)
					gameObject.mouseMove(event);
		}

		public function addCollidingPair(collider1:String, collider2:String):void
		{
			if (collisionMap[collider1] == null)
				collisionMap[collider1] = new Array();

			if (collisionMap[collider2] == null)
				collisionMap[collider2] = new Array();

			if ((collisionMap[collider1] as Array).indexOf(collider2) == -1)
				collisionMap[collider1].push(collider2);
			if ((collisionMap[collider2] as Array).indexOf(collider1) == -1)
				collisionMap[collider2].push(collider1);
		}

		protected function checkCollisions():void
		{
	    	for (var i:int = 0; i < baseObjects.length; ++i)
			{
				var gameObjectI:MeshObject = baseObjects.getItemAt(i) as MeshObject;

				if (gameObjectI)
				{
					for (var j:int = i + 1; j < baseObjects.length; ++j)
					{
						var gameObjectJ:MeshObject = baseObjects.getItemAt(j) as MeshObject;

						if (gameObjectJ)
						{
							// early out for non-colliders
							var collisionNameNotNothing:Boolean = gameObjectI.collisionName != CollisionIdentifiers.NONE;
							// objects can still exist in the baseObjects collection after being disposed, so check
							var bothInUse:Boolean = gameObjectI.inuse && gameObjectJ.inuse;
							// make sure we have an entry in the collisionMap
							var collisionMapEntryExists:Boolean = collisionMap[gameObjectI.collisionName] != null;
							// make sure the two objects are set to collide
							var testForCollision:Boolean = collisionMapEntryExists && collisionMap[gameObjectI.collisionName].indexOf(gameObjectJ.collisionName) != -1

							if ( collisionNameNotNothing &&
								 bothInUse &&
								 collisionMapEntryExists &&
								 testForCollision)
							{
								if (gameObjectI.intersects(gameObjectJ))
								{
									gameObjectI.collision(gameObjectJ);
									gameObjectJ.collision(gameObjectI);
								}
							}
						}
					}
				}
			}
		}
	}
}

The actual detection of the collisions is done by the EngineManager.

The addCollidingPair function maps the collisionName properties of the MeshObject against each other. This mapping tells the EngineManager that these two types of MeshObjects should be tested for collisions against each other.

The checkCollisions function is where the collisions are actually determined and any colliding MeshObjects notified via their collision function.

for (var i:int = 0; i < baseObjects.length; ++i)
{
	var gameObjectI:MeshObject = baseObjects.getItemAt(i) as MeshObject;

	if (gameObjectI)
	{
		for (var j:int = i + 1; j < baseObjects.length; ++j)
		{
			var gameObjectJ:MeshObject = baseObjects.getItemAt(j) as MeshObject;

			if (gameObjectJ)
			{
			...
			}
		}
	}
}

The baseObjects collection is looped through twice in a way that ensures that every MeshObject is tested against every other MeshObject once.

// early out for non-colliders
var collisionNameNotNothing:Boolean = gameObjectI.collisionName != CollisionIdentifiers.NONE;
// objects can still exist in the baseObjects collection after being disposed, so check
var bothInUse:Boolean = gameObjectI.inuse && gameObjectJ.inuse;
// make sure we have an entry in the collisionMap
var collisionMapEntryExists:Boolean = collisionMap[gameObjectI.collisionName] != null;
// make sure the two objects are set to collide
var testForCollision:Boolean = collisionMapEntryExists && collisionMap[gameObjectI.collisionName].indexOf(gameObjectJ.collisionName) != -1

Next we need to make sure that the two MeshObjects we are looking at should be able to collide with each other. This is where the mappings set up in the addCollidingPair function are used.

if ( collisionNameNotNothing &&
	 bothInUse &&
	 collisionMapEntryExists &&
	 testForCollision)
{
	if (gameObjectI.intersects(gameObjectJ))
	{
		gameObjectI.collision(gameObjectJ);
		gameObjectJ.collision(gameObjectI);
	}
}

Assuming all the necessary conditions have been met, the intersects method is used to determine if the two MeshObjects are actually colliding. If so they are both notified through their collision function.

ApplicationManager.as

package
{
	import away3d.primitives.Cube;

	import mx.core.Application;

	public class ApplicationManager extends BaseObject
	{
		protected static const TIME_BETWEEN_BUILDINGS:Number = 2;
		protected static const TIME_BETWEEN_ENEMIES:Number = 1;
		protected static const TIME_TO_LEVEL_END:Number = 1;
		protected var timeToEndGame:Number = TIME_TO_LEVEL_END;
		protected var timeToNextBuilding:Number = 0;
		protected var timeToNextEnemy:Number = TIME_BETWEEN_ENEMIES;
		protected var levelHasEnded:Boolean = false;

		public function ApplicationManager()
		{
			super();
		}

		public function startupApplicationManager(engineManager:EngineManager):ApplicationManager
		{
			this.startupBaseObject(engineManager);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);
			return this;
		}

		public function startLevel1():void
		{
			timeToNextBuilding = 0;

			new BackgroundPlane().startupBackgroundPlane(engineManager);
			new Player().startupPlayer(engineManager);

			// prepopulate the city
			for (var i:int = 0; i < 5; ++i)
			{
				var building:BackgroundBuilding = new BackgroundBuilding();
				building.startupBackgroundBuilding(engineManager);
				building.enterFrame((i + 1) * 2);
			}
		}

		public function levelEnded():void
		{
			levelHasEnded = true;
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public override function enterFrame(dt:Number):void
		{
			timeToNextBuilding -= dt;
			if (timeToNextBuilding <= 0)
			{
				timeToNextBuilding = TIME_BETWEEN_BUILDINGS;
				new BackgroundBuilding().startupBackgroundBuilding(engineManager);
			}

			timeToNextEnemy -= dt;
			if (timeToNextEnemy <= 0)
			{
				timeToNextEnemy = TIME_BETWEEN_ENEMIES;
				new Enemy().startupBasicEnemy(engineManager);
			}

			if (levelHasEnded)
			{
				timeToEndGame -= dt;
				if (timeToEndGame <= 0)
				{
					engineManager.nextStateChange = "MainMenu";
				}
			}
		}
	}
}

The ApplicationManager is used to specify which MeshObjects should collide with which.

this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);

Here, in the startupApplicationmanager function, a call to the EngineManagers addCollidingPair function is made specifying that enemies and players should collide with each other.

if (levelHasEnded)
{
	timeToEndGame -= dt;
	if (timeToEndGame <= 0)
	{
		engineManager.nextStateChange = "MainMenu";
	}
}

We also want to be able to drop back to the main menu once the player has died, but we don’t want this to happen instantly. So instead we define a new proeprty called levelHasEnded, which will be set to true by the player dies via the levelEnded function. When the player has signalled that the level should end the timeToEndGame property starts counting down, and after a period of time the EngineManagers nextStateChange property is set the ‘MainMenu’ to indicate that on the next frame the state should be changed.

Enemy.as

package
{
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Plane;

	public class Enemy extends MeshObject
	{
		protected static const ENEMY_X_LIMIT:Number = 70;
		protected static const ENEMY_Y_LIMIT:Number = 60;
		protected static const ENEMY_X_START:Number = 65;
		protected static const ENEMY_Y_START:Number = 55;
		protected static const ENEMY_WIDTH:Number = 16;
		protected static const ENEMY_HEIGHT:Number = 5;
		protected static const BASIC_ENEMY_SPEED:Number = 50;
		protected var logic:Function = null;

		public function Enemy()
		{
			super();
		}

		public override function shutdown():void
		{
			super.shutdown();
			this.logic = null;
		}

		protected function startupEnemy(engineManager:EngineManager, material:BitmapMaterial):Enemy
		{
			var plane:Plane = new Plane(
				{material:material,
				width:ENEMY_WIDTH,
				height:ENEMY_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			this.collisionName = CollisionIdentifiers.ENEMY;

			return this;
		}

		public function startupBasicEnemy(engineManager:EngineManager):Enemy
		{
			this.startupEnemy(engineManager, ResourceManager.Enemy_Tex);
			this.logic = basicEnemyLogic;
			this.model.x = ENEMY_X_LIMIT;
			this.model.y = MathUtils.randRange(-ENEMY_Y_START, ENEMY_Y_START);
			return this;
		}

		public override function enterFrame(dt:Number):void
		{
			if (logic != null)
				logic(dt);

			if (this.model.x > ENEMY_X_LIMIT ||
				this.model.x < -ENEMY_X_LIMIT ||
				this.model.y > ENEMY_Y_LIMIT ||
				this.model.y < -ENEMY_Y_LIMIT)
				this.shutdown();
		}

		protected function basicEnemyLogic(dt:Number):void
		{
			this.model.x -= BASIC_ENEMY_SPEED * dt;
		}

		public override function collision(other:BaseObject):void
		{
			this.shutdown();
		}
	}
}

We only need to make two changes to the Enemy class.

this.collisionName = CollisionIdentifiers.ENEMY;

The first is to specify the collision name, which identifies this MeshObject as an enemy to the collision system.

public override function collision(other:BaseObject):void
{
	this.shutdown();
}

The second is to override the collision function, and call the shutdown function when a collision has been detected.

Player.as

package
{
	import away3d.core.math.Number3D;
	import away3d.events.MouseEvent3D;
	import away3d.primitives.*;

	import flash.events.*;
	import flash.geom.*;
	import flash.media.*;

	import mx.core.*;

	public class Player extends MeshObject
	{
		protected static const PLAYER_X_LIMIT:Number = 52;
		protected static const PLAYER_Y_LIMIT:Number = 38;
		protected static const PLAYER_WIDTH:Number = 16;
		protected static const PLAYER_HEIGHT:Number = 5;
		protected static const COLLISION_PLANE_WIDTH:Number = 150;
		protected static const COLLISION_PLANE_HEIGHT:Number = 100;
		protected var collisionPlane:MeshObject = null;

		public function Player()
		{
			super();
		}

		public function startupPlayer(engineManager:EngineManager):Player
		{
			var plane:Plane = new Plane(
				{material:ResourceManager.Player_Tex,
				width:PLAYER_WIDTH,
				height:PLAYER_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			var collisionPlaneMesh:Plane = new Plane(
				{material:new NullMaterial(),
				width:COLLISION_PLANE_WIDTH,
				height:COLLISION_PLANE_HEIGHT,
				yUp:false});
			collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
			collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);

			this.collisionName = CollisionIdentifiers.PLAYER;

			return this;
		}

		override public function shutdown():void
		{
			collisionPlane.model.removeEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
			collisionPlane.shutdown();
			collisionPlane = null;
			super.shutdown();
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			if (this.model.x > PLAYER_X_LIMIT)
				this.model.x = PLAYER_X_LIMIT;
			if (this.model.x < -PLAYER_X_LIMIT)
				this.model.x = -PLAYER_X_LIMIT;

			if (this.model.y > PLAYER_Y_LIMIT)
				this.model.y = PLAYER_Y_LIMIT;
			if (this.model.y < -PLAYER_Y_LIMIT)
				this.model.y = -PLAYER_Y_LIMIT;
		}

		public function mouseMove3D(event:MouseEvent3D):void
		{
			if (this.model)
			{
				this.model.x = event.sceneX;
				this.model.y = event.sceneY;
			}
		}

		public override function collision(other:BaseObject):void
		{
			engineManager.MyApplicationManager.levelEnded();
			this.shutdown();
		}
	}
}

The same two changes are made to the Player class. However, before the shutdown function is called (in the collision function), we first notify the Applicationmanager that the current level should end by calling the levelEnded function.

Collisions.mxml

One final change has to be made to the MXML file. When the level is started (because the Game state has been activated) we want to hide the mouse cursor by calling Mouse.hide(). Then when the main menu is shown (because the MainMenu state has been activated) we want to show the mouse cursor by calling Mouse.show().

With collision detection enabled we can detected when the player and an enemy collide, remove both from the game, and end the level (after a short delay). We can also use the same collision detection routines to implement weapons, which we will do in the next article.

The post Create from Scratch a Away3D Shoot’em’Up Game: Part 4 first appeared on TheTechlabs.com.

Getting Started With BetweenAS3

Devon — Tue, 21 Jul 2009 12:00:44 +0000

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

Requirements

To go through the code examples presented here, you will, of course, need the BetweenAS3 library added to your class path. The library can be downloaded from the .svn depository here. You’ll notice that there are two branches to the library – one for Flash Player 9 and one for Flash Player 10. Although the syntax for the two branches is the same, I’ve used the Flash Player 10 branch for the examples here. I’ve also written the examples here as a pure Actionscript project, so something that can compile actionscript projects, such as FlashBuilder/Flexbuilder or FlashDevelop plus the Flex SDK is also required. Flash CS4 can also be used if each example class is used as a .fla document class. The included download contains all actionscript files plus the FlashDevelopment project file.

Pre-Requisites

As the name BetweenAS3 implies, all code presented will be in Actionscript 3. While it would be helpful (and is assumed) that the reader has at least a basic working knowledge of Actionscript 3, this isn’t 100% necessary.

Basic Syntax and Functionality

Primarily, BetweenAS3 relies on several static method calls. Each of these static methods will return an instance of an ITween interface. Because of this, BetweenAS3 offers a great deal of flexibility as each of these static methods may nest any number of additional methods thereby building extremely complex tweens from relatively simple syntax.

In its most simple form, a basic BetweenAS3 tween may look like this:

var tween:ITween = BetweenAS3.tween(targetObject, toObject, fromObject, time, easingMethod);

Once created, the tween can be started using the play() method, stopped using the stop() method or controlled with the Movieclip like methods gotoAndPlay(time) or gotoAndStop(time). You can determine the length of the tween in seconds with the duration property, the current time of the tween with the position property and can determine whether or not the tween is playing at any given moment with the aptly named isPlaying property.

Like all good tweening engines, with BetweenAS3 you are able to trigger actionscript methods when the tween starts, stops, updates or completes. Unlike most tweening engines, though, BetweenAS3 offers two ways of doing this. You can either use the standard AS3 event model and listen for a BetweenEvent, or you can use a more AS2 style approach and add callback methods to the tween instance. For example, say you wanted to call the method named tweenDone when a tween completes. You could say:

tween.addEventListener(BetweenEvent.COMPLETE, tweenDone);

private function tweenDone(event:BetweenEvent):void {
	// the tween is complete
}

Or, instead, you could say:

tween.onComplete = tweenDone;

private function tweenDone():void {
	// the tween is complete
}

Using this latter approach, it is also possible to pass parameters to the callback method by passing an array of parameters to the tween instance’s onCompleteParams property like so:

tween.onComplete = tweenDone;
tween.onCompleteParams = ["hello", 3];

private function tweenDone(param1:String, param2:int):void {
	trace(param1, param2);
}

Now that we are armed with some basic knowledge of how BetweenAS3 operates, let’s take a look at some specific examples of this powerful tweening engine in action.

The Basic Tween

Before diving straight into examples, let’s first create a couple simple class files that we can reuse throughout this tutorial. The first thing we’ll want is a target to tween. For this we’ll simply extend the Sprite object and use its graphics property to draw a small grey square. This then is our TweenTarget class:

package  {

	import flash.display.Sprite;

	/**
	 * Simple DisplayObject to demonstrate BetweenAS3
	 */
	public class TweenTarget extends Sprite {

		public function TweenTarget() {
			graphics.beginFill(0x999999);
			graphics.drawRect(0, 0, 25, 25);
			graphics.endFill();
		}
	}
}

The second bit of code we’ll want to get out of the way is a template that we can use with each example. This class will just create an of a textfield (that simply says to click to start or stop the tween), and a tween instance class property. It will also contain a toggleTween method that, using the methods mentioned above, will allow our ITween instance to start or stop by clicking the stage. Once our template is made, the only things that will change from example to example are the name of the class (unless you’d like to overwrite each example), the initTween method which creates our class property tween instance, perhaps the easing method imports, and possibly a few other small details. The general template, then will look like this:

package  {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Expo;
	import org.libspark.betweenas3.tweens.ITween;

	[SWF(width='540', height='200', backgroundColor='#000000', frameRate='60')]
	public class TweenExample extends Sprite {

		private var _tween:ITween;
		private var _tf:TextField;

		public function TweenExample() {
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(event:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			initText();
			initTween();

			stage.addEventListener(MouseEvent.CLICK, toggleTween);
		}

		private function initText():void {
			var fmt:TextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.defaultTextFormat = fmt;
			_tf.text = "Click to start/stop tween.";
			_tf.x = Math.round(stage.stageWidth * .5 - _tf.width * .5);
			_tf.y = Math.round(stage.stageHeight - _tf.height - 10);
			addChild(_tf);
		}

		private function initTween():void {
			// will change from example to example
		}

		private function toggleTween(event:MouseEvent):void {
			// if the tween is playing, stop it
			if (_tween.isPlaying) {
				_tween.stop();
			} else {
				// otherwise if the tween is at the end, start it over
				if (_tween.position == _tween.duration) {
					_tween.gotoAndPlay(0);
				// if it's not at the end, simply play the tween
				} else {
					_tween.play();
				}
			}
		}
	}
}

Now that we are armed with these basic items, let’s roll up our sleeves and dig into a concrete example of BetweenAS3 in action. As mentioned earlier, the syntax for creating a basic tween looks like this:

_tween = BetweenAS3.tween(target, toObject, fromObject, time, easing);

In more detail, the target is the obejct whose property or properties we wish to tween, the toObject is an object containing properties and their corresponding ending values. Likewise, the fromObject is an object containing the same properties as the toObject, but with their beginning value. Time is the duration of the tween in seconds, and easing is an IEasing interface instance which we can get from the org.libspark.betweenas3.easing package. In our initTween method, then, let’s create a TweenTarget instance, add it to the display list and use it as the target of our tween instance. So initTween becomes:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 20;
	targ.y = 60;
	addChild(targ);
	_tween = BetweenAS3.tween(targ, { x:500 }, null, 2.0, Expo.easeOut);
}

Notice that we passed a null in place of a fromObject. By doing so, we are telling BetweenAS3 to use the tween target’s current properties. We already created the toggleTween method which will play the tween when you click the stage, so go ahead and compile the .swf. You should get something like the example below:

Delaying a Tween

As mentioned, complex tweens can be built with BetweenAS3 by nesting various static methods of the class. So far we have looked at only one of those methods, tween. Let’s look at another, now, delay. Like the tween method, delay returns an instance of an ITween interface. The delay method syntax looks like this:

var tween:ITween = BetweenAS3.delay(ITweenToDelay, delayTime, postDelayTime);

Here, the ITweenToDelay is a tween instance we wish to delay, the delay time is how many seconds the tween should be delayed before the tween starts and the postDelayTime is how many seconds the tween should be delayed before the next tween starts. The postDelayTime defaults to 0.0 and, in this example, we will leave it so.

So, let’s go back to our TweenExample template and change the initTween method to look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 20;
	targ.y = 60;
	addChild(targ);
	var t:ITween = BetweenAS3.tween(targ, { x:500 }, null, 2.0, Expo.easeOut);
	_tween = BetweenAS3.delay(t, 1.0);
}

Now, when we compile our example, we see that when we click on the stage, there is a one second delay before the tween target tweens its way across the stage like below.

Parallel and Serial Tweens

The next static methods of the BetweenAS3 class we’ll consider are parallel and serial. The parallel method lets you run any number of tween instances at the same time. Similarly, the serial method allows you to run any number of tween instances in a row (one after another). Syntactically, both methods are identical, you simply pass any number of ITween instances as parameters.

For our parallel example, let’s change our initTween method to look like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;
	addChild(targ1);

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;
	addChild(targ2);

	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Expo.easeOut);
	var t2:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Expo.easeOut);
	_tween = BetweenAS3.parallel(t1, t2);
}

Once compiled, that will look like this:

And for our serial example, try this for the initTween method:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;
	addChild(targ1);

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;
	addChild(targ2);

	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut);
	var t2:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeOut);
	_tween = BetweenAS3.serial(t1, t2);
}

Note that we’ve tried a different easing method here which means a different easing method will need to be imported from the org.libspark.betweenas3.easing package before compiling. Once compiled, though, you’ll see something like this:

At this point it should start to be obvious what was meant when it was stated that very complex tweens could be built up by nesting simpler tweens. For example, you could easily pass two parallel tweens and a delayed tween to the BetweenAS3 serial method and so on.

Reversing and Repeating Tweens

The next two static methods we’ll look at are reverse and repeat. The reverse method, as its name suggests, reverses a tween and takes two parameters, the tween to reverse and a boolean indicating whether or not to reverse the tween’s position. Most often you would simply leave this boolean set to its default state of true. The repeat method, true to it’s name, repeats a specified tween. Repeat accepts two arguments: the tween instance to repeat and the number of times it should repeat.

This time our initTween method will be a little bit trickier and we’ll really start to see the power of nesting BetweenAS3 calls. We’ll begin by creating a basic tween that moves our TweenTarget instance across the stage with a nice elasticity. Nothing new there. Then, though, we’ll create a repeated tween that repeats four times. That repeated tween will be passed an instance of a serial tween that tweens first the basic tween then the reverse of the basic tween. Our initTween method then will look like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 60;
	addChild(targ1);
	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, { x:targ1.x }, 2.0, Elastic.easeInOut);
	_tween = BetweenAS3.repeat(BetweenAS3.serial(t1, BetweenAS3.reverse(t1)), 4);
}

Compiled, you should get a result such as this:

Adding and Removing Children

One of the interesting benefits of using BetweenAS3 is the ability to add and remove child display objects as a tween using the static methods addChild and removeFromParent respectively. The addChild method expects two arguments: the child to add and the parent the child should be added to. The removeFromParent accepts only a single argument, the child to remove. Both of these methods, again, return ITween instances and can be nested into other BetweenAS3 methods to build up complex tween sequences.

In this example, we’ll instantiate three TweenTarget instances, use the BetweenAS3.addChild method to add them to the display list with a .5 second delay, tween them all across the stage in parallel, then use the removeFromParent method to get remove them from the display list. This time our initTween method looks like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;

	var targ3:TweenTarget = new TweenTarget();
	targ3.x = 20;
	targ3.y = 95;

	var t1:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ1, this), .5);
	var t2:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ2, this), .5);
	var t3:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ3, this), .5, .5);
	var t4:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut);
	var t5:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeIn);
	var t6:ITween = BetweenAS3.tween(targ3, { x:500 }, null, 2.0, Elastic.easeInOut);
	var t7:ITween = BetweenAS3.parallel(t4, t5, t6);
	var t8:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ1), .5);
	var t9:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ2), .5);
	var t10:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ3), .5);

	_tween = BetweenAS3.serial(t1, t2, t3, t7, t8, t9, t10);
}

Note that for the sake of legibility, I created several single ITween instances, but if you really wanted to, you could actually create the _tween instance in a single line like so:

_tween = BetweenAS3.serial(BetweenAS3.delay(BetweenAS3.addChild(targ1, this), .5), BetweenAS3.delay(BetweenAS3.addChild(targ2, this), .5), BetweenAS3.delay(BetweenAS3.addChild(targ3, this), .5, .5), BetweenAS3.parallel(BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut), BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeIn), BetweenAS3.tween(targ3, { x:500 }, null, 2.0, Elastic.easeInOut)), BetweenAS3.delay(BetweenAS3.removeFromParent(targ1), .5), BetweenAS3.delay(BetweenAS3.removeFromParent(targ2), .5), BetweenAS3.delay(BetweenAS3.removeFromParent(targ3), .5));

Such is the power of nesting tween methods in BetweenAS3.

Whichever method you choose to create your tween instance, the compiled .swf will look like the example below:

Color Tweening

In addition to nesting ITween instances it is also possible with BetweenAS3 to nest property objects to build complex tweens. In this example we’ll take a look at how to tween the properties of the colorTransform property of the transform property of the TweenTarget instance. This time in our initTween method, we’ll enlarge our TweenTarget instance, then tween its color. Our initTween method will look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 235;
	targ.y = 40;
	targ.scaleX = 3;
	targ.scaleY = 3;
	addChild(targ);
	_tween = BetweenAS3.tween(targ, { transform:{colorTransform:{ redOffset:-255, greenOffset:-255, blueOffset:255 }} }, null, 4.0, Expo.easeOut);
}

Compiled, you should see something like the below:

Filter Tweening

Again, by nesting property objects, BetweenAS3 can also be used to tween DisplayObject filters. In this quick example, we’ll take a look at tweening a glow filter back and forth. Before we begin though, there is one other property of the ITween interface to take a look at: the stopOnComplete property. This property is a boolean that tells the tween to stop when it is finished. If set to false, as it will be in this example, the tween will run indefinitely starting at it’s beginning each time it completes. In this example, we’ll again enlarge our TweenTarget instance, add a GlowFilter object to its filters property, then, finally tween that filter. Our initTween method will look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 235;
	targ.y = 40;
	targ.scaleX = 3;
	targ.scaleY = 3;
	addChild(targ);
	targ.filters = [new GlowFilter(0xFFFF00, 1, 0, 0, 2, 3)];
	var t1:ITween = BetweenAS3.tween(targ, { _glowFilter: { blurX:32, blurY:32 } }, { _glowFilter: { blurX:0, blurY:0 }},  1.0, Expo.easeOut);
	_tween = BetweenAS3.serial(t1, BetweenAS3.reverse(t1));
	_tween.stopOnComplete = false;
}

Compiled our glow filter example will look like this:

In case you’re wondering where that “_glowFilter” property came from, BetweenAS3 will, by default, recognize the following filter properties: “_bevelFilter”, “_blurFilter”, “_colorMatrixFilter”, “_convolutionFilter”, “_displacementMapFilter”, “_dropShadowFilter”, “_glowFilter”, “_gradientBevelFilter”, “_gradientGlowFilter”, and “_shaderFilter”.

Tweening Array Members

Possibly one of my favorite features of BetweenAS3 is its ability to tween the members of Array instances just like they were properties of an object (which, when you think about it, they are). Why would you want to tween array members, you ask. Well, one possible example is that you want to tween an image from “normal” to “embossed” and back again. You can easily emboss an image using a ConvolutionFilter, but to tween the transition will require tweening an array.

If you’re not familiar with the ConvolutionFilter object, you create one using a matrix array. Creating a ConvolutionFilter with an array like this (0,0,0,0,1,0,0,0,0), will not affect the image to which it’s applied. Using an array like this however, (-2,-1,0,-1,1,1,0,1,2), will emboss the image.

So, in this example, we will embed an image, create a tween that tweens the members of the array that change and then tweens them back, and add an event listener to that tween so as the tween updates, a ConvolutionFilter has its matrix property updated then the filter is applied to our image.

Because this script is so completely different from all the others, I will present it in its entirety below:

package  {

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.ConvolutionFilter;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Quad;
	import org.libspark.betweenas3.events.BetweenEvent;
	import org.libspark.betweenas3.tweens.ITween;

	[SWF(width='540', height='450', backgroundColor='#000000', frameRate='60')]
	public class MatrixTween extends Sprite {

		[Embed(source = "../assets/prague.jpg")]
		private var JPG:Class;

		private var _image:Sprite;
		private var _tween:ITween;
		private var _tf:TextField;

		private var _matrixArray:Array = [ 0, 0, 0, 0, 1, 0, 0, 0, 0];
		private var _convFilter:ConvolutionFilter = new ConvolutionFilter(3, 3, _matrixArray);

		// IDENTITY ARRAY:	(0,0,0,0,1,0,0,0,0)
		// EMBOSS ARRAY:	(-2,-1,0,-1,1,1,0,1,2);

		public function MatrixTween() {
			_image = new Sprite();
			_image.addChild(new JPG());
			addChild(_image);

			initText();
			initTween();

			stage.addEventListener(MouseEvent.CLICK, toggleTween);
		}

		private function initText():void {
			var fmt:TextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.defaultTextFormat = fmt;
			_tf.text = "Click to start/stop tween.";
			_tf.x = Math.round(stage.stageWidth * .5 - _tf.width * .5);
			_tf.y = Math.round(stage.stageHeight - _tf.height - 10);
			addChild(_tf);
		}

		private function initTween():void {
			var t1:ITween = BetweenAS3.tween(_matrixArray, { 0: -2, 1: -1, 3: -1, 4:1, 5:1, 7:1, 8:2 }, { 0:0, 1:0, 3:0, 4:1, 5:0, 7:0, 8:0 }, 2.0, Quad.easeInOut);
			_tween = BetweenAS3.serial(t1, BetweenAS3.reverse(t1));
			_tween.addEventListener(BetweenEvent.UPDATE, applyFilter);
		}

		private function applyFilter(event:BetweenEvent):void {
			_convFilter.matrix = _matrixArray;
			_image.filters = [_convFilter];
		}

		private function toggleTween(event:MouseEvent):void {
			if (_tween.isPlaying) {
				_tween.stop();
			} else {
				if (_tween.position == _tween.duration) {
					_tween.gotoAndPlay(0);
				} else {
					_tween.play();
				}
			}
		}
	}
}

Notice how the index numbers of the array members are used as property names. Compiling the .swf will yield the results below:

In conclusion, even though still in version 0.00 (Preview) at the time of writing this, BetweenAS3 is already a powerful tween engine addition to any actionscript coder’s arsenal. As always, I always recommend using the right tool for the job and BetweenAS3 may certainly not be right for every time a tween is required, but at the cost of a measly 14k or so, it is definitely worth keeping handy. For more information regarding BetweenAS3, check out this slide show created by the engine’s author.

The post Getting Started With BetweenAS3 first appeared on TheTechlabs.com.