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

Screen based positions and margins for battle

Browse Source
This commit is contained in:
Mashy 2018-11-22 11:07:24 +10:00
parent 421987c53b
commit b8522e7085
8 changed files with 30 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
client/src/events.js Executable file → Normal file
View File

24
client/src/scenes/combat.cryps.js Executable file → Normal file
View File

@ -1,15 +1,21 @@
const Phaser = require('phaser'); const Phaser = require('phaser');
const { TEXT } = require('./constants'); const { TEXT, POSITIONS: { COMBAT } } = require('./constants');
const TEXT_MARGIN = 24; const calcMargin = () => {
const CRYP_MARGIN = 250; const CRYP_MARGIN = COMBAT.height() / 3.4;
const TEAM_MARGIN = 450; const TEXT_MARGIN = COMBAT.height() / 35;
const TEAM_MARGIN = COMBAT.width() / 2;
const X_PADDING = COMBAT.width() / 10;
const Y_PADDING = COMBAT.width() / 7;
return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
};
class CrypAvatar extends Phaser.GameObjects.Image { class CrypAvatar extends Phaser.GameObjects.Image {
constructor(scene, j, team, cryp, avatar) { constructor(scene, j, team, cryp, avatar) {
// Avatar will be a property of cryp // Avatar will be a property of cryp
super(scene, 100 + TEAM_MARGIN * team, 150 + CRYP_MARGIN * j, avatar); const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar);
this.setScale(0.5); this.setScale(0.5);
this.setInteractive(); this.setInteractive();
this.cryp = cryp; this.cryp = cryp;
@ -19,7 +25,8 @@ class CrypAvatar extends Phaser.GameObjects.Image {
class CrypSkill extends Phaser.GameObjects.Text { class CrypSkill extends Phaser.GameObjects.Text {
constructor(scene, i, j, team, skill) { constructor(scene, i, j, team, skill) {
// Avatar will be a property of cryp // Avatar will be a property of cryp
super(scene, 200 + TEAM_MARGIN * team, 50 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL); const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
super(scene, X_PADDING * 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL);
this.setInteractive(); this.setInteractive();
this.skill = skill; this.skill = skill;
} }
@ -28,6 +35,7 @@ class CrypSkill extends Phaser.GameObjects.Text {
class DrawCrypTeams extends Phaser.GameObjects.Group { class DrawCrypTeams extends Phaser.GameObjects.Group {
constructor(scene, game) { constructor(scene, game) {
super(scene); super(scene);
const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin();
// this.id = cryp.id; // this.id = cryp.id;
this.scene = scene; this.scene = scene;
this.ws = scene.registry.get('ws'); this.ws = scene.registry.get('ws');
@ -38,8 +46,8 @@ class DrawCrypTeams extends Phaser.GameObjects.Group {
this.add(scene.add.existing(new CrypAvatar(scene, j, team, cryp, avatar))); this.add(scene.add.existing(new CrypAvatar(scene, j, team, cryp, avatar)));
// Cryp HP and Name // Cryp HP and Name
const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`; const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`;
this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL)); this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL));
this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER)); this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER));
// Cryp Skills // Cryp Skills
const knownSkill = (skill, i) => { const knownSkill = (skill, i) => {
this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill))); this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill)));

8
client/src/scenes/combat.js Executable file → Normal file
View File

@ -42,6 +42,14 @@ class Combat extends Phaser.Scene {
} }
}); });
this.input.keyboard.on('keydown_G', () => {
this.skills('chargeBall', 'green', 400, -250);
}, 0, this);
this.input.keyboard.on('keydown_H', () => {
this.skills('spit', 'blue', 180, 250);
}, 0, this);
const logX = POSITIONS.COMBAT.LOG.x(); const logX = POSITIONS.COMBAT.LOG.x();
const logY = POSITIONS.COMBAT.LOG.y(); const logY = POSITIONS.COMBAT.LOG.y();
const logWidth = POSITIONS.COMBAT.LOG.width(); const logWidth = POSITIONS.COMBAT.LOG.width();

90
client/src/scenes/combat.old.js
View File

@ -1,90 +0,0 @@
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;

4
client/src/scenes/combat.skills.js
View File

@ -54,7 +54,7 @@ function skills(skill, img, location, spd) {
quantity: 4, quantity: 4,
blendMode: 'ADD', blendMode: 'ADD',
}); });
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); this.time.delayedCall(1000, () => { this.emitter.stop(); this.combat = false;}, [], this);
break; break;
case 'gravBomb': case 'gravBomb':
this.well = particles.createGravityWell({ this.well = particles.createGravityWell({
@ -130,7 +130,7 @@ function skills(skill, img, location, spd) {
}); });
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this); this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this); this.time.delayedCall(3000, () => { this.emitter2.stop(); this.combat = false; }, [], this);
break; break;
default: default:
break; break;

4
client/src/scenes/cryp.list.js
View File

@ -34,7 +34,9 @@ class CrypList extends Phaser.Scene {
const cryp = cryps.find(c => c.id === this.CrypPage.id); const cryp = cryps.find(c => c.id === this.CrypPage.id);
this.displaySkills(cryp); this.displaySkills(cryp);
} }
if (this.gameList) {
this.gameList.destroy(true);
}
this.gameList = new GameList(this, cryps); this.gameList = new GameList(this, cryps);
} }

0
client/src/scenes/cryps.js Executable file → Normal file
View File

2
client/src/scenes/game.list.js Executable file → Normal file
View File

@ -22,7 +22,7 @@ class GameList extends Phaser.GameObjects.Group {
const WIDTH = GAME_LIST.width(); const WIDTH = GAME_LIST.width();
const HEIGHT = GAME_LIST.height(); const HEIGHT = GAME_LIST.height();
console.log(GAME_LIST.y(0)) console.log(GAME_LIST.y(0));
const pvp = list.add const pvp = list.add
.rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000) .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)