Added glowy box to combat scene as a test 'ok_hand'

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;