Rotation is how you turn a game object around its center or origin. In Phaser 4, rotation is a core visual transform used for player direction, spinning collectibles, aiming weapons, rotating UI indicators, and animated visual effects.

Just as positioning determines where an object appears and scaling determines how large it appears, rotation determines which direction it faces.

If you are new to Phaser, visit the Phaser 4 section. You can also read Scaling Game Objects in Phaser 4 to learn another important visual transform.

Rotation vs Angle

In Phaser, you can work with rotation in two ways:

• rotation is measured in radians.
• angle is measured in degrees.

These two examples represent exactly the same 90-degree rotation:

player.rotation = Math.PI / 2;
player.angle = 90;

Radians are common in mathematical calculations, while degrees are usually easier to read and reason about when designing gameplay or UI elements.

Basic Rotation Example

create() {
    const player = this.add.image(400, 300, 'player');

    player.rotation = Math.PI / 4;
}

This rotates the player by 45 degrees, because Math.PI / 4 radians equals 45 degrees.

Using setRotation()

If you want to set rotation directly in radians, use setRotation().

this.player.setRotation(Math.PI / 2);

This rotates the object 90 degrees clockwise.

Why use setRotation()?

• It is clear and explicit when working with radians.
• It works well with trigonometry and mathematical calculations.
• It is chainable with other Phaser methods.

this.player
    .setOrigin(0.5)
    .setScale(0.8)
    .setRotation(Math.PI / 2);

Using setAngle()

If you prefer to work with degrees, use setAngle().

this.player.setAngle(45);

This rotates the object by 45 degrees.

Why use setAngle()?

• Degrees are easier for humans to read.
• It is useful for UI, aiming, and visual debugging.
• It is often more intuitive for beginners than radians.

Full Rotation Example

export default class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        this.load.image('arrow', 'assets/arrow.png');
    }

    create() {
        const arrow = this.add.image(400, 300, 'arrow');

        arrow.setAngle(90);
    }
}

In this example, the arrow is placed at the center of the scene and rotated to point downward.

Rotation Direction in Phaser

Phaser uses a clockwise rotation system for screen coordinates. This can feel different from the coordinate system you may remember from math class.

• 0° points right.
• 90° points down.
• 180° points left.
• 270° points up.

Rotation and Origin

Rotation happens around the object's origin. When an image has a centered origin, it spins naturally in place.

const ship = this.add.image(400, 300, 'ship');

ship.setOrigin(0.5);
ship.setAngle(30);

If the origin is not centered, the object can appear to rotate from one of its corners or edges. This may be intentional for a door, lever, or swinging object, but it is usually not ideal for players, coins, or icons.

Rotating Objects in update()

To rotate an object continuously, update its angle or rotation on each frame inside update().

update() {
    this.logo.angle += 1;
}

This creates a slow continuous spinning effect.

Example: Spinning Coin

create() {
    this.coin = this.add.image(400, 300, 'coin');
}

update() {
    this.coin.angle += 2;
}

The coin rotates by 2 degrees on every frame. For frame-rate independent rotation, use Phaser's delta value:

update(time, delta) {
    this.coin.angle += 0.12 * delta;
}

Using delta helps keep the rotation speed more consistent across devices with different frame rates.

Common Use Cases

Rotation is useful in many kinds of games, including:

• Enemy direction changes
• Turret and weapon aiming
• Spinning pickups and collectibles
• Animated icons and loading indicators
• Rotating menus and UI elements
• Vehicle steering and spaceship movement

Common Mistakes

1. Mixing degrees and radians: Remember that rotation uses radians, while angle uses degrees.
2. Forgetting the origin: A non-centered origin can make an object rotate from an unexpected point.
3. Expecting mathematical graph directions: Phaser's screen coordinates increase downward, so positive angles rotate clockwise.
4. Rotating unnecessarily in update(): Only update rotation every frame when the object actually needs continuous movement or animation.

Best Practices

• Use setAngle() for readable, human-friendly values.
• Use setRotation() when your calculations already use radians.
• Keep the origin centered with setOrigin(0.5) for natural spinning.
• Use delta for smoother and more consistent continuous rotation.
• Combine rotation with scaling carefully to create polished visual effects.

FAQ

Conclusion

Rotation in Phaser 4 gives your game motion, direction, and visual feedback. Whether you use angle or rotation, the important parts are understanding the unit you are using, setting the correct origin, and remembering how Phaser's screen coordinate system works.

const object = this.add.image(300, 300, 'item');

object.setAngle(180);