From 2f33d326a833fbd85b3dfdaf33ddfe3c263d1e41 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Tue, 5 Sep 2023 15:22:33 +0200
Subject: [PATCH] [phaser] Closes #2356, only instantiate a single
 SceneRenderer for the whole game.

---
 spine-ts/index.html                           |  3 ++
 .../spine-phaser/example/add-existing.html    | 43 +++++++++++++++++++
 spine-ts/spine-phaser/src/SpinePlugin.ts      | 11 +++--
 3 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 spine-ts/spine-phaser/example/add-existing.html
diff --git a/spine-ts/index.html b/spine-ts/index.html
index f7c99f4c3..177fa1d2e 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -86,6 +86,9 @@
         <li>
           <a href="/spine-phaser/example/custom-spine-object-type.html">Custom object factory name</a>
         </li>
+        <li>
+          <a href="/spine-phaser/example/add-existing.html">Add existing object</a>
+        </li>
       </ul>
       <li>Player</li>
       <ul>
diff --git a/spine-ts/spine-phaser/example/add-existing.html b/spine-ts/spine-phaser/example/add-existing.html
new file mode 100644
index 000000000..5b115d6b9
--- /dev/null
+++ b/spine-ts/spine-phaser/example/add-existing.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
+    <script src="../dist/iife/spine-phaser.js"></script>
+    <title>Spine Phaser Example</title>
+</head>
+
+<body>
+    <h1>Add existing object</h1>
+</body>
+<script>
+    class BasicExample extends Phaser.Scene {
+        preload() {
+            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
+            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
+        }
+
+        create() {
+            const spineboy = this.add.spine(200, 500, "spineboy-data", "spineboy-atlas");
+            const spineboy2 = this.add.existing(new spine.SpineGameObject(this, this.spine, 500, 500, 'spineboy-data', "spineboy-atlas"));
+        }
+    }
+
+    new Phaser.Game({
+        type: Phaser.AUTO,
+        width: 800,
+        height: 600,
+        type: Phaser.WEBGL,
+        scene: [BasicExample],
+        plugins: {
+            scene: [
+                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
+            ]
+        }
+    });
+</script>
+
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/src/SpinePlugin.ts b/spine-ts/spine-phaser/src/SpinePlugin.ts
index 01abaf0f4..e9d5cbfb1 100644
--- a/spine-ts/spine-phaser/src/SpinePlugin.ts
+++ b/spine-ts/spine-phaser/src/SpinePlugin.ts
@@ -75,7 +75,10 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 	game: Phaser.Game;
 	private isWebGL: boolean;
 	gl: WebGLRenderingContext | null;
-	webGLRenderer: SceneRenderer | null;
+	static gameWebGLRenderer: SceneRenderer | null = null;
+	get webGLRenderer(): SceneRenderer | null {
+		return SpinePlugin.gameWebGLRenderer;
+	}
 	canvasRenderer: SkeletonRenderer | null;
 	phaserRenderer: Phaser.Renderer.Canvas.CanvasRenderer | Phaser.Renderer.WebGL.WebGLRenderer;
 	private skeletonDataCache: Phaser.Cache.BaseCache;
@@ -87,7 +90,6 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 		this.isWebGL = this.game.config.renderType === 2;
 		this.gl = this.isWebGL ? (this.game.renderer as Phaser.Renderer.WebGL.WebGLRenderer).gl : null;
 		this.phaserRenderer = this.game.renderer;
-		this.webGLRenderer = null;
 		this.canvasRenderer = null;
 		this.skeletonDataCache = this.game.cache.addCustom(SPINE_SKELETON_DATA_CACHE_KEY);
 		this.atlasCache = this.game.cache.addCustom(SPINE_ATLAS_CACHE_KEY);
@@ -141,11 +143,12 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 		pluginManager.registerGameObject((window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject);
 	}
 
+	static rendererId = 0;
 	boot () {
 		Skeleton.yDown = true;
 		if (this.isWebGL) {
-			if (!this.webGLRenderer) {
-				this.webGLRenderer = new SceneRenderer((this.game.renderer! as Phaser.Renderer.WebGL.WebGLRenderer).canvas, this.gl!, true);
+			if (!SpinePlugin.gameWebGLRenderer) {
+				SpinePlugin.gameWebGLRenderer = new SceneRenderer((this.game.renderer! as Phaser.Renderer.WebGL.WebGLRenderer).canvas, this.gl!, true);
 			}
 			this.onResize();
 			this.game.scale.on(Phaser.Scale.Events.RESIZE, this.onResize, this);
