The Kiwi.Geom.Transform object is an object that represents the position, scale, rotation and rotation point of an Entity. The Transform object is used to move, rotate or scale entities.  In this tutorial we will be looking at the transform properties of a Kiwi.GameObjects.Sprite. In the game below you can see three different Sprites being transformed in different ways. To see more examples on how to transform things in kiwi.js take a look at our example repository on Github here.

How to Change the Position of a Sprite

To transform the position of a Sprite all you need to do is edit the x or y property of the game object.

This can also be used to set the position of a Sprite.

This code is shorthand for what kiwi does behind the scenes for you. You could also write this as:

 

How to Rotate a Sprite

To rotate you first need to know the rotation point of the entity you want to rotate. The default position of the entity is in the centre. To change this all you need to do is edit the rotation point.

This would change the rotation point of the object to the top centre of the Sprite. To rotate the Sprite all you need to do is change the rotation property. The rotation of the transform is in radians.

 How to Scale a Sprite

Editing the scaleX and scaleY properties of a sprite will allow you to scale a sprite. In order to maintain a constant rotation point of the entity the scaling  of the entity is done from the rotation point. Therefore you can change the rotation point of the entity to change the position that the entity will scale from.

This code would scale a Sprite to twice it original size.