UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[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.

Browse Source
This commit is contained in:
Mario Zechner 2023-09-04 10:35:24 +02:00
parent e404d0bede
commit 6ec9637ed6
5 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
spine-ts/index.html
View File

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

49
spine-ts/spine-phaser/example/custom-spine-object-type.html Normal file
View File

@ -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/phaser@3.55.2/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>

2
spine-ts/spine-phaser/src/SpineGameObject.ts
View File

@ -212,7 +212,7 @@ export class SpineGameObject extends DepthMixin(
atlasKey: string, atlasKey: string,
public boundsProvider: SpineGameObjectBoundsProvider = new SetupPoseBoundsProvider() 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.setPosition(x, y);
this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey); this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);

7
spine-ts/spine-phaser/src/SpinePlugin.ts
View File

@ -28,7 +28,7 @@
*****************************************************************************/ *****************************************************************************/
import Phaser from "phaser"; 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 { AtlasAttachmentLoader, GLTexture, SceneRenderer, Skeleton, SkeletonBinary, SkeletonData, SkeletonJson, TextureAtlas } from "@esotericsoftware/spine-webgl"
import { SpineGameObject, SpineGameObjectBoundsProvider } from "./SpineGameObject"; import { SpineGameObject, SpineGameObjectBoundsProvider } from "./SpineGameObject";
import { CanvasTexture, SkeletonRenderer } from "@esotericsoftware/spine-canvas"; 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); 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 () { boot () {
@ -188,8 +188,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
} }
gameDestroy () { gameDestroy () {
this.pluginManager.removeGameObject(SPINE_GAME_OBJECT_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);
this.pluginManager.removeGameObject(SPINE_CONTAINER_TYPE, true, true);
if (this.webGLRenderer) this.webGLRenderer.dispose(); if (this.webGLRenderer) this.webGLRenderer.dispose();
} }

1
spine-ts/spine-phaser/src/keys.ts
View File

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