Transformations

Each scene node has a transformation matrix which influences the rendering of itself and all its child scene nodes. You can access this transformation matrix simply by calling the getTransform() method of the node. It returns an instance of the twodee.Matrix class which provides many methods to transform the node. These are the most important methods:

• translate(): Moves the node around.
• rotate(): Rotates the node.
• scale(): Scales the node.

Here is a short example which creates an image node displaying a space ship and which transforms the space ship in various ways:

// Creates the spaceship image.     
var image = new Image();      
image.src = "spaceship.png";

// Creates the spaceship scene node and adds it to the scene.
var ship = new twodee.ImageNode(image);
rootNode.appendChild(ship);

// Gets the transformation matrix of the space ship
var transform = ship.getTransform();

// Moves the spaceship 50 pixels forward (Heading for the top of the screen)
transform.translate(0, -50);

// Rotates spaceship by 90 degree clockwise.
transform.rotate(Math.PI / 2);

// Moves the spaceship 50 pixels forward again (Now heading for the right
// edge of the screen)
transform.translate(0, -50);

This example provides some buttons to perform a few transformations. Play with it:

<<< Previous: Image Node | Next: Physics >>>