03 Creating a Custom Skin

This tutorial is similar to the CadetEngine tutorial Writing your own Skin, though instead of extending AbstractSkin2D with our own circle specific Skin “ShadedCircleSkin”, we’re simply going to override the render functions for the existing GeometrySkin class.

---

Create the following class:

package cadetEditorCustom.components.skins
{
	import cadet2D.components.geom.CircleGeometry;
	import cadet2D.components.skins.GeometrySkin;

	import starling.display.Graphics;
	import starling.display.Shape;

	public class CustomSkin extends GeometrySkin
	{
		public function CustomSkin()
		{
		}
		
		override protected function renderCircle( circle:CircleGeometry ):Boolean
		{
			var graphics:Graphics = Shape(displayObject).graphics;
			
			graphics.beginFill(0xFF0000);
			graphics.drawCircle(circle.x,circle.y,circle.radius);
			graphics.endFill();
			
			return true;
		}		
	}
}

Now add the following code to your CadetEditor_Ext_Custom.as class:

resourceManager.addResource( new ComponentFactory( CustomSkin, "Custom Skin", "Display", null, null, 1 ) );

Build & Run

Build the project. Now select the CoreEditor_AIR project and in the File menu select: “Run/Debug As/Desktop Application”. Select CoreEditor_AIR_CadetEditor_Ext_Custom and press OK.

• Create a new file using the Barebones2D template
• Draw a circle using the CircleTool.
• Select the circle in the Outline panel and expand it’s children. Delete the current GeometrySkin by selecting it and pressing the delete key, then open the Add Component dialogue.
• With the circle highlighted, go to the Skins tab and add the CustomSkin to your circle, then close the dialogue.

You should now see the circle displays the CustomSkin within the editor. Also note that applying this skin to a rectangle or any other shape will currently still just display the basic GeometrySkin, as we haven’t overridden the renderPolygon() or renderBezier() functions.

---

< Previous