UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added almost all player features for V1, missing mouse/touch zoom and pan and controllable bones.

Browse Source
This commit is contained in:
badlogic 2018-11-07 18:03:37 +01:00
parent 2597e11ee0
commit 5bd37ca739
5 changed files with 692 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
spine-ts/build/spine-widget.d.ts vendored
View File

@ -1687,16 +1687,18 @@ declare module spine {
jsonUrl: string; jsonUrl: string;
atlasUrl: string; atlasUrl: string;
animation: string; animation: string;
animations: string[];
skin: string; skin: string;
skins: string[];
debug: { debug: {
bones: boolean; bones: boolean;
regions: boolean; regions: boolean;
meshes: boolean;
bounds: boolean; bounds: boolean;
paths: boolean; paths: boolean;
points: boolean;
clipping: boolean; clipping: boolean;
meshHull: boolean; points: boolean;
triangles: boolean; hulls: boolean;
}; };
viewport: { viewport: {
x: number; x: number;
@ -1706,6 +1708,13 @@ declare module spine {
}; };
alpha: boolean; alpha: boolean;
backgroundColor: string; backgroundColor: string;
backgroundImage: {
url: string;
x: number;
y: number;
width: number;
height: number;
};
premultipliedAlpha: boolean; premultipliedAlpha: boolean;
success: (widget: SpineWidget) => void; success: (widget: SpineWidget) => void;
error: (widget: SpineWidget, msg: string) => void; error: (widget: SpineWidget, msg: string) => void;
@ -1713,12 +1722,14 @@ declare module spine {
class SpinePlayer { class SpinePlayer {
private config; private config;
private sceneRenderer; private sceneRenderer;
private dom;
private playerControls;
private canvas; private canvas;
private timelineSlider;
private playButton;
private context; private context;
private loadingScreen; private loadingScreen;
private assetManager; private assetManager;
private timelineSlider;
private playButton;
private loaded; private loaded;
private skeleton; private skeleton;
private animationState; private animationState;
@ -1728,7 +1739,11 @@ declare module spine {
private speed; private speed;
constructor(parent: HTMLElement, config: SpinePlayerConfig); constructor(parent: HTMLElement, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
render(parent: HTMLElement, config: SpinePlayerConfig): void; render(): HTMLElement;
showSpeedDialog(): void;
showAnimationsDialog(): void;
showSkinsDialog(): void;
showSettingsDialog(): void;
drawFrame(requestNextFrame?: boolean): void; drawFrame(requestNextFrame?: boolean): void;
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2; scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
loadSkeleton(): void; loadSkeleton(): void;

325
spine-ts/build/spine-widget.js
View File

@ -9401,12 +9401,64 @@ var spine;
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;
(function (spine) { (function (spine) {
var Slider = (function () { var Popup = (function () {
function Slider(parent) { function Popup(parent, htmlContent) {
this.dom = createElement("\n\t\t\t\t<div class=\"spine-player-popup spine-player-hidden\">\n\t\t\t\t</div>\n\t\t\t");
this.dom.innerHTML = htmlContent;
parent.appendChild(this.dom);
}
Popup.prototype.show = function () {
var _this = this; var _this = this;
parent.innerHTML = "\n\t\t\t\t<div class=\"spine-player-slider\">\n\t\t\t\t\t<div class=\"spine-player-slider-value\"></div>\n\t\t\t\t</div>\n\t\t\t"; this.dom.classList.remove("spine-player-hidden");
this.slider = findWithClass(parent, "spine-player-slider")[0]; var justClicked = true;
this.value = findWithClass(parent, "spine-player-slider-value")[0]; var windowClickListener = function (event) {
if (justClicked) {
justClicked = false;
return;
}
if (!isContained(_this.dom, event.target)) {
_this.dom.parentNode.removeChild(_this.dom);
window.removeEventListener("click", windowClickListener);
}
};
window.addEventListener("click", windowClickListener);
};
return Popup;
}());
var Switch = (function () {
function Switch(text) {
this.text = text;
this.enabled = false;
}
Switch.prototype.render = function () {
var _this = this;
this["switch"] = createElement("\n\t\t\t\t<div class=\"spine-player-switch\">\n\t\t\t\t\t<span class=\"spine-player-switch-text\">" + this.text + "</span>\n\t\t\t\t\t<div class=\"spine-player-switch-knob-area\">\n\t\t\t\t\t\t<div class=\"spine-player-switch-knob\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
this["switch"].addEventListener("click", function () {
_this.setEnabled(!_this.enabled);
if (_this.change)
_this.change(_this.enabled);
});
return this["switch"];
};
Switch.prototype.setEnabled = function (enabled) {
if (enabled)
this["switch"].classList.add("active");
else
this["switch"].classList.remove("active");
this.enabled = enabled;
};
Switch.prototype.isEnabled = function () {
return this.enabled;
};
return Switch;
}());
var Slider = (function () {
function Slider() {
}
Slider.prototype.render = function () {
var _this = this;
this.slider = createElement("\n\t\t\t\t<div class=\"spine-player-slider\">\n\t\t\t\t\t<div class=\"spine-player-slider-value\"></div>\n\t\t\t\t</div>\n\t\t\t");
this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
this.setValue(0); this.setValue(0);
var input = new spine.webgl.Input(this.slider); var input = new spine.webgl.Input(this.slider);
var dragging = false; var dragging = false;
@ -9439,7 +9491,8 @@ var spine;
_this.change(percentage); _this.change(percentage);
} }
}); });
} return this.slider;
};
Slider.prototype.setValue = function (percentage) { Slider.prototype.setValue = function (percentage) {
percentage = Math.max(0, Math.min(1, percentage)); percentage = Math.max(0, Math.min(1, percentage));
this.value.style.width = "" + (percentage * 100) + "%"; this.value.style.width = "" + (percentage * 100) + "%";
@ -9453,8 +9506,8 @@ var spine;
this.paused = true; this.paused = true;
this.playTime = 0; this.playTime = 0;
this.speed = 1; this.speed = 1;
this.validateConfig(config); this.config = this.validateConfig(config);
this.render(parent, config); parent.appendChild(this.render());
} }
SpinePlayer.prototype.validateConfig = function (config) { SpinePlayer.prototype.validateConfig = function (config) {
if (!config) if (!config)
@ -9476,13 +9529,13 @@ var spine;
if (!config.debug) if (!config.debug)
config.debug = { config.debug = {
bones: false, bones: false,
regions: false,
meshes: false,
bounds: false, bounds: false,
clipping: false, clipping: false,
meshHull: false,
paths: false, paths: false,
points: false, points: false,
regions: false, hulls: false
triangles: false
}; };
if (!config.debug.bones) if (!config.debug.bones)
config.debug.bones = false; config.debug.bones = false;
@ -9490,22 +9543,31 @@ var spine;
config.debug.bounds = false; config.debug.bounds = false;
if (!config.debug.clipping) if (!config.debug.clipping)
config.debug.clipping = false; config.debug.clipping = false;
if (!config.debug.meshHull) if (!config.debug.hulls)
config.debug.meshHull = false; config.debug.hulls = false;
if (!config.debug.paths) if (!config.debug.paths)
config.debug.paths = false; config.debug.paths = false;
if (!config.debug.points) if (!config.debug.points)
config.debug.points = false; config.debug.points = false;
if (!config.debug.regions) if (!config.debug.regions)
config.debug.regions = false; config.debug.regions = false;
if (!config.debug.triangles) if (!config.debug.meshes)
config.debug.triangles = false; config.debug.meshes = false;
if (config.animations && config.animation) {
if (config.animations.indexOf(config.animation) < 0)
throw new Error("Default animation " + config.animation + " is not contained in the list of selectable animations.");
}
if (config.skins && config.skin) {
if (config.skins.indexOf(config.skin) < 0)
throw new Error("Default skin " + config.skin + " is not contained in the list of selectable skins.");
}
return config; return config;
}; };
SpinePlayer.prototype.render = function (parent, config) { SpinePlayer.prototype.render = function () {
var _this = this; var _this = this;
parent.innerHTML = "\n\t\t\t\t<div class=\"spine-player\">\n\t\t\t\t\t<canvas class=\"spine-player-canvas\"></canvas>\n\t\t\t\t\t<div class=\"spine-player-controls spine-player-dropdown\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"spine-player-buttons\">\n\t\t\t\t\t\t\t<button id=\"spine-player-button-play-pause\" class=\"spine-player-button spine-player-button-icon-pause\"></button>\n\t\t\t\t\t\t\t<div class=\"spine-player-button-spacer\"></div>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-speed\" class=\"spine-player-button spine-player-button-icon-speed\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button spine-player-button-icon-animations\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button spine-player-button-icon-skins\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button spine-player-button-icon-settings\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button spine-player-button-icon-fullscreen\"></button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"spine-player-dropdown-content spine-player-hidden\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t"; var config = this.config;
this.canvas = findWithClass(parent, "spine-player-canvas")[0]; var dom = this.dom = createElement("\n\t\t\t\t<div class=\"spine-player\">\n\t\t\t\t\t<canvas class=\"spine-player-canvas\"></canvas>\n\t\t\t\t\t<div class=\"spine-player-controls spine-player-popup-parent\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"spine-player-buttons\">\n\t\t\t\t\t\t\t<button id=\"spine-player-button-play-pause\" class=\"spine-player-button spine-player-button-icon-pause\"></button>\n\t\t\t\t\t\t\t<div class=\"spine-player-button-spacer\"></div>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-speed\" class=\"spine-player-button spine-player-button-icon-speed\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button spine-player-button-icon-animations\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button spine-player-button-icon-skins\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button spine-player-button-icon-settings\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button spine-player-button-icon-fullscreen\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
this.canvas = findWithClass(dom, "spine-player-canvas")[0];
var webglConfig = { alpha: config.alpha }; var webglConfig = { alpha: config.alpha };
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig); this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true); this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
@ -9513,27 +9575,19 @@ var spine;
this.assetManager = new spine.webgl.AssetManager(this.context); this.assetManager = new spine.webgl.AssetManager(this.context);
this.assetManager.loadText(config.jsonUrl); this.assetManager.loadText(config.jsonUrl);
this.assetManager.loadTextureAtlas(config.atlasUrl); this.assetManager.loadTextureAtlas(config.atlasUrl);
if (config.backgroundImage && config.backgroundImage.url)
this.assetManager.loadTexture(config.backgroundImage.url);
requestAnimationFrame(function () { return _this.drawFrame(); }); requestAnimationFrame(function () { return _this.drawFrame(); });
var timeline = findWithClass(parent, "spine-player-timeline")[0]; this.playerControls = findWithClass(dom, "spine-player-controls")[0];
this.timelineSlider = new Slider(timeline); var timeline = findWithClass(dom, "spine-player-timeline")[0];
this.playButton = findWithId(parent, "spine-player-button-play-pause")[0]; this.timelineSlider = new Slider();
var speedButton = findWithId(parent, "spine-player-button-speed")[0]; timeline.appendChild(this.timelineSlider.render());
var animationButton = findWithId(parent, "spine-player-button-animation")[0]; this.playButton = findWithId(dom, "spine-player-button-play-pause")[0];
var skinButton = findWithId(parent, "spine-player-button-skin")[0]; var speedButton = findWithId(dom, "spine-player-button-speed")[0];
var settingsButton = findWithId(parent, "spine-player-button-settings")[0]; var animationButton = findWithId(dom, "spine-player-button-animation")[0];
var fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0]; var skinButton = findWithId(dom, "spine-player-button-skin")[0];
var dropdown = findWithClass(parent, "spine-player-dropdown-content")[0]; var settingsButton = findWithId(dom, "spine-player-button-settings")[0];
var justClicked = false; var fullscreenButton = findWithId(dom, "spine-player-button-fullscreen")[0];
var dismissDropdown = function (event) {
if (justClicked) {
justClicked = false;
return;
}
if (!isContained(dropdown, event.target)) {
dropdown.classList.add("spine-player-hidden");
window.onclick = null;
}
};
this.playButton.onclick = function () { this.playButton.onclick = function () {
if (_this.paused) if (_this.paused)
_this.play(); _this.play();
@ -9541,94 +9595,16 @@ var spine;
_this.pause(); _this.pause();
}; };
speedButton.onclick = function () { speedButton.onclick = function () {
dropdown.classList.remove("spine-player-hidden"); _this.showSpeedDialog();
dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-row\" style=\"user-select: none; align-items: center;\">\n\t\t\t\t\t\t<div style=\"margin-right: 16px;\">Speed</div>\n\t\t\t\t\t\t<div class=\"spine-player-column\">\n\t\t\t\t\t\t\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom: 4px;\"></div>\n\t\t\t\t\t\t\t<div class=\"spine-player-row\" style=\"justify-content: space-between;\">\n\t\t\t\t\t\t\t\t<div>0.1x</div>\n\t\t\t\t\t\t\t\t<div>1x</div>\n\t\t\t\t\t\t\t\t<div>2x</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t";
var sliderParent = findWithClass(dropdown, "spine-player-speed-slider")[0];
var slider = new Slider(sliderParent);
slider.setValue(_this.speed / 2);
slider.change = function (percentage) {
_this.speed = percentage * 2;
};
justClicked = true;
window.onclick = dismissDropdown;
}; };
animationButton.onclick = function () { animationButton.onclick = function () {
if (!_this.skeleton || _this.skeleton.data.animations.length == 0) _this.showAnimationsDialog();
return;
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = "\n\t\t\t\t\t<div>Animations</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
var rows = findWithClass(dropdown, "spine-player-list")[0];
_this.skeleton.data.animations.forEach(function (animation) {
var row = document.createElement("div");
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 = function () {
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 = function () { skinButton.onclick = function () {
if (!_this.skeleton || _this.skeleton.data.animations.length == 0) _this.showSkinsDialog();
return;
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = "\n\t\t\t\t\t<div>Skins</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
var rows = findWithClass(dropdown, "spine-player-list")[0];
_this.skeleton.data.skins.forEach(function (skin) {
var row = document.createElement("div");
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 = function () {
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 = function () { settingsButton.onclick = function () {
if (!_this.skeleton || _this.skeleton.data.animations.length == 0) _this.showSettingsDialog();
return;
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = "\n\t\t\t\t\t<div>Debug</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
var rows = findWithClass(dropdown, "spine-player-list")[0];
var makeItem = function (name) {
var row = document.createElement("div");
row.classList.add("spine-player-list-item");
if (_this.config.debug[name] == true)
row.classList.add("spine-player-list-item-selected");
row.innerText = name;
rows.appendChild(row);
row.onclick = function () {
if (_this.config.debug[name]) {
_this.config.debug[name] = false;
row.classList.remove("spine-player-list-item-selected");
}
else {
_this.config.debug[name] = true;
row.classList.add("spine-player-list-item-selected");
}
};
};
Object.keys(_this.config.debug).forEach(function (name) {
makeItem(name);
});
justClicked = true;
window.onclick = dismissDropdown;
}; };
fullscreenButton.onclick = function () { fullscreenButton.onclick = function () {
var doc = document; var doc = document;
@ -9643,7 +9619,7 @@ var spine;
doc.msExitFullscreen(); doc.msExitFullscreen();
} }
else { else {
var player = findWithClass(parent, "spine-player")[0]; var player = dom;
if (player.requestFullscreen) if (player.requestFullscreen)
player.requestFullscreen(); player.requestFullscreen();
else if (player.webkitRequestFullScreen) else if (player.webkitRequestFullScreen)
@ -9657,6 +9633,95 @@ var spine;
window.onresize = function () { window.onresize = function () {
_this.drawFrame(false); _this.drawFrame(false);
}; };
return dom;
};
SpinePlayer.prototype.showSpeedDialog = function () {
var _this = this;
var popup = new Popup(this.playerControls, "\n\t\t\t\t<div class=\"spine-player-row\" style=\"user-select: none; align-items: center; padding: 8px;\">\n\t\t\t\t\t<div style=\"margin-right: 16px;\">Speed</div>\n\t\t\t\t\t<div class=\"spine-player-column\">\n\t\t\t\t\t\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom: 4px;\"></div>\n\t\t\t\t\t\t<div class=\"spine-player-row\" style=\"justify-content: space-between;\">\n\t\t\t\t\t\t\t<div>0.1x</div>\n\t\t\t\t\t\t\t<div>1x</div>\n\t\t\t\t\t\t\t<div>2x</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
var sliderParent = findWithClass(popup.dom, "spine-player-speed-slider")[0];
var slider = new Slider();
sliderParent.appendChild(slider.render());
slider.setValue(this.speed / 2);
slider.change = function (percentage) {
_this.speed = percentage * 2;
};
popup.show();
};
SpinePlayer.prototype.showAnimationsDialog = function () {
var _this = this;
if (!this.skeleton || this.skeleton.data.animations.length == 0)
return;
var popup = new Popup(this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
var rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.animations.forEach(function (animation) {
if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0) {
return;
}
var row = createElement("\n\t\t\t\t\t<li class=\"spine-player-list-item selectable\">\n\t\t\t\t\t\t<div class=\"selectable-circle\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"selectable-text\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t");
if (animation.name == _this.config.animation)
row.classList.add("selected");
findWithClass(row, "selectable-text")[0].innerText = animation.name;
rows.appendChild(row);
row.onclick = function () {
removeClass(rows.children, "selected");
row.classList.add("selected");
_this.config.animation = animation.name;
_this.playTime = 0;
_this.animationState.setAnimation(0, _this.config.animation, true);
};
});
popup.show();
};
SpinePlayer.prototype.showSkinsDialog = function () {
var _this = this;
if (!this.skeleton || this.skeleton.data.animations.length == 0)
return;
var popup = new Popup(this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Skins</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
var rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.skins.forEach(function (skin) {
if (_this.config.skins && _this.config.skins.indexOf(skin.name) < 0) {
return;
}
var row = createElement("\n\t\t\t\t\t<li class=\"spine-player-list-item selectable\">\n\t\t\t\t\t\t<div class=\"selectable-circle\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"selectable-text\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t");
if (skin.name == _this.config.skin)
row.classList.add("selected");
findWithClass(row, "selectable-text")[0].innerText = skin.name;
rows.appendChild(row);
row.onclick = function () {
removeClass(rows.children, "selected");
row.classList.add("selected");
_this.config.skin = skin.name;
_this.skeleton.setSkinByName(_this.config.skin);
_this.skeleton.setSlotsToSetupPose();
};
});
popup.show();
};
SpinePlayer.prototype.showSettingsDialog = function () {
var _this = this;
if (!this.skeleton || this.skeleton.data.animations.length == 0)
return;
var popup = new Popup(this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Debug</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t</li>\n\t\t\t");
var rows = findWithClass(popup.dom, "spine-player-list")[0];
var makeItem = function (label, name) {
var row = createElement("<li class=\"spine-player-list-item\"></li>");
var s = new Switch(label);
row.appendChild(s.render());
s.setEnabled(_this.config.debug[name]);
s.change = function (value) {
_this.config.debug[name] = value;
};
rows.appendChild(row);
};
makeItem("Show bones", "bones");
makeItem("Show regions", "regions");
makeItem("Show meshes", "meshes");
makeItem("Show bounds", "bounds");
makeItem("Show paths", "paths");
makeItem("Show clipping", "clipping");
makeItem("Show points", "points");
makeItem("Show hulls", "hulls");
popup.show();
}; };
SpinePlayer.prototype.drawFrame = function (requestNextFrame) { SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
var _this = this; var _this = this;
@ -9692,14 +9757,23 @@ var spine;
this.sceneRenderer.camera.position.x = this.config.viewport.x + this.config.viewport.width / 2; 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.camera.position.y = this.config.viewport.y + this.config.viewport.height / 2;
this.sceneRenderer.begin(); this.sceneRenderer.begin();
if (this.config.backgroundImage && this.config.backgroundImage.url) {
var bgImage = this.assetManager.get(this.config.backgroundImage.url);
if (!this.config.backgroundImage.x) {
this.sceneRenderer.drawTexture(bgImage, this.config.viewport.x, this.config.viewport.y, this.config.viewport.width, this.config.viewport.height);
}
else {
this.sceneRenderer.drawTexture(bgImage, this.config.backgroundImage.x, this.config.backgroundImage.y, this.config.backgroundImage.width, this.config.backgroundImage.height);
}
}
this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha); this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha);
this.sceneRenderer.skeletonDebugRenderer.drawBones = this.config.debug.bones; this.sceneRenderer.skeletonDebugRenderer.drawBones = this.config.debug.bones;
this.sceneRenderer.skeletonDebugRenderer.drawBoundingBoxes = this.config.debug.bounds; this.sceneRenderer.skeletonDebugRenderer.drawBoundingBoxes = this.config.debug.bounds;
this.sceneRenderer.skeletonDebugRenderer.drawClipping = this.config.debug.clipping; this.sceneRenderer.skeletonDebugRenderer.drawClipping = this.config.debug.clipping;
this.sceneRenderer.skeletonDebugRenderer.drawMeshHull = this.config.debug.meshHull; this.sceneRenderer.skeletonDebugRenderer.drawMeshHull = this.config.debug.hulls;
this.sceneRenderer.skeletonDebugRenderer.drawPaths = this.config.debug.paths; this.sceneRenderer.skeletonDebugRenderer.drawPaths = this.config.debug.paths;
this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions; this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions;
this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.triangles; this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.meshes;
this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha); this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha);
this.sceneRenderer.end(); this.sceneRenderer.end();
this.sceneRenderer.camera.zoom = 0; this.sceneRenderer.camera.zoom = 0;
@ -9841,6 +9915,11 @@ var spine;
findRecursive(dom, className, found); findRecursive(dom, className, found);
return found; return found;
} }
function createElement(html) {
var dom = document.createElement("div");
dom.innerHTML = html;
return dom.children[0];
}
function removeClass(elements, clazz) { function removeClass(elements, clazz) {
for (var i = 0; i < elements.length; i++) { for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove(clazz); elements[i].classList.remove(clazz);

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

File diff suppressed because one or more lines are too long

244
spine-ts/widget/example/player-test.html
View File

@ -7,6 +7,7 @@ body {
background: gray; background: gray;
} }
/** Player **/
.spine-player { .spine-player {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
@ -18,35 +19,156 @@ body {
.spine-player * { .spine-player * {
box-sizing: border-box; box-sizing: border-box;
font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif; font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
color: #ffffff; color: #dddddd;
} }
.spine-player .spine-player-hidden { .spine-player-hidden {
display: none; display: none;
} }
.spine-player .spine-player-dropdown { /** Slider **/
.spine-player-slider {
width: 100%;
background: green;
position: relative; position: relative;
display: inline-block; background: rgba(0, 0, 0, 0.8);
cursor: pointer;
} }
.spine-player .spine-player-dropdown-content { .spine-player-slider-value {
height: 8px;
background: #62B0EE;
cursor: pointer;
}
/** Column and row layout elements **/
.spine-player-column {
display: flex;
flex-direction: column;
}
.spine-player-row {
display: flex;
flex-direction: row;
}
/** List **/
.spine-player-list {
list-style: none;
padding: 0;
margin: 0;
}
.spine-player-list li {
cursor: pointer;
margin: 8px 8px;
}
.spine-player-list .selectable {
display: flex;
flex-direction: row;
margin: 0;
padding: 4px 10px 4px 0;
}
.spine-player-list li.selectable:hover {
background: #6e6e6e;
}
.spine-player-list li.selectable .selectable-circle {
display: flex;
flex-direction: row;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
align-self: center;
opacity: 0;
margin: 5px 10px;
}
.spine-player-list li.selectable.selected .selectable-circle {
opacity: 1;
}
/** Switch **/
.spine-player-switch {
display: flex;
flex-direction: row;
}
.spine-player-switch-text {
flex: 1;
margin-right: 8px;
}
.spine-player-switch-knob-area {
width: 30px; /* width of the switch */
height: 10px;
display: block;
border-radius: 5px; /* must be half of height */
background: #6e6e6e;
position: relative;
align-self: center;
justify-self: flex-end;
}
.spine-player-switch.active .spine-player-switch-knob-area {
background: #5EAFF1;
}
.spine-player-switch-knob {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: #6e6e6e;
position: absolute;
left: 18px;
top: -2px;
filter: drop-shadow(0 0 1px #333);
transition: left 0.2s; /* animates switch changing */
}
.spine-player-switch.active .spine-player-switch-knob {
background: #fff;
left: 0;
}
/** Popup **/
.spine-player-popup-parent {
position: relative;
}
.spine-player-popup {
user-select: none;
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.75);
z-index: 1; z-index: 1;
right: 2px; right: 2px;
bottom: 42px; bottom: 42px;
padding: 16px; border-radius: 4px;
border-radius: 8px;
} }
.spine-player-popup-title {
margin: 4px 8px;
text-align: center;
}
.spine-player-popup hr {
margin: 0;
border: 0;
border-bottom: 1px solid #cccccc70;
}
/** Canvas **/
.spine-player canvas { .spine-player canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 4px;
} }
.spine-player .spine-player-controls { /** Player controls **/
.spine-player-controls {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
@ -60,31 +182,18 @@ body {
opacity: 1; opacity: 1;
} }
.spine-player .spine-player-slider { /** Player buttons **/
width: 100%; .spine-player-buttons {
background: green;
position: relative;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
}
.spine-player .spine-player-slider-value {
height: 8px;
background: #62B0EE;
cursor: pointer;
}
.spine-player .spine-player-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.75);
border-bottom-left-radius: 8px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 4px;
padding: 0 8px; padding: 0 8px;
} }
.spine-player .spine-player-button { .spine-player-button {
background: none; background: none;
outline: 0; outline: 0;
border: none; border: none;
@ -96,89 +205,67 @@ body {
cursor: pointer; cursor: pointer;
} }
.spine-player .spine-player-button-spacer { .spine-player-button-spacer {
flex: 1; flex: 1;
} }
.spine-player .spine-player-button-icon-play { .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"); 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 { .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"); 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 { .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"); 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 { .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"); 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 { .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"); 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 { .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"); 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 { .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") 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 { .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") 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 { .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"); 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 { .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"); 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 { .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"); 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 { .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"); 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 { .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"); 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 { .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"); 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 { /** Speed slider **/
display: flex;
flex-direction: column;
}
.spine-player-row {
display: flex;
flex-direction: row;
}
.spine-player-list-item {
padding: 0 4px;
cursor: pointer;
}
.spine-player-list-item-selected {
background: rgba(101, 176, 238, 0.605);
}
.spine-player-list-item:hover {
background: #62B0EE;
}
.spine-player-speed-slider { .spine-player-speed-slider {
width: 150px; width: 150px;
} }
@ -192,19 +279,22 @@ body {
new spine.SpinePlayer(document.getElementById("container"), { new spine.SpinePlayer(document.getElementById("container"), {
jsonUrl: "assets/raptor-pro.json", jsonUrl: "assets/raptor-pro.json",
atlasUrl: "assets/raptor.atlas", atlasUrl: "assets/raptor.atlas",
backgroundColor: "#cccccc", animation: "walk",
scale: 1, animations: ["walk", "roar", "jump"],
x: 0, skin: "default",
y: 0, skins: ["default"],
backgroundColor: "#ff00ff",
backgroundImage: {
url: "assets/spineboy.png",
x: 0,
y: 0,
width: 300,
height: 200
},
debug: { debug: {
bones: true, bones: true,
regions: true, regions: true,
bounds: true, meshes: true,
paths: true,
points: true,
clipping: true,
meshHull: true,
triangles: true
} }
}); });
</script> </script>

478
spine-ts/widget/src/Player.ts
View File

@ -30,31 +30,103 @@
module spine { module spine {
export interface SpinePlayerConfig { export interface SpinePlayerConfig {
jsonUrl: string; jsonUrl: string
atlasUrl: string; atlasUrl: string
animation: string; animation: string
skin: string; animations: string[]
skin: string
skins: string[]
debug: { debug: {
bones: boolean; bones: boolean
regions: boolean; regions: boolean
bounds: boolean; meshes: boolean
paths: boolean; bounds: boolean
points: boolean; paths: boolean
clipping: boolean; clipping: boolean
meshHull: boolean; points: boolean
triangles: boolean; hulls: boolean;
}, },
viewport: { viewport: {
x: number, x: number
y: number, y: number
width: number, width: number
height: number height: number
} }
alpha: boolean; alpha: boolean
backgroundColor: string; backgroundColor: string
premultipliedAlpha: boolean; backgroundImage: {
success: (widget: SpineWidget) => void; url: string
error: (widget: SpineWidget, msg: string) => void; x: number
y: number
width: number
height: number
}
premultipliedAlpha: boolean
success: (widget: SpineWidget) => void
error: (widget: SpineWidget, msg: string) => void
}
class Popup {
public dom: HTMLElement;
constructor(parent: HTMLElement, htmlContent: string) {
this.dom = createElement(/*html*/`
<div class="spine-player-popup spine-player-hidden">
</div>
`);
this.dom.innerHTML = htmlContent;
parent.appendChild(this.dom);
}
show () {
this.dom.classList.remove("spine-player-hidden");
var justClicked = true;
let windowClickListener = (event: any) => {
if (justClicked) {
justClicked = false;
return;
}
if (!isContained(this.dom, event.target)) {
this.dom.parentNode.removeChild(this.dom);
window.removeEventListener("click", windowClickListener);
}
}
window.addEventListener("click", windowClickListener);
}
}
class Switch {
private switch: HTMLElement;
private enabled = false;
public change: (value: boolean) => void;
constructor(private text: string) {}
render(): HTMLElement {
this.switch = createElement(/*html*/`
<div class="spine-player-switch">
<span class="spine-player-switch-text">${this.text}</span>
<div class="spine-player-switch-knob-area">
<div class="spine-player-switch-knob"></div>
</div>
</div>
`);
this.switch.addEventListener("click", () => {
this.setEnabled(!this.enabled);
if (this.change) this.change(this.enabled);
})
return this.switch;
}
setEnabled(enabled: boolean) {
if (enabled) this.switch.classList.add("active");
else this.switch.classList.remove("active");
this.enabled = enabled;
}
isEnabled(): boolean {
return this.enabled;
}
} }
class Slider { class Slider {
@ -62,14 +134,13 @@
private value: HTMLElement; private value: HTMLElement;
public change: (percentage: number) => void; public change: (percentage: number) => void;
constructor(parent: HTMLElement) { render(): HTMLElement {
parent.innerHTML = /*html*/` this.slider = createElement(/*html*/`
<div class="spine-player-slider"> <div class="spine-player-slider">
<div class="spine-player-slider-value"></div> <div class="spine-player-slider-value"></div>
</div> </div>
`; `);
this.slider = findWithClass(parent, "spine-player-slider")[0]; this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
this.value = findWithClass(parent, "spine-player-slider-value")[0];
this.setValue(0); this.setValue(0);
let input = new spine.webgl.Input(this.slider); let input = new spine.webgl.Input(this.slider);
@ -100,6 +171,7 @@
if (this.change) this.change(percentage); if (this.change) this.change(percentage);
} }
}); });
return this.slider;
} }
setValue(percentage: number) { setValue(percentage: number) {
@ -110,24 +182,27 @@
export class SpinePlayer { export class SpinePlayer {
private sceneRenderer: spine.webgl.SceneRenderer; private sceneRenderer: spine.webgl.SceneRenderer;
private dom: HTMLElement;
private playerControls: HTMLElement;
private canvas: HTMLCanvasElement; private canvas: HTMLCanvasElement;
private timelineSlider: Slider;
private playButton: HTMLElement;
private context: spine.webgl.ManagedWebGLRenderingContext; private context: spine.webgl.ManagedWebGLRenderingContext;
private loadingScreen: spine.webgl.LoadingScreen; private loadingScreen: spine.webgl.LoadingScreen;
private assetManager: spine.webgl.AssetManager; private assetManager: spine.webgl.AssetManager;
private timelineSlider: Slider;
private playButton: HTMLElement;
private loaded: boolean; private loaded: boolean;
private skeleton: Skeleton; private skeleton: Skeleton;
private animationState: AnimationState; private animationState: AnimationState;
private time = new TimeKeeper(); private time = new TimeKeeper();
private paused = true; private paused = true;
private playTime = 0; private playTime = 0;
private speed = 1; private speed = 1;
constructor(parent: HTMLElement, private config: SpinePlayerConfig) { constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
this.validateConfig(config); this.config = this.validateConfig(config);
this.render(parent, config); parent.appendChild(this.render());
} }
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig { validateConfig(config: SpinePlayerConfig): SpinePlayerConfig {
@ -141,30 +216,40 @@
if (!config.error) config.error = (widget, msg) => {}; if (!config.error) config.error = (widget, msg) => {};
if (!config.debug) config.debug = { if (!config.debug) config.debug = {
bones: false, bones: false,
regions: false,
meshes: false,
bounds: false, bounds: false,
clipping: false, clipping: false,
meshHull: false,
paths: false, paths: false,
points: false, points: false,
regions: false, hulls: false
triangles: false
} }
if (!config.debug.bones) config.debug.bones = false; if (!config.debug.bones) config.debug.bones = false;
if (!config.debug.bounds) config.debug.bounds = false; if (!config.debug.bounds) config.debug.bounds = false;
if (!config.debug.clipping) config.debug.clipping = false; if (!config.debug.clipping) config.debug.clipping = false;
if (!config.debug.meshHull) config.debug.meshHull = false; if (!config.debug.hulls) config.debug.hulls = false;
if (!config.debug.paths) config.debug.paths = false; if (!config.debug.paths) config.debug.paths = false;
if (!config.debug.points) config.debug.points = false; if (!config.debug.points) config.debug.points = false;
if (!config.debug.regions) config.debug.regions = false; if (!config.debug.regions) config.debug.regions = false;
if (!config.debug.triangles) config.debug.triangles = false; if (!config.debug.meshes) config.debug.meshes = false;
if (config.animations && config.animation) {
if (config.animations.indexOf(config.animation) < 0) throw new Error("Default animation " + config.animation + " is not contained in the list of selectable animations.");
}
if (config.skins && config.skin) {
if (config.skins.indexOf(config.skin) < 0) throw new Error("Default skin " + config.skin + " is not contained in the list of selectable skins.");
}
return config; return config;
} }
render(parent: HTMLElement, config: SpinePlayerConfig) { render(): HTMLElement {
parent.innerHTML = /*html*/` let config = this.config;
let dom = this.dom = createElement(/*html*/`
<div class="spine-player"> <div class="spine-player">
<canvas class="spine-player-canvas"></canvas> <canvas class="spine-player-canvas"></canvas>
<div class="spine-player-controls spine-player-dropdown"> <div class="spine-player-controls spine-player-popup-parent">
<div class="spine-player-timeline"> <div class="spine-player-timeline">
</div> </div>
<div class="spine-player-buttons"> <div class="spine-player-buttons">
@ -176,15 +261,12 @@
<button id="spine-player-button-settings" class="spine-player-button spine-player-button-icon-settings"></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> <button id="spine-player-button-fullscreen" class="spine-player-button spine-player-button-icon-fullscreen"></button>
</div> </div>
<div class="spine-player-dropdown-content spine-player-hidden">
</div>
</div> </div>
</div> </div>
`; `)
// Setup the scene renderer and OpenGL context // Setup the scene renderer and OpenGL context
this.canvas = findWithClass(parent, "spine-player-canvas")[0] as HTMLCanvasElement; this.canvas = findWithClass(dom, "spine-player-canvas")[0] as HTMLCanvasElement;
var webglConfig = { alpha: config.alpha }; var webglConfig = { alpha: config.alpha };
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig); this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
@ -196,33 +278,23 @@
this.assetManager = new spine.webgl.AssetManager(this.context); this.assetManager = new spine.webgl.AssetManager(this.context);
this.assetManager.loadText(config.jsonUrl); this.assetManager.loadText(config.jsonUrl);
this.assetManager.loadTextureAtlas(config.atlasUrl); this.assetManager.loadTextureAtlas(config.atlasUrl);
if (config.backgroundImage && config.backgroundImage.url)
this.assetManager.loadTexture(config.backgroundImage.url);
// Setup rendering loop // Setup rendering loop
requestAnimationFrame(() => this.drawFrame()); requestAnimationFrame(() => this.drawFrame());
// Setup the event listeners for UI elements // Setup the event listeners for UI elements
let timeline = findWithClass(parent, "spine-player-timeline")[0]; this.playerControls = findWithClass(dom, "spine-player-controls")[0];
this.timelineSlider = new Slider(timeline); let timeline = findWithClass(dom, "spine-player-timeline")[0];
this.playButton = findWithId(parent, "spine-player-button-play-pause")[0]; this.timelineSlider = new Slider();
let speedButton = findWithId(parent, "spine-player-button-speed")[0]; timeline.appendChild(this.timelineSlider.render());
let animationButton = findWithId(parent, "spine-player-button-animation")[0]; this.playButton = findWithId(dom, "spine-player-button-play-pause")[0];
let skinButton = findWithId(parent, "spine-player-button-skin")[0]; let speedButton = findWithId(dom, "spine-player-button-speed")[0];
let settingsButton = findWithId(parent, "spine-player-button-settings")[0]; let animationButton = findWithId(dom, "spine-player-button-animation")[0];
let fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0]; let skinButton = findWithId(dom, "spine-player-button-skin")[0];
let settingsButton = findWithId(dom, "spine-player-button-settings")[0];
let dropdown = findWithClass(parent, "spine-player-dropdown-content")[0]; let fullscreenButton = findWithId(dom, "spine-player-button-fullscreen")[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 = () => { this.playButton.onclick = () => {
if (this.paused) this.play() if (this.paused) this.play()
@ -230,124 +302,19 @@
} }
speedButton.onclick = () => { speedButton.onclick = () => {
dropdown.classList.remove("spine-player-hidden"); this.showSpeedDialog();
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 = () => { animationButton.onclick = () => {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return; this.showAnimationsDialog();
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/`
<div>Animations</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];
this.skeleton.data.animations.forEach((animation) => {
let row = document.createElement("div");
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 = () => { skinButton.onclick = () => {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return; this.showSkinsDialog();
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/`
<div>Skins</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];
this.skeleton.data.skins.forEach((skin) => {
let row = document.createElement("div");
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 = () => { settingsButton.onclick = () => {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return; this.showSettingsDialog();
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/`
<div>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 = () => { fullscreenButton.onclick = () => {
@ -358,7 +325,7 @@
else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen() else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
else if (doc.msExitFullscreen) doc.msExitFullscreen(); else if (doc.msExitFullscreen) doc.msExitFullscreen();
} else { } else {
let player = findWithClass(parent, "spine-player")[0] as any; let player = dom as any;
if (player.requestFullscreen) player.requestFullscreen(); if (player.requestFullscreen) player.requestFullscreen();
else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen(); else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();
else if (player.mozRequestFullScreen) player.mozRequestFullScreen(); else if (player.mozRequestFullScreen) player.mozRequestFullScreen();
@ -370,6 +337,143 @@
window.onresize = () => { window.onresize = () => {
this.drawFrame(false); this.drawFrame(false);
} }
return dom;
}
showSpeedDialog () {
let popup = new Popup(this.playerControls, /*html*/`
<div class="spine-player-row" style="user-select: none; align-items: center; padding: 8px;">
<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(popup.dom, "spine-player-speed-slider")[0];
let slider = new Slider();
sliderParent.appendChild(slider.render());
slider.setValue(this.speed / 2);
slider.change = (percentage) => {
this.speed = percentage * 2;
}
popup.show();
}
showAnimationsDialog () {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
<div class="spine-player-popup-title">Animations</div>
<hr>
<ul class="spine-player-list"></ul>
`);
let rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.animations.forEach((animation) => {
// skip animations not whitelisted if a whitelist is given
if (this.config.animations && this.config.animations.indexOf(animation.name) < 0) {
return;
}
let row = createElement(/*html*/`
<li class="spine-player-list-item selectable">
<div class="selectable-circle">
</div>
<div class="selectable-text">
</div>
</li>
`);
if (animation.name == this.config.animation) row.classList.add("selected");
findWithClass(row, "selectable-text")[0].innerText = animation.name;
rows.appendChild(row);
row.onclick = () => {
removeClass(rows.children, "selected");
row.classList.add("selected");
this.config.animation = animation.name;
this.playTime = 0;
this.animationState.setAnimation(0, this.config.animation, true);
}
});
popup.show();
}
showSkinsDialog () {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
<div class="spine-player-popup-title">Skins</div>
<hr>
<ul class="spine-player-list"></ul>
`);
let rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.skins.forEach((skin) => {
// skip animations not whitelisted if a whitelist is given
if (this.config.skins && this.config.skins.indexOf(skin.name) < 0) {
return;
}
let row = createElement(/*html*/`
<li class="spine-player-list-item selectable">
<div class="selectable-circle">
</div>
<div class="selectable-text">
</div>
</li>
`);
if (skin.name == this.config.skin) row.classList.add("selected");
findWithClass(row, "selectable-text")[0].innerText = skin.name;
rows.appendChild(row);
row.onclick = () => {
removeClass(rows.children, "selected");
row.classList.add("selected");
this.config.skin = skin.name;
this.skeleton.setSkinByName(this.config.skin);
this.skeleton.setSlotsToSetupPose();
}
});
popup.show();
}
showSettingsDialog () {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
<div class="spine-player-popup-title">Debug</div>
<hr>
<ul class="spine-player-list">
</li>
`);
let rows = findWithClass(popup.dom, "spine-player-list")[0];
let makeItem = (label: string, name: string) => {
let row = createElement(/*html*/`<li class="spine-player-list-item"></li>`);
let s = new Switch(label);
row.appendChild(s.render());
s.setEnabled((this.config.debug as any)[name]);
s.change = (value) => {
(this.config.debug as any)[name] = value;
}
rows.appendChild(row);
};
makeItem("Show bones", "bones");
makeItem("Show regions", "regions");
makeItem("Show meshes", "meshes");
makeItem("Show bounds", "bounds");
makeItem("Show paths", "paths");
makeItem("Show clipping", "clipping");
makeItem("Show points", "points");
makeItem("Show hulls", "hulls");
popup.show();
} }
drawFrame (requestNextFrame = true) { drawFrame (requestNextFrame = true) {
@ -393,6 +497,7 @@
// Update and draw the skeleton // Update and draw the skeleton
if (this.loaded) { if (this.loaded) {
// Update animation and skeleton based on user selections
if (!this.paused && this.config.animation) { if (!this.paused && this.config.animation) {
this.time.update(); this.time.update();
let delta = this.time.delta * this.speed; let delta = this.time.delta * this.speed;
@ -417,15 +522,28 @@
this.sceneRenderer.camera.position.y = this.config.viewport.y + this.config.viewport.height / 2; this.sceneRenderer.camera.position.y = this.config.viewport.y + this.config.viewport.height / 2;
this.sceneRenderer.begin(); this.sceneRenderer.begin();
// Draw background image if given
if (this.config.backgroundImage && this.config.backgroundImage.url) {
let bgImage = this.assetManager.get(this.config.backgroundImage.url);
if (!this.config.backgroundImage.x) {
this.sceneRenderer.drawTexture(bgImage, this.config.viewport.x, this.config.viewport.y, this.config.viewport.width, this.config.viewport.height);
} else {
this.sceneRenderer.drawTexture(bgImage, this.config.backgroundImage.x, this.config.backgroundImage.y, this.config.backgroundImage.width, this.config.backgroundImage.height);
}
}
// Draw skeleton and debug output
this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha); this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha);
this.sceneRenderer.skeletonDebugRenderer.drawBones = this.config.debug.bones; this.sceneRenderer.skeletonDebugRenderer.drawBones = this.config.debug.bones;
this.sceneRenderer.skeletonDebugRenderer.drawBoundingBoxes = this.config.debug.bounds; this.sceneRenderer.skeletonDebugRenderer.drawBoundingBoxes = this.config.debug.bounds;
this.sceneRenderer.skeletonDebugRenderer.drawClipping = this.config.debug.clipping; this.sceneRenderer.skeletonDebugRenderer.drawClipping = this.config.debug.clipping;
this.sceneRenderer.skeletonDebugRenderer.drawMeshHull = this.config.debug.meshHull; this.sceneRenderer.skeletonDebugRenderer.drawMeshHull = this.config.debug.hulls;
this.sceneRenderer.skeletonDebugRenderer.drawPaths = this.config.debug.paths; this.sceneRenderer.skeletonDebugRenderer.drawPaths = this.config.debug.paths;
this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions; this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions;
this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.triangles; this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.meshes;
this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha); this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha);
this.sceneRenderer.end(); this.sceneRenderer.end();
this.sceneRenderer.camera.zoom = 0; this.sceneRenderer.camera.zoom = 0;
@ -578,6 +696,12 @@
return found; return found;
} }
function createElement(html: string): HTMLElement {
let dom = document.createElement("div");
dom.innerHTML = html;
return dom.children[0] as HTMLElement;
}
function removeClass(elements: HTMLCollection, clazz: string) { function removeClass(elements: HTMLCollection, clazz: string) {
for (var i = 0; i < elements.length; i++) { for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove(clazz); elements[i].classList.remove(clazz);