03 Your First Component

As stated at the start of the sister tutorial for this one in the CadetEngine tutorials, technically it’s your 3rd Component, as the CadetScene and Renderer2D process are also Components. But it’ll be the first Component you can actually see.

Building on your scene1.cdt2d file from the previous tutorial, select the RectangleTool in the tools menu within your CadetEditor instance, click the stage within the Cadet scene and drag and release to draw a rectangle shape.

If your Outline panel is not already open, open it via “Windows/Outline”. You should now see that your scene outline contains 2 Components at the root level, the Renderer2D and the “Rectangle_0” Component. You’ll also notice that the “Rectangle_0” Component has a down arrow to the left of it’s name indicating that it has children, click this arrow to reveal the child components that have automatically been created for you within "Rectangle_0".

Your Rectangle_0 Component extends the ComponentContainer class. A ComponentContainer is simply a Component that has the added ability to contain other Components. Any object added to a Cadet scene hierarchy must be a Component, as this class contains the basic events, properties, “build up” and “tear down” functions and the invalidation mechanism required to deliver Cadet’s pluggable nature. So your Rectangle_0 Component has the ability to be added to a Cadet scene and the ability to contain other Components, but not much else. It’s the 3 specialised Components within it that give it form and function:

Transform2D

By plugging this Component into our ComponentContainer we give it the ability to be placed at a 2D position.

RectangleGeometry

This Component gives our container a form of model. The RectangleGeometry contains a list of 4 vertices, one for each corner.

GeometrySkin

This Component gives our container the ability to be rendered. The GeometrySkin is capable of drawing most of the built in Geometry objects, including our Rectangle.

---

By creating this Component using the RectangleTool, the RectangleTool has automatically added these 3 child Components for you. If you look at the class cadetEditor2DS.tools.RectangleTool in the CadetEditor2DS library, you’ll see that the RectangleTool extends GeometryPrimitiveTool, adding just a little rectangle specific data. In the GeometryPrimitiveTool class within the onMouseDownContainer function you can see the code for creating the Component and adding the child Components to it. As you can see this code is very similar to the code in the sister tutorial.

override protected function onMouseDownContainer( event:PickingManagerEvent ):void
{
//...
	entity = new ComponentContainer();
	entity.name = ComponentUtil.getUniqueName(getName(),context.scene);
			
	transform = new Transform2D();
	transform.name = entity.name+"_"+transform.name;
	transform.x = mouseDownPoint.x;
	transform.y = mouseDownPoint.y;
	entity.children.addItem( transform );
			
	geometry = new GeometryType();
	geometry.name = entity.name+"_"+geometry.name;
	entity.children.addItem(geometry);
//...			
	skin = new SkinType();
	skin.name = entity.name+"_"+skin.name;
	entity.children.addItem( skin );
}

If it’s not already open, open the Properties panel in your CadetEditor instance by selecting “Window/Properties”. Now select the transform within Rectangle_0 in the Outline panel. You’ll see the editable properties for cadet2d.components.transforms.Transform2D will now appear in the Properties panel. These properties are made available to the PropertyInspector by using the Inspectable meta tag. If you look at the Transform2D class in the CadetEngine_Ext_2D library project you will see this tag appears above all of the relevant properties like so:

[Inspectable]
public function set x( value:Number ):void

In the Properties panel, set the transform’s x to 250 and y to 150. Now select the RectangleGeometry and set it’s width to 200 and it’s height to 100. Save the project and select “Project/Build and Run”. You are now viewing an exact duplicate of the scene you created in the sister tutorial.

---

< Previous | Next >