Example 8. Rotate

We can set the angle of a sprite, at different times, so it will rotate.

We use a red image, centered on screen, and rotated by 15 degrees each time a click is detected.

Initially this.red.angle will be zero, and increase by 15 each time.

This is the javascript file:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

// ex08. Rotate var game = new Phaser.Game(800, 600, Phaser.AUTO); var GameState = { preload: function() { game.load.image("red","images/red.png"); }, create: function() { // Set backgound color game.stage.backgroundColor = "#0FFF0F"; // center coordinates var x = game.world.centerX; var y = game.world.centerY; // Red sprite, rotates around center (anchor point) this.red = game.add.sprite(x, y, "red"); this.red.anchor.setTo(0.5); // Listener for click game.input.onDown.add(this.rotate, this); }, rotate: function() { this.red.angle += 15; } } game.state.add('GameState', GameState); game.state.start('GameState');

---

This is the output after a few clicks:

---