UNPKG

@petkoneo/phaser3-rex-plugins

Version:
324 lines (272 loc) 9.47 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.rexswirlpipelineplugin = factory()); })(this, (function () { 'use strict'; // reference : https://www.geeks3d.com/20110428/shader-library-swirl-post-processing-filter-in-glsl/ const frag = `\ #ifdef GL_FRAGMENT_PRECISION_HIGH #define highmedp highp #else #define highmedp mediump #endif precision highmedp float; // Scene buffer uniform sampler2D uMainSampler; varying vec2 outTexCoord; // Effect parameters uniform vec2 texSize; uniform vec2 center; uniform float radius; uniform float angle; void main (void) { vec2 tc = outTexCoord * texSize; tc -= center; float dist = length(tc); if (dist < radius) { float percent = (radius - dist) / radius; float theta = percent * percent * angle * 8.0; float s = sin(theta); float c = cos(theta); tc = vec2(dot(tc, vec2(c, -s)), dot(tc, vec2(s, c))); } tc += center; gl_FragColor = texture2D(uMainSampler, tc / texSize); } `; const PostFXPipeline = Phaser.Renderer.WebGL.Pipelines.PostFXPipeline; const GetValue = Phaser.Utils.Objects.GetValue; const DegToRad = Phaser.Math.DegToRad; const RadToDeg = Phaser.Math.RadToDeg; class SwirlPostFxPipeline extends PostFXPipeline { constructor(game) { super({ name: 'rexSwirlPostFx', game: game, renderTarget: true, fragShader: frag }); this.centerX = 0; // position wo resolution this.centerY = 0; // position wo resolution this.radius = 0; this.rotation = 0; } resetFromJSON(o) { this.radius = GetValue(o, 'radius', 0); var rotation = GetValue(o, 'rotation', undefined); if (rotation === undefined) { this.setAngle(GetValue(o, 'angle', 0)); } else { this.setRotation(rotation); } this.setCenter(GetValue(o, 'center.x', undefined), GetValue(o, 'center.y', undefined)); return this; } onPreRender() { this.set1f('radius', this.radius); this.set1f('angle', this.rotation); var texWidth = this.renderer.width, textHeight = this.renderer.height; this.set2f('center', this.centerX, (textHeight - this.centerY)); this.set2f('texSize', texWidth, textHeight); } // radius setRadius(value) { this.radius = value; return this; } // rotation setRotation(value) { this.rotation = value; return this; } get angle() { return RadToDeg(this.rotation); } set angle(value) { this.rotation = DegToRad(value); } setAngle(value) { this.angle = value; return this; } // center setCenter(x, y) { if (x === undefined) { x = this.renderer.width / 2; y = this.renderer.height / 2; } this.centerX = x; this.centerY = y; return this; } } const GameClass = Phaser.Game; var IsGame = function (object) { return (object instanceof GameClass); }; const SceneClass = Phaser.Scene; var IsSceneObject = function (object) { return (object instanceof SceneClass); }; var GetGame = function (object) { if ((object == null) || (typeof (object) !== 'object')) { return null; } else if (IsGame(object)) { return object; } else if (IsGame(object.game)) { return object.game; } else if (IsSceneObject(object)) { // object = scene object return object.sys.game; } else if (IsSceneObject(object.scene)) { // object = game object return object.scene.sys.game; } }; var RegisterPostPipeline = function (game, postFxPipelineName, PostFxPipelineClass) { GetGame(game).renderer.pipelines.addPostPipeline(postFxPipelineName, PostFxPipelineClass); }; var AddPostFxPipelineInstance = function (gameObject, PostFxPipelineClass, config) { if (config === undefined) { config = {}; } gameObject.setPostPipeline(PostFxPipelineClass); var pipeline = gameObject.postPipelines[gameObject.postPipelines.length - 1]; pipeline.resetFromJSON(config); if (config.name) { pipeline.name = config.name; } return pipeline; }; const SpliceOne = Phaser.Utils.Array.SpliceOne; var RemovePostFxPipelineInstance = function (gameObject, PostFxPipelineClass, name) { if (name === undefined) { var pipelines = gameObject.postPipelines; for (var i = (pipelines.length - 1); i >= 0; i--) { var instance = pipelines[i]; if (instance instanceof PostFxPipelineClass) { instance.destroy(); SpliceOne(pipelines, i); } } } else { var pipelines = gameObject.postPipelines; for (var i = 0, cnt = pipelines.length; i < cnt; i++) { var instance = pipelines[i]; if ((instance instanceof PostFxPipelineClass) && (instance.name === name)) { instance.destroy(); SpliceOne(pipelines, i); } } } gameObject.hasPostPipeline = (gameObject.postPipelines.length > 0); }; var GetPostFxPipelineInstance = function (gameObject, PostFxPipelineClass, name) { if (name === undefined) { var result = []; var pipelines = gameObject.postPipelines; for (var i = 0, cnt = pipelines.length; i < cnt; i++) { var instance = pipelines[i]; if (instance instanceof PostFxPipelineClass) { result.push(instance); } } return result; } else { var pipelines = gameObject.postPipelines; for (var i = 0, cnt = pipelines.length; i < cnt; i++) { var instance = pipelines[i]; if ((instance instanceof PostFxPipelineClass) && (instance.name === name)) { return instance; } } } }; class BasePostFxPipelinePlugin extends Phaser.Plugins.BasePlugin { setPostPipelineClass(PostFxPipelineClass, postFxPipelineName) { this.PostFxPipelineClass = PostFxPipelineClass; this.postFxPipelineName = postFxPipelineName; return this; } start() { var eventEmitter = this.game.events; eventEmitter.once('destroy', this.destroy, this); RegisterPostPipeline(this.game, this.postFxPipelineName, this.PostFxPipelineClass); } add(gameObject, config) { return AddPostFxPipelineInstance(gameObject, this.PostFxPipelineClass, config); } remove(gameObject, name) { RemovePostFxPipelineInstance(gameObject, this.PostFxPipelineClass, name); return this; } get(gameObject, name) { return GetPostFxPipelineInstance(gameObject, this.PostFxPipelineClass, name); } } var IsInValidKey = function (keys) { return (keys == null) || (keys === '') || (keys.length === 0); }; var GetEntry = function (target, keys, defaultEntry) { var entry = target; if (IsInValidKey(keys)) ; else { if (typeof (keys) === 'string') { keys = keys.split('.'); } var key; for (var i = 0, cnt = keys.length; i < cnt; i++) { key = keys[i]; if ((entry[key] == null) || (typeof (entry[key]) !== 'object')) { var newEntry; if (i === cnt - 1) { if (defaultEntry === undefined) { newEntry = {}; } else { newEntry = defaultEntry; } } else { newEntry = {}; } entry[key] = newEntry; } entry = entry[key]; } } return entry; }; var SetValue = function (target, keys, value, delimiter) { if (delimiter === undefined) { delimiter = '.'; } // no object if (typeof (target) !== 'object') { return; } // invalid key else if (IsInValidKey(keys)) { // don't erase target if (value == null) { return; } // set target to another object else if (typeof (value) === 'object') { target = value; } } else { if (typeof (keys) === 'string') { keys = keys.split(delimiter); } var lastKey = keys.pop(); var entry = GetEntry(target, keys); entry[lastKey] = value; } return target; }; class SwirlPipelinePlugin extends BasePostFxPipelinePlugin { constructor(pluginManager) { super(pluginManager); this.setPostPipelineClass(SwirlPostFxPipeline, 'rexSwirlPostFx'); } } SetValue(window, 'RexPlugins.Pipelines.SwirlPostFx', SwirlPostFxPipeline); return SwirlPipelinePlugin; }));