diff --git a/client/src/scenes/background.js b/client/src/scenes/background.js new file mode 100644 index 00000000..b3c5680b --- /dev/null +++ b/client/src/scenes/background.js @@ -0,0 +1,79 @@ +const Phaser = require('phaser'); + +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: ` + precision mediump float; + + uniform sampler2D uMainSampler; + uniform vec2 uResolution; + uniform float uTime; + + varying vec2 outTexCoord; + varying vec4 outTint; + + #define MAX_ITER 4 + + void main( void ) + { + vec2 v_texCoord = gl_FragCoord.xy / uResolution; + + vec2 p = v_texCoord * 8.0 - vec2(20.0); + vec2 i = p; + float c = 1.0; + float inten = .05; + + for (int n = 0; n < MAX_ITER; n++) + { + float t = uTime * (1.0 - (3.0 / float(n+1))); + + i = p + vec2(cos(t - i.x) + sin(t + i.y), + sin(t - i.y) + cos(t + i.x)); + + c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten), + p.y / (cos(i.y+t)/inten))); + } + + c /= float(MAX_ITER); + c = 1.5 - sqrt(c); + + vec4 texColor = vec4(0.01, 0.01, 0.01, 1.0); + + texColor.rgb *= (1.0 / (1.0 - (c + 0.05))); + + gl_FragColor = texColor; + } + `, + }); + }, +}); + + +class Background extends Phaser.Scene { + constructor() { + super({ key: 'Background', active: true }); + this.bgTime = 0.0; + } + + create() { + const game = this.game; + this.customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game)); + this.customPipeline.setFloat2('uResolution', 1600, 1000); + + const sprite = this.add.sprite(0, 0); + sprite.setPipeline('Custom'); + sprite.displayWidth = 3200; + sprite.displayHeight = 2000; + } + + update() { + this.customPipeline.setFloat1('uTime', this.bgTime); + this.bgTime += 0.005; + } +} + +module.exports = Background; diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index 49ccf7ed..b6b611a9 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -4,11 +4,12 @@ const Header = require('./header'); const Menu = require('./menu'); const Combat = require('./combat'); const Zones = require('./zones'); +const Background = require('./background'); function renderCryps() { const config = { type: Phaser.AUTO, - backgroundColor: '#181818', + // backgroundColor: '#181818', resolution: window.devicePixelRatio, // antialias: true, width: 1600, @@ -21,9 +22,9 @@ function renderCryps() { }, }, scene: [ + Background, Header, - ], - }; + ], }; const game = new Phaser.Game(config); diff --git a/server/WORKLOG.md b/server/WORKLOG.md index da6b75d2..2e58a248 100644 --- a/server/WORKLOG.md +++ b/server/WORKLOG.md @@ -10,7 +10,6 @@ strangle ## NOW - * zones * differnt game types based on tag * open w/ item?