Build games as easily as you play them — join the Phaser Beam waitlist for Early Access.
class Example extends Phaser.Scene { controls; text2; text; preload () { this.load.setBaseURL('https://cdn.phaserfiles.com/v385'); this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png'); } create () { for (let i = 0; i < 32; i++) { const x = Phaser.Math.Between(0, 2000); const y = Phaser.Math.Between(0, 2000); this.add.sprite(x, y, 'eye').setInteractive(); } this.input.on('gameobjectover', (pointer, gameObject) => { gameObject.setTint(0xff0000); }); this.input.on('gameobjectout', (pointer, gameObject) => { gameObject.clearTint(); }); const cursors = this.input.keyboard.createCursorKeys(); const controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), acceleration: 0.06, drag: 0.0005, maxSpeed: 1.0 }; this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig); // this.cameras.main.setBackgroundColor('rgba(255, 0, 0, 0.5)'); // this.cameras.main.setZoom(0.8); // this.cameras.main.setRotation(Phaser.Math.DegToRad(10)); this.text = this.add.text(100, 200, 'x: 0 y: 0', { font: '18px Courier', fill: '#00ff00' }).setScrollFactor(0); this.text2 = this.add.text(100, 400, '', { font: '18px Courier', fill: '#00ff00' }).setScrollFactor(0); this.input.keyboard.on('keydown-Z', function (event) { this.cameras.main.setRotation(this.cameras.main.rotation + 0.01); }, this); this.input.keyboard.on('keydown-X', function (event) { this.cameras.main.setRotation(this.cameras.main.rotation - 0.01); }, this); this.input.once('pointerdown', function () { this.scale.startFullscreen(); }, this); } update (time, delta) { this.controls.update(delta); const cam = this.cameras.main; // Take a coordinate from screen space and convert it into World space within the Camera // var p = cam.screenToCamera({ x: this.input.x, y: this.input.y }); const p = this.input.activePointer.positionToCamera(cam); this.text.setText([ `cx: ${cam.scrollX}`, `cy: ${cam.scrollY}`, '', `sx: ${this.input.x}`, `sy: ${this.input.y}`, '', `px: ${p.x}`, `py: ${p.y}` ]); this.text2.setText([ `a: ${cam.matrix.matrix[0]}`, `b: ${cam.matrix.matrix[1]}`, `c: ${cam.matrix.matrix[2]}`, `d: ${cam.matrix.matrix[3]}`, `tx: ${cam.matrix.matrix[4]}`, `ty: ${cam.matrix.matrix[5]}` ]); } } const config = { type: Phaser.WEBGL, backgroundColor: '#2dab2d', scale: { mode: Phaser.Scale.FIT, parent: 'phaser-example', width: 800, height: 600 }, scene: Example }; const game = new Phaser.Game(config);
class Example extends Phaser.Scene
{
controls;
text2;
text;
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}
create ()
{
for (let i = 0; i < 32; i++)
{
const x = Phaser.Math.Between(0, 2000);
const y = Phaser.Math.Between(0, 2000);
this.add.sprite(x, y, 'eye').setInteractive();
}
this.input.on('gameobjectover', (pointer, gameObject) =>
{
gameObject.setTint(0xff0000);
});
this.input.on('gameobjectout', (pointer, gameObject) =>
{
gameObject.clearTint();
});
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.06,
drag: 0.0005,
maxSpeed: 1.0
};
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
// this.cameras.main.setBackgroundColor('rgba(255, 0, 0, 0.5)');
// this.cameras.main.setZoom(0.8);
// this.cameras.main.setRotation(Phaser.Math.DegToRad(10));
this.text = this.add.text(100, 200, 'x: 0 y: 0', { font: '18px Courier', fill: '#00ff00' }).setScrollFactor(0);
this.text2 = this.add.text(100, 400, '', { font: '18px Courier', fill: '#00ff00' }).setScrollFactor(0);
this.input.keyboard.on('keydown-Z', function (event)
{
this.cameras.main.setRotation(this.cameras.main.rotation + 0.01);
}, this);
this.input.keyboard.on('keydown-X', function (event)
{
this.cameras.main.setRotation(this.cameras.main.rotation - 0.01);
}, this);
this.input.once('pointerdown', function ()
{
this.scale.startFullscreen();
}, this);
}
update (time, delta)
{
this.controls.update(delta);
const cam = this.cameras.main;
// Take a coordinate from screen space and convert it into World space within the Camera
// var p = cam.screenToCamera({ x: this.input.x, y: this.input.y });
const p = this.input.activePointer.positionToCamera(cam);
this.text.setText([
`cx: ${cam.scrollX}`,
`cy: ${cam.scrollY}`,
'',
`sx: ${this.input.x}`,
`sy: ${this.input.y}`,
'',
`px: ${p.x}`,
`py: ${p.y}`
]);
this.text2.setText([
`a: ${cam.matrix.matrix[0]}`,
`b: ${cam.matrix.matrix[1]}`,
`c: ${cam.matrix.matrix[2]}`,
`d: ${cam.matrix.matrix[3]}`,
`tx: ${cam.matrix.matrix[4]}`,
`ty: ${cam.matrix.matrix[5]}`
]);
}
}
const config = {
type: Phaser.WEBGL,
backgroundColor: '#2dab2d',
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
width: 800,
height: 600
},
scene: Example
};
const game = new Phaser.Game(config);