mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-10 09:08:42 +08:00
Slider, loading done.
This commit is contained in:
badlogic
parent
2dd812cb5f
commit
11f00040f5
5
spine-ts/build/spine-widget.d.ts
vendored
5
spine-ts/build/spine-widget.d.ts
vendored
@ -1692,7 +1692,6 @@ declare module spine {
|
||||
x: number;
|
||||
y: number;
|
||||
alpha: boolean;
|
||||
fitToCanvas: boolean;
|
||||
backgroundColor: string;
|
||||
premultipliedAlpha: boolean;
|
||||
success: (widget: SpineWidget) => void;
|
||||
@ -1705,9 +1704,13 @@ declare module spine {
|
||||
private context;
|
||||
private loadingScreen;
|
||||
private assetManager;
|
||||
private timelineSlider;
|
||||
private loaded;
|
||||
private skeleton;
|
||||
private animationState;
|
||||
private time;
|
||||
private paused;
|
||||
private currentAnimation;
|
||||
constructor(parent: HTMLElement, config: SpinePlayerConfig);
|
||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
|
||||
render(parent: HTMLElement, config: SpinePlayerConfig): void;
|
||||
|
||||
@ -9396,9 +9396,53 @@ var spine;
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var Slider = (function () {
|
||||
function Slider(parent) {
|
||||
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.slider = findWithClass(parent, "spine-player-slider")[0];
|
||||
this.value = findWithClass(parent, "spine-player-slider-value")[0];
|
||||
this.setValue(0);
|
||||
var input = new spine.webgl.Input(this.slider);
|
||||
var dragging = false;
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
dragging = true;
|
||||
},
|
||||
up: function (x, y) {
|
||||
dragging = false;
|
||||
var percentage = x / _this.slider.clientWidth;
|
||||
_this.setValue(x / _this.slider.clientWidth);
|
||||
if (_this.change)
|
||||
_this.change(percentage);
|
||||
},
|
||||
moved: function (x, y) {
|
||||
if (dragging) {
|
||||
var percentage = x / _this.slider.clientWidth;
|
||||
_this.setValue(x / _this.slider.clientWidth);
|
||||
if (_this.change)
|
||||
_this.change(percentage);
|
||||
}
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
var percentage = x / _this.slider.clientWidth;
|
||||
_this.setValue(x / _this.slider.clientWidth);
|
||||
if (_this.change)
|
||||
_this.change(percentage);
|
||||
}
|
||||
});
|
||||
}
|
||||
Slider.prototype.setValue = function (percentage) {
|
||||
percentage = Math.max(0, Math.min(1, percentage));
|
||||
this.value.style.width = "" + (percentage * 100) + "%";
|
||||
};
|
||||
return Slider;
|
||||
}());
|
||||
var SpinePlayer = (function () {
|
||||
function SpinePlayer(parent, config) {
|
||||
this.config = config;
|
||||
this.time = new spine.TimeKeeper();
|
||||
this.paused = true;
|
||||
this.validateConfig(config);
|
||||
this.render(parent, config);
|
||||
}
|
||||
@ -9417,8 +9461,6 @@ var spine;
|
||||
config.y = 0;
|
||||
if (!config.alpha)
|
||||
config.alpha = false;
|
||||
if (!config.fitToCanvas)
|
||||
config.fitToCanvas = true;
|
||||
if (!config.backgroundColor)
|
||||
config.backgroundColor = "#000000";
|
||||
if (!config.premultipliedAlpha)
|
||||
@ -9431,14 +9473,8 @@ var spine;
|
||||
};
|
||||
SpinePlayer.prototype.render = function (parent, config) {
|
||||
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\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t\t<div class=\"spine-player-timeline-slider\"></div>\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-play\"></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\">\n\t\t\t\t\t\t\t\tSpeed\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tAnimation\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tSkin\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tSettings\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tFullscreen\n\t\t\t\t\t\t\t</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";
|
||||
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\">\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-play\"></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\">\n\t\t\t\t\t\t\t\tSpeed\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tAnimation\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tSkin\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tSettings\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button\">\n\t\t\t\t\t\t\t\tFullscreen\n\t\t\t\t\t\t\t</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(parent, "spine-player-canvas")[0];
|
||||
var slider = findWithClass(parent, "spine-player-timeline-slider")[0];
|
||||
var playButton = findWithId(parent, "spine-player-button-play-pause")[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 webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
|
||||
@ -9447,12 +9483,20 @@ var spine;
|
||||
this.assetManager.loadText(config.jsonUrl);
|
||||
this.assetManager.loadTextureAtlas(config.atlasUrl);
|
||||
requestAnimationFrame(function () { return _this.drawFrame(); });
|
||||
var timeline = findWithClass(parent, "spine-player-timeline")[0];
|
||||
this.timelineSlider = new Slider(timeline);
|
||||
var playButton = findWithId(parent, "spine-player-button-play-pause")[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];
|
||||
};
|
||||
SpinePlayer.prototype.drawFrame = function () {
|
||||
var _this = this;
|
||||
requestAnimationFrame(function () { return _this.drawFrame(); });
|
||||
var ctx = this.context;
|
||||
var gl = ctx.gl;
|
||||
this.time.update();
|
||||
var bg = new spine.Color().setFromString(this.config.backgroundColor);
|
||||
gl.clearColor(bg.r, bg.g, bg.b, bg.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
@ -9464,7 +9508,15 @@ var spine;
|
||||
this.skeleton.x = this.config.x;
|
||||
this.skeleton.y = this.config.y;
|
||||
this.skeleton.scaleX = this.skeleton.scaleY = this.config.scale;
|
||||
this.skeleton.updateWorldTransform();
|
||||
if (!this.paused && this.currentAnimation) {
|
||||
this.animationState.update(this.time.delta);
|
||||
this.animationState.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform();
|
||||
var animation = this.skeleton.data.findAnimation(this.currentAnimation);
|
||||
var animationTime = this.animationState.getCurrent(0).trackTime % animation.duration;
|
||||
var percentage = animationTime / animation.duration;
|
||||
this.timelineSlider.setValue(percentage);
|
||||
}
|
||||
this.sceneRenderer.camera.position.x = 0;
|
||||
this.sceneRenderer.camera.position.y = 0;
|
||||
this.sceneRenderer.begin();
|
||||
@ -9475,6 +9527,7 @@ var spine;
|
||||
}
|
||||
};
|
||||
SpinePlayer.prototype.loadSkeleton = function () {
|
||||
var _this = this;
|
||||
if (this.loaded)
|
||||
return;
|
||||
var atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
@ -9482,6 +9535,22 @@ var spine;
|
||||
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
|
||||
var skeletonData = json.readSkeletonData(jsonText);
|
||||
this.skeleton = new spine.Skeleton(skeletonData);
|
||||
this.animationState = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
|
||||
if (this.config.animation) {
|
||||
this.currentAnimation = this.config.animation;
|
||||
}
|
||||
else {
|
||||
if (skeletonData.animations.length > 0) {
|
||||
this.currentAnimation = skeletonData.animations[0].name;
|
||||
}
|
||||
}
|
||||
if (this.currentAnimation) {
|
||||
this.animationState.setAnimation(0, this.currentAnimation, true);
|
||||
this.paused = false;
|
||||
this.timelineSlider.change = function (percentage) {
|
||||
_this.paused = true;
|
||||
};
|
||||
}
|
||||
this.loaded = true;
|
||||
};
|
||||
SpinePlayer.prototype.resize = function () {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -33,7 +33,7 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-timeline {
|
||||
.spine-player .spine-player-slider {
|
||||
width: 100%;
|
||||
background: green;
|
||||
position: relative;
|
||||
@ -41,8 +41,7 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-timeline-slider {
|
||||
width: 50%;
|
||||
.spine-player .spine-player-slider-value {
|
||||
height: 8px;
|
||||
background: #62B0EE;
|
||||
cursor: pointer;
|
||||
|
||||
@ -38,22 +38,74 @@
|
||||
x: number;
|
||||
y: number;
|
||||
alpha: boolean;
|
||||
fitToCanvas: boolean;
|
||||
backgroundColor: string;
|
||||
premultipliedAlpha: boolean;
|
||||
success: (widget: SpineWidget) => void;
|
||||
error: (widget: SpineWidget, msg: string) => void;
|
||||
}
|
||||
|
||||
class Slider {
|
||||
private slider: HTMLElement;
|
||||
private value: HTMLElement;
|
||||
public change: (percentage: number) => void;
|
||||
|
||||
constructor(parent: HTMLElement) {
|
||||
parent.innerHTML = /*html*/`
|
||||
<div class="spine-player-slider">
|
||||
<div class="spine-player-slider-value"></div>
|
||||
</div>
|
||||
`;
|
||||
this.slider = findWithClass(parent, "spine-player-slider")[0];
|
||||
this.value = findWithClass(parent, "spine-player-slider-value")[0];
|
||||
this.setValue(0);
|
||||
|
||||
let input = new spine.webgl.Input(this.slider);
|
||||
var dragging = false;
|
||||
input.addListener({
|
||||
down: (x, y) => {
|
||||
dragging = true;
|
||||
},
|
||||
up: (x, y) => {
|
||||
dragging = false;
|
||||
let percentage = x / this.slider.clientWidth;
|
||||
this.setValue(x / this.slider.clientWidth);
|
||||
if (this.change) this.change(percentage);
|
||||
},
|
||||
moved: (x, y) => {
|
||||
if (dragging) {
|
||||
let percentage = x / this.slider.clientWidth;
|
||||
this.setValue(x / this.slider.clientWidth);
|
||||
if (this.change) this.change(percentage);
|
||||
}
|
||||
},
|
||||
dragged: (x, y) => {
|
||||
let percentage = x / this.slider.clientWidth;
|
||||
this.setValue(x / this.slider.clientWidth);
|
||||
if (this.change) this.change(percentage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setValue(percentage: number) {
|
||||
percentage = Math.max(0, Math.min(1, percentage));
|
||||
this.value.style.width = "" + (percentage * 100) + "%";
|
||||
}
|
||||
}
|
||||
|
||||
export class SpinePlayer {
|
||||
private sceneRenderer: spine.webgl.SceneRenderer;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private context: spine.webgl.ManagedWebGLRenderingContext;
|
||||
private loadingScreen: spine.webgl.LoadingScreen;
|
||||
private assetManager: spine.webgl.AssetManager;
|
||||
private timelineSlider: Slider;
|
||||
private loaded: boolean;
|
||||
private skeleton: Skeleton;
|
||||
private animationState: AnimationState;
|
||||
private time = new TimeKeeper();
|
||||
|
||||
private paused = true;
|
||||
private currentAnimation: string;
|
||||
|
||||
constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
|
||||
this.validateConfig(config);
|
||||
@ -68,7 +120,6 @@
|
||||
if (!config.x) config.x = 0;
|
||||
if (!config.y) config.y = 0;
|
||||
if (!config.alpha) config.alpha = false;
|
||||
if (!config.fitToCanvas) config.fitToCanvas = true;
|
||||
if (!config.backgroundColor) config.backgroundColor = "#000000";
|
||||
if (!config.premultipliedAlpha) config.premultipliedAlpha = false;
|
||||
if (!config.success) config.success = (widget) => {};
|
||||
@ -82,7 +133,6 @@
|
||||
<canvas class="spine-player-canvas"></canvas>
|
||||
<div class="spine-player-controls">
|
||||
<div class="spine-player-timeline">
|
||||
<div class="spine-player-timeline-slider"></div>
|
||||
</div>
|
||||
<div class="spine-player-buttons">
|
||||
<button id="spine-player-button-play-pause" class="spine-player-button spine-player-button-icon-play"></button>
|
||||
@ -107,16 +157,8 @@
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.canvas = findWithClass(parent, "spine-player-canvas")[0] as HTMLCanvasElement;
|
||||
let slider = findWithClass(parent, "spine-player-timeline-slider")[0];
|
||||
let playButton = findWithId(parent, "spine-player-button-play-pause")[0];
|
||||
let animationButton = findWithId(parent, "spine-player-button-animation")[0];
|
||||
let skinButton = findWithId(parent, "spine-player-button-skin")[0];
|
||||
let settingsButton = findWithId(parent, "spine-player-button-settings")[0];
|
||||
let fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0];
|
||||
|
||||
|
||||
// Setup the scene renderer and OpenGL context
|
||||
this.canvas = findWithClass(parent, "spine-player-canvas")[0] as HTMLCanvasElement;
|
||||
var webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
|
||||
@ -131,12 +173,22 @@
|
||||
|
||||
// Setup rendering loop
|
||||
requestAnimationFrame(() => this.drawFrame());
|
||||
|
||||
// Setup the event listeners for UI elements
|
||||
let timeline = findWithClass(parent, "spine-player-timeline")[0];
|
||||
this.timelineSlider = new Slider(timeline);
|
||||
let playButton = findWithId(parent, "spine-player-button-play-pause")[0];
|
||||
let animationButton = findWithId(parent, "spine-player-button-animation")[0];
|
||||
let skinButton = findWithId(parent, "spine-player-button-skin")[0];
|
||||
let settingsButton = findWithId(parent, "spine-player-button-settings")[0];
|
||||
let fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0];
|
||||
}
|
||||
|
||||
drawFrame () {
|
||||
requestAnimationFrame(() => this.drawFrame());
|
||||
let ctx = this.context;
|
||||
let gl = ctx.gl;
|
||||
this.time.update();
|
||||
|
||||
// Clear the viewport
|
||||
let bg = new Color().setFromString(this.config.backgroundColor);
|
||||
@ -157,7 +209,16 @@
|
||||
this.skeleton.x = this.config.x;
|
||||
this.skeleton.y = this.config.y;
|
||||
this.skeleton.scaleX = this.skeleton.scaleY = this.config.scale;
|
||||
this.skeleton.updateWorldTransform();
|
||||
|
||||
if (!this.paused && this.currentAnimation) {
|
||||
this.animationState.update(this.time.delta);
|
||||
this.animationState.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform();
|
||||
let animation = this.skeleton.data.findAnimation(this.currentAnimation);
|
||||
let animationTime = this.animationState.getCurrent(0).trackTime % animation.duration;
|
||||
let percentage = animationTime / animation.duration;
|
||||
this.timelineSlider.setValue(percentage);
|
||||
}
|
||||
|
||||
this.sceneRenderer.camera.position.x = 0;
|
||||
this.sceneRenderer.camera.position.y = 0;
|
||||
@ -171,12 +232,29 @@
|
||||
|
||||
loadSkeleton () {
|
||||
if (this.loaded) return;
|
||||
let atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
|
||||
let atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
let jsonText = this.assetManager.get(this.config.jsonUrl);
|
||||
let json = new SkeletonJson(new AtlasAttachmentLoader(atlas));
|
||||
let skeletonData = json.readSkeletonData(jsonText);
|
||||
this.skeleton = new Skeleton(skeletonData);
|
||||
this.animationState = new AnimationState(new AnimationStateData(skeletonData));
|
||||
|
||||
// Setup the first animation
|
||||
if (this.config.animation) {
|
||||
this.currentAnimation = this.config.animation;
|
||||
} else {
|
||||
if (skeletonData.animations.length > 0) {
|
||||
this.currentAnimation = skeletonData.animations[0].name;
|
||||
}
|
||||
}
|
||||
if(this.currentAnimation) {
|
||||
this.animationState.setAnimation(0, this.currentAnimation, true);
|
||||
this.paused = false;
|
||||
this.timelineSlider.change = (percentage) => {
|
||||
this.paused = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user