archive
/
spine-runtimes
镜像自地址 https://github.com/EsotericSoftware/spine-runtimes.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<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>