UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-22 02:06:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Player updates.

Browse Source 
* 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 2021-06-20 14:46:48 -04:00
parent 4742c0d987
commit b044bdbf47
7 changed files with 100 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
spine-ts/build/spine-all.js
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

47
spine-ts/build/spine-player.js
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-player.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/player/example/index.html → spine-ts/player/example/example.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script src="../../build/spine-player.js"></script> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>

50
spine-ts/player/src/Player.ts
View File

@ -209,7 +209,6 @@ module spine {
this.bg.setFromString(config.backgroundColor); this.bg.setFromString(config.backgroundColor);
this.bgFullscreen.setFromString(config.fullScreenBackgroundColor); this.bgFullscreen.setFromString(config.fullScreenBackgroundColor);
this.parent.style.position = "relative";
this.parent.appendChild(this.create()); this.parent.appendChild(this.create());
if (!config.alpha) { // Prevents a flash before the first frame is drawn. if (!config.alpha) { // Prevents a flash before the first frame is drawn.
let hex = config.backgroundColor; let hex = config.backgroundColor;
@ -233,9 +232,9 @@ module spine {
if (config.premultipliedAlpha === undefined) config.premultipliedAlpha = true; if (config.premultipliedAlpha === undefined) config.premultipliedAlpha = true;
if (!config.debug) config.debug = {} as any; if (!config.debug) config.debug = {} as any;
if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0) 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) 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) config.viewport = {} as any;
if (!config.viewport.animations) config.viewport.animations = {}; if (!config.viewport.animations) config.viewport.animations = {};
if (config.viewport.debugRender === undefined) config.viewport.debugRender = false; if (config.viewport.debugRender === undefined) config.viewport.debugRender = false;
@ -263,7 +262,7 @@ module spine {
</div></div>` : ""; </div></div>` : "";
let dom = this.dom = createElement( 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 { try {
// Setup the OpenGL context. // 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"); 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); if (config.success) config.success(this);
let entry = this.animationState.getCurrent(0); let entry = this.animationState.getCurrent(0);
if (!entry) { if (!entry) {
if (this.config.animation) if (config.animation) {
this.setAnimation(this.config.animation); entry = this.setAnimation(config.animation);
else { this.play();
} else {
entry = this.animationState.setEmptyAnimation(0); entry = this.animationState.setEmptyAnimation(0);
entry.trackEnd = 100000000; entry.trackEnd = 100000000;
this.setViewport(entry.animation); this.setViewport(entry.animation);
this.pause();
} }
} else if (!this.currentViewport) } else if (!this.currentViewport) {
this.setViewport(entry.animation); this.setViewport(entry.animation);
this.play();
}
} }
private setupInput () { private setupInput () {
let controlBones = this.config.controlBones; let config = this.config;
if (!controlBones.length && !this.config.showControls) return; let controlBones = config.controlBones;
if (!controlBones.length && !config.showControls) return;
let selectedBones = this.selectedBones = new Array<Bone>(controlBones.length); let selectedBones = this.selectedBones = new Array<Bone>(controlBones.length);
let canvas = this.canvas; let canvas = this.canvas;
let input = new spine.webgl.Input(canvas); let input = new spine.webgl.Input(canvas);
@ -506,7 +508,7 @@ module spine {
up: (x, y) => { up: (x, y) => {
if (target) if (target)
target = null; target = null;
else if (this.config.showControls) else if (config.showControls)
(this.paused ? this.play() : this.pause()); (this.paused ? this.play() : this.pause());
}, },
dragged: (x, y) => { dragged: (x, y) => {
@ -527,7 +529,7 @@ module spine {
moved: (x, y) => closest(x, y) 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 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. // 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 () { play () {
this.paused = false; this.paused = false;
if (this.config.showControls) { let config = this.config;
if (config.showControls) {
this.cancelId = setTimeout(() => { this.cancelId = setTimeout(() => {
if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden"); if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
}, 1000); }, 1000);
this.playButton.classList.remove("spine-player-button-icon-play"); this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause"); 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*/` let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Speed</div> <div class="spine-player-popup-title">Speed</div>
<hr> <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-column">
<div class="spine-player-speed-slider" style="margin-bottom: 4px;"></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 class="spine-player-row" style="justify-content:space-between"><div>0.1x</div><div>1x</div><div>2x</div></div>
</div> </div>
</div>`); </div>`);
let slider = new Slider(2, 0.1, true); let slider = new Slider(2, 0.1, true);
@ -994,7 +1006,7 @@ module spine {
} else { } else {
this.error = true; this.error = true;
this.dom.appendChild(createElement( 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>`)); + message.replace("\n", "<br><br>") + `</div>`));
if (this.config.error) this.config.error(this, message); if (this.config.error) this.config.error(this, message);
throw (error ? error : new Error(message)); throw (error ? error : new Error(message));

14
spine-ts/player/src/PlayerEditor.ts
View File

@ -33,15 +33,15 @@ module spine {
export class SpinePlayerEditor { export class SpinePlayerEditor {
private static DEFAULT_CODE = private static DEFAULT_CODE =
` `
<script src="https://esotericsoftware.com/files/spine-player/3.7/spine-player.js"></script> <script src="https://esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css"> <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> <div id="player-container" style="width: 100%; height: 100vh;"></div>
<script> <script>
new spine.SpinePlayer("player-container", { new spine.SpinePlayer("player-container", {
jsonUrl: "https://esotericsoftware.com/files/examples/spineboy/export/spineboy-pro.json", jsonUrl: "https://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pro.json",
atlasUrl: "https://esotericsoftware.com/files/examples/spineboy/export/spineboy-pma.atlas" atlasUrl: "https://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pma.atlas"
}); });
</script> </script>
`.trim(); `.trim();
@ -50,9 +50,7 @@ new spine.SpinePlayer("player-container", {
`<html> `<html>
<head> <head>
<style> <style>
body { body { margin: 0px; }
margin: 0px;
}
</style> </style>
</head> </head>
<body>`.trim() <body>`.trim()
@ -60,7 +58,7 @@ body {
private code: any; private code: any;
private player: HTMLIFrameElement; private player: HTMLIFrameElement;
constructor(parent: HTMLElement) { constructor (parent: HTMLElement) {
this.render(parent); this.render(parent);
} }