UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 09:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[phaser] Loading and caching of skeleton data, atlas, textures, creation of skeletons, animation state in game object.

Browse Source 
# Conflicts:
#	spine-cpp/spine-cpp/src/spine/SkeletonBinary.cpp
#	spine-flutter/src/spine_flutter.cpp
This commit is contained in:
Mario Zechner 2022-12-12 15:24:02 +01:00
parent e805b6c8bc
commit 9ece84dc85
12 changed files with 368 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-cpp/spine-cpp/src/spine/SkeletonBinary.cpp
View File

@ -1256,6 +1256,7 @@ Animation *SkeletonBinary::readAnimation(const String &name, DataInput *input, S
switch (timelineType) {
case ATTACHMENT_DEFORM: {
VertexAttachment *attachment = static_cast<VertexAttachment *>(baseAttachment);
bool weighted = attachment->_bones.size() > 0;
Vector<float> &vertices = attachment->_vertices;
int deformLength = weighted ? (int) vertices.size() / 3 * 2 : (int) vertices.size();

2
spine-ts/package-lock.json generated
View File

@ -8419,7 +8419,9 @@
"version": "4.2.10",
"license": "LicenseRef-LICENSE",
"dependencies": {
"@esotericsoftware/spine-canvas": "^4.2.10",
"@esotericsoftware/spine-core": "^4.2.10",
"@esotericsoftware/spine-webgl": "^4.2.10",
"phaser": "^3.55.2"
}
},

7
spine-ts/spine-phaser/example/index.js
View File

@ -8,7 +8,7 @@ var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
// type: Phaser.CANVAS,
type: Phaser.CANVAS,
scene: {
preload: preload,
create: create,
@ -23,11 +23,12 @@ var config = {
var game = new Phaser.Game(config);
function preload () {
this.load.spine("raptor", "assets/raptor-pro.json", "assets/raptor.atlas", true);
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
this.load.spineAtlas("raptor-atlas", "assets/raptor.atlas");
}
function create () {
let plugin = this.spine;
var boy = this.add.spine(400, 600, 'raptor');
var boy = this.add.spine(400, 600, 'raptor-data', "raptor-atlas");
this.add.text(10, 10, "Spine", { font: '16px Courier', fill: '#00ff00' });
}

2
spine-ts/spine-phaser/package.json
View File

@ -31,6 +31,8 @@
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
"dependencies": {
"@esotericsoftware/spine-core": "^4.2.10",
"@esotericsoftware/spine-webgl": "^4.2.10",
"@esotericsoftware/spine-canvas": "^4.2.10",
"phaser": "^3.55.2"
}
}

13
spine-ts/spine-phaser/src/SpineFile.ts
View File

@ -1,13 +0,0 @@
import { SPINE_ATLAS_CACHE_KEY, SPINE_FILE_TYPE, SPINE_LOADER_TYPE } from "./keys";
export class SpineFile extends Phaser.Loader.MultiFile {
constructor(loader: Phaser.Loader.LoaderPlugin, key: string, jsonURL: string, atlasURL: string, premultipliedAlpha: boolean = false, jsonXhrSettings: Phaser.Types.Loader.XHRSettingsObject, atlasXhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
let json = new Phaser.Loader.FileTypes.JSONFile(loader, key, jsonURL, jsonXhrSettings);
let atlas = new Phaser.Loader.FileTypes.TextFile(loader, key, atlasURL, atlasXhrSettings);
atlas.cache = loader.cacheManager.custom[SPINE_ATLAS_CACHE_KEY];
super(loader, SPINE_FILE_TYPE, key, [json, atlas]);
}
addToCache() {
}
}

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

@ -1,6 +1,7 @@
import { SPINE_GAME_OBJECT_TYPE } from "./keys";
import { SpinePlugin } from "./SpinePlugin";
import { ComputedSizeMixin, DepthMixin, FlipMixin, ScrollFactorMixin, TransformMixin, VisibleMixin } from "./mixins";
import { AnimationState, AnimationStateData, Skeleton } from "@esotericsoftware/spine-core";
class BaseSpineGameObject extends Phaser.GameObjects.GameObject {
constructor (scene: Phaser.Scene, type: string) {
@ -14,12 +15,23 @@ interface SpineContainer {
export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(BaseSpineGameObject)))))) {
blendMode = -1;
skeleton: Skeleton | null = null;
animationState: AnimationState | null = null;
constructor(scene: Phaser.Scene, plugin: SpinePlugin, x: number, y: number, key: string) {
constructor (scene: Phaser.Scene, private plugin: SpinePlugin, x: number, y: number, dataKey: string, atlasKey: string) {
super(scene, SPINE_GAME_OBJECT_TYPE);
this.setPosition(x, y);
}
setSkeleton (dataKey: string, atlasKey: string) {
if (dataKey && atlasKey) {
this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
this.animationState = new AnimationState(new AnimationStateData(this.skeleton.data));
} else {
this.skeleton = null;
}
}
preUpdate (time: number, delta: number) {
}

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

@ -28,33 +28,31 @@
*****************************************************************************/
import Phaser from "phaser";
import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_FILE_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_TEXTURE_CACHE_KEY } from "./keys";
import { SceneRenderer, SkeletonDebugRenderer, SkeletonRenderer } from "@esotericsoftware/spine-webgl"
import { SpineFile } from "./SpineFile";
import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_ATLAS_TEXTURE_CACHE_KEY, 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, SkeletonData, SkeletonDebugRenderer, SkeletonJson, SkeletonRenderer, TextureAtlas } from "@esotericsoftware/spine-webgl"
import { SpineGameObject } from "./SpineGameObject";
import { CanvasTexture } from "@esotericsoftware/spine-canvas";
export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
game: Phaser.Game;
isWebGL: boolean;
atlasCache: Phaser.Cache.BaseCache;
spineTextureCache: Phaser.Cache.BaseCache;
jsonCache: Phaser.Cache.BaseCache;
textures: Phaser.Textures.TextureManager;
gl: WebGLRenderingContext | null;
textureManager: Phaser.Textures.TextureManager;
phaserRenderer: Phaser.Renderer.Canvas.CanvasRenderer | Phaser.Renderer.WebGL.WebGLRenderer | null;
sceneRenderer: SceneRenderer | null;
skeletonDataCache: Phaser.Cache.BaseCache;
atlasCache: Phaser.Cache.BaseCache;
constructor (scene: Phaser.Scene, pluginManager: Phaser.Plugins.PluginManager, pluginKey: string) {
super(scene, pluginManager, pluginKey);
var game = this.game = pluginManager.game;
this.isWebGL = this.game.config.renderType === 2;
this.atlasCache = this.game.cache.addCustom(SPINE_ATLAS_CACHE_KEY);
this.spineTextureCache = this.game.cache.addCustom(SPINE_TEXTURE_CACHE_KEY);
this.jsonCache = this.game.cache.json;
this.textures = this.game.textures;
this.gl = this.isWebGL ? (this.game.renderer as Phaser.Renderer.WebGL.WebGLRenderer).gl : null;
this.textureManager = this.game.textures;
this.phaserRenderer = this.game.renderer;
this.sceneRenderer = null;
this.skeletonDataCache = this.game.cache.addCustom(SPINE_SKELETON_DATA_CACHE_KEY);
this.atlasCache = this.game.cache.addCustom(SPINE_ATLAS_CACHE_KEY);
if (!this.phaserRenderer) {
this.phaserRenderer = {
@ -67,34 +65,53 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
} as unknown as Phaser.Renderer.Canvas.CanvasRenderer;
}
let fileCallback = function (this: any, key: string,
jsonURL: string,
atlasURL: string,
premultipliedAlpha: boolean,
jsonXhrSettings: Phaser.Types.Loader.XHRSettingsObject,
atlasXhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
let file = new SpineFile(this as any, key, jsonURL, atlasURL, premultipliedAlpha, jsonXhrSettings, atlasXhrSettings);
let skeletonJsonFileCallback = function (this: any, key: string,
url: string,
xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
let file = new SpineSkeletonDataFile(this as any, key, url, SpineSkeletonDataFileType.json, xhrSettings);
this.addFile(file.files);
return this;
};
pluginManager.registerFileType("spineJson", skeletonJsonFileCallback, scene);
let skeletonBinaryFileCallback = function (this: any, key: string,
url: string,
xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
let file = new SpineSkeletonDataFile(this as any, key, url, SpineSkeletonDataFileType.binary, xhrSettings);
this.addFile(file.files);
return this;
};
pluginManager.registerFileType("spineBinary", skeletonBinaryFileCallback, scene);
let atlasFileCallback = function (this: any, key: string,
url: string,
premultipliedAlpha: boolean,
xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
let file = new SpineAtlasFile(this as any, key, url, premultipliedAlpha, xhrSettings);
this.addFile(file.files);
return this;
};
pluginManager.registerFileType("spineAtlas", atlasFileCallback, scene);
let self = this;
let addSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, x: number, y: number, key: string) {
let gameObject = new SpineGameObject(scene, self, x, y, key);
let addSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, x: number, y: number, dataKey: string, atlasKey: string) {
let gameObject = new SpineGameObject(scene, self, x, y, dataKey, atlasKey);
this.displayList.add(gameObject);
this.updateList.add(gameObject);
return gameObject;
};
let makeSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, config: any, addToScene: boolean) {
let key = config.key ? config.key : null;
let gameObject = new SpineGameObject(this.scene, self, 0, 0, key);
let dataKey = config.dataKey ? config.dataKey : null;
let atlasKey = config.atlasKey ? config.atlasKey : null;
let gameObject = new SpineGameObject(this.scene, self, 0, 0, dataKey, atlasKey);
if (addToScene !== undefined) {
config.add = addToScene;
}
Phaser.GameObjects.BuildGameObject(this.scene, gameObject, config);
}
pluginManager.registerFileType(SPINE_FILE_TYPE, fileCallback, scene);
pluginManager.registerGameObject(SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject);
}
@ -158,5 +175,139 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
this.pluginManager.removeGameObject(SPINE_CONTAINER_TYPE, true, true);
if (this.sceneRenderer) this.sceneRenderer.dispose();
}
createSkeleton (dataKey: string, atlasKey: string) {
let atlas: TextureAtlas;
if (this.atlasCache.exists(atlasKey)) {
atlas = this.atlasCache.get(atlasKey);
} else {
let atlasFile = this.game.cache.text.get(atlasKey) as string;
atlas = new TextureAtlas(atlasFile);
if (this.isWebGL) {
let gl = this.gl!;
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
for (let atlasPage of atlas.pages) {
atlasPage.setTexture(new GLTexture(gl, this.textureManager.get(atlasKey + "!" + atlasPage.name).getSourceImage() as HTMLImageElement | ImageBitmap, false));
}
} else {
for (let atlasPage of atlas.pages) {
atlasPage.setTexture(new CanvasTexture(this.textureManager.get(atlasKey + "!" + atlasPage.name).getSourceImage() as HTMLImageElement | ImageBitmap));
}
}
this.atlasCache.add(atlasKey, atlas);
}
let skeletonData: SkeletonData;
if (this.skeletonDataCache.exists(dataKey)) {
skeletonData = this.skeletonDataCache.get(dataKey);
} else {
if (this.game.cache.json.exists(dataKey)) {
let jsonFile = this.game.cache.json.get(dataKey) as any;
let json = new SkeletonJson(new AtlasAttachmentLoader(atlas));
skeletonData = json.readSkeletonData(jsonFile);
} else {
let binaryFile = this.game.cache.binary.get(dataKey) as ArrayBuffer;
let binary = new SkeletonJson(new AtlasAttachmentLoader(atlas));
skeletonData = binary.readSkeletonData(binaryFile);
}
this.skeletonDataCache.add(dataKey, skeletonData);
}
return new Skeleton(skeletonData);
}
}
export enum SpineSkeletonDataFileType {
json,
binary
}
export class SpineSkeletonDataFile extends Phaser.Loader.MultiFile {
constructor (loader: Phaser.Loader.LoaderPlugin, key: string, url: string, public fileType: SpineSkeletonDataFileType, xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
let file = null;
let isJson = fileType == SpineSkeletonDataFileType.json;
if (isJson) {
file = new Phaser.Loader.FileTypes.JSONFile(loader, {
key: key,
url: url,
extension: "json",
xhrSettings: xhrSettings,
} as Phaser.Types.Loader.FileTypes.JSONFileConfig);
} else {
file = new Phaser.Loader.FileTypes.BinaryFile(loader, {
key: key,
url: url,
extension: "skel",
xhrSettings: xhrSettings,
} as Phaser.Types.Loader.FileTypes.BinaryFileConfig);
}
super(loader, SPINE_SKELETON_DATA_FILE_TYPE, key, [file]);
}
onFileComplete (file: Phaser.Loader.File) {
this.pending--;
}
addToCache () {
if (this.isReadyToProcess()) this.files[0].addToCache();
}
}
export class SpineAtlasFile extends Phaser.Loader.MultiFile {
constructor (loader: Phaser.Loader.LoaderPlugin, key: string, url: string, public premultipliedAlpha: boolean, xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
super(loader, SPINE_ATLAS_FILE_TYPE, key, [
new Phaser.Loader.FileTypes.TextFile(loader, {
key: key,
url: url,
xhrSettings: xhrSettings,
extension: "atlas"
})
]);
}
onFileComplete (file: Phaser.Loader.File) {
if (this.files.indexOf(file) != -1) {
this.pending--;
if (file.type == "text") {
var lines = file.data.split('\n');
let textures = [];
textures.push(lines[0]);
for (var t = 1; t < lines.length; t++) {
var line = lines[t];
if (line.trim() === '' && t < lines.length - 1) {
line = lines[t + 1];
textures.push(line);
}
}
let basePath = file.src.match(/^.*\//);
for (var i = 0; i < textures.length; i++) {
var url = basePath + textures[i];
var key = file.key + "!" + textures[i];
var image = new Phaser.Loader.FileTypes.ImageFile(this.loader, key, url);
if (!this.loader.keyExists(image)) {
this.addToMultiFile(image);
this.loader.addFile(image);
}
}
}
}
}
addToCache () {
if (this.isReadyToProcess()) {
let textureManager = this.loader.textureManager;
for (let file of this.files) {
if (file.type == "image") {
if (!textureManager.exists(file.key)) {
textureManager.addImage(file.key, file.data);
}
} else {
file.addToCache();
}
}
}
}
}

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

@ -1,6 +1,5 @@
export * from "./require-shim"
export * from "./SpinePlugin"
export * from "./SpineFile"
export * from "./mixins"
export * from "@esotericsoftware/spine-core";
export * from "@esotericsoftware/spine-canvas";

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

@ -1,6 +1,8 @@
export const SPINE_SKELETON_FILE_CACHE_KEY = "esotericsoftware.spine.skeletonFile.cache";
export const SPINE_ATLAS_CACHE_KEY = "esotericsoftware.spine.atlas.cache";
export const SPINE_TEXTURE_CACHE_KEY = "esotericsoftware.spine.texture.cache";
export const SPINE_ATLAS_TEXTURE_CACHE_KEY = "esotericsoftware.spine.atlas.texture.cache";
export const SPINE_LOADER_TYPE = "spine";
export const SPINE_FILE_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";