Add AddBloomProperties method

docs/docs/shader-builtin.md

@@ -107,7 +107,7 @@ All Game Objects and camera support Post FX. These are effects applied after the
     effect.offsetY = offsetY;
     effect.blurStrength = blurStrength;
     effect.strength = strength;
-    effect.step = step; // integer
+    effect.steps = steps; // integer
     ```
 
 ### Blur

examples/effect-properties/barrel.bat

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

examples/effect-properties/barrel.js

@@ -0,0 +1,44 @@
+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.barrel = 1.5;
+    }
+
+    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/bloom.bat

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

examples/effect-properties/bloom.js

@@ -0,0 +1,47 @@
+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.bloomOffsetX = 1;
+        image.bloomBlurStrength = 2;
+        image.bloomColor = 0xffffff;
+
+    }
+
+    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/AddBloomProperties.d.ts

@@ -0,0 +1,16 @@
+export default AddBloomProperties;
+
+declare namespace AddBloomProperties {
+    interface BloomGameObject extends Phaser.GameObjects.GameObject {
+        bloomColor: number | null | false;
+        bloomOffsetX: number;
+        bloomOffsetY: number;
+        bloomBlurStrength: number;
+        bloomStrength: number;
+        bloomSteps: number;
+    }
+}
+
+declare function AddBloomProperties(
+    gameObject: Phaser.GameObjects.GameObject
+): AddBloomProperties.BloomGameObject;

plugins/behaviors/effectproperties/AddBloomProperties.js

@@ -0,0 +1,138 @@
+import HasProperty from '../../utils/object/HasProperty.js';
+
+var AddBloomProperties = function (gameObject) {
+    // Don't attach properties again
+    if (HasProperty(gameObject, 'bloomColor') || !gameObject.preFX) {
+        return gameObject;
+    }
+
+    var bloomColor,
+        bloomOffsetX = 1,
+        bloomOffsetY = 1,
+        bloomBlurStrength = 1,
+        bloomStrength = 1,
+        bloomSteps = 4;
+    Object.defineProperty(gameObject, 'bloomColor', {
+        get: function () {
+            return bloomColor;
+        },
+        set: function (value) {
+            if (bloomColor === value) {
+                return;
+            }
+
+            bloomColor = value;
+
+            if ((bloomColor === null) || (bloomColor === false)) {
+                if (gameObject._bloom) {
+                    gameObject.preFX.remove(gameObject._bloom);
+                    gameObject._bloom = undefined;
+                }
+            } else {
+                if (!gameObject._bloom) {
+                    var offset = Math.max(bloomOffsetX, bloomOffsetY);
+                    gameObject.preFX.setPadding(offset + 1);
+                    gameObject._bloom = gameObject.preFX.addBloom(bloomColor, bloomOffsetX, bloomOffsetY, bloomBlurStrength, bloomStrength, bloomSteps);
+                } else {
+                    gameObject._bloom.color = bloomColor;
+                }
+            }
+
+        },
+    })
+
+    Object.defineProperty(gameObject, 'bloomOffsetX', {
+        get: function () {
+            return bloomOffsetX;
+        },
+        set: function (value) {
+            if (bloomOffsetX === value) {
+                return;
+            }
+
+            bloomOffsetX = value;
+
+            if (gameObject._bloom) {
+                var offset = Math.max(bloomOffsetX, bloomOffsetY);
+                gameObject.preFX.setPadding(offset + 1);
+                gameObject._bloom.offsetX = bloomOffsetX;
+            }
+        },
+    })
+
+    Object.defineProperty(gameObject, 'bloomOffsetY', {
+        get: function () {
+            return bloomOffsetY;
+        },
+        set: function (value) {
+            if (bloomOffsetY === value) {
+                return;
+            }
+
+            bloomOffsetY = value;
+
+            if (gameObject._bloom) {
+                var offset = Math.max(bloomOffsetX, bloomOffsetY);
+                gameObject.preFX.setPadding(offset + 1);
+                gameObject._bloom.offsetY = bloomOffsetY;
+            }
+        },
+    })
+
+    Object.defineProperty(gameObject, 'bloomBlurStrength', {
+        get: function () {
+            return bloomBlurStrength;
+        },
+        set: function (value) {
+            if (bloomBlurStrength === value) {
+                return;
+            }
+
+            bloomBlurStrength = value;
+
+            if (gameObject._bloom) {
+                gameObject._bloom.blurStrength = bloomBlurStrength;
+            }
+        },
+    })
+
+    Object.defineProperty(gameObject, 'bloomStrength', {
+        get: function () {
+            return bloomStrength;
+        },
+        set: function (value) {
+            if (bloomStrength === value) {
+                return;
+            }
+
+            bloomStrength = value;
+
+            if (gameObject._bloom) {
+                gameObject._bloom.strength = bloomStrength;
+            }
+        },
+    })
+
+    Object.defineProperty(gameObject, 'bloomSteps', {
+        get: function () {
+            return bloomSteps;
+        },
+        set: function (value) {
+            if (bloomSteps === value) {
+                return;
+            }
+
+            bloomSteps = value;
+
+            if (gameObject._bloom) {
+                gameObject._bloom.steps = bloomSteps;
+            }
+        },
+    })
+
+    gameObject.bloomColor = null;
+
+    return gameObject;
+}
+
+export default AddBloomProperties;

plugins/behaviors/effectproperties/AddEffectProperties.d.ts

@@ -1,3 +1,5 @@
+import AddBarrelProperties from './AddBarrelProperties';
+import AddBloomProperties from './AddBloomProperties';
 import AddGlowProperties from './AddGlowProperties';
 import AddGrayscaleProperties from './AddGrayscaleProperties';
 import AddShineProperties from './AddShineProperties';
@@ -6,11 +8,15 @@ export default AddEffectProperties;
 
 declare namespace AddEffectProperties {
     interface IConfig {
+        barrel?: boolean,
+        bloom?: boolean,
         glow?: boolean,
         grayscale?: boolean,
         shine?: boolean,
     }
     interface EffectPropertiesGameObject extends
+        AddBarrelProperties.BarrelGameObject,
+        AddBloomProperties.BloomGameObject,
         AddGlowProperties.GlowGameObject,
         AddGrayscaleProperties.GrayscaleGameObject,
         AddShineProperties.ShineGameObject { }

plugins/behaviors/effectproperties/AddEffectProperties.js

@@ -1,4 +1,5 @@
 import AddBarrelProperties from './AddBarrelProperties.js';
+import AddBloomProperties from './AddBloomProperties.js';
 import AddGlowProperties from './AddGlowProperties.js';
 import AddGrayscaleProperties from './AddGrayscaleProperties.js';
 import AddShineProperties from './AddShineProperties.js';
@@ -14,6 +15,10 @@ var AddEffectProperties = function (gameObject, config) {
         AddBarrelProperties(gameObject);
     }
 
+    if ((config === true) || GetValue(config, 'bloom', false)) {
+        AddBloomProperties(gameObject);
+    }
+
     if ((config === true) || GetValue(config, 'glow', false)) {
         AddGlowProperties(gameObject);
     }