Add some effect properties methods

examples/effect-properties/displacement.bat

@@ -0,0 +1,4 @@
+set main=./examples/effect-properties/displacement.js
+cd ..
+cd ..
+npm run watch

examples/effect-properties/displacement.js

@@ -0,0 +1,50 @@
+import phaser from 'phaser/src/phaser.js';
+import EffectPropertiesPlugin from '../../plugins/effectproperties-plugin.js';
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() {
+        this.load.image('logo', 'assets/images/logo.png');
+
+        //this.load.image('distort', 'assets/images/distortion/noisesmall.png');
+        this.load.image('distort', 'assets/images/distortion/distortion.png');
+    }
+
+    create() {
+        var image = this.add.image(400, 300, 'logo');
+        this.plugins.get('rexEffectProperties').add(image);
+
+        image.displacementKey = 'distort';
+        image.displacementX = -0.03;
+        image.displacementY = -0.03;
+
+    }
+
+    update() { }
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    plugins: {
+        global: [{
+            key: 'rexEffectProperties',
+            plugin: EffectPropertiesPlugin,
+            start: true
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);

examples/effect-properties/gradient.bat

@@ -0,0 +1,4 @@
+set main=./examples/effect-properties/gradient.js
+cd ..
+cd ..
+npm run watch

examples/effect-properties/gradient.js

@@ -0,0 +1,45 @@
+import phaser from 'phaser/src/phaser.js';
+import EffectPropertiesPlugin from '../../plugins/effectproperties-plugin.js';
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() {
+        this.load.image('logo', 'assets/images/logo.png');
+    }
+
+    create() {
+        var image = this.add.image(400, 300, 'logo');
+        this.plugins.get('rexEffectProperties').add(image);
+
+        image.gradientColor = [0x0000ff, 0x00ff00];
+
+    }
+
+    update() { }
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    plugins: {
+        global: [{
+            key: 'rexEffectProperties',
+            plugin: EffectPropertiesPlugin,
+            start: true
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);

plugins/behaviors/effectproperties/AddDisplacementProperties.d.ts

@@ -0,0 +1,14 @@
+export default AddDisplacementProperties;
+
+declare namespace AddDisplacementProperties {
+    interface DisplacementGameObject extends Phaser.GameObjects.GameObject {
+        displacementKey: string | null | false;
+        displacementX: number;
+        displacementY: number;
+
+    }
+}
+
+declare function AddDisplacementProperties(
+    gameObject: Phaser.GameObjects.GameObject
+): AddDisplacementProperties.DisplacementGameObject;

plugins/behaviors/effectproperties/AddDisplacementProperties.js

@@ -0,0 +1,84 @@
+import HasProperty from '../../utils/object/HasProperty.js';
+import GetFXFactory from './GetFXFactory.js';
+
+var AddDisplacementProperties = function (gameObject) {
+    // Don't attach properties again
+    if (HasProperty(gameObject, 'displacementKey')) {
+        return gameObject;
+    }
+
+    var fxFactory = GetFXFactory(gameObject);
+    if (!fxFactory) {
+        return gameObject;
+    }
+
+    var displacementKey,
+        displacementX = 0.005,
+        displacementY = 0.005;
+    Object.defineProperty(gameObject, 'displacementKey', {
+        get: function () {
+            return displacementKey;
+        },
+        set: function (value) {
+            if (displacementKey === value) {
+                return;
+            }
+
+            displacementKey = value;
+
+            if ((displacementKey === null) || (displacementKey === false)) {
+                if (gameObject._displacement) {
+                    fxFactory.remove(gameObject._displacement);
+                    gameObject._displacement = undefined;
+                }
+            } else {
+                if (!gameObject._displacement) {
+                    gameObject._displacement = fxFactory.addDisplacement(displacementKey, displacementX, displacementY);
+                }
+
+                gameObject._displacement.setTexture(displacementKey);
+            }
+
+        },
+    })
+
+    Object.defineProperty(gameObject, 'displacementX', {
+        get: function () {
+            return displacementX;
+        },
+        set: function (value) {
+            if (displacementX === value) {
+                return;
+            }
+
+            displacementX = value;
+
+            if (gameObject._displacement) {
+                gameObject._displacement.x = displacementX;
+            }
+        },
+    })
+
+    Object.defineProperty(gameObject, 'displacementY', {
+        get: function () {
+            return displacementY;
+        },
+        set: function (value) {
+            if (displacementY === value) {
+                return;
+            }
+
+            displacementY = value;
+
+            if (gameObject._displacement) {
+                gameObject._displacement.y = displacementY;
+            }
+        },
+    })
+
+    gameObject.displacementKey = null;
+
+    return gameObject;
+}
+
+export default AddDisplacementProperties;

plugins/behaviors/effectproperties/AddEffectProperties.d.ts

@@ -9,7 +9,9 @@ import AddCircleProperties from './AddCircleProperties';
 import AddContrastProperties from './colormatrix/AddContrastProperties';
 import AddDesaturateProperties from './colormatrix/AddDesaturateProperties';
 import AddDesaturateLuminanceProperties from './colormatrix/AddDesaturateLuminanceProperties';
+import AddDisplacementProperties from './AddDisplacementProperties';
 import AddGlowProperties from './AddGlowProperties';
+import AddGradientProperties from './AddGradientProperties';
 import AddGrayscaleProperties from './colormatrix/AddGrayscaleProperties';
 import AddHueProperties from './colormatrix/AddHueProperties';
 import AddKodachromeProperties from './colormatrix/AddKodachromeProperties';
@@ -44,7 +46,9 @@ declare namespace AddEffectProperties {
         contrast?: boolean,
         desaturate?: boolean,
         desaturateLuminance?: boolean,
+        displacement?: boolean,
         glow?: boolean,
+        gradient?: boolean,
         grayscale?: boolean,
         hue?: boolean,
         kodachrome?: boolean,
@@ -76,7 +80,9 @@ declare namespace AddEffectProperties {
         AddContrastProperties.ContrastGameObject,
         AddDesaturateProperties.DesaturateGameObject,
         AddDesaturateLuminanceProperties.DesaturateLuminanceGameObject,
+        AddDisplacementProperties.DisplacementGameObject,
         AddGlowProperties.GlowGameObject,
+        AddGradientProperties.GradientGameObject,
         AddGrayscaleProperties.GrayscaleGameObject,
         AddHueProperties.HueGameObject,
         AddKodachromeProperties.KodachromeGameObject,

plugins/behaviors/effectproperties/AddGradientProperties.d.ts

@@ -0,0 +1,20 @@
+export default AddGradientProperties;
+
+declare namespace AddGradientProperties {
+    interface GradientGameObject extends Phaser.GameObjects.GameObject {
+        gradientColor: [number, number] | null | false;
+        gradientColor1: number | null | false;
+        gradientColor2: number | null | false;
+        gradientAlpha: number;
+        gradientFromX: number;
+        gradientFromY: number;
+        gradientToX: number;
+        gradientToY: number;
+        gradientSize: number;
+
+    }
+}
+
+declare function AddGradientProperties(
+    gameObject: Phaser.GameObjects.GameObject
+): AddGradientProperties.GradientGameObject;