Merge branch 'master' of ssh://cryps.gg:40022/~/cryps
This commit is contained in:
ntr
commit
552639809f
90
client/src/scenes/combat.js
Executable file
90
client/src/scenes/combat.js
Executable file
@ -0,0 +1,90 @@
|
||||
const Phaser = require('phaser');
|
||||
const fs = require('fs');
|
||||
|
||||
class PhaserCombat extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('combat');
|
||||
}
|
||||
|
||||
preload() {
|
||||
/* Static Images */
|
||||
this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
|
||||
this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
|
||||
|
||||
this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
|
||||
this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
|
||||
this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
|
||||
this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
|
||||
this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
|
||||
this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png');
|
||||
this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png');
|
||||
|
||||
|
||||
/* Spritesheets */
|
||||
this.load.spritesheet({
|
||||
key: 'explosion',
|
||||
url: 'http://labs.phaser.io/assets/sprites/explosion.png',
|
||||
frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
|
||||
});
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.image(400, 300, 'sky');// Background image
|
||||
this.createPlayers();
|
||||
this.createAnim();
|
||||
this.cursors = this.input.keyboard.createCursorKeys();
|
||||
this.combat = false;
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
|
||||
this.input.keyboard.on('keydown_S', () => {
|
||||
this.scene.switch('passives'); // Switch to battle scene
|
||||
}, 0, this);
|
||||
}
|
||||
|
||||
createPlayers() {
|
||||
this.players = this.physics.add.staticGroup();
|
||||
const img = this.players.create(100, 300, 'alk');
|
||||
const imgTwo = this.players.create(500, 300, 'magmar');
|
||||
img.setScale(0.5);
|
||||
imgTwo.setScale(0.5);
|
||||
this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
|
||||
this.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
|
||||
}
|
||||
|
||||
createAnim() {
|
||||
const config = {
|
||||
key: 'explodeAnimation',
|
||||
frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
|
||||
frameRate: 20,
|
||||
repeat: 0,
|
||||
};
|
||||
this.anims.create(config);
|
||||
}
|
||||
|
||||
explode(proj) {
|
||||
this.proj.disableBody(true, true);
|
||||
this.emitter.stop();
|
||||
const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation');
|
||||
sprite.setScale(3);
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'playerCryps') {
|
||||
this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`);
|
||||
if (data.cryps[0].hp.base === 0) {
|
||||
// this.PhaserCombat.skills('blast', 400, -150);
|
||||
this.skills('wall', 'green', 400, -250);
|
||||
}
|
||||
}
|
||||
if (key === 'enemyCryps') {
|
||||
this.playerTwoHp.text = `${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`;
|
||||
if (data.cryps[0].hp.base === 0) {
|
||||
// this.PhaserCombat.skills('blast', 180, 150);
|
||||
this.skills('wall', 'green', 180, 250);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
PhaserCombat.prototype.skills = require('./phaser.skills.js');
|
||||
|
||||
module.exports = PhaserCombat;
|
||||
141
client/src/scenes/combat.skills.js
Executable file
141
client/src/scenes/combat.skills.js
Executable file
@ -0,0 +1,141 @@
|
||||
// Skill function called by phaser combat
|
||||
const Phaser = require('phaser');
|
||||
|
||||
function skills(skill, img, location, spd) {
|
||||
if (this.combat) {
|
||||
return;
|
||||
}
|
||||
this.combat = true;
|
||||
const particles = this.add.particles(img);
|
||||
|
||||
switch (skill) {
|
||||
case 'blast':
|
||||
this.proj = this.physics.add.image(-100, 300, 'proj');
|
||||
this.emitter = particles.createEmitter({
|
||||
speed: 25,
|
||||
scale: { start: 1, end: 0 },
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.emitter.startFollow(this.proj);
|
||||
this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
|
||||
this.proj.x = location;
|
||||
this.proj.setVelocity(spd, 0);
|
||||
break;
|
||||
|
||||
case 'wall':
|
||||
this.emitter = particles.createEmitter({
|
||||
x: location,
|
||||
y: { min: 200, max: 350 },
|
||||
lifespan: 2000,
|
||||
speedX: { min: spd, max: spd * 2 },
|
||||
scale: { start: 0.4, end: 0 },
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
||||
break;
|
||||
|
||||
case 'spit':
|
||||
if (location > 250) {
|
||||
this.angleMin = 180;
|
||||
this.angleMax = 220;
|
||||
} else {
|
||||
this.angleMin = 320;
|
||||
this.angleMax = 360;
|
||||
}
|
||||
this.emitter = particles.createEmitter({
|
||||
x: location,
|
||||
y: 300,
|
||||
lifespan: 2000,
|
||||
angle: { min: this.angleMin, max: this.angleMax },
|
||||
speed: spd * 2,
|
||||
scale: { start: 0.4, end: 1 },
|
||||
gravityY: 250,
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
||||
break;
|
||||
case 'gravBomb':
|
||||
this.well = particles.createGravityWell({
|
||||
x: 150,
|
||||
y: 150,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
this.emitter = particles.createEmitter({
|
||||
x: 150,
|
||||
y: 150,
|
||||
lifespan: 1500,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.time.delayedCall(1000, () => {
|
||||
this.emitter.stop();
|
||||
this.well.active = false;
|
||||
}, [], this);
|
||||
break;
|
||||
case 'gravBlast':
|
||||
this.well = particles.createGravityWell({
|
||||
x: 400,
|
||||
y: 300,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
this.emitter = particles.createEmitter({
|
||||
x: 400,
|
||||
y: 300,
|
||||
lifespan: 2000,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
bounds: {
|
||||
x: 0, y: 250, w: 450, h: 150,
|
||||
},
|
||||
});
|
||||
this.time.delayedCall(1000, () => {
|
||||
this.emitter.stop();
|
||||
this.well.x = 100;
|
||||
}, [], this);
|
||||
this.time.delayedCall(3000, () => {
|
||||
this.well.active = false;
|
||||
}, [], this);
|
||||
break;
|
||||
case 'chargeBall':
|
||||
|
||||
this.emitter = particles.createEmitter({
|
||||
x: -400,
|
||||
y: -100,
|
||||
lifespan: 1000,
|
||||
moveToX: 450,
|
||||
moveToY: 150,
|
||||
scale: 0.75,
|
||||
quantity: 4,
|
||||
_frequency: 20,
|
||||
blendMode: 'ADD',
|
||||
emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
|
||||
});
|
||||
this.emitter2 = particles.createEmitter({
|
||||
radial: false,
|
||||
x: { min: 450, max: 50, steps: 256 },
|
||||
y: { min: 150, max: 300, steps: 256 },
|
||||
lifespan: 1000,
|
||||
speedX: { min: 200, max: 400 },
|
||||
quantity: 4,
|
||||
gravityY: 0,
|
||||
scale: { start: 1.5, end: 0, ease: 'Power3' },
|
||||
blendMode: 'ADD',
|
||||
active: false,
|
||||
});
|
||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
||||
this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
|
||||
this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = skills;
|
||||
@ -6,7 +6,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
|
||||
this.setTexture('eye');
|
||||
this.scene = scene;
|
||||
this.alloc = alloc;
|
||||
this.text = text;
|
||||
this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
|
||||
this.id = id;
|
||||
this.setPosition(x, y);
|
||||
|
||||
@ -30,11 +30,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
|
||||
}
|
||||
|
||||
allocate(alloc) {
|
||||
if (alloc !== undefined) {
|
||||
this.alloc = alloc;
|
||||
} else {
|
||||
this.alloc = !this.alloc;
|
||||
}
|
||||
this.alloc = (alloc !== undefined) ? alloc : !this.alloc;
|
||||
this.updateNode();
|
||||
}
|
||||
|
||||
|
||||
86
client/src/scenes/passives.js
Normal file → Executable file
86
client/src/scenes/passives.js
Normal file → Executable file
@ -7,29 +7,23 @@ const passiveDataEdge = require('./passive.data.edge');
|
||||
// Mouse click hold to move, Q + E to zoom in and out
|
||||
// Press 'A' to reset allocated passive nodes
|
||||
|
||||
class Passives extends Phaser.Scene {
|
||||
class PhaserPassives extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('passives');
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
|
||||
this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
|
||||
}
|
||||
|
||||
create() {
|
||||
this.background = this.add.image(0, 0, 'background');
|
||||
this.background.setScale(5);
|
||||
this.background.setInteractive();
|
||||
this.graphics = this.add.graphics();
|
||||
this.nodeText = this.add.text(10000, 10000, 'grep', {
|
||||
fontSize: '32px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
}).setPadding(32);
|
||||
|
||||
this.passiveNodeData = passiveDataNode;
|
||||
this.passiveEdgeData = passiveDataEdge;
|
||||
this.addPassiveNodes();
|
||||
this.addCameraControl();
|
||||
this.addEvents();
|
||||
this.drawPassiveEdges();
|
||||
this.addCanmeraControl();
|
||||
}
|
||||
|
||||
addPassiveNodes() {
|
||||
@ -39,20 +33,32 @@ class Passives extends Phaser.Scene {
|
||||
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
|
||||
).setInteractive();
|
||||
});
|
||||
}
|
||||
|
||||
addCameraControl() {
|
||||
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
|
||||
camera: this.cameras.main,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.005,
|
||||
drag: 0.0005,
|
||||
maxSpeed: 0.001,
|
||||
});
|
||||
}
|
||||
|
||||
addEvents() {
|
||||
this.input.on('pointerover', (pointer, gameObjects) => {
|
||||
if (gameObjects[0] instanceof PassiveNode) {
|
||||
if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
|
||||
this.nodeText.x = pointer.x + this.cameras.main.scrollX;
|
||||
this.nodeText.y = pointer.y + this.cameras.main.scrollY;
|
||||
this.nodeText.text = gameObjects[0].text;
|
||||
} else {
|
||||
this.nodeText.text = '';
|
||||
if (!gameObjects[0].alloc) {
|
||||
gameObjects[0].setTint(0xff00ff);
|
||||
}
|
||||
this.displayPassiveText(gameObjects[0], pointer);
|
||||
}
|
||||
});
|
||||
this.input.on('pointerout', (pointer, gameObjects) => {
|
||||
if (gameObjects[0] instanceof PassiveNode) {
|
||||
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
|
||||
this.nodeText.destroy();
|
||||
}
|
||||
});
|
||||
this.input.on('pointerup', (pointer, gameObjects) => {
|
||||
@ -65,10 +71,20 @@ class Passives extends Phaser.Scene {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.input.on('pointermove', (pointer) => {
|
||||
const zoomFactor = 2 / this.cameras.main.zoom;
|
||||
if (this.pan) {
|
||||
const points = pointer.getInterpolatedPosition(2);
|
||||
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
|
||||
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
|
||||
}
|
||||
}, this);
|
||||
this.input.keyboard.on('keydown_A', () => {
|
||||
this.updatePassives(); // Will update nodes from state
|
||||
}, 0, this);
|
||||
this.input.keyboard.on('keydown_S', () => {
|
||||
this.scene.switch('combat');
|
||||
}, 0, this);
|
||||
}
|
||||
|
||||
drawPassiveEdges() {
|
||||
@ -87,22 +103,18 @@ class Passives extends Phaser.Scene {
|
||||
});
|
||||
}
|
||||
|
||||
addCanmeraControl() {
|
||||
this.input.on('pointermove', (pointer) => {
|
||||
if (this.pan) {
|
||||
const points = pointer.getInterpolatedPosition(2);
|
||||
this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
|
||||
this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
|
||||
}
|
||||
}, this);
|
||||
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
|
||||
camera: this.cameras.main,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.005,
|
||||
drag: 0.0005,
|
||||
maxSpeed: 0.001,
|
||||
});
|
||||
displayPassiveText(node, pointer) {
|
||||
if (this.nodeText) this.nodeText.destroy();
|
||||
this.nodeText = this.add.text(node.x, node.y, node.text, {
|
||||
fontSize: '20px',
|
||||
fontFamily: 'Arial',
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#222222',
|
||||
}).setPadding(32);
|
||||
this.nodeText.setAlpha(0.8);
|
||||
this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
|
||||
this.nodeText.setWordWrapWidth(450);
|
||||
this.nodeText.setScale(1 / this.cameras.main.zoom);
|
||||
}
|
||||
|
||||
updatePassives() {
|
||||
@ -123,4 +135,4 @@ class Passives extends Phaser.Scene {
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Passives;
|
||||
module.exports = PhaserPassives;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user