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 updates: pass delta to callbacks, adding config.loading, exposed more fields, use void 0 (shorter), remember touchdown offset for control bones, avoid new object each frame, clean up.

Browse Source
This commit is contained in:
Nathan Sweet 2021-06-23 11:43:29 -04:00
parent 7708e9a5a3
commit 0b18b58ba1
4 changed files with 237 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1730,9 +1730,10 @@ declare module spine {
controlBones: string[]; controlBones: string[];
success: (player: SpinePlayer) => void; success: (player: SpinePlayer) => void;
error: (player: SpinePlayer, msg: string) => void; error: (player: SpinePlayer, msg: string) => void;
frame: (player: SpinePlayer) => void; frame: (player: SpinePlayer, delta: number) => void;
update: (player: SpinePlayer) => void; update: (player: SpinePlayer, delta: number) => void;
draw: (player: SpinePlayer) => void; draw: (player: SpinePlayer, delta: number) => void;
loading: (player: SpinePlayer, delta: number) => void;
downloader: spine.Downloader; downloader: spine.Downloader;
} }
interface Viewport { interface Viewport {
@ -1747,12 +1748,12 @@ declare module spine {
} }
class SpinePlayer { class SpinePlayer {
private config; private config;
private parent; parent: HTMLElement;
dom: HTMLElement; dom: HTMLElement;
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
private context; context: spine.webgl.ManagedWebGLRenderingContext;
private sceneRenderer; sceneRenderer: spine.webgl.SceneRenderer;
private loadingScreen; loadingScreen: spine.webgl.LoadingScreen;
assetManager: spine.webgl.AssetManager; assetManager: spine.webgl.AssetManager;
bg: Color; bg: Color;
bgFullscreen: Color; bgFullscreen: Color;
@ -1768,10 +1769,11 @@ declare module spine {
error: boolean; error: boolean;
skeleton: Skeleton; skeleton: Skeleton;
animationState: AnimationState; animationState: AnimationState;
private paused; paused: boolean;
speed: number; speed: number;
private time; time: TimeKeeper;
private stopRequestAnimationFrame; private stopRequestAnimationFrame;
private viewport;
private currentViewport; private currentViewport;
private previousViewport; private previousViewport;
private viewportTransitionStart; private viewportTransitionStart;
@ -1788,7 +1790,6 @@ declare module spine {
private percentageToWorldUnit; private percentageToWorldUnit;
private calculateAnimationViewport; private calculateAnimationViewport;
private drawFrame; private drawFrame;
private scale;
stopRendering(): void; stopRendering(): void;
private showSpeedDialog; private showSpeedDialog;
private showAnimationsDialog; private showAnimationsDialog;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -145,13 +145,16 @@ module spine {
error: (player: SpinePlayer, msg: string) => void error: (player: SpinePlayer, msg: string) => void
/* Optional: Callback at the start of each frame, before the skeleton is posed or drawn. Default: none */ /* Optional: Callback at the start of each frame, before the skeleton is posed or drawn. Default: none */
frame: (player: SpinePlayer) => void frame: (player: SpinePlayer, delta: number) => void
/* Optional: Callback just after the skeleton is posed each frame. Default: none */ /* Optional: Callback after the skeleton is posed each frame, before it is drawn. Default: none */
update: (player: SpinePlayer) => void update: (player: SpinePlayer, delta: number) => void
/* Optional: Callback just after the skeleton is drawn each frame. Default: none */ /* Optional: Callback after the skeleton is drawn each frame. Default: none */
draw: (player: SpinePlayer) => void draw: (player: SpinePlayer, delta: number) => void
/* Optional: Callback each frame before the skeleton is loaded. Default: none */
loading: (player: SpinePlayer, delta: number) => void
/* Optional: The downloader used by the player's asset manager. Passing the same downloader to multiple players using the /* Optional: The downloader used by the player's asset manager. Passing the same downloader to multiple players using the
same assets ensures the assets are only downloaded once. Default: new instance */ same assets ensures the assets are only downloaded once. Default: new instance */
@ -174,12 +177,12 @@ module spine {
} }
export class SpinePlayer { export class SpinePlayer {
private parent: HTMLElement; public parent: HTMLElement;
public dom: HTMLElement; public dom: HTMLElement;
public canvas: HTMLCanvasElement; public canvas: HTMLCanvasElement;
private context: spine.webgl.ManagedWebGLRenderingContext; public context: spine.webgl.ManagedWebGLRenderingContext;
private sceneRenderer: spine.webgl.SceneRenderer; public sceneRenderer: spine.webgl.SceneRenderer;
private loadingScreen: spine.webgl.LoadingScreen; public loadingScreen: spine.webgl.LoadingScreen;
public assetManager: spine.webgl.AssetManager; public assetManager: spine.webgl.AssetManager;
public bg = new Color(); public bg = new Color();
public bgFullscreen = new Color(); public bgFullscreen = new Color();
@ -202,11 +205,12 @@ module spine {
/* The animation state controlling the skeleton. Null until loading is complete (access after config.success). */ /* The animation state controlling the skeleton. Null until loading is complete (access after config.success). */
public animationState: AnimationState; public animationState: AnimationState;
private paused = true; public paused = true;
public speed = 1; public speed = 1;
private time = new TimeKeeper(); public time = new TimeKeeper();
private stopRequestAnimationFrame = false; private stopRequestAnimationFrame = false;
private viewport: Viewport = {} as Viewport;
private currentViewport: Viewport; private currentViewport: Viewport;
private previousViewport: Viewport; private previousViewport: Viewport;
private viewportTransitionStart = 0; private viewportTransitionStart = 0;
@ -254,8 +258,8 @@ module spine {
if (!config.backgroundColor) config.backgroundColor = config.alpha ? "00000000" : "000000"; if (!config.backgroundColor) config.backgroundColor = config.alpha ? "00000000" : "000000";
if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor; if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor;
if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = null; if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = null;
if (config.premultipliedAlpha === undefined) config.premultipliedAlpha = true; if (config.premultipliedAlpha === void 0) config.premultipliedAlpha = true;
if (config.mipmaps === undefined) config.mipmaps = true; if (config.mipmaps === void 0) config.mipmaps = true;
if (!config.debug) config.debug = {} as any; if (!config.debug) config.debug = {} as any;
if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0) if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
throw new Error("Animation '" + config.animation + "' is not in the config animation list: " + toString(config.animations)); throw new Error("Animation '" + config.animation + "' is not in the config animation list: " + toString(config.animations));
@ -263,12 +267,12 @@ module spine {
throw new Error("Default skin '" + config.skin + "' is not in the config skins list: " + toString(config.skins)); throw new Error("Default skin '" + config.skin + "' is not in the config skins list: " + toString(config.skins));
if (!config.viewport) config.viewport = {} as any; if (!config.viewport) config.viewport = {} as any;
if (!config.viewport.animations) config.viewport.animations = {}; if (!config.viewport.animations) config.viewport.animations = {};
if (config.viewport.debugRender === undefined) config.viewport.debugRender = false; if (config.viewport.debugRender === void 0) config.viewport.debugRender = false;
if (config.viewport.transitionTime === undefined) config.viewport.transitionTime = 0.25; if (config.viewport.transitionTime === void 0) config.viewport.transitionTime = 0.25;
if (!config.controlBones) config.controlBones = []; if (!config.controlBones) config.controlBones = [];
if (config.showControls === undefined) config.showControls = true; if (config.showControls === void 0) config.showControls = true;
if (config.showLoading === undefined) config.showLoading = true; if (config.showLoading === void 0) config.showLoading = true;
if (config.defaultMix === undefined) config.defaultMix = 0.25; if (config.defaultMix === void 0) config.defaultMix = 0.25;
} }
private initialize (): HTMLElement { private initialize (): HTMLElement {
@ -509,8 +513,8 @@ module spine {
if (!controlBones.length && !config.showControls) return; if (!controlBones.length && !config.showControls) return;
let selectedBones = this.selectedBones = new Array<Bone>(controlBones.length); let selectedBones = this.selectedBones = new Array<Bone>(controlBones.length);
let canvas = this.canvas; let canvas = this.canvas;
let input = new spine.webgl.Input(canvas);
let target:Bone = null; let target:Bone = null;
let offset = new spine.Vector2();
let coords = new spine.webgl.Vector3(); let coords = new spine.webgl.Vector3();
let mouse = new spine.webgl.Vector3(); let mouse = new spine.webgl.Vector3();
let position = new spine.Vector2(); let position = new spine.Vector2();
@ -519,6 +523,7 @@ module spine {
let closest = function (x: number, y: number): Bone { let closest = function (x: number, y: number): Bone {
mouse.set(x, canvas.clientHeight - y, 0) mouse.set(x, canvas.clientHeight - y, 0)
offset.x = offset.y = 0;
let bestDistance = 24, index = 0; let bestDistance = 24, index = 0;
let best:Bone; let best:Bone;
for (let i = 0; i < controlBones.length; i++) { for (let i = 0; i < controlBones.length; i++) {
@ -531,15 +536,19 @@ module spine {
bestDistance = distance; bestDistance = distance;
best = bone; best = bone;
index = i; index = i;
offset.x = coords.x - mouse.x;
offset.y = coords.y - mouse.y;
} }
} }
if (best) selectedBones[index] = best; if (best) selectedBones[index] = best;
return best; return best;
}; };
input.addListener({ new spine.webgl.Input(canvas).addListener({
down: (x, y) => target = closest(x, y), down: (x, y) => {
up: (x, y) => { target = closest(x, y);
},
up: () => {
if (target) if (target)
target = null; target = null;
else if (config.showControls) else if (config.showControls)
@ -547,8 +556,8 @@ module spine {
}, },
dragged: (x, y) => { dragged: (x, y) => {
if (target) { if (target) {
x = MathUtils.clamp(x, 0, canvas.clientWidth) x = MathUtils.clamp(x + offset.x, 0, canvas.clientWidth)
y = MathUtils.clamp(y, 0, canvas.clientHeight); y = MathUtils.clamp(y - offset.y, 0, canvas.clientHeight);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (target.parent) { if (target.parent) {
target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y)); target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
@ -563,44 +572,44 @@ module spine {
moved: (x, y) => closest(x, y) moved: (x, y) => closest(x, y)
}); });
if (!config.showControls) return; if (config.showControls) {
// For manual hover to work, we need to disable hidding controls if the mouse/touch entered the clickable area of a child of the controls.
// For this we need to register a mouse handler on the document and see if we are within the canvas area.
document.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) handleHover(ev.clientX, ev.clientY);
});
document.addEventListener("touchmove", (ev: UIEvent) => {
if (ev instanceof TouchEvent) {
let touches = ev.changedTouches;
if (touches.length) {
let touch = touches[0];
handleHover(touch.clientX, touch.clientY);
}
}
});
// For manual hover to work, we need to disable hidding controls if the mouse/touch entered the clickable area of a child of the controls. let overlap = (mouseX: number, mouseY: number, rect: DOMRect | ClientRect): boolean => {
// For this we need to register a mouse handler on the document and see if we are within the canvas area. let x = mouseX - rect.left, y = mouseY - rect.top;
document.addEventListener("mousemove", (ev: UIEvent) => { return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
if (ev instanceof MouseEvent) handleHover(ev.clientX, ev.clientY); }
});
document.addEventListener("touchmove", (ev: UIEvent) => { let mouseOverControls = true, mouseOverCanvas = false;
if (ev instanceof TouchEvent) { let handleHover = (mouseX: number, mouseY: number) => {
let touches = ev.changedTouches; let popup = findWithClass(this.dom, "spine-player-popup");
if (touches.length) { mouseOverControls = overlap(mouseX, mouseY, this.playerControls.getBoundingClientRect());
let touch = touches[0]; mouseOverCanvas = overlap(mouseX, mouseY, canvas.getBoundingClientRect());
handleHover(touch.clientX, touch.clientY); clearTimeout(this.cancelId);
let hide = !popup && !mouseOverControls && !mouseOverCanvas && !this.paused;
if (hide)
this.playerControls.classList.add("spine-player-controls-hidden");
else
this.playerControls.classList.remove("spine-player-controls-hidden");
if (!mouseOverControls && !popup && !this.paused) {
this.cancelId = setTimeout(() => {
if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
}, 1000);
} }
} }
});
let mouseOverControls = true, mouseOverCanvas = false;
let handleHover = (mouseX: number, mouseY: number) => {
let popup = findWithClass(this.dom, "spine-player-popup");
mouseOverControls = overlap(mouseX, mouseY, this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(mouseX, mouseY, canvas.getBoundingClientRect());
clearTimeout(this.cancelId);
let hide = !popup && !mouseOverControls && !mouseOverCanvas && !this.paused;
if (hide)
this.playerControls.classList.add("spine-player-controls-hidden");
else
this.playerControls.classList.remove("spine-player-controls-hidden");
if (!mouseOverControls && !popup && !this.paused) {
this.cancelId = setTimeout(() => {
if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
}, 1000);
}
}
let overlap = (mouseX: number, mouseY: number, rect: DOMRect | ClientRect): boolean => {
let x = mouseX - rect.left, y = mouseY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
} }
} }
@ -655,13 +664,13 @@ module spine {
// Determine the base viewport. // Determine the base viewport.
let globalViewport = this.config.viewport; let globalViewport = this.config.viewport;
let viewport = { let viewport = this.currentViewport = {
padLeft: globalViewport.padLeft !== undefined ? globalViewport.padLeft : "10%", padLeft: globalViewport.padLeft !== void 0 ? globalViewport.padLeft : "10%",
padRight: globalViewport.padRight !== undefined ? globalViewport.padRight : "10%", padRight: globalViewport.padRight !== void 0 ? globalViewport.padRight : "10%",
padTop: globalViewport.padTop !== undefined ? globalViewport.padTop : "10%", padTop: globalViewport.padTop !== void 0 ? globalViewport.padTop : "10%",
padBottom: globalViewport.padBottom !== undefined ? globalViewport.padBottom : "10%" padBottom: globalViewport.padBottom !== void 0 ? globalViewport.padBottom : "10%"
} as Viewport; } as Viewport;
if (globalViewport.x !== undefined && globalViewport.y !== undefined && globalViewport.width && globalViewport.height) { if (globalViewport.x !== void 0 && globalViewport.y !== void 0 && globalViewport.width && globalViewport.height) {
viewport.x = globalViewport.x; viewport.x = globalViewport.x;
viewport.y = globalViewport.y; viewport.y = globalViewport.y;
viewport.width = globalViewport.width; viewport.width = globalViewport.width;
@ -672,16 +681,16 @@ module spine {
// Override with the animation specific viewport for the final result. // Override with the animation specific viewport for the final result.
let userAnimViewport = this.config.viewport.animations[animation.name]; let userAnimViewport = this.config.viewport.animations[animation.name];
if (userAnimViewport) { if (userAnimViewport) {
if (userAnimViewport.x !== undefined && userAnimViewport.y !== undefined && userAnimViewport.width && userAnimViewport.height) { if (userAnimViewport.x !== void 0 && userAnimViewport.y !== void 0 && userAnimViewport.width && userAnimViewport.height) {
viewport.x = userAnimViewport.x; viewport.x = userAnimViewport.x;
viewport.y = userAnimViewport.y; viewport.y = userAnimViewport.y;
viewport.width = userAnimViewport.width; viewport.width = userAnimViewport.width;
viewport.height = userAnimViewport.height; viewport.height = userAnimViewport.height;
} }
if (userAnimViewport.padLeft !== undefined) viewport.padLeft = userAnimViewport.padLeft; if (userAnimViewport.padLeft !== void 0) viewport.padLeft = userAnimViewport.padLeft;
if (userAnimViewport.padRight !== undefined) viewport.padRight = userAnimViewport.padRight; if (userAnimViewport.padRight !== void 0) viewport.padRight = userAnimViewport.padRight;
if (userAnimViewport.padTop !== undefined) viewport.padTop = userAnimViewport.padTop; if (userAnimViewport.padTop !== void 0) viewport.padTop = userAnimViewport.padTop;
if (userAnimViewport.padBottom !== undefined) viewport.padBottom = userAnimViewport.padBottom; if (userAnimViewport.padBottom !== void 0) viewport.padBottom = userAnimViewport.padBottom;
} }
// Translate percentage padding to world units. // Translate percentage padding to world units.
@ -690,7 +699,6 @@ module spine {
viewport.padBottom = this.percentageToWorldUnit(viewport.height, viewport.padBottom); viewport.padBottom = this.percentageToWorldUnit(viewport.height, viewport.padBottom);
viewport.padTop = this.percentageToWorldUnit(viewport.height, viewport.padTop); viewport.padTop = this.percentageToWorldUnit(viewport.height, viewport.padTop);
this.currentViewport = viewport;
this.viewportTransitionStart = performance.now(); this.viewportTransitionStart = performance.now();
return animation; return animation;
} }
@ -737,8 +745,12 @@ module spine {
let isFullscreen = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement; let isFullscreen = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement;
let bg = isFullscreen ? this.bgFullscreen : this.bg; let bg = isFullscreen ? this.bgFullscreen : this.bg;
this.time.update();
let delta = this.time.delta;
// Load the skeleton if the assets are ready. // Load the skeleton if the assets are ready.
if (!this.skeleton && this.assetManager.isLoadingComplete()) this.loadSkeleton(); var loading = this.assetManager.isLoadingComplete();
if (!this.skeleton && loading) this.loadSkeleton();
let skeleton = this.skeleton; let skeleton = this.skeleton;
let config = this.config; let config = this.config;
if (skeleton) { if (skeleton) {
@ -746,15 +758,17 @@ module spine {
let renderer = this.sceneRenderer; let renderer = this.sceneRenderer;
renderer.resize(webgl.ResizeMode.Expand); renderer.resize(webgl.ResizeMode.Expand);
if (config.frame) config.frame(this); let playDelta = this.paused ? 0 : delta * this.speed;
if (config.frame) config.frame(this, playDelta);
// Update animation time and pose the skeleton. // Update animation time and pose the skeleton.
if (!this.paused) { if (!this.paused) {
this.time.update(); this.animationState.update(playDelta);
let delta = this.time.delta * this.speed; this.animationState.apply(skeleton);
skeleton.updateWorldTransform();
if (config.showControls) { if (config.showControls) {
this.playTime += delta; this.playTime += playDelta;
let entry = this.animationState.getCurrent(0); let entry = this.animationState.getCurrent(0);
if (entry) { if (entry) {
let duration = entry.animation.duration; let duration = entry.animation.duration;
@ -764,20 +778,14 @@ module spine {
this.timelineSlider.setValue(this.playTime / duration); this.timelineSlider.setValue(this.playTime / duration);
} }
} }
this.animationState.update(delta);
this.animationState.apply(skeleton);
skeleton.updateWorldTransform();
if (config.update) config.update(this);
} }
// Determine the viewport. // Determine the viewport.
let viewport = { var viewport = this.viewport;
x: this.currentViewport.x - (this.currentViewport.padLeft as number), viewport.x = this.currentViewport.x - (this.currentViewport.padLeft as number),
y: this.currentViewport.y - (this.currentViewport.padBottom as number), viewport.y = this.currentViewport.y - (this.currentViewport.padBottom as number),
width: this.currentViewport.width + (this.currentViewport.padLeft as number) + (this.currentViewport.padRight as number), viewport.width = this.currentViewport.width + (this.currentViewport.padLeft as number) + (this.currentViewport.padRight as number),
height: this.currentViewport.height + (this.currentViewport.padBottom as number) + (this.currentViewport.padTop as number) viewport.height = this.currentViewport.height + (this.currentViewport.padBottom as number) + (this.currentViewport.padTop as number)
};
if (this.previousViewport) { if (this.previousViewport) {
let transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime; let transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
@ -786,35 +794,35 @@ module spine {
let y = this.previousViewport.y - (this.previousViewport.padBottom as number); let y = this.previousViewport.y - (this.previousViewport.padBottom as number);
let width = this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number); let width = this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number);
let height = this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number); let height = this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number);
viewport = { viewport.x = x + (viewport.x - x) * transitionAlpha;
x: x + (viewport.x - x) * transitionAlpha, viewport.y = y + (viewport.y - y) * transitionAlpha;
y: y + (viewport.y - y) * transitionAlpha, viewport.width = width + (viewport.width - width) * transitionAlpha;
width: width + (viewport.width - width) * transitionAlpha, viewport.height = height + (viewport.height - height) * transitionAlpha;
height: height + (viewport.height - height) * transitionAlpha
};
} }
} }
let viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height); renderer.camera.zoom = this.canvas.height / this.canvas.width > viewport.height / viewport.width
? viewport.width / this.canvas.width : viewport.height / this.canvas.height;
renderer.camera.position.x = viewport.x + viewport.width / 2;
renderer.camera.position.y = viewport.y + viewport.height / 2;
// Clear the screen. // Clear the screen.
let gl = this.context.gl; let gl = this.context.gl;
gl.clearColor(bg.r, bg.g, bg.b, bg.a); gl.clearColor(bg.r, bg.g, bg.b, bg.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.camera.zoom = viewport.width / viewportSize.x; if (config.update) config.update(this, playDelta);
renderer.camera.position.x = viewport.x + viewport.width / 2;
renderer.camera.position.y = viewport.y + viewport.height / 2;
renderer.begin(); renderer.begin();
// Draw the background image. // Draw the background image.
if (config.backgroundImage) { let bgImage = config.backgroundImage;
let bgImage = this.assetManager.get(config.backgroundImage.url); if (bgImage) {
if (config.backgroundImage.hasOwnProperty("x") && config.backgroundImage.hasOwnProperty("y") && config.backgroundImage.width && config.backgroundImage.height) let texture = this.assetManager.get(bgImage.url);
renderer.drawTexture(bgImage, config.backgroundImage.x, config.backgroundImage.y, config.backgroundImage.width, config.backgroundImage.height); if (bgImage.x !== void 0 && bgImage.y !== void 0 && bgImage.width && bgImage.height)
renderer.drawTexture(texture, bgImage.x, bgImage.y, bgImage.width, bgImage.height);
else else
renderer.drawTexture(bgImage, viewport.x, viewport.y, viewport.width, viewport.height); renderer.drawTexture(texture, viewport.x, viewport.y, viewport.width, viewport.height);
} }
// Draw the skeleton and debug output. // Draw the skeleton and debug output.
@ -829,7 +837,6 @@ module spine {
) { ) {
renderer.drawSkeletonDebug(skeleton, config.premultipliedAlpha); renderer.drawSkeletonDebug(skeleton, config.premultipliedAlpha);
} }
if (config.draw) config.draw(this);
// Draw the control bones. // Draw the control bones.
let controlBones = config.controlBones; let controlBones = config.controlBones;
@ -854,28 +861,21 @@ module spine {
} }
renderer.end(); renderer.end();
if (config.draw) config.draw(this, playDelta);
} }
// Draw the loading screen. // Draw the loading screen.
if (config.showLoading) { if (config.showLoading) {
this.loadingScreen.backgroundColor.setFromColor(bg); this.loadingScreen.backgroundColor.setFromColor(bg);
this.loadingScreen.draw(this.assetManager.isLoadingComplete()); this.loadingScreen.draw(loading);
} }
if (loading && config.loading) config.loading(this, delta);
} catch (e) { } catch (e) {
this.showError(`Error: Unable to render skeleton.\n${e.message}`, e); this.showError(`Error: Unable to render skeleton.\n${e.message}`, e);
} }
} }
private scale (sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2 {
let targetRatio = targetHeight / targetWidth;
let sourceRatio = sourceHeight / sourceWidth;
let scale = targetRatio > sourceRatio ? targetWidth / sourceWidth : targetHeight / sourceHeight;
let temp = new spine.Vector2();
temp.x = sourceWidth * scale;
temp.y = sourceHeight * scale;
return temp;
}
stopRendering () { stopRendering () {
this.stopRequestAnimationFrame = true; this.stopRequestAnimationFrame = true;
} }
@ -1142,28 +1142,22 @@ module spine {
// this.knob = findWithClass(this.slider, "spine-player-slider-knob"); // this.knob = findWithClass(this.slider, "spine-player-slider-knob");
this.setValue(0); this.setValue(0);
let input = new spine.webgl.Input(this.slider);
let dragging = false; let dragging = false;
input.addListener({ new spine.webgl.Input(this.slider).addListener({
down: (x, y) => { down: (x, y) => {
dragging = true; dragging = true;
this.value.classList.add("hovering"); this.value.classList.add("hovering");
}, },
up: (x, y) => { up: (x, y) => {
dragging = false; dragging = false;
let percentage = this.setValue(x / this.slider.clientWidth); if (this.change) this.change(this.setValue(x / this.slider.clientWidth));
if (this.change) this.change(percentage);
this.value.classList.remove("hovering"); this.value.classList.remove("hovering");
}, },
moved: (x, y) => { moved: (x, y) => {
if (dragging) { if (dragging && this.change) this.change(this.setValue(x / this.slider.clientWidth));
let percentage = this.setValue(x / this.slider.clientWidth);
if (this.change) this.change(percentage);
}
}, },
dragged: (x, y) => { dragged: (x, y) => {
let percentage = this.setValue(x / this.slider.clientWidth); if (this.change) this.change(this.setValue(x / this.slider.clientWidth));
if (this.change) this.change(percentage);
} }
}); });