Round Pixels
Demonstrates how the roundPixels configuration setting ensures Game Objects are rendered at whole integer pixel coordinates, preventing sub-pixel blur even when positions use decimal values.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('pic', 'assets/pics/atari-fujilogo.png');
this.load.image('sprite', 'assets/sprites/mushroom16x16.png');
this.load.image('bik', 'assets/sprites/bikkuriman.png');
}
create ()
{
const a = this.add.image(400, 150, 'bik');
const b = this.add.image(400, 300, 'pic');
const c = this.add.image(100, 300, 'sprite').setScale(10);
const d = this.add.image(700, 300, 'sprite').setScale(10);
let aligned = true;
const left = this.add.text(10, 10, 'Left 0.5px', { font: '16px Courier' });
const right = this.add.text(680, 10, 'Right 0.5px', { font: '16px Courier' });
left.setInteractive();
right.setInteractive();
left.on('pointerdown', () => {
this.cameras.main.zoom += 1;
console.log(this.cameras.main.zoom);
// this.cameras.main.scrollX += 0.5;
// console.log(this.cameras.main.scrollX);
});
right.on('pointerdown', () => {
this.cameras.main.zoom -= 0.5;
console.log(this.cameras.main.zoom);
// this.cameras.main.scrollX -= 0.5;
// console.log(this.cameras.main.scrollX);
});
this.input.on('pointerdown', (pointer) => {
if (pointer.y < 200)
{
return;
}
aligned = !aligned;
a.x += (aligned) ? 0.5 : -0.5;
b.x += (aligned) ? 0.5 : -0.5;
c.x += (aligned) ? 0.5 : -0.5;
d.x += (aligned) ? 0.5 : -0.5;
a.y += (aligned) ? 0.25 : -0.25;
b.y += (aligned) ? 0.25 : -0.25;
c.y += (aligned) ? 0.25 : -0.25;
d.y += (aligned) ? 0.25 : -0.25;
});
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
parent: 'game-container',
width: 800,
height: 600,
roundPixels: true,
pixelArt: true,
backgroundColor: '#000099',
scene: Example
};
const game = new Phaser.Game(config);