phaser4-rex-plugins
Version:
964 lines (789 loc) • 30 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.rexcirclemaskimage = factory());
})(this, (function () { 'use strict';
// copy from Phaser.GameObjects.Text
var WebGLRenderer = function (renderer, src, drawingContext, parentMatrix) {
if (src.dirty) {
src.updateTexture();
src.dirty = false;
}
if ((src.width === 0) || (src.height === 0)) {
return;
}
drawingContext.camera.addToRenderList(src);
var customRenderNodes = src.customRenderNodes;
var defaultRenderNodes = src.defaultRenderNodes;
(customRenderNodes.Submitter || defaultRenderNodes.Submitter).run(
drawingContext,
src,
parentMatrix,
0,
customRenderNodes.Texturer || defaultRenderNodes.Texturer,
customRenderNodes.Transformer || defaultRenderNodes.Transformer
);
};
// copy from Phaser.GameObjects.Text
var CanvasRenderer = function (renderer, src, camera, parentMatrix) {
if (src.dirty) {
src.updateTexture();
src.dirty = false;
}
if ((src.width === 0) || (src.height === 0)) {
return;
}
camera.addToRenderList(src);
renderer.batchSprite(src, src.frame, camera, parentMatrix);
};
var Render = {
renderWebGL: WebGLRenderer,
renderCanvas: CanvasRenderer
};
const Color = Phaser.Display.Color;
var CanvasMethods = {
clear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.dirty = true;
return this;
},
fill(color) {
this.context.fillStyle = color;
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.dirty = true;
return this;
},
drawFrame(key, frame, dx, dy, dWidth, dHeight, sxOffset, syOffset, sWidth, sHeight) {
var textureFrame = this.scene.sys.textures.getFrame(key, frame);
if (!textureFrame) {
return this;
}
var frameWidth = textureFrame.cutWidth,
frameHeight = textureFrame.cutHeight;
if (dx === undefined) { dx = 0; }
if (dy === undefined) { dy = 0; }
if (dWidth === undefined) { dWidth = frameWidth; }
if (dHeight === undefined) { dHeight = frameHeight; }
if (sxOffset === undefined) { sxOffset = 0; }
if (syOffset === undefined) { syOffset = 0; }
if (sWidth === undefined) { sWidth = frameWidth; }
if (sHeight === undefined) { sHeight = frameHeight; }
var sx = textureFrame.cutX + sxOffset;
var sy = textureFrame.cutY + syOffset;
this.context.drawImage(
textureFrame.source.image, // image
sx, sy, sWidth, sHeight,
dx, dy, dWidth, dHeight
);
this.dirty = true;
return this;
},
getDataURL(type, encoderOptions) {
return this.canvas.toDataURL(type, encoderOptions);
},
getPixel(x, y, out) {
if (out === undefined) {
out = new Color();
}
var rgb = this.context.getImageData(x, y, 1, 1);
out.setTo(rgb.data[0], rgb.data[1], rgb.data[2], rgb.data[3]);
return out;
},
setPixel(x, y, r, g, b, a) {
if (typeof (r) !== 'number') {
var color = r;
r = color.red;
g = color.green;
b = color.blue;
a = color.alpha;
}
if (a === undefined) {
a = ((r !== 0) || (g !== 0) || (b !== 0)) ? 255 : 0;
}
var imgData = this.context.createImageData(1, 1);
imgData.data[0] = r;
imgData.data[1] = g;
imgData.data[2] = b;
imgData.data[3] = a;
this.context.putImageData(imgData, x, y);
this.dirty = true;
return this;
}
};
var CopyCanvasToTexture = function (scene, srcCanvas, key, x, y, width, height) {
var textures = scene.sys.textures;
var renderer = scene.renderer;
if (x === undefined) {
x = 0;
}
if (y === undefined) {
y = 0;
}
if (width === undefined) {
width = srcCanvas.width;
}
if (height === undefined) {
height = srcCanvas.height;
}
var texture;
if (textures.exists(key)) {
texture = textures.get(key);
} else {
texture = textures.createCanvas(key, width, height);
}
var destCanvas = texture.getSourceImage();
if (destCanvas.width !== width) {
destCanvas.width = width;
}
if (destCanvas.height !== height) {
destCanvas.height = height;
}
var destCtx = destCanvas.getContext('2d', { willReadFrequently: true });
destCtx.clearRect(0, 0, width, height);
destCtx.drawImage(srcCanvas, x, y, width, height);
if (renderer.gl && texture) {
renderer.canvasToTexture(destCanvas, texture.source[0].glTexture, true, 0);
}
};
var TextureMethods = {
updateTexture(callback, scope) {
var canvas = this.canvas;
var context = this.context;
if (callback) {
var scale = this.resolution;
if (scale !== 1) {
this.context.save();
this.context.scale(scale, scale);
}
if (scope) {
callback.call(scope, canvas, context);
} else {
callback(canvas, context);
}
if (scale !== 1) {
this.context.restore();
}
}
var newWidth = canvas.width,
newHeight = canvas.height;
if ((newWidth !== this.frame.width) || (newHeight !== this.frame.height)) {
this.frame.setSize(newWidth, newHeight);
this.frame.source.updateSize(newWidth, newHeight);
this.frame.updateUVs();
}
if (this.renderer && this.renderer.gl) {
this.frame.source.glTexture = this.renderer.canvasToTexture(canvas, this.frame.source.glTexture, true);
if (typeof WEBGL_DEBUG) {
this.frame.glTexture.spectorMetadata = { textureKey: 'Canvas Game Object' };
}
}
this.dirty = false;
var input = this.input;
if (input && !input.customHitArea) {
input.hitArea.width = this.width;
input.hitArea.height = this.height;
}
return this;
},
generateTexture(key, x, y, width, height) {
var srcCanvas = this.canvas;
if (width === undefined) {
width = srcCanvas.width;
} else {
width *= this.resolution;
}
if (height === undefined) {
height = srcCanvas.height;
} else {
height *= this.resolution;
}
CopyCanvasToTexture(this.scene, srcCanvas, key, x, y, width, height);
return this;
},
loadTexture(key, frame) {
var textureFrame = this.scene.sys.textures.getFrame(key, frame);
if (!textureFrame) {
return this;
}
if ((this.width !== textureFrame.cutWidth) || (this.height !== textureFrame.cutHeight)) {
this.setSize(textureFrame.cutWidth, textureFrame.cutHeight);
} else {
this.clear();
}
this.drawFrame(key, frame);
this.dirty = true;
return this;
}
};
const MainVersionNumber = 4;
const SubVersionNumber = 0;
var IsChecked = false;
var CheckP3Version = function (minVersion) {
if (IsChecked) {
return;
}
if (minVersion === undefined) {
minVersion = SubVersionNumber;
}
var version = Phaser.VERSION.split('.');
var mainVersion = parseInt(version[0]);
if (mainVersion === MainVersionNumber) {
var subVersion = parseInt(version[1]);
if (subVersion < minVersion) {
console.error(`Minimum supported version : ${mainVersion}.${subVersion}`);
}
} else {
console.error(`Can't supported version : ${mainVersion}`);
}
IsChecked = true;
};
CheckP3Version();
const CanvasPool = Phaser.Display.Canvas.CanvasPool;
const GameObject = Phaser.GameObjects.GameObject;
const UUID = Phaser.Utils.String.UUID;
const DefaultImageNodes = Phaser.Renderer.WebGL.RenderNodes.Defaults.DefaultImageNodes;
class Canvas extends GameObject {
constructor(scene, x, y, width, height, resolution) {
if (x === undefined) {
x = 0;
}
if (y === undefined) {
y = 0;
}
if (width === undefined) {
width = 1;
}
if (height === undefined) {
height = 1;
}
if (resolution === undefined) {
resolution = 1;
}
super(scene, 'rexCanvas');
this.renderer = scene.sys.game.renderer;
this._width = width;
this._height = height;
this.resolution = resolution;
width = Math.max(Math.ceil(width * this.resolution), 1);
height = Math.max(Math.ceil(height * this.resolution), 1);
this.canvas = CanvasPool.create(this, width, height);
this.dirty = false;
this.setPosition(x, y);
this.setOrigin(0.5, 0.5);
this.initRenderNodes(this._defaultRenderNodesMap);
this._crop = this.resetCropObject();
// Create a Texture for this Text object
this._textureKey = UUID();
this.texture = scene.sys.textures.addCanvas(this._textureKey, this.canvas);
// Set the context to be the CanvasTexture context
this.context = this.texture.context;
// Get the frame
this.frame = this.texture.get();
// Set the resolution
this.frame.source.resolution = this.resolution;
if (this.renderer && this.renderer.gl) {
// Clear the default 1x1 glTexture, as we override it later
this.renderer.deleteTexture(this.frame.source.glTexture);
this.frame.source.glTexture = null;
}
this.dirty = true;
}
preDestroy() {
CanvasPool.remove(this.canvas);
this.canvas = null;
this.context = null;
var texture = this.texture;
if (texture) {
texture.destroy();
}
}
get _defaultRenderNodesMap() {
return DefaultImageNodes;
}
setResolution(resolution) {
if (this.resolution === resolution) {
return this;
}
this.resolution = resolution;
var width = Math.max(Math.ceil(this.width * resolution), 1);
var height = Math.max(Math.ceil(this.height * resolution), 1);
this.canvas.width = width;
this.canvas.height = height;
this.frame.source.resolution = resolution;
this.dirty = true;
return this;
}
get width() {
return this._width;
}
set width(value) {
this.setSize(value, this._height);
}
get height() {
return this._height;
}
set height(value) {
this.setSize(this._width, value);
}
setCanvasSize(width, height) {
if ((this._width === width) && (this._height === height)) {
return this;
}
this._width = width;
this._height = height;
this.updateDisplayOrigin();
width = Math.max(Math.ceil(width * this.resolution), 1);
height = Math.max(Math.ceil(height * this.resolution), 1);
this.canvas.width = width;
this.canvas.height = height;
this.frame.setSize(width, height);
this.frame.source.updateSize(width, height);
this.frame.updateUVs();
this.dirty = true;
return this;
}
// setSize might be override
setSize(width, height) {
this.setCanvasSize(width, height);
return this;
}
get displayWidth() {
return this.scaleX * this._width;
}
set displayWidth(value) {
this.scaleX = value / this._width;
}
get displayHeight() {
return this.scaleY * this._height;
}
set displayHeight(value) {
this.scaleY = value / this._height;
}
setDisplaySize(width, height) {
this.displayWidth = width;
this.displayHeight = height;
return this;
}
getCanvas(readOnly) {
if (!readOnly) {
this.dirty = true;
}
return this.canvas;
}
getContext(readOnly) {
if (!readOnly) {
this.dirty = true;
}
return this.context;
}
needRedraw() {
this.dirty = true;
return this;
}
resize(width, height) {
this.setSize(width, height);
return this;
}
}
const Components = Phaser.GameObjects.Components;
Phaser.Class.mixin(Canvas,
[
Components.Alpha,
Components.BlendMode,
Components.Crop,
Components.Depth,
Components.Flip,
Components.GetBounds,
Components.Lighting,
Components.Mask,
Components.Origin,
Components.RenderNodes,
Components.ScrollFactor,
Components.Tint,
Components.Transform,
Components.Visible,
Render,
CanvasMethods,
TextureMethods,
]
);
const GetValue$1 = Phaser.Utils.Objects.GetValue;
class RoundRectangle {
constructor(x, y, width, height, radiusConfig) {
if (x === undefined) { x = 0; }
if (y === undefined) { y = x; }
if (width === undefined) { width = 0; }
if (height === undefined) { height = 0; }
if (radiusConfig === undefined) { radiusConfig = 0; }
this.cornerRadius = {};
this._width = 0;
this._height = 0;
this.setTo(x, y, width, height, radiusConfig);
}
setTo(x, y, width, height, radiusConfig) {
this.setPosition(x, y);
this.setRadius(radiusConfig);
this.setSize(width, height);
return this;
}
setPosition(x, y) {
this.x = x;
this.y = y;
return this;
}
setRadius(value) {
if (value === undefined) {
value = 0;
}
this.radius = value;
return this;
}
setSize(width, height) {
this.width = width;
this.height = height;
return this;
}
get minWidth() {
var radius = this.cornerRadius;
return Math.max(radius.tl.x + radius.tr.x, radius.bl.x + radius.br.x);
}
get minHeight() {
var radius = this.cornerRadius;
return Math.max(radius.tl.y + radius.bl.y, radius.tr.y + radius.br.y);
}
get width() {
return this._width;
}
set width(value) {
if (value == null) {
value = 0;
}
this._width = Math.max(value, this.minWidth);
}
get height() {
return this._height;
}
set height(value) {
if (value == null) {
value = 0;
}
this._height = Math.max(value, this.minHeight);
}
get radius() {
var radius = this.cornerRadius;
return Math.max(
radius.tl.x, radius.tl.y,
radius.tr.x, radius.tr.y,
radius.bl.x, radius.bl.y,
radius.br.x, radius.br.y
);
}
set radius(value) {
var defaultRadiusX, defaultRadiusY;
if (typeof (value) === 'number') {
defaultRadiusX = value;
defaultRadiusY = value;
} else {
defaultRadiusX = GetValue$1(value, 'x', 0);
defaultRadiusY = GetValue$1(value, 'y', 0);
}
var radius = this.cornerRadius;
radius.tl = GetRadius(GetValue$1(value, 'tl', undefined), defaultRadiusX, defaultRadiusY);
radius.tr = GetRadius(GetValue$1(value, 'tr', undefined), defaultRadiusX, defaultRadiusY);
radius.bl = GetRadius(GetValue$1(value, 'bl', undefined), defaultRadiusX, defaultRadiusY);
radius.br = GetRadius(GetValue$1(value, 'br', undefined), defaultRadiusX, defaultRadiusY);
}
get radiusTL() {
var radius = this.cornerRadius.tl;
return Math.max(radius.x, radius.y);
}
set radiusTL(value) {
SetRadius(this.cornerRadius.tl, value);
}
get radiusTR() {
var radius = this.cornerRadius.tr;
return Math.max(radius.x, radius.y);
}
set radiusTR(value) {
SetRadius(this.cornerRadius.tr, value);
}
get radiusBL() {
var radius = this.cornerRadius.bl;
return Math.max(radius.x, radius.y);
}
set radiusBL(value) {
SetRadius(this.cornerRadius.bl, value);
}
get radiusBR() {
var radius = this.cornerRadius.br;
return Math.max(radius.x, radius.y);
}
set radiusBR(value) {
SetRadius(this.cornerRadius.br, value);
}
}
var GetRadius = function (radius, defaultRadiusX, defaultRadiusY) {
if (radius === undefined) {
radius = {
x: defaultRadiusX,
y: defaultRadiusY
};
} else if (typeof (radius) === 'number') {
radius = {
x: radius,
y: radius
};
}
SetConvex(radius);
return radius;
};
var SetRadius = function (radius, value) {
if (typeof (value) === 'number') {
radius.x = value;
radius.y = value;
} else {
radius.x = GetValue$1(value, 'x', 0);
radius.y = GetValue$1(value, 'y', 0);
}
SetConvex(radius);
};
var SetConvex = function (radius) {
radius.convex = (radius.x >= 0) || (radius.y >= 0);
radius.x = Math.abs(radius.x);
radius.y = Math.abs(radius.y);
};
const DegToRad = Phaser.Math.DegToRad;
var AddRoundRectanglePath = function (context, x, y, width, height, radiusConfig, iteration) {
var geom = new RoundRectangle(x, y, width, height, radiusConfig),
minWidth = geom.minWidth,
minHeight = geom.minHeight,
scaleRX = (width >= minWidth) ? 1 : (width / minWidth),
scaleRY = (height >= minHeight) ? 1 : (height / minHeight);
var cornerRadius = geom.cornerRadius;
var radius, radiusX, radiusY, centerX, centerY;
var startX, startY;
context.save();
context.beginPath();
context.translate(x, y);
// Top-left
radius = cornerRadius.tl;
if (IsArcCorner(radius)) {
radiusX = radius.x * scaleRX;
radiusY = radius.y * scaleRY;
if (IsConvexArc(radius)) {
centerX = radiusX;
centerY = radiusY;
ArcTo(context, centerX, centerY, radiusX, radiusY, 180, 270, false, iteration);
} else {
centerX = 0;
centerY = 0;
ArcTo(context, centerX, centerY, radiusX, radiusY, 90, 0, true, iteration);
}
startX = 0;
startY = radiusY;
} else {
context.lineTo(0, 0);
startX = 0;
startY = 0;
}
// Top-right
radius = cornerRadius.tr;
if (IsArcCorner(radius)) {
radiusX = radius.x * scaleRX;
radiusY = radius.y * scaleRY;
if (IsConvexArc(radius)) {
centerX = width - radiusX;
centerY = radiusY;
ArcTo(context, centerX, centerY, radiusX, radiusY, 270, 360, false, iteration);
} else {
centerX = width;
centerY = 0;
ArcTo(context, centerX, centerY, radiusX, radiusY, 180, 90, true, iteration);
}
} else {
context.lineTo(width, 0);
}
// Bottom-right
radius = cornerRadius.br;
if (IsArcCorner(radius)) {
radiusX = radius.x * scaleRX;
radiusY = radius.y * scaleRY;
if (IsConvexArc(radius)) {
centerX = width - radiusX;
centerY = height - radiusY;
ArcTo(context, centerX, centerY, radiusX, radiusY, 0, 90, false, iteration);
} else {
centerX = width;
centerY = height;
ArcTo(context, centerX, centerY, radiusX, radiusY, 270, 180, true, iteration);
}
} else {
context.lineTo(width, height);
}
// Bottom-left
radius = cornerRadius.bl;
if (IsArcCorner(radius)) {
radiusX = radius.x * scaleRX;
radiusY = radius.y * scaleRY;
if (IsConvexArc(radius)) {
centerX = radiusX;
centerY = height - radiusY;
ArcTo(context, centerX, centerY, radiusX, radiusY, 90, 180, false, iteration);
} else {
centerX = 0;
centerY = height;
ArcTo(context, centerX, centerY, radiusX, radiusY, 360, 270, true, iteration);
}
} else {
context.lineTo(0, height);
}
context.lineTo(startX, startY);
context.closePath();
context.restore();
};
var IsConvexArc = function (radius) {
return (!radius.hasOwnProperty('convex')) || // radius does not have convex property
radius.convex;
};
var IsArcCorner = function (radius) {
return ((radius.x > 0) && (radius.y > 0));
};
var ArcTo = function (
context,
centerX, centerY,
radiusX, radiusY,
startAngle, endAngle,
antiClockWise,
iteration
) {
// startAngle, endAngle: 0 ~ 360
if (antiClockWise && (endAngle > startAngle)) {
endAngle -= 360;
} else if (!antiClockWise && (endAngle < startAngle)) {
endAngle += 360;
}
startAngle = DegToRad(startAngle);
endAngle = DegToRad(endAngle);
if (iteration == null) { // undefined, or null
context.ellipse(centerX, centerY, radiusX, radiusY, 0, startAngle, endAngle, antiClockWise);
} else {
iteration += 1;
var x, y, angle;
var step = (endAngle - startAngle) / iteration;
for (var i = 0; i <= iteration; i++) {
angle = startAngle + (step * i);
x = centerX + (radiusX * Math.cos(angle));
y = centerY + (radiusY * Math.sin(angle));
context.lineTo(x, y);
}
}
};
const GetValue = Phaser.Utils.Objects.GetValue;
class CircleMaskImage extends Canvas {
constructor(scene, x, y, key, frame, config) {
super(scene, x, y);
this.type = 'rexCircleMaskImage';
this.setTexture(key, frame, config);
}
setTexture(key, frame, config) {
if (typeof (frame) === 'object') {
config = frame;
frame = undefined;
}
if (typeof (config) === 'string') {
config = {
maskType: config
};
}
var maskType = GetValue(config, 'maskType', 0);
var backgroundColor = GetValue(config, 'backgroundColor', undefined);
var strokeColor = GetValue(config, 'strokeColor', undefined);
var defaultStrokeWidth = (strokeColor != null) ? 10 : 0;
var strokeWidth = GetValue(config, 'strokeWidth', defaultStrokeWidth);
if (maskType === undefined) {
maskType = 0;
} else if (typeof (maskType) === 'string') {
maskType = MASKTYPE[maskType];
}
this._textureKey = key;
this._frameName = frame;
if (maskType === null) {
this.loadTexture(key, frame);
this.dirty = true;
return this;
}
var textureFrame = this.scene.sys.textures.getFrame(key, frame);
if (!textureFrame) {
return this;
}
// Resize to frame size
if ((textureFrame.cutWidth !== this.width) || (textureFrame.cutHeight !== this.height)) {
this.setCanvasSize(textureFrame.cutWidth, textureFrame.cutHeight);
} else {
this.clear();
}
var canvas = this.canvas,
ctx = this.context;
var width = canvas.width,
height = canvas.height;
// Fill background
if (backgroundColor != null) {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, width, height);
}
ctx.save();
ctx.beginPath();
// Build clip path
var halfStrokeLineWidth = strokeWidth / 2;
switch (maskType) {
case 1: // ellipse
var centerX = Math.floor(width / 2);
var centerY = Math.floor(height / 2);
var radiusX = centerX - halfStrokeLineWidth;
var radiusY = centerY - halfStrokeLineWidth;
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, (2 * Math.PI));
break;
case 2:
var radiusConfig = GetValue(config, 'radius', 0);
var iteration = GetValue(config, 'iteration', undefined);
AddRoundRectanglePath(
ctx,
halfStrokeLineWidth, halfStrokeLineWidth,
width - strokeWidth, height - strokeWidth,
radiusConfig,
iteration
);
break;
default: // circle
var centerX = Math.floor(width / 2);
var centerY = Math.floor(height / 2);
var radius = Math.min(centerX, centerY) - halfStrokeLineWidth;
ctx.arc(centerX, centerY, radius, 0, (2 * Math.PI));
break;
}
// Draw stroke line
if (strokeColor != null) {
ctx.strokeStyle = strokeColor;
ctx.lineWidth = strokeWidth;
ctx.stroke();
}
// Clip frame image
ctx.clip();
this.loadTexture(key, frame);
ctx.restore();
this.dirty = true;
return this;
}
resize(width, height) {
// Don't draw content again.
this.setDisplaySize(width, height);
return this;
}
}
const MASKTYPE = {
circle: 0,
ellipse: 1,
roundRectangle: 2
};
return CircleMaskImage;
}));