Merge pull request #87 from Feu-Secret/tokenmagic-dev

Tokenmagic dev

tokenmagic/fx/Anime.js

@@ -517,7 +517,7 @@ export class Anime {
     }
 
     static _attachToTicker() {
-        canvas.app.ticker.add(Anime.tick, this);
+        canvas.app.ticker.add(Anime.tick, this, PIXI.UPDATE_PRIORITY.LOW + 1);
         Anime._lastTime = canvas.app.ticker.lastTime;
         Anime._prevTime = Anime._lastTime;
     }

tokenmagic/fx/filters/CustomFilter.js

@@ -0,0 +1,69 @@
+const _tempRect = new PIXI.Rectangle();
+
+export class CustomFilter extends PIXI.Filter {
+    constructor(...args) {
+        super(...args);
+
+        if (this.program.uniformData.filterMatrix || this.program.uniformData.filterMatrixInverse)
+            this.uniforms.filterMatrix = new PIXI.Matrix();
+
+        if (this.program.uniformData.filterMatrixInverse)
+            this.uniforms.filterMatrixInverse = new PIXI.Matrix();
+    }
+
+    apply(filterManager, input, output, clear) {
+        const filterMatrix = this.uniforms.filterMatrix;
+
+        if (filterMatrix) {
+            const { sourceFrame, destinationFrame, target } = filterManager.activeState;
+
+            filterMatrix.set(
+                destinationFrame.width, 0, 0, destinationFrame.height, sourceFrame.x, sourceFrame.y);
+
+            const worldTransform = PIXI.Matrix.TEMP_MATRIX;
+
+            const localBounds = target.getLocalBounds(_tempRect);
+
+            if (this.sticky) {
+                worldTransform.copyFrom(target.transform.worldTransform);
+                worldTransform.invert();
+
+                const rotation = target.transform.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                const scaleX = Math.hypot(cos * worldTransform.a + sin * worldTransform.c, cos * worldTransform.b + sin * worldTransform.d);
+                const scaleY = Math.hypot(-sin * worldTransform.a + cos * worldTransform.c, -sin * worldTransform.b + cos * worldTransform.d);
+
+                localBounds.pad(scaleX * this.boundsPadding.x, scaleY * this.boundsPadding.y);
+            } else {
+                const transform = target.transform;
+                worldTransform.a = transform.scale.x;
+                worldTransform.b = 0;
+                worldTransform.c = 0;
+                worldTransform.d = transform.scale.y;
+                worldTransform.tx = transform.position.x - transform.pivot.x * transform.scale.x;
+                worldTransform.ty = transform.position.y - transform.pivot.y * transform.scale.y;
+                worldTransform.prepend(target.parent.transform.worldTransform);
+                worldTransform.invert();
+
+                const scaleX = Math.hypot(worldTransform.a, worldTransform.b);
+                const scaleY = Math.hypot(worldTransform.c, worldTransform.d);
+
+                localBounds.pad(scaleX * this.boundsPadding.x, scaleY * this.boundsPadding.y);
+            }
+
+            filterMatrix.prepend(worldTransform);
+            filterMatrix.translate(-localBounds.x, -localBounds.y);
+            filterMatrix.scale(1.0 / localBounds.width, 1.0 / localBounds.height);
+
+            const filterMatrixInverse = this.uniforms.filterMatrixInverse;
+
+            if (filterMatrixInverse) {
+                filterMatrixInverse.copyFrom(filterMatrix);
+                filterMatrixInverse.invert();
+            }
+        }
+
+        filterManager.applyFilter(this, input, output, clear);
+    }
+}

tokenmagic/fx/filters/FilterBlur.js

@@ -7,7 +7,6 @@ export class FilterBlur extends PIXI.filters.BlurFilter {
         this.enabled = false;
         this.blur = 2;
         this.quality = 4;
-        this.resolution = 1;
         this.zOrder = 290;
         this.repeatEdgePixels = false;
         this.animated = {};

tokenmagic/fx/filters/FilterDistortion.js

@@ -13,16 +13,22 @@ export class FilterDistortion extends PIXI.filters.DisplacementFilter {
         // Configuring distortion sprite
         this.sprite = displacementSpriteMask;
         this.wrapMode = PIXI.WRAP_MODES.REPEAT;
+        this.position = new PIXI.Point();
+        this.skew = new PIXI.Point();
+        this.pivot = new PIXI.Point();
         this.anchorSet = 0.5;
         this.transition = null;
         this.padding = 15; // conf
         this.enabled = false;
+        this.maskSpriteX = 0;
+        this.maskSpriteY = 0;
         this.maskSpriteScaleX = 4;
         this.maskSpriteScaleY = 4;
         this.maskSpriteSkewX = 0;
         this.maskSpriteSkewY = 0;
         this.maskSpriteRotation = 0;
         this.zOrder = 4000;
+        this.sticky = true;
 
         this.animated = {};
         this.setTMParams(params);
@@ -31,65 +37,107 @@ export class FilterDistortion extends PIXI.filters.DisplacementFilter {
             this.normalizeTMParams();
             this.sprite.anchor.set(this.anchorSet);
             this.sprite.texture.baseTexture.wrapMode = this.wrapMode;
-            this.placeableImg.addChild(this.sprite);
-            this.sprite.x = this.placeableImg.width / 2;
-            this.sprite.y = this.placeableImg.height / 2;
         }
     }
 
     set maskSpriteX(value) {
-        this.maskSprite.x = value;
+        this.position.x = value;
     }
 
     set maskSpriteY(value) {
-        this.maskSprite.y = value;
+        this.position.y = value;
     }
 
     get maskSpriteX() {
-        return this.maskSprite.x;
+        return this.position.x;
     }
 
     get maskSpriteY() {
-        return this.maskSprite.y;
+        return this.position.y;
     }
 
     set maskSpriteScaleX(value) {
-        this.sprite.scale.x = value;
+        this.scale.x = value;
     }
 
     set maskSpriteScaleY(value) {
-        this.sprite.scale.y = value;
+        this.scale.y = value;
     }
 
     get maskSpriteScaleX() {
-        return this.sprite.scale.x;
+        return this.scale.x;
     }
 
     get maskSpriteScaleY() {
-        return this.sprite.scale.y;
+        return this.scale.y;
     }
 
     set maskSpriteRotation(value) {
-        this.sprite.rotation = value;
+        this.rotation = value;
     }
 
     get maskSpriteRotation() {
-        return this.sprite.rotation;
+        return this.rotation;
     }
 
     set maskSpriteSkewX(value) {
-        this.sprite.skew.x = value;
+        this.skew.x = value;
     }
 
     get maskSpriteSkewX() {
-        return this.sprite.skew.x;
+        return this.skew.x;
     }
 
     set maskSpriteSkewY(value) {
-        this.sprite.skew.y = value;
+        this.skew.y = value;
     }
 
     get maskSpriteSkewY() {
-        return this.sprite.skew.y;
+        return this.skew.y;
+    }
+
+    set maskSpritePivotX(value) {
+        this.pivot.x = value;
+    }
+
+    get maskSpritePivotX() {
+        return this.pivot.x;
+    }
+
+    set maskSpritePivotY(value) {
+        this.pivot.y = value;
+    }
+
+    get maskSpritePivotY() {
+        return this.pivot.y;
+    }
+
+    handleTransform() {
+        this.sprite.position.x = this.targetPlaceable.x + this.placeableImg.x + this.position.x;
+        this.sprite.position.y = this.targetPlaceable.y + this.placeableImg.y + this.position.y;
+        this.sprite.skew.x = this.skew.x;
+        this.sprite.skew.x = this.skew.y;
+        this.sprite.rotation = this.rotation;
+        this.sprite.pivot.x = this.pivot.x;
+        this.sprite.pivot.y = this.pivot.y;
+
+        if (this.sticky)
+            this.sprite.rotation += this.placeableImg.rotation;
+
+        this.sprite.transform.updateTransform(canvas.stage.transform);
+    }
+
+    apply(filterManager, input, output, clear) {
+        this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite);
+        this.uniforms.scale.x = this.scale.x;
+        this.uniforms.scale.y = this.scale.y;
+
+        const wt = this.maskSprite.worldTransform;
+        this.uniforms.rotation[0] = wt.a;
+        this.uniforms.rotation[1] = wt.b;
+        this.uniforms.rotation[2] = wt.c;
+        this.uniforms.rotation[3] = wt.d;
+
+        filterManager.applyFilter(this, input, output, clear);
     }
 }

tokenmagic/fx/filters/FilterElectric.js

@@ -1,9 +1,10 @@
 import { zapElectricity } from '../glsl/fragmentshaders/electricity.js';
 import { customVertex2D } from '../glsl/vertexshaders/customvertex2D.js';
+import { CustomFilter } from './CustomFilter.js';
 import { Anime } from "../Anime.js";
 import "./proto/FilterProto.js";
 
-export class FilterElectric extends PIXI.Filter {
+export class FilterElectric extends CustomFilter {
 
     constructor(params) {
         let {

tokenmagic/fx/filters/FilterFire.js

@@ -1,9 +1,10 @@
 import { burnFire } from '../glsl/fragmentshaders/fire.js';
 import { customVertex2D } from '../glsl/vertexshaders/customvertex2D.js';
+import { CustomFilter } from './CustomFilter.js';
 import { Anime } from "../Anime.js";
 import "./proto/FilterProto.js";
 
-export class FilterFire extends PIXI.Filter {
+export class FilterFire extends CustomFilter {
 
     constructor(params) {
         let {

tokenmagic/fx/filters/FilterFlood.js

@@ -1,9 +1,10 @@
 import { seaFlood } from '../glsl/fragmentshaders/flood.js';
 import { customVertex2D } from '../glsl/vertexshaders/customvertex2D.js';
+import { CustomFilter } from './CustomFilter.js';
 import { Anime } from "../Anime.js";
 import "./proto/FilterProto.js";
 
-export class FilterFlood extends PIXI.Filter {
+export class FilterFlood extends CustomFilter {
 
     constructor(params) {
         let {

tokenmagic/fx/filters/FilterFog.js

@@ -1,8 +1,9 @@
 import { innerFog } from '../glsl/fragmentshaders/fog.js';
 import { customVertex2D } from '../glsl/vertexshaders/customvertex2D.js';
+import { CustomFilter } from './CustomFilter.js';
 import { Anime } from "../Anime.js";
 
-export class FilterFog extends PIXI.Filter {
+export class FilterFog extends CustomFilter {
 
     constructor(params) {
         let {

tokenmagic/fx/filters/FilterForceField.js

@@ -1,9 +1,10 @@
 import { forceField } from '../glsl/fragmentshaders/forcefield.js';
 import { customVertex2D } from '../glsl/vertexshaders/customvertex2D.js';
+import { CustomFilter } from './CustomFilter.js';
 import { Anime } from "../Anime.js";
 import "./proto/FilterProto.js";
 
-export class FilterForceField extends PIXI.Filter {
+export class FilterForceField extends CustomFilter {
     constructor(params) {
         let {
             time,
@@ -160,14 +161,6 @@ export class FilterForceField extends PIXI.Filter {
         this.uniforms.discardThreshold = value;
     }
 
-    get _ratio() {
-        return this.uniforms.ratio;
-    }
-
-    set _ratio(value) {
-        this.uniforms.ratio = value;
-    }
-
     get alphaDiscard() {
         return this.uniforms.alphaDiscard;
     }
@@ -187,44 +180,6 @@ export class FilterForceField extends PIXI.Filter {
             this.uniforms.chromatic = value;
         }
     }
-
-    // override
-    calculatePadding() {
-        return;
-    }
-
-    apply(filterManager, input, output, clear) {
-
-        if (!this.dummy) {
-            let imgSize = Math.max(this.placeableImg.width, this.placeableImg.height);
-
-            if (this.gridPadding > 0) {
-                const toSize = (canvas.dimensions.size >= imgSize
-                    ? canvas.dimensions.size - imgSize
-                    : imgSize % canvas.dimensions.size);
-
-                this.currentPadding =
-                    (this.targetPlaceable.worldTransform.a * (this.gridPadding - 1)
-                        * canvas.dimensions.size)
-                + ((toSize * this.targetPlaceable.worldTransform.a) / 2);
-
-            } else {
-
-                this.currentPadding =
-                    this.placeableImg.parent.worldTransform.a
-                    * this.rawPadding;
-            }
-
-            const placeablePadding = this.targetPlaceable._TMFXgetPlaceablePadding();
-
-            if (this.currentPadding >= placeablePadding) this._ratio = 1;
-            else {
-                imgSize *= this.targetPlaceable.worldTransform.a;
-                this._ratio = (imgSize + 2 * this.currentPadding) / (imgSize + 2 * placeablePadding);
-            }
-        }
-        filterManager.applyFilter(this, input, output, clear);
-    }
 }
 
 FilterForceField.defaults = {
@@ -243,7 +198,6 @@ FilterForceField.defaults = {
     chromatic: false,
     discardThreshold: 0.25,
     alphaDiscard: false,
-    _ratio: 1,
 };
 
 

tokenmagic/fx/filters/FilterFumes.js

@@ -1,9 +1,10 @@
 import { fumes } from '../glsl/fragmentshaders/fumes.js';
 import { customVertex2D } from '../glsl/vertexshaders/customvertex2D.js';
+import { CustomFilter } from './CustomFilter.js';
 import { Anime } from "../Anime.js";
 import "./proto/FilterProto.js";
 
-export class FilterFumes extends PIXI.Filter {
+export class FilterFumes extends CustomFilter {
 
     constructor(params) {
         let {