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

[ts][player] Click on canvas will now pause/resume player ala YouTube.

Browse Source
This commit is contained in:
badlogic 2018-12-17 18:17:18 +01:00
parent d5ee59558a
commit 43227961ce
7 changed files with 67 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/build/spine-all.d.ts vendored
View File

@ -1872,6 +1872,7 @@ declare module spine {
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;
private cancelId;
setupInput(): void; setupInput(): void;
private play(); private play();
private pause(); private pause();

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

@ -10235,6 +10235,7 @@ var spine;
this.currentViewport = null; this.currentViewport = null;
this.previousViewport = null; this.previousViewport = null;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
this.cancelId = 0;
if (typeof parent === "string") if (typeof parent === "string")
parent = document.getElementById(parent); parent = document.getElementById(parent);
parent.appendChild(this.render()); parent.appendChild(this.render());
@ -10796,7 +10797,15 @@ var spine;
} }
}, },
up: function (x, y) { up: function (x, y) {
target = null; if (target) {
target = null;
}
else {
if (_this.paused)
_this.play();
else
_this.pause();
}
}, },
dragged: function (x, y) { dragged: function (x, y) {
if (target != null) { if (target != null) {
@ -10829,7 +10838,6 @@ var spine;
}); });
var mouseOverControls = true; var mouseOverControls = true;
var mouseOverCanvas = false; var mouseOverCanvas = false;
var cancelId = 0;
parent.addEventListener("mousemove", function (ev) { parent.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) { if (ev instanceof MouseEvent) {
if (!_this.config.showControls) if (!_this.config.showControls)
@ -10837,22 +10845,20 @@ var spine;
var popup = findWithClass(_this.dom, "spine-player-popup"); var popup = findWithClass(_this.dom, "spine-player-popup");
mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect()); mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect()); mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
clearTimeout(cancelId); clearTimeout(_this.cancelId);
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused; var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
if (hide) { if (hide) {
console.log("hidding");
_this.playerControls.classList.add("spine-player-controls-hidden"); _this.playerControls.classList.add("spine-player-controls-hidden");
} }
else { else {
console.log("showing");
_this.playerControls.classList.remove("spine-player-controls-hidden"); _this.playerControls.classList.remove("spine-player-controls-hidden");
} }
if (!mouseOverControls && popup.length == 0 && !_this.paused) { if (!mouseOverControls && popup.length == 0 && !_this.paused) {
var remove = function () { var remove = function () {
console.log("hidding timeout"); if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden"); _this.playerControls.classList.add("spine-player-controls-hidden");
}; };
cancelId = setTimeout(remove, 500); _this.cancelId = setTimeout(remove, 500);
} }
} }
}); });
@ -10863,7 +10869,13 @@ var spine;
}; };
}; };
SpinePlayer.prototype.play = function () { SpinePlayer.prototype.play = function () {
var _this = this;
this.paused = false; this.paused = false;
var remove = function () {
if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden");
};
this.cancelId = setTimeout(remove, 500);
this.playButton.classList.remove("spine-player-button-icon-play"); this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause"); this.playButton.classList.add("spine-player-button-icon-pause");
if (this.config.animation) { if (this.config.animation) {
@ -10874,6 +10886,8 @@ var spine;
}; };
SpinePlayer.prototype.pause = function () { SpinePlayer.prototype.pause = function () {
this.paused = true; this.paused = true;
this.playerControls.classList.remove("spine-player-controls-hidden");
clearTimeout(this.cancelId);
this.playButton.classList.remove("spine-player-button-icon-pause"); this.playButton.classList.remove("spine-player-button-icon-pause");
this.playButton.classList.add("spine-player-button-icon-play"); this.playButton.classList.add("spine-player-button-icon-play");
}; };

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

File diff suppressed because one or more lines are too long

1
spine-ts/build/spine-player.d.ts vendored
View File

@ -1782,6 +1782,7 @@ declare module spine {
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;
private cancelId;
setupInput(): void; setupInput(): void;
private play(); private play();
private pause(); private pause();

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

@ -9572,6 +9572,7 @@ var spine;
this.currentViewport = null; this.currentViewport = null;
this.previousViewport = null; this.previousViewport = null;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
this.cancelId = 0;
if (typeof parent === "string") if (typeof parent === "string")
parent = document.getElementById(parent); parent = document.getElementById(parent);
parent.appendChild(this.render()); parent.appendChild(this.render());
@ -10133,7 +10134,15 @@ var spine;
} }
}, },
up: function (x, y) { up: function (x, y) {
target = null; if (target) {
target = null;
}
else {
if (_this.paused)
_this.play();
else
_this.pause();
}
}, },
dragged: function (x, y) { dragged: function (x, y) {
if (target != null) { if (target != null) {
@ -10166,7 +10175,6 @@ var spine;
}); });
var mouseOverControls = true; var mouseOverControls = true;
var mouseOverCanvas = false; var mouseOverCanvas = false;
var cancelId = 0;
parent.addEventListener("mousemove", function (ev) { parent.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) { if (ev instanceof MouseEvent) {
if (!_this.config.showControls) if (!_this.config.showControls)
@ -10174,22 +10182,20 @@ var spine;
var popup = findWithClass(_this.dom, "spine-player-popup"); var popup = findWithClass(_this.dom, "spine-player-popup");
mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect()); mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect()); mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
clearTimeout(cancelId); clearTimeout(_this.cancelId);
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused; var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
if (hide) { if (hide) {
console.log("hidding");
_this.playerControls.classList.add("spine-player-controls-hidden"); _this.playerControls.classList.add("spine-player-controls-hidden");
} }
else { else {
console.log("showing");
_this.playerControls.classList.remove("spine-player-controls-hidden"); _this.playerControls.classList.remove("spine-player-controls-hidden");
} }
if (!mouseOverControls && popup.length == 0 && !_this.paused) { if (!mouseOverControls && popup.length == 0 && !_this.paused) {
var remove = function () { var remove = function () {
console.log("hidding timeout"); if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden"); _this.playerControls.classList.add("spine-player-controls-hidden");
}; };
cancelId = setTimeout(remove, 500); _this.cancelId = setTimeout(remove, 500);
} }
} }
}); });
@ -10200,7 +10206,13 @@ var spine;
}; };
}; };
SpinePlayer.prototype.play = function () { SpinePlayer.prototype.play = function () {
var _this = this;
this.paused = false; this.paused = false;
var remove = function () {
if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden");
};
this.cancelId = setTimeout(remove, 500);
this.playButton.classList.remove("spine-player-button-icon-play"); this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause"); this.playButton.classList.add("spine-player-button-icon-pause");
if (this.config.animation) { if (this.config.animation) {
@ -10211,6 +10223,8 @@ var spine;
}; };
SpinePlayer.prototype.pause = function () { SpinePlayer.prototype.pause = function () {
this.paused = true; this.paused = true;
this.playerControls.classList.remove("spine-player-controls-hidden");
clearTimeout(this.cancelId);
this.playButton.classList.remove("spine-player-button-icon-pause"); this.playButton.classList.remove("spine-player-button-icon-pause");
this.playButton.classList.add("spine-player-button-icon-play"); this.playButton.classList.add("spine-player-button-icon-play");
}; };

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

File diff suppressed because one or more lines are too long

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

@ -952,6 +952,7 @@
this.loaded = true; this.loaded = true;
} }
private cancelId = 0;
setupInput () { setupInput () {
let controlBones = this.config.controlBones; let controlBones = this.config.controlBones;
let selectedBones = this.selectedBones = new Array<Bone>(this.config.controlBones.length); let selectedBones = this.selectedBones = new Array<Bone>(this.config.controlBones.length);
@ -975,7 +976,14 @@
} }
}, },
up: (x, y) => { up: (x, y) => {
target = null; if (target) {
target = null;
} else {
if (this.paused)
this.play()
else
this.pause();
}
}, },
dragged: (x, y) => { dragged: (x, y) => {
if (target != null) { if (target != null) {
@ -1012,7 +1020,6 @@
// area :/ // area :/
var mouseOverControls = true; var mouseOverControls = true;
var mouseOverCanvas = false; var mouseOverCanvas = false;
let cancelId = 0;
parent.addEventListener("mousemove", (ev: UIEvent) => { parent.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) { if (ev instanceof MouseEvent) {
if (!this.config.showControls) return; if (!this.config.showControls) return;
@ -1020,21 +1027,18 @@
let popup = findWithClass(this.dom, "spine-player-popup"); let popup = findWithClass(this.dom, "spine-player-popup");
mouseOverControls = overlap(ev, this.playerControls.getBoundingClientRect()); mouseOverControls = overlap(ev, this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, this.canvas.getBoundingClientRect()); mouseOverCanvas = overlap(ev, this.canvas.getBoundingClientRect());
clearTimeout(cancelId); clearTimeout(this.cancelId);
let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused; let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
if (hide) { if (hide) {
console.log("hidding");
this.playerControls.classList.add("spine-player-controls-hidden"); this.playerControls.classList.add("spine-player-controls-hidden");
} else { } else {
console.log("showing");
this.playerControls.classList.remove("spine-player-controls-hidden"); this.playerControls.classList.remove("spine-player-controls-hidden");
} }
if (!mouseOverControls && popup.length == 0 && !this.paused) { if (!mouseOverControls && popup.length == 0 && !this.paused) {
let remove = () => { let remove = () => {
console.log("hidding timeout"); if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
this.playerControls.classList.add("spine-player-controls-hidden");
}; };
cancelId = setTimeout(remove, 500); this.cancelId = setTimeout(remove, 500);
} }
} }
}); });
@ -1048,6 +1052,10 @@
private play () { private play () {
this.paused = false; this.paused = false;
let remove = () => {
if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
};
this.cancelId = setTimeout(remove, 500);
this.playButton.classList.remove("spine-player-button-icon-play"); this.playButton.classList.remove("spine-player-button-icon-play");
this.playButton.classList.add("spine-player-button-icon-pause"); this.playButton.classList.add("spine-player-button-icon-pause");
@ -1060,6 +1068,9 @@
private pause () { private pause () {
this.paused = true; this.paused = true;
this.playerControls.classList.remove("spine-player-controls-hidden");
clearTimeout(this.cancelId);
this.playButton.classList.remove("spine-player-button-icon-pause"); this.playButton.classList.remove("spine-player-button-icon-pause");
this.playButton.classList.add("spine-player-button-icon-play"); this.playButton.classList.add("spine-player-button-icon-play");
} }