From 6eebd6c1cf4969f4618feddbd39a0e241c58865c Mon Sep 17 00:00:00 2001
From: Richard Davey <rich@photonstorm.com>
Date: Tue, 12 Oct 2021 21:47:24 +0100
Subject: [PATCH] `GameObjects.Components.FX` is a new component that provides
 access to FX specific propertis and methods. The Image and Sprite Game
 Objects have this component by default.

---
 src/gameobjects/components/FX.js    | 62 +++++++++++++++++++++++++++++
 src/gameobjects/components/index.js |  1 +
 src/gameobjects/image/Image.js      |  4 +-
 src/gameobjects/sprite/Sprite.js    |  4 +-
 4 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 src/gameobjects/components/FX.js

diff --git a/src/gameobjects/components/FX.js b/src/gameobjects/components/FX.js
new file mode 100644
index 000000000..d9954018d
--- /dev/null
+++ b/src/gameobjects/components/FX.js
@@ -0,0 +1,62 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2020 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * Provides methods used for setting the FX values of a Game Object.
+ * Should be applied as a mixin and not used directly.
+ *
+ * @namespace Phaser.GameObjects.Components.FX
+ * @webglOnly
+ * @since 3.60.0
+ */
+
+var FX = {
+
+    /**
+     * The amount of extra padding to be applied to this Game Object
+     * when it is being rendered by a SpriteFX Pipeline.
+     *
+     * Lots of FX require additional spacing added to the texture the
+     * Game Object uses, for example a glow or shaddow effect, and this
+     * method allows you to control how much extra padding is included
+     * in addition to the texture size.
+     *
+     * @name Phaser.GameObjects.Components.FX#fxPadding
+     * @type {number}
+     * @default 0
+     * @since 3.60.0
+     */
+    fxPadding: 0,
+
+    /**
+     * Sets the amount of extra padding to be applied to this Game Object
+     * when it is being rendered by a SpriteFX Pipeline.
+     *
+     * Lots of FX require additional spacing added to the texture the
+     * Game Object uses, for example a glow or shaddow effect, and this
+     * method allows you to control how much extra padding is included
+     * in addition to the texture size.
+     *
+     * @method Phaser.GameObjects.Components.FX#setFXPadding
+     * @webglOnly
+     * @since 3.60.0
+     *
+     * @param {number} [padding=0] - The amount of padding to add to the texture.
+     *
+     * @return {this} This Game Object instance.
+     */
+    setFXPadding: function (padding)
+    {
+        if (padding === undefined) { padding = 0; }
+
+        this.fxPadding = padding;
+
+        return this;
+    }
+
+};
+
+module.exports = FX;
diff --git a/src/gameobjects/components/index.js b/src/gameobjects/components/index.js
index 41e0406a3..ab46063df 100644
--- a/src/gameobjects/components/index.js
+++ b/src/gameobjects/components/index.js
@@ -17,6 +17,7 @@ module.exports = {
     Crop: require('./Crop'),
     Depth: require('./Depth'),
     Flip: require('./Flip'),
+    FX: require('./FX'),
     GetBounds: require('./GetBounds'),
     Mask: require('./Mask'),
     Origin: require('./Origin'),
diff --git a/src/gameobjects/image/Image.js b/src/gameobjects/image/Image.js
index c03b6c2aa..b0e8475f5 100644
--- a/src/gameobjects/image/Image.js
+++ b/src/gameobjects/image/Image.js
@@ -28,6 +28,7 @@ var ImageRender = require('./ImageRender');
  * @extends Phaser.GameObjects.Components.BlendMode
  * @extends Phaser.GameObjects.Components.Depth
  * @extends Phaser.GameObjects.Components.Flip
+ * @extends Phaser.GameObjects.Components.FX
  * @extends Phaser.GameObjects.Components.GetBounds
  * @extends Phaser.GameObjects.Components.Mask
  * @extends Phaser.GameObjects.Components.Origin
@@ -54,6 +55,7 @@ var Image = new Class({
         Components.BlendMode,
         Components.Depth,
         Components.Flip,
+        Components.FX,
         Components.GetBounds,
         Components.Mask,
         Components.Origin,
@@ -83,8 +85,6 @@ var Image = new Class({
          */
         this._crop = this.resetCropObject();
 
-        this.fxPadding = 0;
-
         this.setTexture(texture, frame);
         this.setPosition(x, y);
         this.setSizeToFrame();
diff --git a/src/gameobjects/sprite/Sprite.js b/src/gameobjects/sprite/Sprite.js
index 2d0e78bc0..d238316cc 100644
--- a/src/gameobjects/sprite/Sprite.js
+++ b/src/gameobjects/sprite/Sprite.js
@@ -32,6 +32,7 @@ var SpriteRender = require('./SpriteRender');
  * @extends Phaser.GameObjects.Components.BlendMode
  * @extends Phaser.GameObjects.Components.Depth
  * @extends Phaser.GameObjects.Components.Flip
+ * @extends Phaser.GameObjects.Components.FX
  * @extends Phaser.GameObjects.Components.GetBounds
  * @extends Phaser.GameObjects.Components.Mask
  * @extends Phaser.GameObjects.Components.Origin
@@ -58,6 +59,7 @@ var Sprite = new Class({
         Components.BlendMode,
         Components.Depth,
         Components.Flip,
+        Components.FX,
         Components.GetBounds,
         Components.Mask,
         Components.Origin,
@@ -100,8 +102,6 @@ var Sprite = new Class({
          */
         this.anims = new AnimationState(this);
 
-        this.fxPadding = 0;
-
         this.setTexture(texture, frame);
         this.setPosition(x, y);
         this.setSizeToFrame();