mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-20 16:56:43 +08:00
103 lines
4.5 KiB
HTML
103 lines
4.5 KiB
HTML
<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,EWfte0PrUB4MNC4zLjM5LWJldGEAAAAAAAAAAAAAAAAAAAAAQsgAAAFB8AAAJy9Vc2Vycy9kYXZpZGV0YW50aWxsby9Eb3dubG9hZHMvaW1hZ2VzCC4vYXVkaW8BBGRvdAIFcm9vdAAAAAAAAAAAAAAAAD+AAAA/gAAAAAAAAAAAAAAAAAAAAACcnJz/AAEEZG90AAAAAAAAAAAAAAAAAELIAABCyAAAAAAAAAAAAAAAAAAAAACcnJz/AAEBBGRvdAH//////////wEAAQABAAEBAAAAAAAAAAAAP4AAAD+AAAA/gAAAP4AAAAAAAQphbmltYXRpb24BAQABAQMAAAAAAP////8/gAAA/wAA/wBAAAAA/////wAAAAAAAAAAAAA=",
|
|
json: "data:application/json;base64,eyJza2VsZXRvbiI6eyJoYXNoIjoiRVdmdGUwUHJVQjQiLCJzcGluZSI6IjQuMy4zOS1iZXRhIiwiaW1hZ2VzIjoiL1VzZXJzL2RhdmlkZXRhbnRpbGxvL0Rvd25sb2Fkcy9pbWFnZXMiLCJhdWRpbyI6Ii4vYXVkaW8ifSwiYm9uZXMiOlt7Im5hbWUiOiJyb290In0seyJuYW1lIjoiZG90IiwicGFyZW50Ijoicm9vdCIsInNjYWxlWCI6MTAwLCJzY2FsZVkiOjEwMH1dLCJzbG90cyI6W3sibmFtZSI6ImRvdCIsImJvbmUiOiJkb3QiLCJhdHRhY2htZW50IjoiZG90In1dLCJza2lucyI6W3sibmFtZSI6ImRlZmF1bHQiLCJhdHRhY2htZW50cyI6eyJkb3QiOnsiZG90Ijp7IndpZHRoIjoxLCJoZWlnaHQiOjF9fX19XSwiYW5pbWF0aW9ucyI6eyJhbmltYXRpb24iOnsic2xvdHMiOnsiZG90Ijp7InJnYmEiOlt7ImNvbG9yIjoiZmZmZmZmZmYifSx7InRpbWUiOjEsImNvbG9yIjoiZmYwMDAwZmYifSx7InRpbWUiOjIsImNvbG9yIjoiZmZmZmZmZmYifV19fX19fQ==",
|
|
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> |