UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-10 17:18:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][player] Added viewport transitions between animation changes. Configurable via config.viewport.transitionTime.

Browse Source
This commit is contained in:
badlogic 2018-11-23 14:43:53 +01:00
parent f6eb468d32
commit 05d5f6d6e0
5 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1724,6 +1724,7 @@ declare module spine {
padBottom: string | number;
animations: Map<Viewport>;
debugRender: boolean;
transitionTime: number;
};
alpha: boolean;
backgroundColor: string;
@ -1765,6 +1766,7 @@ declare module spine {
private animationViewports;
private currentViewport;
private previousViewport;
private viewportTransitionStart;
private selectedBones;
constructor(parent: HTMLElement, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;

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

@ -9542,6 +9542,7 @@ var spine;
this.animationViewports = {};
this.currentViewport = null;
this.previousViewport = null;
this.viewportTransitionStart = 0;
parent.appendChild(this.render());
}
SpinePlayer.prototype.validateConfig = function (config) {
@ -9860,6 +9861,21 @@ var spine;
width: this.currentViewport.width + this.currentViewport.padLeft + this.currentViewport.padRight,
height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
};
var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / this.config.viewport.transitionTime;
if (this.previousViewport && transitionAlpha < 1) {
var oldViewport = {
x: this.previousViewport.x - this.previousViewport.padLeft,
y: this.previousViewport.y - this.previousViewport.padBottom,
width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
};
viewport = {
x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
};
}
var viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height);
this.sceneRenderer.camera.zoom = viewport.width / viewportSize.x;
this.sceneRenderer.camera.position.x = viewport.x + viewport.width / 2;
@ -9968,11 +9984,14 @@ var spine;
if (!this.config.viewport) {
this.config.viewport = {
animations: {},
debugRender: false
debugRender: false,
transitionTime: 0.2
};
}
if (typeof this.config.viewport.debugRender === "undefined")
this.config.viewport.debugRender = false;
if (typeof this.config.viewport.transitionTime === "undefined")
this.config.viewport.transitionTime = 0.2;
if (!this.config.viewport.animations) {
this.config.viewport.animations = {};
}
@ -10176,6 +10195,7 @@ var spine;
viewport.padBottom = this.percentageToWorldUnit(viewport.height, viewport.padBottom);
viewport.padTop = this.percentageToWorldUnit(viewport.height, viewport.padTop);
this.currentViewport = viewport;
this.viewportTransitionStart = performance.now();
this.animationState.clearTracks();
this.skeleton.setToSetupPose();
this.animationState.setAnimation(0, this.config.animation, true);

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

File diff suppressed because one or more lines are too long

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

@ -24,16 +24,7 @@ body {
premultipliedAlpha: true,
backgroundColor: "#cccccc",
viewport: {
padLeft: "10%",
padRight: "10%",
padTop: "10%",
padBottom: "10%",
debugRender: true,
animations: {
"jump": {
padTop: "-20%"
}
}
}
});
</script>

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

@ -91,7 +91,8 @@
padTop: string | number
padBottom: string | number
animations: Map<Viewport>
debugRender: boolean
debugRender: boolean,
transitionTime: number
}
/* Optional: whether the canvas should be transparent. Default: false. */
@ -303,6 +304,7 @@
private animationViewports: Map<Viewport> = {}
private currentViewport: Viewport = null;
private previousViewport: Viewport = null;
private viewportTransitionStart = 0;
private selectedBones: Bone[];
@ -703,6 +705,23 @@
height: this.currentViewport.height + (this.currentViewport.padBottom as number) + (this.currentViewport.padTop as number)
}
let transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / this.config.viewport.transitionTime;
if (this.previousViewport && transitionAlpha < 1) {
let oldViewport = {
x: this.previousViewport.x - (this.previousViewport.padLeft as number),
y: this.previousViewport.y - (this.previousViewport.padBottom as number),
width: this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number),
height: this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number)
}
viewport = {
x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
}
}
let viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height);
this.sceneRenderer.camera.zoom = viewport.width / viewportSize.x;
@ -832,10 +851,12 @@
if (!this.config.viewport) {
(this.config.viewport as any) = {
animations: {},
debugRender: false
debugRender: false,
transitionTime: 0.2
}
}
if (typeof this.config.viewport.debugRender === "undefined") this.config.viewport.debugRender = false;
if (typeof this.config.viewport.transitionTime === "undefined") this.config.viewport.transitionTime = 0.2;
if (!this.config.viewport.animations) {
this.config.viewport.animations = {};
} else {
@ -1055,6 +1076,7 @@
// Adjust x, y, width, and height by padding.
this.currentViewport = viewport;
this.viewportTransitionStart = performance.now();
this.animationState.clearTracks();
this.skeleton.setToSetupPose();