mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 09:16:01 +08:00
[ts] Player updates.
* If no config animation, start paused and set one when first clicked (showControls only). * Updated player editor to 4.0. * Don't name example index.html to make it easier to reach other files in same dir. * Adjust CSS.
This commit is contained in:
Nathan Sweet
parent
4742c0d987
commit
b044bdbf47
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="../../build/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="../css/spine-player.css">
|
||||
<link rel="stylesheet" href="../css/spine-player.xscss">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
@ -209,7 +209,6 @@ module spine {
|
||||
this.bg.setFromString(config.backgroundColor);
|
||||
this.bgFullscreen.setFromString(config.fullScreenBackgroundColor);
|
||||
|
||||
this.parent.style.position = "relative";
|
||||
this.parent.appendChild(this.create());
|
||||
if (!config.alpha) { // Prevents a flash before the first frame is drawn.
|
||||
let hex = config.backgroundColor;
|
||||
@ -233,9 +232,9 @@ module spine {
|
||||
if (config.premultipliedAlpha === undefined) config.premultipliedAlpha = true;
|
||||
if (!config.debug) config.debug = {} as any;
|
||||
if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
|
||||
throw new Error("Animation '" + config.animation + "' is not in the config animation list: " + toString(this.config.animations));
|
||||
throw new Error("Animation '" + config.animation + "' is not in the config animation list: " + toString(config.animations));
|
||||
if (config.skins && config.skin && config.skins.indexOf(config.skin) < 0)
|
||||
throw new Error("Default skin '" + config.skin + "' is not in the config skins list: " + toString(this.config.skins));
|
||||
throw new Error("Default skin '" + config.skin + "' is not in the config skins list: " + toString(config.skins));
|
||||
if (!config.viewport) config.viewport = {} as any;
|
||||
if (!config.viewport.animations) config.viewport.animations = {};
|
||||
if (config.viewport.debugRender === undefined) config.viewport.debugRender = false;
|
||||
@ -263,7 +262,7 @@ module spine {
|
||||
</div></div>` : "";
|
||||
|
||||
let dom = this.dom = createElement(
|
||||
/*html*/`<div class="spine-player"><canvas class="spine-player-canvas" style="display:block;height:100%;width:100%"></canvas>${controls}</div>`);
|
||||
/*html*/`<div class="spine-player" style="position:relative;height:100%"><canvas class="spine-player-canvas" style="display:block;width:100%;height:100%"></canvas>${controls}</div>`);
|
||||
|
||||
try {
|
||||
// Setup the OpenGL context.
|
||||
@ -450,26 +449,29 @@ module spine {
|
||||
if (skeletonData.animations.length == 1 || (config.animations && config.animations.length == 1)) this.animationButton.classList.add("spine-player-hidden");
|
||||
}
|
||||
|
||||
this.play();
|
||||
|
||||
if (config.success) config.success(this);
|
||||
|
||||
let entry = this.animationState.getCurrent(0);
|
||||
if (!entry) {
|
||||
if (this.config.animation)
|
||||
this.setAnimation(this.config.animation);
|
||||
else {
|
||||
if (config.animation) {
|
||||
entry = this.setAnimation(config.animation);
|
||||
this.play();
|
||||
} else {
|
||||
entry = this.animationState.setEmptyAnimation(0);
|
||||
entry.trackEnd = 100000000;
|
||||
this.setViewport(entry.animation);
|
||||
this.pause();
|
||||
}
|
||||
} else if (!this.currentViewport)
|
||||
} else if (!this.currentViewport) {
|
||||
this.setViewport(entry.animation);
|
||||
this.play();
|
||||
}
|
||||
}
|
||||
|
||||
private setupInput () {
|
||||
let controlBones = this.config.controlBones;
|
||||
if (!controlBones.length && !this.config.showControls) return;
|
||||
let config = this.config;
|
||||
let controlBones = config.controlBones;
|
||||
if (!controlBones.length && !config.showControls) return;
|
||||
let selectedBones = this.selectedBones = new Array<Bone>(controlBones.length);
|
||||
let canvas = this.canvas;
|
||||
let input = new spine.webgl.Input(canvas);
|
||||
@ -506,7 +508,7 @@ module spine {
|
||||
up: (x, y) => {
|
||||
if (target)
|
||||
target = null;
|
||||
else if (this.config.showControls)
|
||||
else if (config.showControls)
|
||||
(this.paused ? this.play() : this.pause());
|
||||
},
|
||||
dragged: (x, y) => {
|
||||
@ -527,7 +529,7 @@ module spine {
|
||||
moved: (x, y) => closest(x, y)
|
||||
});
|
||||
|
||||
if (!this.config.showControls) return;
|
||||
if (!config.showControls) return;
|
||||
|
||||
// For manual hover to work, we need to disable hidding controls if the mouse/touch entered the clickable area of a child of the controls.
|
||||
// For this we need to register a mouse handler on the document and see if we are within the canvas area.
|
||||
@ -570,12 +572,22 @@ module spine {
|
||||
|
||||
play () {
|
||||
this.paused = false;
|
||||
if (this.config.showControls) {
|
||||
let config = this.config;
|
||||
if (config.showControls) {
|
||||
this.cancelId = setTimeout(() => {
|
||||
if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
|
||||
}, 1000);
|
||||
this.playButton.classList.remove("spine-player-button-icon-play");
|
||||
this.playButton.classList.add("spine-player-button-icon-pause");
|
||||
|
||||
// If no config animation, set one when first clicked.
|
||||
if (!config.animation) {
|
||||
if (config.animations && config.animations.length)
|
||||
config.animation = config.animations[0];
|
||||
else if (this.skeleton.data.animations.length)
|
||||
config.animation = this.skeleton.data.animations[0].name;
|
||||
if (config.animation) this.setAnimation(config.animation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -844,10 +856,10 @@ module spine {
|
||||
let popup = new Popup(this.dom, this.playerControls, /*html*/`
|
||||
<div class="spine-player-popup-title">Speed</div>
|
||||
<hr>
|
||||
<div class="spine-player-row" style="user-select: none; align-items: center; padding: 8px;">
|
||||
<div class="spine-player-row" style="align-items:center;padding:8px">
|
||||
<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 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 slider = new Slider(2, 0.1, true);
|
||||
@ -994,7 +1006,7 @@ module spine {
|
||||
} else {
|
||||
this.error = true;
|
||||
this.dom.appendChild(createElement(
|
||||
/*html*/`<div class="spine-player-error" style="background:#000; color:#fff; position:absolute; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; overflow:auto; z-index:999">`
|
||||
/*html*/`<div class="spine-player-error" style="background:#000;color:#fff;position:absolute;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:auto;z-index:999">`
|
||||
+ message.replace("\n", "<br><br>") + `</div>`));
|
||||
if (this.config.error) this.config.error(this, message);
|
||||
throw (error ? error : new Error(message));
|
||||
|
||||
@ -33,15 +33,15 @@ module spine {
|
||||
export class SpinePlayerEditor {
|
||||
private static DEFAULT_CODE =
|
||||
`
|
||||
<script src="https://esotericsoftware.com/files/spine-player/3.7/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css">
|
||||
<script src="https://esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/4.0/spine-player.css">
|
||||
|
||||
<div id="player-container" style="width: 100%; height: 100vh;"></div>
|
||||
|
||||
<script>
|
||||
new spine.SpinePlayer("player-container", {
|
||||
jsonUrl: "https://esotericsoftware.com/files/examples/spineboy/export/spineboy-pro.json",
|
||||
atlasUrl: "https://esotericsoftware.com/files/examples/spineboy/export/spineboy-pma.atlas"
|
||||
jsonUrl: "https://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pro.json",
|
||||
atlasUrl: "https://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pma.atlas"
|
||||
});
|
||||
</script>
|
||||
`.trim();
|
||||
@ -50,9 +50,7 @@ new spine.SpinePlayer("player-container", {
|
||||
`<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
body { margin: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>`.trim()
|
||||
@ -60,7 +58,7 @@ body {
|
||||
private code: any;
|
||||
private player: HTMLIFrameElement;
|
||||
|
||||
constructor(parent: HTMLElement) {
|
||||
constructor (parent: HTMLElement) {
|
||||
this.render(parent);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user