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

[ts][pixi-v7][pixi-v8] Allow asset loaders to be explicitly requested. Close #2876, #2744.

Browse Source 
This allows to easily load assets from base64 or blob.
This commit is contained in:
Davide Tantillo 2025-07-11 11:04:28 +02:00
parent 5b5326d99e
commit 8afc6426f8
7 changed files with 239 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/index.html
View File

@ -45,6 +45,7 @@
<li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a> - (<a href="/spine-pixi-v7/example/slot-objects.html">v7</a>)</li>
<li><a href="/spine-pixi-v8/example/slot-objects-scale-rotation.html">Slot Objects (Rotation, scale test)</a> - (<a href="/spine-pixi-v7/example/slot-objects-scale-rotation.html">v7</a>)</li>
<li><a href="/spine-pixi-v8/example/bounds.html">Bounds</a> - (<a href="/spine-pixi-v7/example/bounds.html">v7</a>)</li>
<li><a href="/spine-pixi-v8/example/inline-loading.html">Inline loading</a> - (<a href="/spine-pixi-v7/example/inline-loading.html">v7</a>)</li>
<li><a href="/spine-pixi-v8/example/bunnymark.html?count=500&renderer=webgpu">Bunny Mark</a> - (<a href="/spine-pixi-v7/example/bunnymark.html?count=500">v7</a>)</li>
</ul>
<li>Phaser</li>

103
spine-ts/spine-pixi-v7/example/inline-loading.html Normal file
View File

@ -0,0 +1,103 @@
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.3/dist/pixi.js"></script>
<script src="../dist/iife/spine-pixi-v7.js"></script>
<link rel="stylesheet" href="../../index.css">
</head>
<body>
<script>
(async function () {
await Promise.resolve();
var app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
});
document.body.appendChild(app.view);
// BASE64 DATA
const base64Data = {
atlas: "data:text/plain;base64,aW5saW5lLnBuZwpzaXplOjE2LDE2CmZpbHRlcjpMaW5lYXIsTGluZWFyCnBtYTp0cnVlCmRvdApib3VuZHM6MCwwLDEsMQo=",
skel: "data:application/octet-stream;base64,/B8S/IqaXgYHNC4yLjM5wkgAAMJIAABCyAAAQsgAAELIAAAAAQRkb3QCBXJvb3QAAAAAAAAAAAAAAAA/gAAAP4AAAAAAAAAAAAAAAAAAAAAABGRvdAAAAAAAAAAAAAAAAABCyAAAQsgAAAAAAAAAAAAAAAAAAAAAAQRkb3QB//////////8BAAAAAAABAAEBACWwfdcAAAAAP4AAAD+AAAA/gAAAP4AAAAAAAQphbmltYXRpb24BAQABAQMAAAAAAP////8/gAAA/wAA/wBAAAAA/////wAAAAAAAAAAAA==",
json: "data:application/json;base64,ew0KInNrZWxldG9uIjogeyAiaGFzaCI6ICJkZnFNKy9hYStzNCIsICJzcGluZSI6ICI0LjIuNDMiLCAiaW1hZ2VzIjogIi9Vc2Vycy9kYXZpZGV0YW50aWxsby9Eb3dubG9hZHMvaW1hZ2VzIiwgImF1ZGlvIjogIi4vYXVkaW8iIH0sDQoiYm9uZXMiOiBbDQoJeyAibmFtZSI6ICJyb290IiB9LA0KCXsgIm5hbWUiOiAiZG90IiwgInBhcmVudCI6ICJyb290IiwgInNjYWxlWCI6IDEwMCwgInNjYWxlWSI6IDEwMCB9DQpdLA0KInNsb3RzIjogWw0KCXsgIm5hbWUiOiAiZG90IiwgImJvbmUiOiAiZG90IiwgImF0dGFjaG1lbnQiOiAiZG90IiB9DQpdLA0KInNraW5zIjogWw0KCXsNCgkJIm5hbWUiOiAiZGVmYXVsdCIsDQoJCSJhdHRhY2htZW50cyI6IHsNCgkJCSJkb3QiOiB7DQoJCQkJImRvdCI6IHsgIndpZHRoIjogMSwgImhlaWdodCI6IDEgfQ0KCQkJfQ0KCQl9DQoJfQ0KXSwNCiJhbmltYXRpb25zIjogew0KCSJhbmltYXRpb24iOiB7DQoJCSJzbG90cyI6IHsNCgkJCSJkb3QiOiB7DQoJCQkJInJnYmEiOiBbDQoJCQkJCXsgImNvbG9yIjogImZmZmZmZmZmIiB9LA0KCQkJCQl7ICJ0aW1lIjogMSwgImNvbG9yIjogImZmMDAwMGZmIiB9LA0KCQkJCQl7ICJ0aW1lIjogMiwgImNvbG9yIjogImZmZmZmZmZmIiB9DQoJCQkJXQ0KCQkJfQ0KCQl9DQoJfQ0KfQ0KfQ==",
png: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRF////p8QbyAAAAApJREFUeJxjZAAAAAQAAiFkrWoAAAAASUVORK5CYII="
}
const textureBase64 = await PIXI.Assets.load({
alias: 'textureBase64',
loadParser: 'loadTextures',
src: base64Data.png,
// data: { alphaMode: PIXI.ALPHA_MODES.PMA } // if texture is pma uncomment this and set as pixi preference (preferCreateImageBitmap: false)
})
PIXI.Assets.add({
alias: "atlasBase64",
loadParser: "spineTextureAtlasLoader",
src: base64Data.atlas,
data: { images: { "inline.png": textureBase64.baseTexture } }
})
PIXI.Assets.add({
alias: "skelBase64",
loadParser: "spineSkeletonLoader",
// loadParser: "loadJson", // use "loadJson", if asset is json
src: base64Data.skel,
})
await PIXI.Assets.load(["skelBase64", "atlasBase64"]);
// creating spine game object with base64 data
const base64GameObject = spine.Spine.from({skeleton: "skelBase64", atlas: "atlasBase64" });
app.stage.addChild(base64GameObject);
base64GameObject.state.setAnimation(0, "animation", true);
base64GameObject.position.set(window.innerWidth / 3, window.innerHeight / 2);
// BLOB DATA
// now transform base64 into blob to show how to load blob
const blobData = {
atlas: await fetch(base64Data.atlas).then(res => res.blob()),
skel: await fetch(base64Data.skel).then(res => res.blob()),
json: await fetch(base64Data.json).then(res => res.blob()),
png: await fetch(base64Data.png).then(res => res.blob()),
}
const textureBlob = await PIXI.Assets.load({
alias: 'textureBlob',
loadParser: 'loadTextures',
src: URL.createObjectURL(blobData.png),
// data: { alphaMode: PIXI.ALPHA_MODES.PMA } // if texture is pma uncomment this and set as pixi preference (preferCreateImageBitmap: false)
})
PIXI.Assets.add({
alias: "atlasBlob",
loadParser: "spineTextureAtlasLoader",
src: URL.createObjectURL(blobData.atlas),
data: { images: { "inline.png": textureBlob.baseTexture } }
})
PIXI.Assets.add({
alias: "skelBlob",
// loadParser: "spineSkeletonLoader", // use "spineSkeletonLoader", if asset is skel
loadParser: "loadJson",
src: URL.createObjectURL(blobData.json),
})
await PIXI.Assets.load(["skelBlob", "atlasBlob"]);
// creating spine game object
const blobGameObject = spine.Spine.from({skeleton: "skelBase64", atlas: "atlasBase64" });
app.stage.addChild(blobGameObject);
blobGameObject.state.setAnimation(0, "animation", true);
blobGameObject.position.set(window.innerWidth / 3 * 2, window.innerHeight / 2);
})();
</script>
</body>
</html>

14
spine-ts/spine-pixi-v7/src/assets/atlasLoader.ts
View File

@ -29,7 +29,7 @@
import { TextureAtlas } from "@esotericsoftware/spine-core";
import { SpineTexture } from "../SpineTexture.js";
import type { AssetExtension, Loader, UnresolvedAsset } from "@pixi/assets";
import type { AssetExtension, Loader, ResolvedAsset, UnresolvedAsset } from "@pixi/assets";
import { Assets, copySearchParams } from "@pixi/assets";
import { LoaderParserPriority, checkExtension } from "@pixi/assets";
import type { Texture } from "@pixi/core";
@ -37,6 +37,8 @@ import { ALPHA_MODES, ExtensionType, settings, utils, BaseTexture, extensions }
type RawAtlas = string;
const loaderName = "spineTextureAtlasLoader";
const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtlasMetadata> = {
extension: ExtensionType.Asset,
@ -53,10 +55,11 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
},
loader: {
name: loaderName,
extension: {
type: ExtensionType.LoadParser,
priority: LoaderParserPriority.Normal,
name: "spineTextureAtlasLoader",
name: loaderName,
},
test(url: string): boolean {
@ -71,11 +74,12 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
return txt;
},
testParse(asset: unknown, options: {src: string}): Promise<boolean> {
const isExtensionRight = checkExtension(options.src, ".atlas");
testParse(asset: unknown, options: ResolvedAsset): Promise<boolean> {
const isExtensionRight = checkExtension(options.src!, ".atlas");
const isString = typeof asset === "string";
const isExplicitLoadParserSet = options.loadParser === loaderName;
return Promise.resolve(isExtensionRight && isString);
return Promise.resolve((isExtensionRight || isExplicitLoadParserSet) && isString);
},
unload(atlas: TextureAtlas) {

15
spine-ts/spine-pixi-v7/src/assets/skeletonLoader.ts
View File

@ -27,13 +27,15 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import type { AssetExtension } from "@pixi/assets";
import type { AssetExtension, ResolvedAsset } from "@pixi/assets";
import { LoaderParserPriority, checkExtension } from "@pixi/assets";
import { ExtensionType, settings, extensions } from "@pixi/core";
type SkeletonJsonAsset = any;
type SkeletonBinaryAsset = Uint8Array;
const loaderName = "spineSkeletonLoader";
function isJson(resource: any): resource is SkeletonJsonAsset {
return resource.hasOwnProperty("bones");
}
@ -46,9 +48,11 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
extension: ExtensionType.Asset,
loader: {
name: loaderName,
extension: {
type: ExtensionType.LoadParser,
priority: LoaderParserPriority.Normal,
name: loaderName,
},
test(url) {
@ -62,11 +66,12 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
return buffer;
},
testParse(asset: unknown, options: {src: string}): Promise<boolean> {
const isJsonSpineModel = checkExtension(options.src, ".json") && isJson(asset);
const isBinarySpineModel = checkExtension(options.src, ".skel") && isBuffer(asset);
testParse(asset: unknown, options: ResolvedAsset): Promise<boolean> {
const isJsonSpineModel = checkExtension(options.src!, ".json") && isJson(asset);
const isBinarySpineModel = checkExtension(options.src!, ".skel") && isBuffer(asset);
const isExplicitLoadParserSet = options.loadParser === loaderName;
return Promise.resolve(isJsonSpineModel || isBinarySpineModel);
return Promise.resolve(isJsonSpineModel || isBinarySpineModel || isExplicitLoadParserSet);
},
},
} as AssetExtension<SkeletonJsonAsset | SkeletonBinaryAsset>;

101
spine-ts/spine-pixi-v8/example/inline-loading.html Normal file
View File

@ -0,0 +1,101 @@
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/dist/pixi.js"></script>
<script src="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css">
</head>
<body>
<script>
(async function () {
var app = new PIXI.Application();
await app.init({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
})
document.body.appendChild(app.canvas);
// BASE64 DATA
const base64Data = {
atlas: "data:text/plain;base64,aW5saW5lLnBuZwpzaXplOjE2LDE2CmZpbHRlcjpMaW5lYXIsTGluZWFyCnBtYTp0cnVlCmRvdApib3VuZHM6MCwwLDEsMQo=",
skel: "data:application/octet-stream;base64,/B8S/IqaXgYHNC4yLjM5wkgAAMJIAABCyAAAQsgAAELIAAAAAQRkb3QCBXJvb3QAAAAAAAAAAAAAAAA/gAAAP4AAAAAAAAAAAAAAAAAAAAAABGRvdAAAAAAAAAAAAAAAAABCyAAAQsgAAAAAAAAAAAAAAAAAAAAAAQRkb3QB//////////8BAAAAAAABAAEBACWwfdcAAAAAP4AAAD+AAAA/gAAAP4AAAAAAAQphbmltYXRpb24BAQABAQMAAAAAAP////8/gAAA/wAA/wBAAAAA/////wAAAAAAAAAAAA==",
json: "data:application/json;base64,ew0KInNrZWxldG9uIjogeyAiaGFzaCI6ICJkZnFNKy9hYStzNCIsICJzcGluZSI6ICI0LjIuNDMiLCAiaW1hZ2VzIjogIi9Vc2Vycy9kYXZpZGV0YW50aWxsby9Eb3dubG9hZHMvaW1hZ2VzIiwgImF1ZGlvIjogIi4vYXVkaW8iIH0sDQoiYm9uZXMiOiBbDQoJeyAibmFtZSI6ICJyb290IiB9LA0KCXsgIm5hbWUiOiAiZG90IiwgInBhcmVudCI6ICJyb290IiwgInNjYWxlWCI6IDEwMCwgInNjYWxlWSI6IDEwMCB9DQpdLA0KInNsb3RzIjogWw0KCXsgIm5hbWUiOiAiZG90IiwgImJvbmUiOiAiZG90IiwgImF0dGFjaG1lbnQiOiAiZG90IiB9DQpdLA0KInNraW5zIjogWw0KCXsNCgkJIm5hbWUiOiAiZGVmYXVsdCIsDQoJCSJhdHRhY2htZW50cyI6IHsNCgkJCSJkb3QiOiB7DQoJCQkJImRvdCI6IHsgIndpZHRoIjogMSwgImhlaWdodCI6IDEgfQ0KCQkJfQ0KCQl9DQoJfQ0KXSwNCiJhbmltYXRpb25zIjogew0KCSJhbmltYXRpb24iOiB7DQoJCSJzbG90cyI6IHsNCgkJCSJkb3QiOiB7DQoJCQkJInJnYmEiOiBbDQoJCQkJCXsgImNvbG9yIjogImZmZmZmZmZmIiB9LA0KCQkJCQl7ICJ0aW1lIjogMSwgImNvbG9yIjogImZmMDAwMGZmIiB9LA0KCQkJCQl7ICJ0aW1lIjogMiwgImNvbG9yIjogImZmZmZmZmZmIiB9DQoJCQkJXQ0KCQkJfQ0KCQl9DQoJfQ0KfQ0KfQ==",
png: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRF////p8QbyAAAAApJREFUeJxjZAAAAAQAAiFkrWoAAAAASUVORK5CYII="
}
const textureBase64 = await PIXI.Assets.load({
alias: 'textureBase64',
loadParser: 'loadTextures',
src: base64Data.png,
})
PIXI.Assets.add({
alias: "atlasBase64",
loadParser: "spineTextureAtlasLoader",
src: base64Data.atlas,
data: { images: { "inline.png": textureBase64.source } }
})
PIXI.Assets.add({
alias: "skelBase64",
loadParser: "spineSkeletonLoader",
// loadParser: "loadJson", // use "loadJson", if asset is json
src: base64Data.skel,
})
await PIXI.Assets.load(["skelBase64", "atlasBase64"]);
// creating spine game object with base64 data
const base64GameObject = spine.Spine.from({skeleton: "skelBase64", atlas: "atlasBase64" });
app.stage.addChild(base64GameObject);
base64GameObject.state.setAnimation(0, "animation", true);
base64GameObject.position.set(window.innerWidth / 3, window.innerHeight / 2);
// BLOB DATA
// now transform base64 into blob to show how to load blob
const blobData = {
atlas: await fetch(base64Data.atlas).then(res => res.blob()),
skel: await fetch(base64Data.skel).then(res => res.blob()),
json: await fetch(base64Data.json).then(res => res.blob()),
png: await fetch(base64Data.png).then(res => res.blob()),
}
const textureBlob = await PIXI.Assets.load({
alias: 'textureBlob',
loadParser: 'loadTextures',
src: URL.createObjectURL(blobData.png),
// data: { alphaMode: PIXI.ALPHA_MODES.PMA } // if texture is pma uncomment this and set as pixi preference (preferCreateImageBitmap: false)
})
PIXI.Assets.add({
alias: "atlasBlob",
loadParser: "spineTextureAtlasLoader",
src: URL.createObjectURL(blobData.atlas),
data: { images: { "inline.png": textureBlob.source } }
})
PIXI.Assets.add({
alias: "skelBlob",
// loadParser: "spineSkeletonLoader", // use "spineSkeletonLoader", if asset is skel
loadParser: "loadJson",
src: URL.createObjectURL(blobData.json),
})
await PIXI.Assets.load(["skelBlob", "atlasBlob"]);
// creating spine game object
const blobGameObject = spine.Spine.from({skeleton: "skelBase64", atlas: "atlasBase64" });
app.stage.addChild(blobGameObject);
blobGameObject.state.setAnimation(0, "animation", true);
blobGameObject.position.set(window.innerWidth / 3 * 2, window.innerHeight / 2);
})();
</script>
</body>
</html>

12
spine-ts/spine-pixi-v8/src/assets/atlasLoader.ts
View File

@ -45,6 +45,8 @@ import type { AssetExtension, Loader, ResolvedAsset, Texture, UnresolvedAsset }
type RawAtlas = string;
const loaderName = "spineTextureAtlasLoader";
const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtlasMetadata> = {
extension: ExtensionType.Asset,
@ -62,10 +64,11 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
},
loader: {
name: loaderName,
extension: {
type: ExtensionType.LoadParser,
priority: LoaderParserPriority.Normal,
name: 'spineTextureAtlasLoader',
name: loaderName,
},
test (url: string): boolean {
@ -83,8 +86,9 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
testParse (asset: unknown, options: ResolvedAsset): Promise<boolean> {
const isExtensionRight = checkExtension(options.src as string, '.atlas');
const isString = typeof asset === 'string';
const isExplicitLoadParserSet = options.loadParser === loaderName;
return Promise.resolve(isExtensionRight && isString);
return Promise.resolve((isExtensionRight || isExplicitLoadParserSet) && isString);
},
unload (atlas: TextureAtlas) {
@ -129,7 +133,9 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
src: copySearchParams(url, options.src as string),
data: {
...metadata.imageMetadata,
alphaMode: page.pma ? 'premultiplied-alpha' : 'premultiply-alpha-on-upload'
// alphaMode: 'premultiplied-alpha'
alphaMode: 'premultiply-alpha-on-upload'
// alphaMode: 'no-premultiply-alpha'
}
};

8
spine-ts/spine-pixi-v8/src/assets/skeletonLoader.ts
View File

@ -40,6 +40,8 @@ import {
type SkeletonJsonAsset = any;
type SkeletonBinaryAsset = Uint8Array;
const loaderName = "spineSkeletonLoader";
function isJson (resource: any): resource is SkeletonJsonAsset {
return Object.prototype.hasOwnProperty.call(resource, 'bones');
}
@ -52,10 +54,11 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
extension: ExtensionType.Asset,
loader: {
name: loaderName,
extension: {
type: ExtensionType.LoadParser,
priority: LoaderParserPriority.Normal,
name: 'spineSkeletonLoader',
name: loaderName,
},
test (url) {
@ -72,8 +75,9 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
testParse (asset: unknown, options: ResolvedAsset): Promise<boolean> {
const isJsonSpineModel = checkExtension(options.src!, '.json') && isJson(asset);
const isBinarySpineModel = checkExtension(options.src!, '.skel') && isBuffer(asset);
const isExplicitLoadParserSet = options.loadParser === loaderName;
return Promise.resolve(isJsonSpineModel || isBinarySpineModel);
return Promise.resolve(isJsonSpineModel || isBinarySpineModel || isExplicitLoadParserSet);
},
},
} as AssetExtension<SkeletonJsonAsset | SkeletonBinaryAsset>;