首頁 探索 說明
登入
archive
/
spine-runtimes
镜像来自 https://github.com/EsotericSoftware/spine-runtimes.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

[phaser] Closes #2333, users can set the name of the game object factory function via window.SPINE_GAME_OBJECT_TYPE, see custom-spine-object-type.html.

Mario Zechner 2 年之前
父節點
e404d0bede
當前提交
6ec9637ed6
共有 5 個文件被更改，包括 56 次插入 和 6 次删除
分割檢視 顯示文件統計
  1. 3 0
      spine-ts/index.html
  2. 49 0
      spine-ts/spine-phaser/example/custom-spine-object-type.html
  3. 1 1
      spine-ts/spine-phaser/src/SpineGameObject.ts
  4. 3 4
      spine-ts/spine-phaser/src/SpinePlugin.ts
  5. 0 1
      spine-ts/spine-phaser/src/keys.ts

+ 3 - 0
spine-ts/index.html
查看文件 

@@ -83,6 +83,9 @@
 
             >Render to texture test</a
 
           >
 
         </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/custom-spine-object-type.html">Custom object type</a>
 
+        </li>
 
       </ul>
 
       <li>Player</li>
 
       <ul>

+ 49 - 0
spine-ts/spine-phaser/example/custom-spine-object-type.html
查看文件 

@@ -0,0 +1,49 @@
 
+<!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/[email protected]/dist/phaser.js"></script>
 
+    <script src="../dist/iife/spine-phaser.js"></script>
 
+    <title>Spine Phaser Example</title>
 
+</head>
 
+
 
+<body>
 
+    <h1>Basic example</h1>
 
+</body>
 
+<script>
 
+    window.SPINE_GAME_OBJECT_TYPE = "spineOfficial";
 
+
 
+    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.spineOfficial(400, 500, 'spineboy-data', "spineboy-atlas");
 
+            spineboy.setInteractive();
 
+            spineboy.displayWidth = 200;
 
+            spineboy.displayHeight = spineboy.height / spineboy.width * 200;
 
+            this.input.enableDebug(spineboy, 0xff00ff);
 
+            spineboy.animationState.setAnimation(0, "walk", true);
 
+        }
 
+    }
 
+
 
+    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>

+ 1 - 1
spine-ts/spine-phaser/src/SpineGameObject.ts
查看文件 

@@ -212,7 +212,7 @@ export class SpineGameObject extends DepthMixin(
 
     atlasKey: string,
 
     public boundsProvider: SpineGameObjectBoundsProvider = new SetupPoseBoundsProvider()
 
   ) {
 
-    super(scene, SPINE_GAME_OBJECT_TYPE);
 
+    super(scene, (window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE);
 
     this.setPosition(x, y);
 
 
     this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);

+ 3 - 4
spine-ts/spine-phaser/src/SpinePlugin.ts
查看文件 

@@ -28,7 +28,7 @@
 
  *****************************************************************************/
 
 
 import Phaser from "phaser";
 
-import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_SKELETON_DATA_FILE_TYPE, SPINE_ATLAS_FILE_TYPE, SPINE_SKELETON_FILE_CACHE_KEY as SPINE_SKELETON_DATA_CACHE_KEY } from "./keys";
 
+import { SPINE_ATLAS_CACHE_KEY, SPINE_GAME_OBJECT_TYPE, SPINE_SKELETON_DATA_FILE_TYPE, SPINE_ATLAS_FILE_TYPE, SPINE_SKELETON_FILE_CACHE_KEY as SPINE_SKELETON_DATA_CACHE_KEY } from "./keys";
 
 import { AtlasAttachmentLoader, GLTexture, SceneRenderer, Skeleton, SkeletonBinary, SkeletonData, SkeletonJson, TextureAtlas } from "@esotericsoftware/spine-webgl"
 
 import { SpineGameObject, SpineGameObjectBoundsProvider } from "./SpineGameObject";
 
 import { CanvasTexture, SkeletonRenderer } from "@esotericsoftware/spine-canvas";
 
@@ -138,7 +138,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 
 			}
 
 			return Phaser.GameObjects.BuildGameObject(this.scene, gameObject, config);
 
 		}
 
-		pluginManager.registerGameObject(SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject);
 
+		pluginManager.registerGameObject((window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject);
 
 	}
 
 
 	boot () {
 
@@ -188,8 +188,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 
 	}
 
 
 	gameDestroy () {
 
-		this.pluginManager.removeGameObject(SPINE_GAME_OBJECT_TYPE, true, true);
 
-		this.pluginManager.removeGameObject(SPINE_CONTAINER_TYPE, true, true);
 
+		this.pluginManager.removeGameObject((window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE, true, true);
 
 		if (this.webGLRenderer) this.webGLRenderer.dispose();
 
 	}

+ 0 - 1
spine-ts/spine-phaser/src/keys.ts
查看文件 

@@ -33,4 +33,3 @@ export const SPINE_LOADER_TYPE = "spine";
 
 export const SPINE_SKELETON_DATA_FILE_TYPE = "spineSkeletonData";
 
 export const SPINE_ATLAS_FILE_TYPE = "spineAtlasData";
 
 export const SPINE_GAME_OBJECT_TYPE = "spine";
 
-export const SPINE_CONTAINER_TYPE = "spineContainer";