UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 17:26:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[cpp][ts] Improved test beds.

Browse Source
This commit is contained in:
Mario Zechner 2023-11-27 12:06:52 +01:00
parent 3dabb07561
commit 8a80baa0ac
3 changed files with 287 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spine-sfml/cpp/example/testbed.cpp
View File

@ -70,11 +70,12 @@ class NullAttachmentLoader : public AttachmentLoader {
};
int main(void) {
String atlasFile("");
String skeletonFile("/Users/badlogic/workspaces/spine-runtimes/spine-haxe/example/assets/vine-pro.json");
String atlasFile("/Users/badlogic/Desktop/basemodel-male/basemodel-male.atlas");
String skeletonFile("/Users/badlogic/Desktop/basemodel-male/basemodel-male.skel");
String animation = "";
String skin = "BasicBody";
float scale = 1.0f;
float scale = 0.1f;
SFMLTextureLoader textureLoader;
NullAttachmentLoader nullLoader;
Atlas *atlas = atlasFile.length() == 0 ? nullptr : new Atlas(atlasFile, &textureLoader);
@ -106,6 +107,7 @@ int main(void) {
drawable.skeleton->updateWorldTransform();
drawable.skeleton->setPosition(320, 590);
if (animation.length() > 0) drawable.state->setAnimation(0, animation, true);
if (skin.length() > 0) drawable.skeleton->setSkin(skin);
sf::RenderWindow window(sf::VideoMode(640, 640), "Spine SFML - testbed");
window.setFramerateLimit(60);

26
spine-ts/spine-webgl/example/drag-and-drop.html
View File

@ -1,21 +1,27 @@
<html>
<script src="../dist/iife/spine-webgl.js"></script>
<style>
<script src="../dist/iife/spine-webgl.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</style>
<body>
<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
<div style="position: absolute; top: 1em; left: 1em; z-index: 1; color: #ccc;">
<label style="margin-right: 0.5em;">Animations</label>
<body>
<canvas
id="canvas"
style="position: absolute; width: 100%; height: 100%"
></canvas>
<div
style="position: absolute; top: 1em; left: 1em; z-index: 1; color: #ccc"
>
<label style="margin-right: 0.5em"> Animations</label>
<select id="animations"></select>
<label style="margin-right: 0.5em">Skins</label>
<select id="skins"></select>
<label>PMA</label>
<input type="checkbox" id="pma" checked>
<input type="checkbox" id="pma" checked />
</div>
<script src="drag-and-drop.js"></script>
</body>
</body>
</html>

120
spine-ts/spine-webgl/example/drag-and-drop.js
View File

@ -16,22 +16,32 @@ class App {
initialize(canvas) {
// Load the Spineboy skeleton
this.loadSkeleton("assets/spineboy-pro.skel", "assets/spineboy-pma.atlas", "run");
this.loadSkeleton(
"assets/spineboy-pro.skel",
"assets/spineboy-pma.atlas",
"run"
);
// Setup listener for animation selection box
let animationSelectBox = document.body.querySelector("#animations");
animationSelectBox.onchange = () => {
this.animationState.setAnimation(0, animationSelectBox.value, true);
}
};
// Setup listener for skin selection box
let skinSelectBox = document.body.querySelector("#skins");
skinSelectBox.onchange = () => {
this.skeleton.setSkinByName(skinSelectBox.value);
};
// Setup listener for the PMA checkbox
let pmaCheckbox = document.body.querySelector("#pma");
pmaCheckbox.onchange = () => {
this.pma = pmaCheckbox.checked;
}
};
// Setup the drag and drop listener
new FileDragAndDrop(canvas.htmlCanvas, (files) => this.onDrop(files))
new FileDragAndDrop(canvas.htmlCanvas, (files) => this.onDrop(files));
// Setup a camera controller for paning and zooming
new spine.CameraController(canvas.htmlCanvas, canvas.renderer.camera);
@ -47,30 +57,43 @@ class App {
// are binary, so we have to encode them to base64 for loading
// through AssetManager.
let bufferToBase64 = (buffer) => {
var binary = '';
var binary = "";
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
};
for (var file of files) {
if (file.name.endsWith(".atlas") || file.name.endsWith(".atlas.txt")) {
atlasFile = file;
assetManager.setRawDataURI(file.name, "data:text/plain;," + file.contentText);
assetManager.setRawDataURI(
file.name,
"data:text/plain;," + file.contentText
);
} else if (file.name.endsWith(".skel")) {
skeletonFile = file;
assetManager.setRawDataURI(file.name, "data:application/octet-stream;base64," + bufferToBase64(file.contentBinary));
assetManager.setRawDataURI(
file.name,
"data:application/octet-stream;base64," +
bufferToBase64(file.contentBinary)
);
assetManager.loadBinary(file.name);
} else if (file.name.endsWith(".json")) {
skeletonFile = file;
assetManager.setRawDataURI(file.name, "data:text/plain;," + file.contentText);
assetManager.setRawDataURI(
file.name,
"data:text/plain;," + file.contentText
);
assetManager.loadJson(file.name);
} else if (file.name.endsWith(".png")) {
pngs.push(file);
assetManager.setRawDataURI(file.name, "data:image/png;base64," + bufferToBase64(file.contentBinary));
assetManager.setRawDataURI(
file.name,
"data:image/png;base64," + bufferToBase64(file.contentBinary)
);
}
}
@ -94,7 +117,7 @@ class App {
} else {
requestAnimationFrame(waitForLoad);
}
}
};
waitForLoad();
}
@ -104,11 +127,13 @@ class App {
var atlas = assetManager.require(atlasFile);
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonData;
var skeletonBinaryOrJson = skeletonFile.endsWith(".skel") ?
new spine.SkeletonBinary(atlasLoader) :
new spine.SkeletonJson(atlasLoader);
var skeletonBinaryOrJson = skeletonFile.endsWith(".skel")
? new spine.SkeletonBinary(atlasLoader)
: new spine.SkeletonJson(atlasLoader);
skeletonBinaryOrJson.scale = 1;
skeletonData = skeletonBinaryOrJson.readSkeletonData(assetManager.require(skeletonFile));
skeletonData = skeletonBinaryOrJson.readSkeletonData(
assetManager.require(skeletonFile)
);
this.skeleton = new spine.Skeleton(skeletonData);
var animationStateData = new spine.AnimationStateData(skeletonData);
this.animationState = new spine.AnimationState(animationStateData);
@ -125,6 +150,22 @@ class App {
}
this.animationState.setAnimation(0, animationName, true);
// Fill the skin selection box.
let skinSelectBox = document.body.querySelector("#skins");
skinSelectBox.innerHTML = "";
for (var skin of this.skeleton.data.skins) {
let option = document.createElement("option");
option.value = option.innerText = skin.name;
skinSelectBox.appendChild(option);
}
if (
!this.skeleton.data.defaultSkin ||
(this.skeleton.data.defaultSkin.attachments.length == 0 &&
this.skeleton.data.skins.length > 1)
) {
this.skeleton.setSkin(this.skeleton.data.skins[0]);
}
// Center the skeleton in the viewport
this.centerSkeleton();
}
@ -134,17 +175,34 @@ class App {
this.animationState.update(0);
this.animationState.apply(this.skeleton);
this.skeleton.updateWorldTransform();
let offset = new spine.Vector2(), size = new spine.Vector2();
let offset = new spine.Vector2(),
size = new spine.Vector2();
this.skeleton.getBounds(offset, size);
let camera = this.canvas.renderer.camera;
let renderer = this.canvas.renderer;
renderer.resize(spine.ResizeMode.Expand);
if (
!Number.isFinite(size.x) ||
!Number.isFinite(size.y) ||
!Number.isFinite(offset.x) ||
!Number.isFinite(offset.y)
) {
camera.position.x = 0;
camera.position.y = 0;
camera.zoom = 1;
camera.update();
return;
}
// Make sure the canvas is sized properly and position and zoom
// the camera so the skeleton is centered in the viewport.
let renderer = this.canvas.renderer;
renderer.resize(spine.ResizeMode.Expand);
let camera = this.canvas.renderer.camera;
camera.position.x = offset.x + size.x / 2;
camera.position.y = offset.y + size.y / 2;
camera.zoom = size.x > size.y ? size.x / this.canvas.htmlCanvas.width * 3 : size.y / this.canvas.htmlCanvas.height * 3;
camera.zoom =
size.x > size.y
? (size.x / this.canvas.htmlCanvas.width) * 3
: (size.y / this.canvas.htmlCanvas.height) * 3;
camera.update();
}
@ -171,8 +229,8 @@ class App {
new spine.SpineCanvas(document.getElementById("canvas"), {
app: new App(),
webglConfig: {
alpha: false
}
alpha: false,
},
});
class FileDragAndDrop {
@ -188,13 +246,19 @@ class FileDragAndDrop {
const items = Object.keys(event.dataTransfer.items);
let files = [];
await Promise.all(items.map(async (key) => {
await Promise.all(
items.map(async (key) => {
var file = event.dataTransfer.items[key].getAsFile();
if (file.kind == "string") return;
let contentBinary = await file.arrayBuffer();
let contentText = await file.text();
files.push({ name: file.name, contentBinary: contentBinary, contentText: contentText });
}));
files.push({
name: file.name,
contentBinary: contentBinary,
contentText: contentText,
});
})
);
this.callback(files);
}
}
@ -208,7 +272,7 @@ class FileDragAndDrop {
resolve(fr.result);
};
fr.readAsArrayBuffer();
})
});
}
function text() {
@ -218,10 +282,10 @@ class FileDragAndDrop {
resolve(fr.result);
};
fr.readAsText(this);
})
});
}
if ('File' in self) {
if ("File" in self) {
File.prototype.arrayBuffer = File.prototype.arrayBuffer || arrayBuffer;
File.prototype.text = File.prototype.text || text;
}