mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 09:16:01 +08:00
This allows to easily load assets from base64 or blob.
This commit is contained in:
parent
5b5326d99e
commit
8afc6426f8
@ -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.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/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/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>
|
<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>
|
</ul>
|
||||||
<li>Phaser</li>
|
<li>Phaser</li>
|
||||||
|
|||||||
103
spine-ts/spine-pixi-v7/example/inline-loading.html
Normal file
103
spine-ts/spine-pixi-v7/example/inline-loading.html
Normal 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>
|
||||||
@ -29,7 +29,7 @@
|
|||||||
|
|
||||||
import { TextureAtlas } from "@esotericsoftware/spine-core";
|
import { TextureAtlas } from "@esotericsoftware/spine-core";
|
||||||
import { SpineTexture } from "../SpineTexture.js";
|
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 { Assets, copySearchParams } from "@pixi/assets";
|
||||||
import { LoaderParserPriority, checkExtension } from "@pixi/assets";
|
import { LoaderParserPriority, checkExtension } from "@pixi/assets";
|
||||||
import type { Texture } from "@pixi/core";
|
import type { Texture } from "@pixi/core";
|
||||||
@ -37,6 +37,8 @@ import { ALPHA_MODES, ExtensionType, settings, utils, BaseTexture, extensions }
|
|||||||
|
|
||||||
type RawAtlas = string;
|
type RawAtlas = string;
|
||||||
|
|
||||||
|
const loaderName = "spineTextureAtlasLoader";
|
||||||
|
|
||||||
const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtlasMetadata> = {
|
const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtlasMetadata> = {
|
||||||
extension: ExtensionType.Asset,
|
extension: ExtensionType.Asset,
|
||||||
|
|
||||||
@ -53,10 +55,11 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
|
|||||||
},
|
},
|
||||||
|
|
||||||
loader: {
|
loader: {
|
||||||
|
name: loaderName,
|
||||||
extension: {
|
extension: {
|
||||||
type: ExtensionType.LoadParser,
|
type: ExtensionType.LoadParser,
|
||||||
priority: LoaderParserPriority.Normal,
|
priority: LoaderParserPriority.Normal,
|
||||||
name: "spineTextureAtlasLoader",
|
name: loaderName,
|
||||||
},
|
},
|
||||||
|
|
||||||
test(url: string): boolean {
|
test(url: string): boolean {
|
||||||
@ -71,11 +74,12 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
|
|||||||
return txt;
|
return txt;
|
||||||
},
|
},
|
||||||
|
|
||||||
testParse(asset: unknown, options: {src: string}): Promise<boolean> {
|
testParse(asset: unknown, options: ResolvedAsset): Promise<boolean> {
|
||||||
const isExtensionRight = checkExtension(options.src, ".atlas");
|
const isExtensionRight = checkExtension(options.src!, ".atlas");
|
||||||
const isString = typeof asset === "string";
|
const isString = typeof asset === "string";
|
||||||
|
const isExplicitLoadParserSet = options.loadParser === loaderName;
|
||||||
|
|
||||||
return Promise.resolve(isExtensionRight && isString);
|
return Promise.resolve((isExtensionRight || isExplicitLoadParserSet) && isString);
|
||||||
},
|
},
|
||||||
|
|
||||||
unload(atlas: TextureAtlas) {
|
unload(atlas: TextureAtlas) {
|
||||||
|
|||||||
@ -27,13 +27,15 @@
|
|||||||
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
* 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 { LoaderParserPriority, checkExtension } from "@pixi/assets";
|
||||||
import { ExtensionType, settings, extensions } from "@pixi/core";
|
import { ExtensionType, settings, extensions } from "@pixi/core";
|
||||||
|
|
||||||
type SkeletonJsonAsset = any;
|
type SkeletonJsonAsset = any;
|
||||||
type SkeletonBinaryAsset = Uint8Array;
|
type SkeletonBinaryAsset = Uint8Array;
|
||||||
|
|
||||||
|
const loaderName = "spineSkeletonLoader";
|
||||||
|
|
||||||
function isJson(resource: any): resource is SkeletonJsonAsset {
|
function isJson(resource: any): resource is SkeletonJsonAsset {
|
||||||
return resource.hasOwnProperty("bones");
|
return resource.hasOwnProperty("bones");
|
||||||
}
|
}
|
||||||
@ -46,9 +48,11 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
|
|||||||
extension: ExtensionType.Asset,
|
extension: ExtensionType.Asset,
|
||||||
|
|
||||||
loader: {
|
loader: {
|
||||||
|
name: loaderName,
|
||||||
extension: {
|
extension: {
|
||||||
type: ExtensionType.LoadParser,
|
type: ExtensionType.LoadParser,
|
||||||
priority: LoaderParserPriority.Normal,
|
priority: LoaderParserPriority.Normal,
|
||||||
|
name: loaderName,
|
||||||
},
|
},
|
||||||
|
|
||||||
test(url) {
|
test(url) {
|
||||||
@ -62,11 +66,12 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
|
|||||||
|
|
||||||
return buffer;
|
return buffer;
|
||||||
},
|
},
|
||||||
testParse(asset: unknown, options: {src: string}): Promise<boolean> {
|
testParse(asset: unknown, options: ResolvedAsset): Promise<boolean> {
|
||||||
const isJsonSpineModel = checkExtension(options.src, ".json") && isJson(asset);
|
const isJsonSpineModel = checkExtension(options.src!, ".json") && isJson(asset);
|
||||||
const isBinarySpineModel = checkExtension(options.src, ".skel") && isBuffer(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>;
|
} as AssetExtension<SkeletonJsonAsset | SkeletonBinaryAsset>;
|
||||||
|
|||||||
101
spine-ts/spine-pixi-v8/example/inline-loading.html
Normal file
101
spine-ts/spine-pixi-v8/example/inline-loading.html
Normal 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>
|
||||||
@ -45,6 +45,8 @@ import type { AssetExtension, Loader, ResolvedAsset, Texture, UnresolvedAsset }
|
|||||||
|
|
||||||
type RawAtlas = string;
|
type RawAtlas = string;
|
||||||
|
|
||||||
|
const loaderName = "spineTextureAtlasLoader";
|
||||||
|
|
||||||
const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtlasMetadata> = {
|
const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtlasMetadata> = {
|
||||||
extension: ExtensionType.Asset,
|
extension: ExtensionType.Asset,
|
||||||
|
|
||||||
@ -62,10 +64,11 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
|
|||||||
},
|
},
|
||||||
|
|
||||||
loader: {
|
loader: {
|
||||||
|
name: loaderName,
|
||||||
extension: {
|
extension: {
|
||||||
type: ExtensionType.LoadParser,
|
type: ExtensionType.LoadParser,
|
||||||
priority: LoaderParserPriority.Normal,
|
priority: LoaderParserPriority.Normal,
|
||||||
name: 'spineTextureAtlasLoader',
|
name: loaderName,
|
||||||
},
|
},
|
||||||
|
|
||||||
test (url: string): boolean {
|
test (url: string): boolean {
|
||||||
@ -83,8 +86,9 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
|
|||||||
testParse (asset: unknown, options: ResolvedAsset): Promise<boolean> {
|
testParse (asset: unknown, options: ResolvedAsset): Promise<boolean> {
|
||||||
const isExtensionRight = checkExtension(options.src as string, '.atlas');
|
const isExtensionRight = checkExtension(options.src as string, '.atlas');
|
||||||
const isString = typeof asset === 'string';
|
const isString = typeof asset === 'string';
|
||||||
|
const isExplicitLoadParserSet = options.loadParser === loaderName;
|
||||||
|
|
||||||
return Promise.resolve(isExtensionRight && isString);
|
return Promise.resolve((isExtensionRight || isExplicitLoadParserSet) && isString);
|
||||||
},
|
},
|
||||||
|
|
||||||
unload (atlas: TextureAtlas) {
|
unload (atlas: TextureAtlas) {
|
||||||
@ -129,7 +133,9 @@ const spineTextureAtlasLoader: AssetExtension<RawAtlas | TextureAtlas, ISpineAtl
|
|||||||
src: copySearchParams(url, options.src as string),
|
src: copySearchParams(url, options.src as string),
|
||||||
data: {
|
data: {
|
||||||
...metadata.imageMetadata,
|
...metadata.imageMetadata,
|
||||||
alphaMode: page.pma ? 'premultiplied-alpha' : 'premultiply-alpha-on-upload'
|
// alphaMode: 'premultiplied-alpha'
|
||||||
|
alphaMode: 'premultiply-alpha-on-upload'
|
||||||
|
// alphaMode: 'no-premultiply-alpha'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -40,6 +40,8 @@ import {
|
|||||||
type SkeletonJsonAsset = any;
|
type SkeletonJsonAsset = any;
|
||||||
type SkeletonBinaryAsset = Uint8Array;
|
type SkeletonBinaryAsset = Uint8Array;
|
||||||
|
|
||||||
|
const loaderName = "spineSkeletonLoader";
|
||||||
|
|
||||||
function isJson (resource: any): resource is SkeletonJsonAsset {
|
function isJson (resource: any): resource is SkeletonJsonAsset {
|
||||||
return Object.prototype.hasOwnProperty.call(resource, 'bones');
|
return Object.prototype.hasOwnProperty.call(resource, 'bones');
|
||||||
}
|
}
|
||||||
@ -52,10 +54,11 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
|
|||||||
extension: ExtensionType.Asset,
|
extension: ExtensionType.Asset,
|
||||||
|
|
||||||
loader: {
|
loader: {
|
||||||
|
name: loaderName,
|
||||||
extension: {
|
extension: {
|
||||||
type: ExtensionType.LoadParser,
|
type: ExtensionType.LoadParser,
|
||||||
priority: LoaderParserPriority.Normal,
|
priority: LoaderParserPriority.Normal,
|
||||||
name: 'spineSkeletonLoader',
|
name: loaderName,
|
||||||
},
|
},
|
||||||
|
|
||||||
test (url) {
|
test (url) {
|
||||||
@ -72,8 +75,9 @@ const spineLoaderExtension: AssetExtension<SkeletonJsonAsset | SkeletonBinaryAss
|
|||||||
testParse (asset: unknown, options: ResolvedAsset): Promise<boolean> {
|
testParse (asset: unknown, options: ResolvedAsset): Promise<boolean> {
|
||||||
const isJsonSpineModel = checkExtension(options.src!, '.json') && isJson(asset);
|
const isJsonSpineModel = checkExtension(options.src!, '.json') && isJson(asset);
|
||||||
const isBinarySpineModel = checkExtension(options.src!, '.skel') && isBuffer(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>;
|
} as AssetExtension<SkeletonJsonAsset | SkeletonBinaryAsset>;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user