From 4d79f987d3d883b88f72e804a3aff574ab11664b Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 9 Jan 2019 14:48:45 +1000 Subject: [PATCH] Added glowy box to combat scene as a test 'ok_hand' --- client/src/scenes/combat.js | 44 ++++++++++----- client/src/scenes/elements/box.js | 81 ++++++++++++++++++++++++++++ client/src/scenes/menu.cryps.list.js | 3 +- 3 files changed, 113 insertions(+), 15 deletions(-) create mode 100644 client/src/scenes/elements/box.js diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 5a44a710..c7fa113c 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -6,6 +6,7 @@ const CombatLog = require('./combat.log'); const CombatCryps = require('./combat.cryps'); const CombatSkills = require('./combat.skills'); const CombatHitBox = require('./combat.hitbox'); +const GlowyBox = require('./elements/box'); const renderResolutions = require('./combat.render.resolutions'); @@ -28,20 +29,7 @@ class Combat extends Phaser.Scene { console.log('creating game'); this.registry.events.off('changedata', this.updateData); this.registry.events.on('changedata', this.updateData, this); - - this.input.keyboard.on('keydown_BACKSPACE', () => { - this.cleanUp(); - }, 0, this); - const leaveGame = this.add - .rectangle(COMBAT.width() * 0.8, COMBAT.height() * 0.8, COMBAT.width() * 0.1, COMBAT.height() * 0.1, 0xff9215) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - this.cleanUp(); - }); - this.add - .text(leaveGame.getCenter().x, leaveGame.getCenter().y, 'Leave Game', TEXT.HEADER) - .setOrigin(0.5, 0.5); + this.addLeaveGame(); this.registry.set('gamePhase', false); this.registry.set('inGame', true); @@ -111,6 +99,34 @@ class Combat extends Phaser.Scene { return true; } + addLeaveGame() { + this.input.keyboard.on('keydown_BACKSPACE', () => { + this.cleanUp(); + }, 0, this); + + const boxes = this.add.group({ + classType: GlowyBox, + runChildUpdate: true, + }); + boxes.add(this.add.existing(new GlowyBox( + this, + COMBAT.width() * 0.8, COMBAT.height() * 0.8, COMBAT.width() * 0.1, COMBAT.height() * 0.1, + [0.7, 0.2, 0], 'leave' + ))); + + const leaveGame = this.add + .rectangle(COMBAT.width() * 0.8, COMBAT.height() * 0.8, + COMBAT.width() * 0.1, COMBAT.height() * 0.1, 0xff9215, 0x000000) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + this.cleanUp(); + }); + this.add + .text(leaveGame.getCenter().x, leaveGame.getCenter().y, 'Leave Game', TEXT.HEADER) + .setOrigin(0.5, 0.5); + } + cleanUp() { this.registry.events.off('changedata', this.updateData, this); this.registry.events.off('setdata', this.updateData, this); diff --git a/client/src/scenes/elements/box.js b/client/src/scenes/elements/box.js new file mode 100644 index 00000000..c24175a5 --- /dev/null +++ b/client/src/scenes/elements/box.js @@ -0,0 +1,81 @@ +const Phaser = require('phaser'); + +const BOX = ` +#ifdef GL_ES +precision mediump float; +#endif + +#extension GL_OES_standard_derivatives : enable + +#ifdef GL_ES +precision mediump float; +#endif + +#extension GL_OES_standard_derivatives : enable + +uniform float time; +uniform vec2 resolution; +uniform vec2 dimensions; +uniform vec2 offset; +uniform vec3 colour; + +float sdBox( in vec2 p, in vec2 b ) +{ + vec2 d = abs(p)-b; + return length(max(d,vec2(0))) + min(max(d.x,d.y),0.0); +} + +void main() +{ + + vec2 p = (gl_FragCoord.xy / resolution.xy); + p.x -= offset.x / resolution.x + dimensions.x / (2.0 * resolution.x); + p.y -= -1.0 * offset.y / resolution.y + ((resolution.y - dimensions.y) / (2.0 * resolution.y)) + 0.5; + vec2 dim = 0.5 * dimensions / resolution.xy; + float d = sdBox(p, dim); + float tb = abs(sin(time)) + 0.9; + + vec3 col = tb * colour - sign(d) * vec3(0.1); + col *= 0.0 + exp(-100.0 * abs(d)); + + gl_FragColor = vec4(col,1.0); +} +`; + + +const CustomPipeline = new Phaser.Class({ + Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline, + initialize: function CustomPipeline(game) { + Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, { + game, + renderer: game.renderer, + fragShader: BOX, + }); + }, +}); + +const GlowyBox = new Phaser.Class({ + Extends: Phaser.GameObjects.RenderTexture, + initialize(scene, x, y, width, height, colour, tag) { + Phaser.GameObjects.RenderTexture.call(this, scene, x, y, width, height); + this.customPipeline = scene.game.renderer.addPipeline(tag, new CustomPipeline(scene.game)); + this.customPipeline.setFloat2('resolution', 1600, 1000); + this.customPipeline.setFloat2('offset', x, y); + this.customPipeline.setFloat2('dimensions', width, height); + this.customPipeline.setFloat3('colour', colour[0], colour[1], colour[2]); + this.setPipeline(tag); + this.bgTime = 10.0; + + this.on('pointerdown', () => console.log('grep')); + this.on('destroy', () => { + scene.game.renderer.removePipeline(tag); + }); + }, + + update() { + this.bgTime += 0.05; + this.customPipeline.setFloat1('time', this.bgTime); + }, +}); + +module.exports = GlowyBox; diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index fdf1399d..8936b893 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -39,7 +39,8 @@ class MenuCrypList extends Phaser.Scene { if (this.crypRows) this.crypRows.destroy(true); this.crypRows = this.add.group(); // We only display 3 cryps others can be viewed in cryp list (soon TM) - for (let i = 0; i < 3; i += 1) { + const crypDispLength = cryps.length < 3 ? cryps.length : 3; + for (let i = 0; i < crypDispLength; i += 1) { const cryp = cryps[i]; const ROW_X = 0; const ROW_Y = (i * ROW_HEIGHT);