Strona główna Odkrywaj Pomoc
Zaloguj się
archive
/
spine-runtimes
kopia lustrzana https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Forkuj 0
Pliki Problemy 0 Wiki
Przeglądaj źródła

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

This allows to easily load assets from base64 or blob.
Davide Tantillo 2 tygodni temu
rodzic
5b5326d99e
commit
8afc6426f8
7 zmienionych plików z 239 dodań i 15 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 1 0
      spine-ts/index.html
  2. 103 0
      spine-ts/spine-pixi-v7/example/inline-loading.html
  3. 9 5
      spine-ts/spine-pixi-v7/src/assets/atlasLoader.ts
  4. 10 5
      spine-ts/spine-pixi-v7/src/assets/skeletonLoader.ts
  5. 101 0
      spine-ts/spine-pixi-v8/example/inline-loading.html
  6. 9 3
      spine-ts/spine-pixi-v8/src/assets/atlasLoader.ts
  7. 6 2
      spine-ts/spine-pixi-v8/src/assets/skeletonLoader.ts

+ 1 - 0
spine-ts/index.html
Wyświetl plik 

@@ -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 - 0
spine-ts/spine-pixi-v7/example/inline-loading.html
Wyświetl plik 

@@ -0,0 +1,103 @@
 
+<html>
 
+  <head>
 
+	<meta charset="UTF-8" />
 
+	<title>spine-pixi</title>
 
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

+ 9 - 5
spine-ts/spine-pixi-v7/src/assets/atlasLoader.ts
Wyświetl plik 

@@ -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> {
 
-			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 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) {

+ 10 - 5
spine-ts/spine-pixi-v7/src/assets/skeletonLoader.ts
Wyświetl plik 

@@ -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> {
 
-			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>;
 
 } as AssetExtension<SkeletonJsonAsset | SkeletonBinaryAsset>;

+ 101 - 0
spine-ts/spine-pixi-v8/example/inline-loading.html
Wyświetl plik 

@@ -0,0 +1,101 @@
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <title>spine-pixi-v8</title>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

+ 9 - 3
spine-ts/spine-pixi-v8/src/assets/atlasLoader.ts
Wyświetl plik 

@@ -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'
 
 						}
 
 						}
 
 					};
 
 					};

+ 6 - 2
spine-ts/spine-pixi-v8/src/assets/skeletonLoader.ts
Wyświetl plik 

@@ -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>;