C2D 03 Your first Component

. . . technically it’s your 3rd, as the CadetScene and Renderer2D are also Components. But it’ll be the first Component you can actually see.

Specifically, we are going to be building a ComponentContainer, which is a Component which has a children ArrayCollection used to store other Components. Think of a Component as an individual Lego brick. On its own a Lego brick doesn’t really look like or do anything other than be a Lego brick. But if you combine enough bricks together, you can start to build something that can look and behave like almost anything. To build these Components into a coherent set with a shared purpose, we can group them as children of a ComponentContainer.

There are a number of Components you will use very frequently, and occasionally you will need to code your own Component from scratch. For now we are going to concentrate on learning how to combine some of these common Components into something you can see.

Add the following code to your application’s constructor:

var rectangleEntity:ComponentContainer = new ComponentContainer();
rectangleEntity.name = "Rectangle";
			
var transform:Transform2D = new Transform2D();
transform.x = 250;
transform.y = 150;
rectangleEntity.children.addItem(transform);
			
var rectangleGeometry:RectangleGeometry = new RectangleGeometry();
rectangleGeometry.width = 200;
rectangleGeometry.height = 100;
rectangleEntity.children.addItem(rectangleGeometry);
			
var skin:GeometrySkin = new GeometrySkin();
rectangleEntity.children.addItem(skin);
			
cadetScene.children.addItem(rectangleEntity);

The classes in the code above will be underlined in red in Flash Builder. Import them by placing the mouse cursor at the end of the class name and pressing CTRL+SPACE.

We can break the above code down into 5 steps:

1. Create the ComponentContainer. This is the object that will house all the following Components.
2. Create a Transform2D component and add it to the container. By plugging this into our ComponentContainer we give it the ability to be placed at a 2D position.
3. Create a RectangleGeometry Component. This gives our container a form of model. The RectangleGeometry contains a list of 4 vertices, one for each corner.
4. Create a GeometrySkin and add it to the ComponentContainer. This gives our Component the ability to be rendered. The GeometrySkin is capable of drawing Geometry objects, including our Rectangle.
5. Add the ComponentContainer to the CadetScene.

If you build and run this application, you should see a rectangle being displayed in the centre of the screen.

You may be wondering why we don’t simply have an uber RectangleComponent class that simply has all these component parts as properties. While it is certainly more complex to build a simple object in Cadet, it is relatively much easier to build complex objects than a system that simply lumps everything together.

Consider that we could swap the Rectangle geometry Component for a Circle, Curve or any arbitrary polygon geometry without changing anything else; even if we did this at run time, the skin would still immediately switch to rendering a Circle. Or we could switch the Skin for a bitmap or perhaps a shaded effect to render the geometry differently.

< Previous | Next >