From 5bd37ca73943afc561e3ad2048de9ccee764f146 Mon Sep 17 00:00:00 2001 From: badlogic Date: Wed, 7 Nov 2018 18:03:37 +0100 Subject: [PATCH] Added almost all player features for V1, missing mouse/touch zoom and pan and controllable bones. --- spine-ts/build/spine-widget.d.ts | 27 +- spine-ts/build/spine-widget.js | 325 +++++++++------ spine-ts/build/spine-widget.js.map | 2 +- spine-ts/widget/example/player-test.html | 244 ++++++++---- spine-ts/widget/src/Player.ts | 478 ++++++++++++++--------- 5 files changed, 692 insertions(+), 384 deletions(-) diff --git a/spine-ts/build/spine-widget.d.ts b/spine-ts/build/spine-widget.d.ts index d55eccd38..694d9709d 100644 --- a/spine-ts/build/spine-widget.d.ts +++ b/spine-ts/build/spine-widget.d.ts @@ -1687,16 +1687,18 @@ declare module spine { jsonUrl: string; atlasUrl: string; animation: string; + animations: string[]; skin: string; + skins: string[]; debug: { bones: boolean; regions: boolean; + meshes: boolean; bounds: boolean; paths: boolean; - points: boolean; clipping: boolean; - meshHull: boolean; - triangles: boolean; + points: boolean; + hulls: boolean; }; viewport: { x: number; @@ -1706,6 +1708,13 @@ declare module spine { }; alpha: boolean; backgroundColor: string; + backgroundImage: { + url: string; + x: number; + y: number; + width: number; + height: number; + }; premultipliedAlpha: boolean; success: (widget: SpineWidget) => void; error: (widget: SpineWidget, msg: string) => void; @@ -1713,12 +1722,14 @@ declare module spine { class SpinePlayer { private config; private sceneRenderer; + private dom; + private playerControls; private canvas; + private timelineSlider; + private playButton; private context; private loadingScreen; private assetManager; - private timelineSlider; - private playButton; private loaded; private skeleton; private animationState; @@ -1728,7 +1739,11 @@ declare module spine { private speed; constructor(parent: HTMLElement, config: 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; scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2; loadSkeleton(): void; diff --git a/spine-ts/build/spine-widget.js b/spine-ts/build/spine-widget.js index 5ff2cbab7..ba3cb4e1e 100644 --- a/spine-ts/build/spine-widget.js +++ b/spine-ts/build/spine-widget.js @@ -9401,12 +9401,64 @@ var spine; })(spine || (spine = {})); var spine; (function (spine) { - var Slider = (function () { - function Slider(parent) { + var Popup = (function () { + function Popup(parent, htmlContent) { + this.dom = createElement("\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t"); + this.dom.innerHTML = htmlContent; + parent.appendChild(this.dom); + } + Popup.prototype.show = function () { var _this = this; - parent.innerHTML = "\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t"; - this.slider = findWithClass(parent, "spine-player-slider")[0]; - this.value = findWithClass(parent, "spine-player-slider-value")[0]; + this.dom.classList.remove("spine-player-hidden"); + var justClicked = true; + 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
\n\t\t\t\t\t" + this.text + "\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\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
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t"); + this.value = findWithClass(this.slider, "spine-player-slider-value")[0]; this.setValue(0); var input = new spine.webgl.Input(this.slider); var dragging = false; @@ -9439,7 +9491,8 @@ var spine; _this.change(percentage); } }); - } + return this.slider; + }; Slider.prototype.setValue = function (percentage) { percentage = Math.max(0, Math.min(1, percentage)); this.value.style.width = "" + (percentage * 100) + "%"; @@ -9453,8 +9506,8 @@ var spine; this.paused = true; this.playTime = 0; this.speed = 1; - this.validateConfig(config); - this.render(parent, config); + this.config = this.validateConfig(config); + parent.appendChild(this.render()); } SpinePlayer.prototype.validateConfig = function (config) { if (!config) @@ -9476,13 +9529,13 @@ var spine; if (!config.debug) config.debug = { bones: false, + regions: false, + meshes: false, bounds: false, clipping: false, - meshHull: false, paths: false, points: false, - regions: false, - triangles: false + hulls: false }; if (!config.debug.bones) config.debug.bones = false; @@ -9490,22 +9543,31 @@ var spine; config.debug.bounds = 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.points) config.debug.points = 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; }; - SpinePlayer.prototype.render = function (parent, config) { + SpinePlayer.prototype.render = function () { var _this = this; - parent.innerHTML = "\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t"; - this.canvas = findWithClass(parent, "spine-player-canvas")[0]; + var config = this.config; + var dom = this.dom = createElement("\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t"); + this.canvas = findWithClass(dom, "spine-player-canvas")[0]; var webglConfig = { alpha: config.alpha }; this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig); 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.loadText(config.jsonUrl); this.assetManager.loadTextureAtlas(config.atlasUrl); + if (config.backgroundImage && config.backgroundImage.url) + this.assetManager.loadTexture(config.backgroundImage.url); requestAnimationFrame(function () { return _this.drawFrame(); }); - var timeline = findWithClass(parent, "spine-player-timeline")[0]; - this.timelineSlider = new Slider(timeline); - this.playButton = findWithId(parent, "spine-player-button-play-pause")[0]; - var speedButton = findWithId(parent, "spine-player-button-speed")[0]; - var animationButton = findWithId(parent, "spine-player-button-animation")[0]; - var skinButton = findWithId(parent, "spine-player-button-skin")[0]; - var settingsButton = findWithId(parent, "spine-player-button-settings")[0]; - var fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0]; - var dropdown = findWithClass(parent, "spine-player-dropdown-content")[0]; - var justClicked = false; - var dismissDropdown = function (event) { - if (justClicked) { - justClicked = false; - return; - } - if (!isContained(dropdown, event.target)) { - dropdown.classList.add("spine-player-hidden"); - window.onclick = null; - } - }; + this.playerControls = findWithClass(dom, "spine-player-controls")[0]; + var timeline = findWithClass(dom, "spine-player-timeline")[0]; + this.timelineSlider = new Slider(); + timeline.appendChild(this.timelineSlider.render()); + this.playButton = findWithId(dom, "spine-player-button-play-pause")[0]; + var speedButton = findWithId(dom, "spine-player-button-speed")[0]; + var animationButton = findWithId(dom, "spine-player-button-animation")[0]; + var skinButton = findWithId(dom, "spine-player-button-skin")[0]; + var settingsButton = findWithId(dom, "spine-player-button-settings")[0]; + var fullscreenButton = findWithId(dom, "spine-player-button-fullscreen")[0]; this.playButton.onclick = function () { if (_this.paused) _this.play(); @@ -9541,94 +9595,16 @@ var spine; _this.pause(); }; speedButton.onclick = function () { - dropdown.classList.remove("spine-player-hidden"); - dropdown.innerHTML = "\n\t\t\t\t\t
\n\t\t\t\t\t\t
Speed
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
0.1x
\n\t\t\t\t\t\t\t\t
1x
\n\t\t\t\t\t\t\t\t
2x
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\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; + _this.showSpeedDialog(); }; animationButton.onclick = function () { - if (!_this.skeleton || _this.skeleton.data.animations.length == 0) - return; - dropdown.classList.remove("spine-player-hidden"); - dropdown.innerHTML = "\n\t\t\t\t\t
Animations
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\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; + _this.showAnimationsDialog(); }; skinButton.onclick = function () { - if (!_this.skeleton || _this.skeleton.data.animations.length == 0) - return; - dropdown.classList.remove("spine-player-hidden"); - dropdown.innerHTML = "\n\t\t\t\t\t
Skins
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\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; + _this.showSkinsDialog(); }; settingsButton.onclick = function () { - if (!_this.skeleton || _this.skeleton.data.animations.length == 0) - return; - dropdown.classList.remove("spine-player-hidden"); - dropdown.innerHTML = "\n\t\t\t\t\t
Debug
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\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; + _this.showSettingsDialog(); }; fullscreenButton.onclick = function () { var doc = document; @@ -9643,7 +9619,7 @@ var spine; doc.msExitFullscreen(); } else { - var player = findWithClass(parent, "spine-player")[0]; + var player = dom; if (player.requestFullscreen) player.requestFullscreen(); else if (player.webkitRequestFullScreen) @@ -9657,6 +9633,95 @@ var spine; window.onresize = function () { _this.drawFrame(false); }; + return dom; + }; + SpinePlayer.prototype.showSpeedDialog = function () { + var _this = this; + var popup = new Popup(this.playerControls, "\n\t\t\t\t
\n\t\t\t\t\t
Speed
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
0.1x
\n\t\t\t\t\t\t\t
1x
\n\t\t\t\t\t\t\t
2x
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\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
Animations
\n\t\t\t\t
\n\t\t\t\t\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
  • \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
  • \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
    Skins
    \n\t\t\t\t
    \n\t\t\t\t\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
  • \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
  • \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
    Debug
    \n\t\t\t\t
    \n\t\t\t\t