From 1fa400b431288c91271ef32544ed04ad161bdc19 Mon Sep 17 00:00:00 2001
From: Richard Davey <rich@photonstorm.com>
Date: Mon, 6 Feb 2023 16:44:32 +0000
Subject: [PATCH] The Spine Plugin `add` and `make` functions didn't clear and
 rebind the WebGL pipeline. This could cause two different visual issues: The
 first is that a Phaser Game Object (such as a Sprite) could be seen to change
 its texture to display the Spine atlas texture instead for a single frame,
 and then on the next pass revert back to normal again. The second issue is
 that if the Spine skeleton wasn't added to the display list, but just created
 (via `addToScene: false`) then the Sprite would take on the texture frame
 entirely from that point on. Fix #6362

---
 plugins/spine/src/SpinePlugin.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/plugins/spine/src/SpinePlugin.js b/plugins/spine/src/SpinePlugin.js
index 70c5ee8a9..d51afe2ea 100644
--- a/plugins/spine/src/SpinePlugin.js
+++ b/plugins/spine/src/SpinePlugin.js
@@ -319,14 +319,26 @@ var SpinePlugin = new Class({
             };
         }
 
+        var isWebGL = this.isWebGL;
+
         var add = function (x, y, key, animationName, loop)
         {
+            if (isWebGL)
+            {
+                this.scene.sys.renderer.pipelines.clear();
+            }
+
             var spinePlugin = this.scene.sys[pluginKey];
             var spineGO = new SpineGameObject(this.scene, spinePlugin, x, y, key, animationName, loop);
 
             this.displayList.add(spineGO);
             this.updateList.add(spineGO);
 
+            if (isWebGL)
+            {
+                this.scene.sys.renderer.pipelines.rebind();
+            }
+
             return spineGO;
         };
 
@@ -334,6 +346,11 @@ var SpinePlugin = new Class({
         {
             if (config === undefined) { config = {}; }
 
+            if (isWebGL)
+            {
+                this.scene.sys.renderer.pipelines.clear();
+            }
+
             var key = GetValue(config, 'key', null);
             var animationName = GetValue(config, 'animationName', null);
             var loop = GetValue(config, 'loop', false);
@@ -364,6 +381,11 @@ var SpinePlugin = new Class({
                 spineGO.setAttachment(slotName, attachmentName);
             }
 
+            if (isWebGL)
+            {
+                this.scene.sys.renderer.pipelines.rebind();
+            }
+
             return spineGO.refresh();
         };
 
@@ -654,7 +676,7 @@ var SpinePlugin = new Class({
      * @param {Phaser.Types.Loader.XHRSettingsObject} [textureXhrSettings] - An XHR Settings configuration object for the Spine json file. Used in replacement of the Loaders default XHR Settings.
      * @param {Phaser.Types.Loader.XHRSettingsObject} [atlasXhrSettings] - An XHR Settings configuration object for the Spine atlas file. Used in replacement of the Loaders default XHR Settings.
      * @param {object} [settings] - An external Settings configuration object { prefix: '' }
-     * 
+     *
      * @return {Phaser.Loader.LoaderPlugin} The Loader instance.
      */
     spineFileCallback: function (key, jsonURL, atlasURL, preMultipliedAlpha, jsonXhrSettings, atlasXhrSettings, settings)