mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
101 lines
4.9 KiB
HTML
101 lines
4.9 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>spine-pixi-v8</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.12/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',
|
|
parser: 'loadTextures',
|
|
src: base64Data.png,
|
|
})
|
|
|
|
PIXI.Assets.add({
|
|
alias: "atlasBase64",
|
|
parser: "spineTextureAtlasLoader",
|
|
src: base64Data.atlas,
|
|
data: { images: { "inline.png": textureBase64.source } }
|
|
})
|
|
|
|
PIXI.Assets.add({
|
|
alias: "skelBase64",
|
|
parser: "spineSkeletonLoader",
|
|
// parser: "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',
|
|
parser: '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",
|
|
parser: "spineTextureAtlasLoader",
|
|
src: URL.createObjectURL(blobData.atlas),
|
|
data: { images: { "inline.png": textureBlob.source } }
|
|
})
|
|
|
|
PIXI.Assets.add({
|
|
alias: "skelBlob",
|
|
// parser: "spineSkeletonLoader", // use "spineSkeletonLoader", if asset is skel
|
|
parser: "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> |