ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

misc phaser

Browse Source
This commit is contained in:
Mashy 2018-11-19 17:52:55 +10:00
parent e304f801d5
commit fae49d3376
5 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/cryp.ui.js Executable file
View File

@ -0,0 +1,30 @@
const Phaser = require('phaser');
const fs = require('fs');
class CrypUi 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')}`);
}
create() {
this.createPlayers();
this.input.keyboard.on('keydown_S', () => {
this.scene.switch('passives'); // Switch to passive scene
}, 0, this);
}
createPlayers() {
this.players = this.physics.add.staticGroup();
const img = this.players.create(100, 300, 'alk');
img.setScale(1);
this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
this.loaded = true;
}
}
module.exports = CrypUi;

3
client/src/components/passive.container.jsx
View File

@ -2,6 +2,7 @@ const preact = require('preact');
const { connect } = require('preact-redux');
const Phaser = require('phaser');
const PhaserPassives = require('./passive.phaser');
const PhaserCombat = require('./phaser.combat');
const addState = connect(
function receiveState(state) {
@ -38,7 +39,7 @@ class PhaserInstance extends preact.Component {
gravity: { y: 0 },
},
},
scene: this.PhaserPassives,
scene: [this.PhaserPassives, PhaserCombat],
};
const game = new Phaser.Game(config);
game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true));

19
client/src/components/passive.phaser.js
View File

@ -8,26 +8,24 @@ const passiveDataEdge = require('./passive.data.edge');
// Press 'A' to reset allocated passive nodes
class PhaserPassives extends Phaser.Scene {
constructor() {
super('passives');
}
preload() {
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
}
create() {
this.init();
this.graphics = this.add.graphics();
this.passiveNodeData = passiveDataNode;
this.passiveEdgeData = passiveDataEdge;
this.addPassiveNodes();
this.addCameraControl();
this.addEvents();
this.drawPassiveEdges();
}
init() {
this.graphics = this.add.graphics();
this.textGraphic = new Phaser.GameObjects.Graphics(this);
this.add.existing(this.textGraphic);
this.passiveNodeData = passiveDataNode;
this.passiveEdgeData = passiveDataEdge;
}
addPassiveNodes() {
this.passiveNodes = [];
this.passiveNodeData.forEach((n) => {
@ -84,6 +82,9 @@ class PhaserPassives extends Phaser.Scene {
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() {

40
client/src/components/phaser.combat.js
View File

@ -2,6 +2,10 @@ 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')}`);
@ -30,6 +34,11 @@ class PhaserCombat extends Phaser.Scene {
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() {
@ -38,9 +47,8 @@ class PhaserCombat extends Phaser.Scene {
const imgTwo = this.players.create(500, 300, 'magmar');
img.setScale(0.5);
imgTwo.setScale(0.5);
this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
this.loaded = true;
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() {
@ -53,21 +61,29 @@ class PhaserCombat extends Phaser.Scene {
this.anims.create(config);
}
setPlayerOneHp(health) {
this.playerOneHp.text = health;
}
setPlayerTwoHp(health) {
this.playerTwoHp.text = health;
}
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');

20
client/src/components/phaser.container.jsx
View File

@ -2,6 +2,7 @@ const preact = require('preact');
const { connect } = require('preact-redux');
const Phaser = require('phaser');
const PhaserCombat = require('./phaser.combat');
const PhaserPassives = require('./passive.phaser');
const addState = connect(
function receiveState(state) {
@ -21,21 +22,8 @@ class PhaserInstance extends preact.Component {
}
componentWillReceiveProps(nextProps) {
const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id);
const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id);
if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) {
this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.base.toString()} / ${playerTeam.cryps[0].stamina.base.toString()} HP`);
this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.base.toString()} / ${otherTeams[0].cryps[0].stamina.base.toString()} HP`);
if (playerTeam.cryps[0].hp.base === 0) {
// this.PhaserCombat.skills('blast', 400, -150);
this.PhaserCombat.skills('chargeBall', 'green', 400, -250);
} else if (otherTeams[0].cryps[0].hp.base === 0) {
// this.PhaserCombat.skills('blast', 180, 150);
this.PhaserCombat.skills('chargeBall', 'green', 180, 250);
}
}
this.PhaserCombat.registry.set('playerCryps', nextProps.game.teams.find(t => t.id === nextProps.account.id));
this.PhaserCombat.registry.set('enemyCryps', nextProps.game.teams.filter(t => t.id !== nextProps.account.id)[0]);
}
componentDidMount() {
@ -52,7 +40,7 @@ class PhaserInstance extends preact.Component {
gravity: { y: 0 },
},
},
scene: this.PhaserCombat,
scene: [this.PhaserCombat, PhaserPassives],
};
const game = new Phaser.Game(config);
}