C2D 02 Creating a Cadet Scene

Before we can do anything interesting with Cadet, we need to create our top level Cadet object, the CadetScene.

Think of the CadetScene like the Stage display object in Flash’s display hierarchy. All children DisplayObjects have a reference to the stage they belong to – in this same way, all children of a CadetScene have a reference to the CadetScene they belong to.

Rather than being the top-level object in a hierarchy of DisplayObjects, the CadetScene is the top-level object in a hierarchy of cadet.core.IComponent objects. What a Component is will become apparent as the tutorials progress. In short, they are the fundamental building blocks of a CadetScene. Everything you add to a CadetScene will be a Component.

Much like the display list has DisplayObjects and DisplayObjectContainers, Cadet has Components and ComponentContainers. With these two types of objects we can build a tree structure with a CadetScene at the top (which is itself a ComponentContainer).

Update your CadetHelloWorld with the following code:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	import cadet.core.CadetScene;
	
	import cadet2D.components.renderers.Renderer2D;
	
	[SWF( width="700", height="400", backgroundColor="0x002135", frameRate="60" )]
	public class CadetHelloWorld extends Sprite
	{
		private var cadetScene:CadetScene;
		
		public function CadetHelloWorld()
		{
			cadetScene = new CadetScene();
			
			var renderer:Renderer2D = new Renderer2D();
			renderer.viewportWidth = stage.stageWidth;
			renderer.viewportHeight = stage.stageHeight;
			cadetScene.children.addItem(renderer);
			renderer.enable(this);
			
			addEventListener( Event.ENTER_FRAME, enterFrameHandler );
		}
		
		private function enterFrameHandler( event:Event ):void
		{
			cadetScene.step();
		}
	}
}

We have a single private property on our Application, a reference to a CadetScene. The first thing we do in the constructor is assign this a new instance. The next two steps require a bit more explanation.

A CadetScene by itself isn’t really capable of much. It doesn’t ‘do’ anything other than act as the root node of a tree. If we want to be able to see anything in our scene, the first thing we need is a Renderer.

So what is a Renderer? In Cadet terms, the Renderer is responsible for drawing and redrawing the scene, so without a Renderer, the scene will still exist and execute, but be invisible. Renderers maintain their own internal scene graph which relates specifically to renderable objects, for example, Starling uses starling.display.DisplayObject and Away3D uses away3d.entities.Mesh.

Renderers work closely with another type of Cadet Component called Skins. A Skin is a single display element in the Cadet scene graph, and it's the Renderer’s job to ensure that the Skin is placed on the screen at the correct position and depth.

In our examples we are going to be using the Renderer2D for Starling. As the name suggests, this Renderer is capable of rendering our Skins in 2D.

We don’t need to access the Renderer again, so we don’t keep a reference to it. Instead we simply add it to the children of our top-level CadetScene.

Finally we add an ENTER_FRAME handler, which acts as our main loop. Each frame we call step() on our CadetScene. The code in this function calls step() on each ISteppableComponent in the scene, and then finally it ‘validates’ the whole Scene. What ‘validation’ is will become more apparent in later tutorials, but in short it is similar to the validation mechanism used within a UI framework such as Flex, and is designed to reduce redundant code execution.

< Previous | Next >