Introducing Beam — Play & Create Interactive Video Shorts. Explore Beam →
var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: false } }, scene: { preload: preload, create: create, update: update } }; var bg; var stars; var ship; var bullets; var lastFired = 0; var cursors; var fire; var game = new Phaser.Game(config); function preload () { this.load.image('background', 'assets/tests/space/nebula.jpg'); this.load.image('stars', 'assets/tests/space/stars.png'); this.load.atlas('space', 'assets/tests/space/space.png', 'assets/tests/space/space.json'); } function create () { var Bullet = new Phaser.Class({ Extends: Phaser.Physics.Arcade.Image, initialize: function Bullet (scene) { Phaser.Physics.Arcade.Image.call(this, scene, 0, 0, 'space', 'blaster'); this.setBlendMode(1); this.setDepth(1); this.speed = 1000; this.lifespan = 1000; this._temp = new Phaser.Math.Vector2(); }, fire: function (ship) { this.lifespan = 1000; this.setActive(true); this.setVisible(true); // this.setRotation(ship.rotation); this.setAngle(ship.body.rotation); this.setPosition(ship.x, ship.y); this.body.reset(ship.x, ship.y); // ship.body.advancePosition(10, this._temp); // this.setPosition(this._temp.x, this._temp.y); // this.body.reset(this._temp.x, this._temp.y); // if ship is rotating we need to add it here // var a = ship.body.angularVelocity; // if (ship.body.speed !== 0) // { // var angle = Math.atan2(ship.body.velocity.y, ship.body.velocity.x); // } // else // { var angle = Phaser.Math.DegToRad(ship.body.rotation); // } // this.body.world.velocityFromRotation(angle, this.speed + ship.body.speed, this.body.velocity); this.scene.physics.velocityFromRotation(angle, this.speed, this.body.velocity); this.body.velocity.x *= 2; this.body.velocity.y *= 2; }, update: function (time, delta) { this.lifespan -= delta; if (this.lifespan <= 0) { this.setActive(false); this.setVisible(false); this.body.stop(); } } }); // Prepare some spritesheets and animations this.textures.addSpriteSheetFromAtlas('mine-sheet', { atlas: 'space', frame: 'mine', frameWidth: 64 }); this.textures.addSpriteSheetFromAtlas('asteroid1-sheet', { atlas: 'space', frame: 'asteroid1', frameWidth: 96 }); this.textures.addSpriteSheetFromAtlas('asteroid2-sheet', { atlas: 'space', frame: 'asteroid2', frameWidth: 96 }); this.textures.addSpriteSheetFromAtlas('asteroid3-sheet', { atlas: 'space', frame: 'asteroid3', frameWidth: 96 }); this.textures.addSpriteSheetFromAtlas('asteroid4-sheet', { atlas: 'space', frame: 'asteroid4', frameWidth: 64 }); this.anims.create({ key: 'mine-anim', frames: this.anims.generateFrameNumbers('mine-sheet', { start: 0, end: 15 }), frameRate: 20, repeat: -1 }); this.anims.create({ key: 'asteroid1-anim', frames: this.anims.generateFrameNumbers('asteroid1-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 }); this.anims.create({ key: 'asteroid2-anim', frames: this.anims.generateFrameNumbers('asteroid2-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 }); this.anims.create({ key: 'asteroid3-anim', frames: this.anims.generateFrameNumbers('asteroid3-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 }); this.anims.create({ key: 'asteroid4-anim', frames: this.anims.generateFrameNumbers('asteroid4-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 }); // World size is 8000 x 6000 bg = this.add.tileSprite(400, 300, 800, 600, 'background').setScrollFactor(0); // Add our planets, etc this.add.image(512, 680, 'space', 'blue-planet').setOrigin(0).setScrollFactor(0.6); this.add.image(2833, 1246, 'space', 'brown-planet').setOrigin(0).setScrollFactor(0.6); this.add.image(3875, 531, 'space', 'sun').setOrigin(0).setScrollFactor(0.6); var galaxy = this.add.image(5345 + 1024, 327 + 1024, 'space', 'galaxy').setBlendMode(1).setScrollFactor(0.6); this.add.image(908, 3922, 'space', 'gas-giant').setOrigin(0).setScrollFactor(0.6); this.add.image(3140, 2974, 'space', 'brown-planet').setOrigin(0).setScrollFactor(0.6).setScale(0.8).setTint(0x882d2d); this.add.image(6052, 4280, 'space', 'purple-planet').setOrigin(0).setScrollFactor(0.6); for (var i = 0; i < 8; i++) { this.add.image(Phaser.Math.Between(0, 8000), Phaser.Math.Between(0, 6000), 'space', 'eyes').setBlendMode(1).setScrollFactor(0.8); } stars = this.add.tileSprite(400, 300, 800, 600, 'stars').setScrollFactor(0); var particles = this.add.particles('space'); var emitter = particles.createEmitter({ frame: 'blue', speed: 100, lifespan: { onEmit: function (particle, key, t, value) { return Phaser.Math.Percent(ship.body.speed, 0, 300) * 2000; } }, alpha: { onEmit: function (particle, key, t, value) { return Phaser.Math.Percent(ship.body.speed, 0, 300); } }, angle: { onEmit: function (particle, key, t, value) { var v = Phaser.Math.Between(-10, 10); return (ship.angle - 180) + v; } }, scale: { start: 0.6, end: 0 }, blendMode: 'ADD' }); bullets = this.physics.add.group({ classType: Bullet, maxSize: 30, runChildUpdate: true }); ship = this.physics.add.image(4000, 3000, 'space', 'ship').setDepth(2); ship.setDrag(300); ship.setAngularDrag(400); ship.setMaxVelocity(600); emitter.startFollow(ship); this.cameras.main.startFollow(ship); cursors = this.input.keyboard.createCursorKeys(); fire = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); this.add.sprite(4300, 3000).play('asteroid1-anim'); this.tweens.add({ targets: galaxy, angle: 360, duration: 100000, ease: 'Linear', loop: -1 }); } function update (time, delta) { if (cursors.left.isDown) { ship.setAngularVelocity(-150); } else if (cursors.right.isDown) { ship.setAngularVelocity(150); } else { ship.setAngularVelocity(0); } if (cursors.up.isDown) { this.physics.velocityFromRotation(ship.rotation, 600, ship.body.acceleration); } else { ship.setAcceleration(0); } if (fire.isDown && time > lastFired) { var bullet = bullets.get(); if (bullet) { bullet.fire(ship); lastFired = time + 100; } } bg.tilePositionX += ship.body.deltaX() * 0.5; bg.tilePositionY += ship.body.deltaY() * 0.5; stars.tilePositionX += ship.body.deltaX() * 2; stars.tilePositionY += ship.body.deltaY() * 2; }
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade',
arcade: {
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var bg;
var stars;
var ship;
var bullets;
var lastFired = 0;
var cursors;
var fire;
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('background', 'assets/tests/space/nebula.jpg');
this.load.image('stars', 'assets/tests/space/stars.png');
this.load.atlas('space', 'assets/tests/space/space.png', 'assets/tests/space/space.json');
}
function create ()
{
var Bullet = new Phaser.Class({
Extends: Phaser.Physics.Arcade.Image,
initialize:
function Bullet (scene)
{
Phaser.Physics.Arcade.Image.call(this, scene, 0, 0, 'space', 'blaster');
this.setBlendMode(1);
this.setDepth(1);
this.speed = 1000;
this.lifespan = 1000;
this._temp = new Phaser.Math.Vector2();
},
fire: function (ship)
{
this.lifespan = 1000;
this.setActive(true);
this.setVisible(true);
// this.setRotation(ship.rotation);
this.setAngle(ship.body.rotation);
this.setPosition(ship.x, ship.y);
this.body.reset(ship.x, ship.y);
// ship.body.advancePosition(10, this._temp);
// this.setPosition(this._temp.x, this._temp.y);
// this.body.reset(this._temp.x, this._temp.y);
// if ship is rotating we need to add it here
// var a = ship.body.angularVelocity;
// if (ship.body.speed !== 0)
// {
// var angle = Math.atan2(ship.body.velocity.y, ship.body.velocity.x);
// }
// else
// {
var angle = Phaser.Math.DegToRad(ship.body.rotation);
// }
// this.body.world.velocityFromRotation(angle, this.speed + ship.body.speed, this.body.velocity);
this.scene.physics.velocityFromRotation(angle, this.speed, this.body.velocity);
this.body.velocity.x *= 2;
this.body.velocity.y *= 2;
},
update: function (time, delta)
{
this.lifespan -= delta;
if (this.lifespan <= 0)
{
this.setActive(false);
this.setVisible(false);
this.body.stop();
}
}
});
// Prepare some spritesheets and animations
this.textures.addSpriteSheetFromAtlas('mine-sheet', { atlas: 'space', frame: 'mine', frameWidth: 64 });
this.textures.addSpriteSheetFromAtlas('asteroid1-sheet', { atlas: 'space', frame: 'asteroid1', frameWidth: 96 });
this.textures.addSpriteSheetFromAtlas('asteroid2-sheet', { atlas: 'space', frame: 'asteroid2', frameWidth: 96 });
this.textures.addSpriteSheetFromAtlas('asteroid3-sheet', { atlas: 'space', frame: 'asteroid3', frameWidth: 96 });
this.textures.addSpriteSheetFromAtlas('asteroid4-sheet', { atlas: 'space', frame: 'asteroid4', frameWidth: 64 });
this.anims.create({ key: 'mine-anim', frames: this.anims.generateFrameNumbers('mine-sheet', { start: 0, end: 15 }), frameRate: 20, repeat: -1 });
this.anims.create({ key: 'asteroid1-anim', frames: this.anims.generateFrameNumbers('asteroid1-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 });
this.anims.create({ key: 'asteroid2-anim', frames: this.anims.generateFrameNumbers('asteroid2-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 });
this.anims.create({ key: 'asteroid3-anim', frames: this.anims.generateFrameNumbers('asteroid3-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 });
this.anims.create({ key: 'asteroid4-anim', frames: this.anims.generateFrameNumbers('asteroid4-sheet', { start: 0, end: 24 }), frameRate: 20, repeat: -1 });
// World size is 8000 x 6000
bg = this.add.tileSprite(400, 300, 800, 600, 'background').setScrollFactor(0);
// Add our planets, etc
this.add.image(512, 680, 'space', 'blue-planet').setOrigin(0).setScrollFactor(0.6);
this.add.image(2833, 1246, 'space', 'brown-planet').setOrigin(0).setScrollFactor(0.6);
this.add.image(3875, 531, 'space', 'sun').setOrigin(0).setScrollFactor(0.6);
var galaxy = this.add.image(5345 + 1024, 327 + 1024, 'space', 'galaxy').setBlendMode(1).setScrollFactor(0.6);
this.add.image(908, 3922, 'space', 'gas-giant').setOrigin(0).setScrollFactor(0.6);
this.add.image(3140, 2974, 'space', 'brown-planet').setOrigin(0).setScrollFactor(0.6).setScale(0.8).setTint(0x882d2d);
this.add.image(6052, 4280, 'space', 'purple-planet').setOrigin(0).setScrollFactor(0.6);
for (var i = 0; i < 8; i++)
{
this.add.image(Phaser.Math.Between(0, 8000), Phaser.Math.Between(0, 6000), 'space', 'eyes').setBlendMode(1).setScrollFactor(0.8);
}
stars = this.add.tileSprite(400, 300, 800, 600, 'stars').setScrollFactor(0);
var particles = this.add.particles('space');
var emitter = particles.createEmitter({
frame: 'blue',
speed: 100,
lifespan: {
onEmit: function (particle, key, t, value)
{
return Phaser.Math.Percent(ship.body.speed, 0, 300) * 2000;
}
},
alpha: {
onEmit: function (particle, key, t, value)
{
return Phaser.Math.Percent(ship.body.speed, 0, 300);
}
},
angle: {
onEmit: function (particle, key, t, value)
{
var v = Phaser.Math.Between(-10, 10);
return (ship.angle - 180) + v;
}
},
scale: { start: 0.6, end: 0 },
blendMode: 'ADD'
});
bullets = this.physics.add.group({
classType: Bullet,
maxSize: 30,
runChildUpdate: true
});
ship = this.physics.add.image(4000, 3000, 'space', 'ship').setDepth(2);
ship.setDrag(300);
ship.setAngularDrag(400);
ship.setMaxVelocity(600);
emitter.startFollow(ship);
this.cameras.main.startFollow(ship);
cursors = this.input.keyboard.createCursorKeys();
fire = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
this.add.sprite(4300, 3000).play('asteroid1-anim');
this.tweens.add({
targets: galaxy,
angle: 360,
duration: 100000,
ease: 'Linear',
loop: -1
});
}
function update (time, delta)
{
if (cursors.left.isDown)
{
ship.setAngularVelocity(-150);
}
else if (cursors.right.isDown)
{
ship.setAngularVelocity(150);
}
else
{
ship.setAngularVelocity(0);
}
if (cursors.up.isDown)
{
this.physics.velocityFromRotation(ship.rotation, 600, ship.body.acceleration);
}
else
{
ship.setAcceleration(0);
}
if (fire.isDown && time > lastFired)
{
var bullet = bullets.get();
if (bullet)
{
bullet.fire(ship);
lastFired = time + 100;
}
}
bg.tilePositionX += ship.body.deltaX() * 0.5;
bg.tilePositionY += ship.body.deltaY() * 0.5;
stars.tilePositionX += ship.body.deltaX() * 2;
stars.tilePositionY += ship.body.deltaY() * 2;
}