phaser3-rex-plugins
Version:
353 lines (293 loc) • 10.9 kB
JavaScript
(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.rexoutlinepipelineplugin = factory());
})(this, (function () { 'use strict';
// Reference: https://github.com/pixijs/pixi-filters/blob/master/filters/outline/src/outline.frag
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 float thickness;
uniform vec3 outlineColor;
const float DOUBLE_PI = 3.14159265358979323846264 * 2.;
void main() {
vec4 front = texture2D(uMainSampler, outTexCoord);
if (thickness > 0.0) {
vec2 mag = vec2(thickness/texSize.x, thickness/texSize.y);
vec4 curColor;
float maxAlpha = front.a;
vec2 offset;
for (float angle = 0.; angle < DOUBLE_PI; angle += #{angleStep}) {
offset = vec2(mag.x * cos(angle), mag.y * sin(angle));
curColor = texture2D(uMainSampler, outTexCoord + offset);
maxAlpha = max(maxAlpha, curColor.a);
}
vec3 resultColor = front.rgb + (outlineColor.rgb * (1. - front.a)) * maxAlpha;
gl_FragColor = vec4(resultColor, maxAlpha);
} else {
gl_FragColor = front;
}
}
`;
const MAX_SAMPLES = 100;
const MIN_SAMPLES = 1;
var GetFrag = function (quality) {
if (quality === undefined) {
quality = 0.1;
}
var samples = Math.max((quality * MAX_SAMPLES), MIN_SAMPLES);
var angleStep = (Math.PI * 2 / samples).toFixed(7);
return frag.replace(/\#\{angleStep\}/, angleStep);
};
const PostFXPipeline = Phaser.Renderer.WebGL.Pipelines.PostFXPipeline;
const GetValue$1 = Phaser.Utils.Objects.GetValue;
const IntegerToRGB = Phaser.Display.Color.IntegerToRGB;
const Color = Phaser.Display.Color;
var Quality = 0.1;
var FragSrc = GetFrag(Quality);
class OutlinePostFxPipeline extends PostFXPipeline {
constructor(game) {
super({
name: 'rexOutlinePostFx',
game: game,
renderTarget: true,
fragShader: FragSrc
});
this.thickness = 0;
this._outlineColor = new Color();
}
resetFromJSON(o) {
this.setThickness(GetValue$1(o, 'thickness', 3));
this.setOutlineColor(GetValue$1(o, 'outlineColor', 0xffffff));
return this;
}
onPreRender() {
this.set1f('thickness', this.thickness);
this.set3f('outlineColor', this._outlineColor.redGL, this._outlineColor.greenGL, this._outlineColor.blueGL);
this.set2f('texSize', this.renderer.width, this.renderer.height);
}
setThickness(value) {
this.thickness = value;
return this;
}
get outlineColor() {
return this._outlineColor;
}
set outlineColor(value) {
if (typeof (value) === 'number') {
value = IntegerToRGB(value);
}
this._outlineColor.setFromRGB(value);
}
setOutlineColor(value) {
this.outlineColor = value;
return this;
}
static setQuality(value) {
if (Quality === value) {
return;
}
Quality = value;
FragSrc = GetFrag(value);
}
static getQuality() {
return Quality;
}
}
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 IsNil = function (value) {
return value === null || value === undefined;
};
var IsObjectLike = function (value) {
return value !== null && typeof value === 'object';
};
var NormalizePath = function (path, delimiter) {
if (Array.isArray(path)) ; else if (typeof path !== 'string') {
path = [];
} else if (path.trim() === '') {
path = [];
} else {
path = path.split(delimiter).filter(Boolean);
}
return path;
};
/**
* Set a nested value into target by path (mutates target).
*
* - If keys is a string and does NOT contain delimiter, write directly.
* - Intermediate non-plain-object values are always overwritten with {}.
*
* @param {object} target
* @param {string|string[]} keys
* @param {*} value
* @param {string} [delimiter='.']
* @returns {object} the same target reference
*/
var SetValue = function (target, keys, value, delimiter = '.') {
if (!IsObjectLike(target)) {
return target;
}
// Invalid key: no-op; don't replace root
if (IsNil(keys) || keys === '' || (Array.isArray(keys) && keys.length === 0)) {
return target;
}
// Fast path: single key
if (
(typeof keys === 'string' && keys.indexOf(delimiter) === -1) ||
(typeof keys === 'number')
) {
target[keys] = value;
return target;
}
var pathSegments = NormalizePath(keys, delimiter);
if (pathSegments.length === 0) {
return target;
}
var cursor = target;
var pathSegmentsCount = pathSegments.length;
for (var index = 0; index < pathSegmentsCount - 1; index++) {
var segment = pathSegments[index];
var next = cursor[segment];
if (!IsObjectLike(next)) {
// Force overwrite intermediates
cursor[segment] = {};
}
cursor = cursor[segment];
}
cursor[pathSegments[pathSegmentsCount - 1]] = value;
return target;
};
const GetValue = Phaser.Utils.Objects.GetValue;
class OutlinePipelinePlugin extends BasePostFxPipelinePlugin {
constructor(pluginManager) {
super(pluginManager);
this.setPostPipelineClass(OutlinePostFxPipeline, 'rexOutlinePostFx');
}
add(gameObject, config) {
this.setQuality(GetValue(config, 'quality', this.quality));
return super.add(gameObject, config);
}
setQuality(value) {
OutlinePostFxPipeline.setQuality(value);
return this;
}
set quality(value) {
this.setQuality(value);
}
get quality() {
return OutlinePostFxPipeline.getQuality();
}
}
SetValue(window, 'RexPlugins.Pipelines.OutlinePostFx', OutlinePostFxPipeline);
return OutlinePipelinePlugin;
}));