C2D 09 BunnyMark

So far we've been letting the Starling Graphics Extension take care of the drawing in our examples. Let's try adding our own graphic.

Depending on your preference, you can either download the finished code for this tutorial here and skim through it, or follow along with the tutorial. Assuming you're doing the latter:

1. Create a new ActionScript project.
2. Call it BunnyMark and exit the wizard
3. Open the project’s properties.
4. Open the ‘ActionScript Build Path’ screen.
5. Add CadetEngine, CadetEngine_Extension_2D and CadetEngine_Extension_2DBox2D to the project's Library Path.
6. Open the 'ActionScript Compiler' screen.
7. Turn off 'Copy non-embedded files to output folder'
8. Turn off 'Generate HTML wrapper file'.
9. Make sure the default SDK is set to 4.6 or above.
10. Close the project properties panel.

---

Add the following code to your BunnyMark application:

package
{
	import cadet.core.CadetScene;
	
	import cadet2D.components.renderers.Renderer2D;
	import cadet2D.components.skins.ImageSkin;
	import cadet2D.components.textures.TextureComponent;
	
	import components.behaviours.BounceBehaviour;
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	[SWF( width="700", height="400", backgroundColor="0x002135", frameRate="60" )]
	public class BunnyMark extends Sprite
	{
		[Embed(source = "assets/wabbit_alpha.png")]
		private var BunnyAsset:Class;
		private var textureComponent:TextureComponent;
		
		private var numEntities			:int = 1000;
		private var entityIndex			:uint;
		
		private var cadetScene:CadetScene;
		
		public function BunnyMark()
		{
			cadetScene = new CadetScene();
			
			var renderer:Renderer2D = new Renderer2D();
			renderer.viewportWidth = stage.stageWidth;
			renderer.viewportHeight = stage.stageHeight;
			cadetScene.children.addItem(renderer);
			renderer.enable(this);
			
			// Create the shared TextureComponent
			textureComponent = new TextureComponent();
			textureComponent.bitmapData = new BunnyAsset().bitmapData;
			cadetScene.children.addItem(textureComponent);
			
			addEventListener( Event.ENTER_FRAME, enterFrameHandler );			
		}
		
		private function enterFrameHandler( event:Event ):void
		{
			if (entityIndex < numEntities) {
				entityIndex ++;
				createBunny();
			}
			
			cadetScene.step();
		}
		
		private function createBunny():void
		{
			// Add the BounceBehaviour to the scene
			var randomVelocity:Point = new Point(Math.random() * 10, (Math.random() * 10) - 5);
			var bounceBehaviour:BounceBehaviour = new BounceBehaviour();
			bounceBehaviour.velocity = randomVelocity;
			bounceBehaviour.boundsRect = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
			cadetScene.children.addItem(bounceBehaviour);
			
			// Add a Skin to the scene
			var skin:ImageSkin = new ImageSkin();
			skin.texture = textureComponent;
			cadetScene.children.addItem(skin);
			
			// Pass reference to skin to bounceBehaviour
			bounceBehaviour.transform = skin;
		}
	}
}

A couple of new Cadet2D components have been introduced since the last tutorial: TextureComponent and ImageSkin. TextureComponent wraps up a starling.display.Texture, giving it a presence in the Cadet scene graph. Similarly, ImageSkin wraps up a starling.display.Image. You may remember from previous tutorials that wrapping up 3rd party components in this way is important if you want to make the components editable via the CadetEditor, though not essential if you don't plan to do so.

We've also introduced a simple BounceBehaviour which will take care of the animation of our bunnies. Introduce this now by creating the following class:

package components.behaviours
{
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	import cadet.core.Component;
	import cadet.core.ISteppableComponent;
	
	import cadet2D.components.transforms.ITransform2D;
	
	public class BounceBehaviour extends Component implements ISteppableComponent
	{
		public var velocity		:Point;
		public var transform	:ITransform2D;
		
		public var gravity		:int = 3;
		
		public var boundsRect	:Rectangle;
		
		public function BounceBehaviour()
		{
			
		}

		public function step( dt:Number ):void
		{
			transform.x += velocity.x;
			transform.y += velocity.y;				
			velocity.y += gravity;
			
			if (transform.x > boundsRect.right) {
				velocity.x *= -1;
				transform.x = boundsRect.right;
			}
			else if (transform.x < boundsRect.left) {
				velocity.x *= -1;
				transform.x = boundsRect.left;
			}
			
			if (transform.y > boundsRect.bottom) {
				velocity.y *= -0.8;
				transform.y = boundsRect.bottom;
				
				if (Math.random() > 0.5) {
					velocity.y -= Math.random() * 12;
				}
			}
			else if (transform.y < boundsRect.top) {
				velocity.y = 0;
				transform.y = boundsRect.top;
			}
		}
	}
}

As you can see from the code, BounceBehaviour acts upon an ITransform2D component by amending and applying its velocity every step(). If the resultant position of the ITransform2D is outside of the screenRect bounds, the velocity is killed or reversed accordingly.

Note: ITransform2D is implemented by both Transform2D and AbstractSkin2D. This means you can either pass a Skin or a Transform2D component to this behaviour. If a Skin has a Transform2D sibling when added to the scene, the Skin will automatically receive any transform information from the Transform2D, which is handy when you want to update the positions of multiple skins with a single Transform2D. If a Skin doesn't have a Transform2D sibling, you can update it's transform directly via it's ITransform2D interface.

One final piece of the puzzle you're still missing is this guy:

Download him here and add him to "src/assets".

Build and run to see the bunnies bounce around.

< Previous | Next >