UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-13 02:28:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

[phaser] Rework skeleton data loading. Cache based on data + atlas key.

Browse Source
This commit is contained in:
Mario Zechner 2023-04-25 14:33:22 +02:00
parent 125d7c9903
commit f8837604f5
4 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spine-ts/package.json
View File

@ -18,7 +18,7 @@
"build:phaser": "npx esbuild --bundle spine-phaser/src/index.ts --tsconfig=spine-phaser/tsconfig.json --sourcemap --outfile=spine-phaser/dist/iife/spine-phaser.js --external:Phaser --alias:phaser=Phaser --format=iife --global-name=spine",
"build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json --sourcemap --outfile=spine-threejs/dist/iife/spine-threejs.js --external:three --format=iife --global-name=spine",
"minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-phaser/dist/iife/spine-phaser.js --outfile=spine-phaser/dist/iife/spine-phaser.min.js && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js",
"dev": "concurrently \"npx live-server --no-browser\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:phaser\" \"npm run dev:player\" \"npm run dev:threejs\"",
"dev": "concurrently \"npx live-server\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:phaser\" \"npm run dev:player\" \"npm run dev:threejs\"",
"dev:modules": "npm run build:modules -- --watch",
"dev:canvas": "npm run build:canvas -- --watch",
"dev:webgl": "npm run build:webgl -- --watch",

20
spine-ts/spine-phaser/example/basic-example.html
View File

@ -6,6 +6,7 @@
<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>
@ -21,15 +22,15 @@
scene: {
preload: preload,
create: create,
pack: {
files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
]
}
},
plugins: {
scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
]
}
};
let game = new Phaser.Game(config);
const game = new Phaser.Game(config);
function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -37,9 +38,14 @@
}
function create() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
const spineboy2 = this.make.spine({
x: 200, y: 500, dataKey: "spineboy-data", atlasKey: "spineboy-atlas"
});
this.add(spineboy2);
}
</script>

4
spine-ts/spine-phaser/example/camera-pipeline-test.html
View File

@ -84,7 +84,7 @@
}
}
let game = new Phaser.Game(config);
const game = new Phaser.Game(config);
function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -100,7 +100,7 @@
// is needed.
this.add.sprite(0, 0, 'img');
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);

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

@ -94,7 +94,6 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
};
pluginManager.registerFileType("spineBinary", skeletonBinaryFileCallback, scene);
let atlasFileCallback = function (this: any, key: string,
url: string,
premultipliedAlpha: boolean,
@ -184,7 +183,11 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
return atlasFile.premultipliedAlpha;
}
createSkeleton (dataKey: string, atlasKey: string) {
createSkeleton (dataKey: string, atlasKey: string) {
return new Skeleton(this.createSkeletonData(dataKey, atlasKey));
}
createAtlas(atlasKey: string) {
let atlas: TextureAtlas;
if (this.atlasCache.exists(atlasKey)) {
atlas = this.atlasCache.get(atlasKey);
@ -204,10 +207,15 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
}
this.atlasCache.add(atlasKey, atlas);
}
return atlas;
}
let skeletonData: SkeletonData;
if (this.skeletonDataCache.exists(dataKey)) {
skeletonData = this.skeletonDataCache.get(dataKey);
createSkeletonData(dataKey: string, atlasKey: string) {
const atlas = this.createAtlas(atlasKey)
const combinedKey = dataKey + atlasKey;
let skeletonData: SkeletonData;
if (this.skeletonDataCache.exists(combinedKey)) {
skeletonData = this.skeletonDataCache.get(combinedKey);
} else {
if (this.game.cache.json.exists(dataKey)) {
let jsonFile = this.game.cache.json.get(dataKey) as any;
@ -218,10 +226,9 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
let binary = new SkeletonBinary(new AtlasAttachmentLoader(atlas));
skeletonData = binary.readSkeletonData(new Uint8Array(binaryFile));
}
this.skeletonDataCache.add(dataKey, skeletonData);
this.skeletonDataCache.add(combinedKey, skeletonData);
}
return new Skeleton(skeletonData);
return skeletonData;
}
}