Round Pixels

Learn how to use the Camera roundPixels setting to ensure sprites are rendered on integer coordinates, preventing sub-pixel blurring even when using non-integer positions or zoom levels.

1024 × 768

GitHub

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('grid', 'assets/sprites/128x128-v2.png');
    }

    create ()
    {
        this.add.image(400.8, 300.3, 'grid').setScale(1.9);

        this.cameras.main.setRoundPixels(true);
        this.cameras.main.setZoom(1.3);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example
}

const game = new Phaser.Game(config);

More in Camera68 examples

Set Camera BoundsThis example demonstrates how to restrict a camera's movement to a specific rectangular area using the setBounds method, preventing it from panning outside the defined limits of the game world.

Set Scroll FactorDemonstrates how to use setScrollFactor to control the movement speed of Game Objects relative to camera scrolling, ideal for creating parallax effects or fixed UI elements.

Set Small Camera BoundsRestricts camera movement to a defined area using setBounds, allowing for horizontal scrolling while limiting vertical movement.

Single Small CameraDemonstrates how to adjust the camera viewport, zoom, and scroll position to render a scene within a smaller, specific portion of the game canvas.