In the previous step we created and rendered a scene but it didn't display anything. So in this next step we add a simple polygon node to it which looks like this:
To display a box like the one above we first need to create a polygon. For this we simply create an instance of the class twodee.Polygon and pass an array with four vectors to it. Each vector defines a point in the polygon:
var polygon = new twodee.Polygon([
new twodee.Vector(-50, -50),
new twodee.Vector(50, -50),
new twodee.Vector(50, 50),
new twodee.Vector(-50, 50)
]);
To display this polygon we create an instance of the class twodee.PolygonNode with the created polygon as argument. Then we set the stroke color and fill color and rotate it by 22.5 degree (Must be specified in radians):
var polygonNode = new twodee.PolygonNode(polygon);
polygonNode.setStrokeStyle("#ff0");
polygonNode.setFillStyle("#f00");
polygonNode.getTransform().rotate(Math.PI / 8);
To display this node we have to add it to a scene. In the previous tutorial step we created the scene already together with an invisible root node to which we can now add our new polygon node:
rootNode.appendChild(polygonNode);
Well, that's it. You'll learn more about transformations later.