APE and Display Objects -> Displaying Images

Essentially the WheelParticle class is an extension of the base AbstractParticle class which has a setDisplay method. The setDisplay method allows you to assign a DisplayObject to be used when the particle is drawn, in this example an image is being used as my DisplayObject. The parameters for the setDisplay method are:

(displayObject, offsetX, offsetY, rotation) – the default value for offsetX, offsetY and rotation is 0.

In the example below I wanted to bind an external image of a wheel to the WheelParticle class. Note, the image used is 100px wide X 100px high.

Here is the class I used to build the car and load in the .png image to be used in the WheelParticle class:

package {

	import org.cove.ape.*;
	import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.net.URLRequest;  

	public class Car extends Group {

		private var wheelParticleA:WheelParticle;
		private var wheelParticleB:WheelParticle;

		private var wheelAimage:Loader;
		private var wheelBimage:Loader;

		public function Car(colorOne:uint, colorTwo:uint) {

			// Load in the image
            wheelAimage = new Loader();  

            wheelAimage.load(new URLRequest("wheel.png"));

			wheelParticleA = new WheelParticle(50,30,50,false,2);

			/*
			============================
			Assigns a DisplayObject to be used when painting this particle.
			Parameters

				d:DisplayObject
				offsetX:Number (default = 0)
 				offsetY:Number (default = 0)
 				rotation:Number (default = 0)
			============================
			*/

			wheelParticleA.setDisplay(wheelAimage, -50, -50);

			addParticle(wheelParticleA);

			// Load in the image
            wheelBimage = new Loader();
            wheelBimage.load(new URLRequest("wheel.png"));

			wheelParticleB = new WheelParticle(250,30,50,false,2);

			/*
			============================
			Assigns a DisplayObject to be used when painting this particle.
			Parameters

				d:DisplayObject
				offsetX:Number (default = 0)
 				offsetY:Number (default = 0)
 				rotation:Number (default = 0)
			============================
			*/

			wheelParticleB.setDisplay(wheelBimage, -50, -50);

			addParticle(wheelParticleB);

			// connect the front and rear wheels
			var axelConnector:SpringConstraint = new SpringConstraint(wheelParticleA, wheelParticleB, .7, false, 8);
			axelConnector.setStyle(0, colorOne, 1, colorTwo);
			addConstraint(axelConnector);

			// A] add a particle directly above wheel A
			var suspA:CircleParticle = new CircleParticle(50,-100,7,false,10);
			suspA.mass = 0.001;
			suspA.setStyle(1, colorOne, 1, colorOne);
			addParticle(suspA);

			// connect particle [A] to wheel A
			var shockAConnector:SpringConstraint = new SpringConstraint(wheelParticleA, suspA, .6, false, 8);
			shockAConnector.setStyle(0, colorOne, 1, colorTwo);
			addConstraint(shockAConnector);

			// B] add a particle directly above wheel B
			var suspB:CircleParticle = new CircleParticle(250,-100,7,false,10);
			suspB.mass = 0.001;
			suspB.setStyle(1, colorOne, 1, colorOne);
			addParticle(suspB);

			// connect particle [B] to wheel B
			var shockBConnector:SpringConstraint = new SpringConstraint(wheelParticleB, suspB, .6, false, 8);
			shockBConnector.setStyle(0, colorOne, 1, colorTwo);
			addConstraint(shockBConnector);

			// connect shockAConnector to Wheel B
			var wheelBConnector:SpringConstraint = new SpringConstraint(wheelParticleB, suspA, 0.5, false, 8);
			wheelBConnector.setStyle(0, colorOne, 1, colorTwo);
			addConstraint(wheelBConnector);

			// connect shockBConnector to Wheel A
			var wheelAConnector:SpringConstraint = new SpringConstraint(wheelParticleA, suspB, .7, false, 8);
			wheelAConnector.setStyle(0, colorOne, 1, colorTwo);
			addConstraint(wheelAConnector);
		}

		public function set speed(s:Number):void {
			wheelParticleA.angularVelocity = s;
			wheelParticleB.angularVelocity = s;
		}
	}
}

Here is the Main Document Class.. the class file you will want your .fla movie to point to:

package {
	import org.cove.ape.*;

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;

	public class Main extends Sprite {

		private static var colA:uint = 0x333333;
		private static var colB:uint = 0x336699;
		private static var colC:uint = 0x000000;
		private static var boundaryColor:uint = 0x6699aa;
		private static var carColor:uint = 0x336699;
		private static var carOutlineColor:uint = 0x000000;

		private var car:Car;

		public function Main() {

			stage.frameRate = 55;

			// Initialize the engine. The argument here is the time step value.
			// Higher values scale the forces in the sim, making it appear to run
			// faster or slower. Lower values result in more accurate simulations.
			APEngine.init(1/4);

			// set up the default diplay container
			APEngine.container = this;

			// gravity -- particles of varying masses are affected the same
			APEngine.addMasslessForce(new Vector(0, 3));

			// the border
			var boundary:Boundary = new Boundary(boundaryColor);
			APEngine.addGroup(boundary);

			car = new Car(carOutlineColor, carColor);

			APEngine.addGroup(car);

			// determine what collides with what.
			car.addCollidableList(new Array(boundary));

			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_pressed);
			stage.addEventListener(KeyboardEvent.KEY_UP, key_released);
			addEventListener(Event.ENTER_FRAME, run);
		}

		function key_pressed(event:KeyboardEvent):void {
			var keySpeed:Number = 0.8;

			if (event.keyCode == Keyboard.UP || event.keyCode == Keyboard.RIGHT)
			{
				car.speed = keySpeed;
			}

			if (event.keyCode == Keyboard.DOWN || event.keyCode == Keyboard.LEFT)
			{
				car.speed = -keySpeed;
			}
		}

		function key_released(event:KeyboardEvent):void
		{
			car.speed = 0;
		}

		private function run(evt:Event):void {
			APEngine.step();
			APEngine.paint();
		}
	}
}

.. and I just used this class to act as the bounds of the movie so the car does not drive off the screen:

package {

	import org.cove.ape.*;

	public class Boundary extends Group {

		public function Boundary(boundaryColor:uint) {
			// RectangleParticle - x, y, width, height
			var floor:RectangleParticle = new RectangleParticle(350,299,700,1,0,true);
			floor.setStyle(0, boundaryColor, 1, boundaryColor);
			addParticle(floor);

			var leftWall:RectangleParticle = new RectangleParticle(1,250,1,500,0,true);
			leftWall.setStyle(0, boundaryColor, 1, boundaryColor);
			addParticle(leftWall);

			var rightWall:RectangleParticle = new RectangleParticle(699,250,1,500,0,true);
			rightWall.setStyle(0, boundaryColor, 1, boundaryColor);
			addParticle(rightWall);
		}
	}
}