mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-19 00:06:42 +08:00
Merge branch '3.7-beta' into 3.7-beta-cpp
This commit is contained in:
badlogic
commit
7ac4a3add8
@ -44,6 +44,7 @@ void spColor_setFromFloats(spColor* self, float r, float g, float b, float a) {
|
||||
self->g = g;
|
||||
self->b = b;
|
||||
self->a = a;
|
||||
spColor_clamp(self);
|
||||
}
|
||||
|
||||
void spColor_setFromColor(spColor* self, spColor* otherColor) {
|
||||
|
||||
@ -127,7 +127,7 @@ public class Skin {
|
||||
if (name == null) throw new IllegalArgumentException("name cannot be null.");
|
||||
this.slotIndex = slotIndex;
|
||||
this.name = name;
|
||||
hashCode = 31 * (31 + name.hashCode()) + slotIndex;
|
||||
hashCode = name.hashCode() + slotIndex * 37;
|
||||
}
|
||||
|
||||
public int hashCode () {
|
||||
|
||||
3299
spine-ts/build/spine-widget.d.ts
vendored
3299
spine-ts/build/spine-widget.d.ts
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -470,7 +470,7 @@ module spine {
|
||||
* @param offset The distance from the skeleton origin to the bottom left corner of the AABB.
|
||||
* @param size The width and height of the AABB.
|
||||
* @param temp Working memory */
|
||||
getBounds (offset: Vector2, size: Vector2, temp: Array<number>) {
|
||||
getBounds (offset: Vector2, size: Vector2, temp: Array<number> = new Array<number>(2)) {
|
||||
if (offset == null) throw new Error("offset cannot be null.");
|
||||
if (size == null) throw new Error("size cannot be null.");
|
||||
let drawOrder = this.drawOrder;
|
||||
|
||||
@ -46,7 +46,7 @@ module spine.webgl {
|
||||
}
|
||||
|
||||
private setupCallbacks(element: HTMLElement) {
|
||||
element.addEventListener("mousedown", (ev: UIEvent) => {
|
||||
let mouseDown = (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
@ -60,9 +60,13 @@ module spine.webgl {
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
this.buttonDown = true;
|
||||
|
||||
document.addEventListener("mousemove", mouseMove);
|
||||
document.addEventListener("mouseup", mouseUp);
|
||||
}
|
||||
}, true);
|
||||
element.addEventListener("mousemove", (ev: UIEvent) => {
|
||||
}
|
||||
|
||||
let mouseMove = (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
@ -80,8 +84,9 @@ module spine.webgl {
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
}
|
||||
}, true);
|
||||
element.addEventListener("mouseup", (ev: UIEvent) => {
|
||||
};
|
||||
|
||||
let mouseUp = (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = element.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
@ -95,8 +100,16 @@ module spine.webgl {
|
||||
this.lastX = x;
|
||||
this.lastY = y;
|
||||
this.buttonDown = false;
|
||||
document.removeEventListener("mousemove", mouseMove);
|
||||
document.removeEventListener("mouseup", mouseUp);
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
element.addEventListener("mousedown", mouseDown, true);
|
||||
element.addEventListener("mousemove", mouseMove, true);
|
||||
element.addEventListener("mouseup", mouseUp, true);
|
||||
element.addEventListener("touchstart", (ev: TouchEvent) => {
|
||||
if (this.currTouch != null) return;
|
||||
|
||||
|
||||
@ -86,11 +86,12 @@ module spine.webgl {
|
||||
let canvas = renderer.canvas;
|
||||
let gl = renderer.context.gl;
|
||||
|
||||
renderer.resize(ResizeMode.Stretch);
|
||||
|
||||
let oldX = renderer.camera.position.x, oldY = renderer.camera.position.y;
|
||||
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
|
||||
renderer.camera.viewportWidth = canvas.width;
|
||||
renderer.camera.viewportHeight = canvas.height;
|
||||
renderer.resize(ResizeMode.Stretch);
|
||||
|
||||
if (!complete) {
|
||||
gl.clearColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
|
||||
|
||||
230
spine-ts/widget/example/player-test.html
Normal file
230
spine-ts/widget/example/player-test.html
Normal file
@ -0,0 +1,230 @@
|
||||
<html>
|
||||
<script src="../../build/spine-widget.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.spine-player {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spine-player * {
|
||||
box-sizing: border-box;
|
||||
font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-dropdown-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-dropdown-content {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1;
|
||||
right: 2px;
|
||||
bottom: 42px;
|
||||
padding: 4px 0px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.spine-player canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spine-player:hover .spine-player-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-slider {
|
||||
width: 100%;
|
||||
background: green;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-slider-value {
|
||||
height: 8px;
|
||||
background: #62B0EE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button {
|
||||
background: none;
|
||||
outline: 0;
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-play {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-play:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-pause {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-pause:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-speed {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-speed:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-animations {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-animations:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-skins {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-skins:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-settings {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-settings:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-fullscreen {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-fullscreen:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spine-player-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.spine-player-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spine-player-list-item {
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player-list-item-selected:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px; /* vertical position of dot*/
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.spine-player-list-item:hover {
|
||||
background: #979696b9;
|
||||
}
|
||||
|
||||
.spine-player-speed-slider {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width: 100%; height: 100%;"></div>
|
||||
</body>
|
||||
<script>
|
||||
new spine.SpinePlayer(document.getElementById("container"), {
|
||||
jsonUrl: "assets/raptor-pro.json",
|
||||
atlasUrl: "assets/raptor.atlas",
|
||||
backgroundColor: "#cccccc",
|
||||
scale: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
debug: {
|
||||
bones: true,
|
||||
regions: true,
|
||||
bounds: true,
|
||||
paths: true,
|
||||
points: true,
|
||||
clipping: true,
|
||||
meshHull: true,
|
||||
triangles: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
586
spine-ts/widget/src/Player.ts
Normal file
586
spine-ts/widget/src/Player.ts
Normal file
@ -0,0 +1,586 @@
|
||||
/******************************************************************************
|
||||
* Spine Runtimes Software License v2.5
|
||||
*
|
||||
* Copyright (c) 2013-2016, Esoteric Software
|
||||
* All rights reserved.
|
||||
*
|
||||
* You are granted a perpetual, non-exclusive, non-sublicensable, and
|
||||
* non-transferable license to use, install, execute, and perform the Spine
|
||||
* Runtimes software and derivative works solely for personal or internal
|
||||
* use. Without the written permission of Esoteric Software (see Section 2 of
|
||||
* the Spine Software License Agreement), you may not (a) modify, translate,
|
||||
* adapt, or develop new applications using the Spine Runtimes or otherwise
|
||||
* create derivative works or improvements of the Spine Runtimes or (b) remove,
|
||||
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
|
||||
* or other intellectual property or proprietary rights notices on or in the
|
||||
* Software, including any copy thereof. Redistributions in binary or source
|
||||
* form must include this license and terms.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
|
||||
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
|
||||
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
||||
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
|
||||
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
|
||||
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
||||
* POSSIBILITY OF SUCH DAMAGE.
|
||||
*****************************************************************************/
|
||||
|
||||
module spine {
|
||||
export interface SpinePlayerConfig {
|
||||
jsonUrl: string;
|
||||
atlasUrl: string;
|
||||
animation: string;
|
||||
skin: string;
|
||||
debug: {
|
||||
bones: boolean;
|
||||
regions: boolean;
|
||||
bounds: boolean;
|
||||
paths: boolean;
|
||||
points: boolean;
|
||||
clipping: boolean;
|
||||
meshHull: boolean;
|
||||
triangles: boolean;
|
||||
},
|
||||
viewport: {
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number
|
||||
}
|
||||
alpha: boolean;
|
||||
backgroundColor: string;
|
||||
premultipliedAlpha: boolean;
|
||||
success: (widget: SpineWidget) => void;
|
||||
error: (widget: SpineWidget, msg: string) => void;
|
||||
}
|
||||
|
||||
class Slider {
|
||||
private slider: HTMLElement;
|
||||
private value: HTMLElement;
|
||||
public change: (percentage: number) => void;
|
||||
|
||||
constructor(parent: HTMLElement) {
|
||||
parent.innerHTML = /*html*/`
|
||||
<div class="spine-player-slider">
|
||||
<div class="spine-player-slider-value"></div>
|
||||
</div>
|
||||
`;
|
||||
this.slider = findWithClass(parent, "spine-player-slider")[0];
|
||||
this.value = findWithClass(parent, "spine-player-slider-value")[0];
|
||||
this.setValue(0);
|
||||
|
||||
let input = new spine.webgl.Input(this.slider);
|
||||
var dragging = false;
|
||||
input.addListener({
|
||||
down: (x, y) => {
|
||||
dragging = true;
|
||||
},
|
||||
up: (x, y) => {
|
||||
dragging = false;
|
||||
let percentage = x / this.slider.clientWidth;
|
||||
percentage = Math.max(0, Math.min(percentage, 1));
|
||||
this.setValue(x / this.slider.clientWidth);
|
||||
if (this.change) this.change(percentage);
|
||||
},
|
||||
moved: (x, y) => {
|
||||
if (dragging) {
|
||||
let percentage = x / this.slider.clientWidth;
|
||||
percentage = Math.max(0, Math.min(percentage, 1));
|
||||
this.setValue(x / this.slider.clientWidth);
|
||||
if (this.change) this.change(percentage);
|
||||
}
|
||||
},
|
||||
dragged: (x, y) => {
|
||||
let percentage = x / this.slider.clientWidth;
|
||||
percentage = Math.max(0, Math.min(percentage, 1));
|
||||
this.setValue(x / this.slider.clientWidth);
|
||||
if (this.change) this.change(percentage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setValue(percentage: number) {
|
||||
percentage = Math.max(0, Math.min(1, percentage));
|
||||
this.value.style.width = "" + (percentage * 100) + "%";
|
||||
}
|
||||
}
|
||||
|
||||
export class SpinePlayer {
|
||||
private sceneRenderer: spine.webgl.SceneRenderer;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private context: spine.webgl.ManagedWebGLRenderingContext;
|
||||
private loadingScreen: spine.webgl.LoadingScreen;
|
||||
private assetManager: spine.webgl.AssetManager;
|
||||
private timelineSlider: Slider;
|
||||
private playButton: HTMLElement;
|
||||
private loaded: boolean;
|
||||
private skeleton: Skeleton;
|
||||
private animationState: AnimationState;
|
||||
private time = new TimeKeeper();
|
||||
|
||||
private paused = true;
|
||||
private playTime = 0;
|
||||
private speed = 1;
|
||||
|
||||
constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
|
||||
this.validateConfig(config);
|
||||
this.render(parent, config);
|
||||
}
|
||||
|
||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig {
|
||||
if (!config) throw new Error("Please pass a configuration to new.spine.SpinePlayer().");
|
||||
if (!config.jsonUrl) throw new Error("Please specify the URL of the skeleton JSON file.");
|
||||
if (!config.atlasUrl) throw new Error("Please specify the URL of the atlas file.");
|
||||
if (!config.alpha) config.alpha = false;
|
||||
if (!config.backgroundColor) config.backgroundColor = "#000000";
|
||||
if (!config.premultipliedAlpha) config.premultipliedAlpha = false;
|
||||
if (!config.success) config.success = (widget) => {};
|
||||
if (!config.error) config.error = (widget, msg) => {};
|
||||
if (!config.debug) config.debug = {
|
||||
bones: false,
|
||||
bounds: false,
|
||||
clipping: false,
|
||||
meshHull: false,
|
||||
paths: false,
|
||||
points: false,
|
||||
regions: false,
|
||||
triangles: false
|
||||
}
|
||||
if (!config.debug.bones) config.debug.bones = false;
|
||||
if (!config.debug.bounds) config.debug.bounds = false;
|
||||
if (!config.debug.clipping) config.debug.clipping = false;
|
||||
if (!config.debug.meshHull) config.debug.meshHull = false;
|
||||
if (!config.debug.paths) config.debug.paths = false;
|
||||
if (!config.debug.points) config.debug.points = false;
|
||||
if (!config.debug.regions) config.debug.regions = false;
|
||||
if (!config.debug.triangles) config.debug.triangles = false;
|
||||
return config;
|
||||
}
|
||||
|
||||
render(parent: HTMLElement, config: SpinePlayerConfig) {
|
||||
parent.innerHTML = /*html*/`
|
||||
<div class="spine-player">
|
||||
<canvas class="spine-player-canvas"></canvas>
|
||||
<div class="spine-player-controls spine-player-dropdown">
|
||||
<div class="spine-player-timeline">
|
||||
</div>
|
||||
<div class="spine-player-buttons">
|
||||
<button id="spine-player-button-play-pause" class="spine-player-button spine-player-button-icon-pause"></button>
|
||||
<div class="spine-player-button-spacer"></div>
|
||||
<button id="spine-player-button-speed" class="spine-player-button spine-player-button-icon-speed"></button>
|
||||
<button id="spine-player-button-animation" class="spine-player-button spine-player-button-icon-animations"></button>
|
||||
<button id="spine-player-button-skin" class="spine-player-button spine-player-button-icon-skins"></button>
|
||||
<button id="spine-player-button-settings" class="spine-player-button spine-player-button-icon-settings"></button>
|
||||
<button id="spine-player-button-fullscreen" class="spine-player-button spine-player-button-icon-fullscreen"></button>
|
||||
</div>
|
||||
|
||||
<div class="spine-player-dropdown-content spine-player-hidden">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Setup the scene renderer and OpenGL context
|
||||
this.canvas = findWithClass(parent, "spine-player-canvas")[0] as HTMLCanvasElement;
|
||||
var webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
|
||||
// Setup the scene renderer and loading screen
|
||||
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
|
||||
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
|
||||
|
||||
// Load the assets
|
||||
this.assetManager = new spine.webgl.AssetManager(this.context);
|
||||
this.assetManager.loadText(config.jsonUrl);
|
||||
this.assetManager.loadTextureAtlas(config.atlasUrl);
|
||||
|
||||
// Setup rendering loop
|
||||
requestAnimationFrame(() => this.drawFrame());
|
||||
|
||||
// Setup the event listeners for UI elements
|
||||
let timeline = findWithClass(parent, "spine-player-timeline")[0];
|
||||
this.timelineSlider = new Slider(timeline);
|
||||
this.playButton = findWithId(parent, "spine-player-button-play-pause")[0];
|
||||
let speedButton = findWithId(parent, "spine-player-button-speed")[0];
|
||||
let animationButton = findWithId(parent, "spine-player-button-animation")[0];
|
||||
let skinButton = findWithId(parent, "spine-player-button-skin")[0];
|
||||
let settingsButton = findWithId(parent, "spine-player-button-settings")[0];
|
||||
let fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0];
|
||||
|
||||
let dropdown = findWithClass(parent, "spine-player-dropdown-content")[0];
|
||||
|
||||
var justClicked = false;
|
||||
let dismissDropdown = function (event: any) {
|
||||
if (justClicked) {
|
||||
justClicked = false;
|
||||
return;
|
||||
}
|
||||
if (!isContained(dropdown, event.target)) {
|
||||
dropdown.classList.add("spine-player-hidden");
|
||||
window.onclick = null;
|
||||
}
|
||||
}
|
||||
|
||||
this.playButton.onclick = () => {
|
||||
if (this.paused) this.play()
|
||||
else this.pause();
|
||||
}
|
||||
|
||||
speedButton.onclick = () => {
|
||||
dropdown.classList.remove("spine-player-hidden");
|
||||
dropdown.innerHTML = /*html*/`
|
||||
<div class="spine-player-row" style="user-select: none; align-items: center;">
|
||||
<div style="margin-right: 16px;">Speed</div>
|
||||
<div class="spine-player-column">
|
||||
<div class="spine-player-speed-slider" style="margin-bottom: 4px;"></div>
|
||||
<div class="spine-player-row" style="justify-content: space-between;">
|
||||
<div>0.1x</div>
|
||||
<div>1x</div>
|
||||
<div>2x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
let sliderParent = findWithClass(dropdown, "spine-player-speed-slider")[0];
|
||||
let slider = new Slider(sliderParent);
|
||||
slider.setValue(this.speed / 2);
|
||||
slider.change = (percentage) => {
|
||||
this.speed = percentage * 2;
|
||||
}
|
||||
justClicked = true;
|
||||
window.onclick = dismissDropdown;
|
||||
}
|
||||
|
||||
animationButton.onclick = () => {
|
||||
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
|
||||
dropdown.classList.remove("spine-player-hidden");
|
||||
dropdown.innerHTML = /*html*/`
|
||||
<div class="spine-player-dropdown-title">Animations</div>
|
||||
<hr>
|
||||
<ul class="spine-player-list">
|
||||
</ul>
|
||||
`;
|
||||
|
||||
let rows = findWithClass(dropdown, "spine-player-list")[0];
|
||||
this.skeleton.data.animations.forEach((animation) => {
|
||||
let row = document.createElement("li");
|
||||
row.classList.add("spine-player-list-item");
|
||||
if (animation.name == this.config.animation) row.classList.add("spine-player-list-item-selected");
|
||||
row.innerText = animation.name;
|
||||
rows.appendChild(row);
|
||||
row.onclick = () => {
|
||||
removeClass(rows.children, "spine-player-list-item-selected");
|
||||
row.classList.add("spine-player-list-item-selected");
|
||||
this.config.animation = animation.name;
|
||||
this.playTime = 0;
|
||||
this.animationState.setAnimation(0, this.config.animation, true);
|
||||
}
|
||||
});
|
||||
|
||||
justClicked = true;
|
||||
window.onclick = dismissDropdown;
|
||||
}
|
||||
|
||||
skinButton.onclick = () => {
|
||||
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
|
||||
dropdown.classList.remove("spine-player-hidden");
|
||||
dropdown.innerHTML = /*html*/`
|
||||
<div class="spine-player-dropdown-title">Skins</div>
|
||||
<hr>
|
||||
<ul class="spine-player-list">
|
||||
</ul>
|
||||
`;
|
||||
|
||||
let rows = findWithClass(dropdown, "spine-player-list")[0];
|
||||
this.skeleton.data.skins.forEach((skin) => {
|
||||
let row = document.createElement("li");
|
||||
row.classList.add("spine-player-list-item");
|
||||
if (skin.name == this.config.skin) row.classList.add("spine-player-list-item-selected");
|
||||
row.innerText = skin.name;
|
||||
rows.appendChild(row);
|
||||
row.onclick = () => {
|
||||
removeClass(rows.children, "spine-player-list-item-selected");
|
||||
row.classList.add("spine-player-list-item-selected");
|
||||
this.config.skin = skin.name;
|
||||
this.skeleton.setSkinByName(this.config.skin);
|
||||
this.skeleton.setSlotsToSetupPose();
|
||||
}
|
||||
});
|
||||
|
||||
justClicked = true;
|
||||
window.onclick = dismissDropdown;
|
||||
}
|
||||
|
||||
settingsButton.onclick = () => {
|
||||
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
|
||||
dropdown.classList.remove("spine-player-hidden");
|
||||
dropdown.innerHTML = /*html*/`
|
||||
<div class="spine-player-dropdown-title">Debug</div>
|
||||
<hr>
|
||||
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
|
||||
</div>
|
||||
`;
|
||||
|
||||
let rows = findWithClass(dropdown, "spine-player-list")[0];
|
||||
let makeItem = (name: string) => {
|
||||
let row = document.createElement("div");
|
||||
row.classList.add("spine-player-list-item");
|
||||
if ((this.config.debug as any)[name] == true) row.classList.add("spine-player-list-item-selected");
|
||||
row.innerText = name
|
||||
rows.appendChild(row);
|
||||
row.onclick = () => {
|
||||
if ((this.config.debug as any)[name]) {
|
||||
(this.config.debug as any)[name] = false;
|
||||
row.classList.remove("spine-player-list-item-selected");
|
||||
} else {
|
||||
(this.config.debug as any)[name] = true;
|
||||
row.classList.add("spine-player-list-item-selected");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(this.config.debug).forEach((name) => {
|
||||
makeItem(name);
|
||||
});
|
||||
|
||||
justClicked = true;
|
||||
window.onclick = dismissDropdown;
|
||||
}
|
||||
|
||||
fullscreenButton.onclick = () => {
|
||||
let doc = document as any;
|
||||
if(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
|
||||
if (doc.exitFullscreen) doc.exitFullscreen();
|
||||
else if (doc.mozCancelFullScreen) doc.mozCancelFullScreen();
|
||||
else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
|
||||
else if (doc.msExitFullscreen) doc.msExitFullscreen();
|
||||
} else {
|
||||
let player = findWithClass(parent, "spine-player")[0] as any;
|
||||
if (player.requestFullscreen) player.requestFullscreen();
|
||||
else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();
|
||||
else if (player.mozRequestFullScreen) player.mozRequestFullScreen();
|
||||
else if (player.msRequestFullscreen) player.msRequestFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
// Register a global resize handler to redraw and avoid flicker
|
||||
window.onresize = () => {
|
||||
this.drawFrame(false);
|
||||
}
|
||||
}
|
||||
|
||||
drawFrame (requestNextFrame = true) {
|
||||
if (requestNextFrame) requestAnimationFrame(() => this.drawFrame());
|
||||
let ctx = this.context;
|
||||
let gl = ctx.gl;
|
||||
|
||||
// Clear the viewport
|
||||
let bg = new Color().setFromString(this.config.backgroundColor);
|
||||
gl.clearColor(bg.r, bg.g, bg.b, bg.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// Display loading screen
|
||||
this.loadingScreen.draw(this.assetManager.isLoadingComplete());
|
||||
|
||||
// Have we finished loading the asset? Then set things up
|
||||
if (this.assetManager.isLoadingComplete() && this.skeleton == null) this.loadSkeleton();
|
||||
|
||||
// Resize the canvas
|
||||
this.sceneRenderer.resize(webgl.ResizeMode.Expand);
|
||||
|
||||
// Update and draw the skeleton
|
||||
if (this.loaded) {
|
||||
if (!this.paused && this.config.animation) {
|
||||
this.time.update();
|
||||
let delta = this.time.delta * this.speed;
|
||||
|
||||
let animationDuration = this.animationState.getCurrent(0).animation.duration;
|
||||
this.playTime += delta;
|
||||
while (this.playTime >= animationDuration) {
|
||||
this.playTime -= animationDuration;
|
||||
}
|
||||
this.playTime = Math.max(0, Math.min(this.playTime, animationDuration));
|
||||
this.timelineSlider.setValue(this.playTime / animationDuration);
|
||||
|
||||
this.animationState.update(delta);
|
||||
this.animationState.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
let viewportSize = this.scale(this.config.viewport.width, this.config.viewport.height, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.sceneRenderer.camera.zoom = this.config.viewport.width / viewportSize.x;
|
||||
this.sceneRenderer.camera.position.x = this.config.viewport.x + this.config.viewport.width / 2;
|
||||
this.sceneRenderer.camera.position.y = this.config.viewport.y + this.config.viewport.height / 2;
|
||||
|
||||
this.sceneRenderer.begin();
|
||||
this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha);
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawBones = this.config.debug.bones;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawBoundingBoxes = this.config.debug.bounds;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawClipping = this.config.debug.clipping;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawMeshHull = this.config.debug.meshHull;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawPaths = this.config.debug.paths;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.triangles;
|
||||
this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha);
|
||||
this.sceneRenderer.end();
|
||||
|
||||
this.sceneRenderer.camera.zoom = 0;
|
||||
}
|
||||
}
|
||||
|
||||
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2 {
|
||||
let targetRatio = targetHeight / targetWidth;
|
||||
let sourceRatio = sourceHeight / sourceWidth;
|
||||
let scale = targetRatio > sourceRatio ? targetWidth / sourceWidth : targetHeight / sourceHeight;
|
||||
let temp = new spine.Vector2();
|
||||
temp.x = sourceWidth * scale;
|
||||
temp.y = sourceHeight * scale;
|
||||
return temp;
|
||||
}
|
||||
|
||||
loadSkeleton () {
|
||||
if (this.loaded) return;
|
||||
|
||||
let atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
let jsonText = this.assetManager.get(this.config.jsonUrl);
|
||||
let json = new SkeletonJson(new AtlasAttachmentLoader(atlas));
|
||||
let skeletonData = json.readSkeletonData(jsonText);
|
||||
this.skeleton = new Skeleton(skeletonData);
|
||||
let stateData = new AnimationStateData(skeletonData);
|
||||
stateData.defaultMix = 0.2;
|
||||
this.animationState = new AnimationState(stateData);
|
||||
|
||||
// Setup skin
|
||||
if (!this.config.skin) {
|
||||
if (skeletonData.skins.length > 0) {
|
||||
this.config.skin = skeletonData.skins[0].name;
|
||||
}
|
||||
}
|
||||
if (this.config.skin) {
|
||||
this.skeleton.setSkinByName(this.config.skin);
|
||||
this.skeleton.setSlotsToSetupPose();
|
||||
}
|
||||
|
||||
// Setup viewport
|
||||
if (!this.config.viewport || !this.config.viewport.x || !this.config.viewport.y || !this.config.viewport.width || !this.config.viewport.height) {
|
||||
this.config.viewport = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
this.skeleton.updateWorldTransform();
|
||||
let offset = new spine.Vector2();
|
||||
let size = new spine.Vector2();
|
||||
this.skeleton.getBounds(offset, size);
|
||||
this.config.viewport.x = offset.x + size.x / 2 - size.x / 2 * 1.2;
|
||||
this.config.viewport.y = offset.y + size.y / 2 - size.y / 2 * 1.2;
|
||||
this.config.viewport.width = size.x * 1.2;
|
||||
this.config.viewport.height = size.y * 1.2;
|
||||
}
|
||||
|
||||
// Setup the first animation
|
||||
if (!this.config.animation) {
|
||||
if (skeletonData.animations.length > 0) {
|
||||
this.config.animation = skeletonData.animations[0].name;
|
||||
}
|
||||
}
|
||||
if(this.config.animation) {
|
||||
this.play()
|
||||
this.timelineSlider.change = (percentage) => {
|
||||
this.pause();
|
||||
var animationDuration = this.animationState.getCurrent(0).animation.duration;
|
||||
var time = animationDuration * percentage;
|
||||
this.animationState.update(time - this.playTime);
|
||||
this.animationState.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform();
|
||||
this.playTime = time;
|
||||
}
|
||||
}
|
||||
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
private play () {
|
||||
this.paused = false;
|
||||
this.playButton.classList.remove("spine-player-button-icon-play");
|
||||
this.playButton.classList.add("spine-player-button-icon-pause");
|
||||
|
||||
if (this.config.animation) {
|
||||
if (!this.animationState.getCurrent(0)) {
|
||||
this.animationState.setAnimation(0, this.config.animation, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private pause () {
|
||||
this.paused = true;
|
||||
this.playButton.classList.remove("spine-player-button-icon-pause");
|
||||
this.playButton.classList.add("spine-player-button-icon-play");
|
||||
}
|
||||
|
||||
private resize () {
|
||||
let canvas = this.canvas;
|
||||
let w = canvas.clientWidth;
|
||||
let h = canvas.clientHeight;
|
||||
|
||||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||||
if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
|
||||
canvas.width = Math.floor(w * devicePixelRatio);
|
||||
canvas.height = Math.floor(h * devicePixelRatio);
|
||||
}
|
||||
this.context.gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
this.sceneRenderer.camera.setViewport(canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
function isContained(dom: HTMLElement, needle: HTMLElement): boolean {
|
||||
if (dom === needle) return true;
|
||||
let findRecursive = (dom: HTMLElement, needle: HTMLElement) => {
|
||||
for(var i = 0; i < dom.children.length; i++) {
|
||||
let child = dom.children[i] as HTMLElement;
|
||||
if (child === needle) return true;
|
||||
if (findRecursive(child, needle)) return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
return findRecursive(dom, needle);
|
||||
}
|
||||
|
||||
function findWithId(dom: HTMLElement, id: string): HTMLElement[] {
|
||||
let found = new Array<HTMLElement>()
|
||||
let findRecursive = (dom: HTMLElement, id: string, found: HTMLElement[]) => {
|
||||
for(var i = 0; i < dom.children.length; i++) {
|
||||
let child = dom.children[i] as HTMLElement;
|
||||
if (child.id === id) found.push(child);
|
||||
findRecursive(child, id, found);
|
||||
}
|
||||
};
|
||||
findRecursive(dom, id, found);
|
||||
return found;
|
||||
}
|
||||
|
||||
function findWithClass(dom: HTMLElement, className: string): HTMLElement[] {
|
||||
let found = new Array<HTMLElement>()
|
||||
let findRecursive = (dom: HTMLElement, className: string, found: HTMLElement[]) => {
|
||||
for(var i = 0; i < dom.children.length; i++) {
|
||||
let child = dom.children[i] as HTMLElement;
|
||||
if (child.classList.contains(className)) found.push(child);
|
||||
findRecursive(child, className, found);
|
||||
}
|
||||
};
|
||||
findRecursive(dom, className, found);
|
||||
return found;
|
||||
}
|
||||
|
||||
function removeClass(elements: HTMLCollection, clazz: string) {
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
elements[i].classList.remove(clazz);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user