mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-05 06:44:56 +08:00
114 lines
4.3 KiB
HTML
114 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="../dist/iife/spine-webgl.js"></script>
|
|
<title>Webcomponent Tutorial</title>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="section vertical-split">
|
|
|
|
<div class="split-top split">
|
|
<div class="split-left">
|
|
<button id="add-delete" onclick="addDiv()">Add</button>
|
|
<button onclick="removeDiv()">Remove</button>
|
|
<!-- <spine-widget
|
|
atlas="assets/spineboy-pma.atlas"
|
|
skeleton="assets/spineboy-pro.skel"
|
|
animation="walk"
|
|
></spine-widget> -->
|
|
</div>
|
|
<div class="split-right">
|
|
<div id="container-delete" style="display: flex; height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const containerDelete = document.getElementById('container-delete');
|
|
const div = document.createElement('div');
|
|
div.style.flex = "1";
|
|
div.style.margin = "1px";
|
|
div.style.border = "1px solid black";
|
|
div.style.flex = "1";
|
|
div.innerHTML = `
|
|
<spine-widget
|
|
identifier="sp"
|
|
atlas="assets/spineboy-pma.atlas"
|
|
skeleton="assets/spineboy-pro.skel"
|
|
animation="walk"
|
|
></spine-widget>
|
|
`;
|
|
containerDelete.appendChild(div);
|
|
|
|
// customElements.whenDefined('spine-widget').then(async () => {
|
|
// const widget = spine.getSpineWidget(`owl${i}`);
|
|
// await widget.whenReady;
|
|
// widget.state.setAnimation(1, "blink", true);
|
|
|
|
// const control = widget.skeleton.findBone("control");
|
|
// const tempVector = new spine.Vector3();
|
|
// const mouseX = Smooth(0, 200);
|
|
// const mouseY = Smooth(0, 200);
|
|
// widget.afterUpdateWorldTransforms = () => {
|
|
// updateControl(widget, control, mouseX, mouseY, tempVector);
|
|
// }
|
|
// });
|
|
|
|
spine.getSpineWidget("sp").whenReady.then((widget) => {
|
|
widget.state.setAnimation(1, "run", true);
|
|
});
|
|
|
|
|
|
// function addDiv() {
|
|
// const skins = [
|
|
// "Assassin", "Beardy", "Buck",
|
|
// "Chuck", "Commander", "Ducky", "Dummy",
|
|
// "Fletch", "Gabriel", "MetalMan", "Pamela-1",
|
|
// "Pamela-2", "Pamela-3", "Pamela-4", "Pamela-5",
|
|
// "Stumpy", "Truck", "Turbo", "Young",
|
|
// ];
|
|
// const div = document.createElement('div');
|
|
// const randomIndex = Math.floor(Math.random() * skins.length);
|
|
// const skin = skins[randomIndex];
|
|
// console.log(randomIndex, skin);
|
|
// div.style.flex = "1";
|
|
// div.style.margin = "1px";
|
|
// div.style.border = "1px solid black";
|
|
// div.style.flex = "1";
|
|
// div.innerHTML = `
|
|
// <spine-widget
|
|
// atlas="assets/spineboy-pma.atlas"
|
|
// skeleton="assets/spineboy-pro.skel"
|
|
// animation="walk"
|
|
// ></spine-widget>
|
|
// `;
|
|
|
|
// // div.innerHTML = `
|
|
// // <spine-widget
|
|
// // atlas="../demos/assets/heroes.atlas"
|
|
// // skeleton="../demos/assets/demos.json"
|
|
// // json-skeleton-key="heroes"
|
|
// // animation="floorIdle"
|
|
// // skin="${skin}"
|
|
// // isdraggable
|
|
// // ></spine-widget>
|
|
// // `;
|
|
|
|
// containerDelete.appendChild(div);
|
|
// }
|
|
// addDiv()
|
|
|
|
// function removeDiv() {
|
|
// if (containerDelete.lastChild) {
|
|
// containerDelete.removeChild(containerDelete.lastChild);
|
|
// }
|
|
// }
|
|
</script>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |