@@ -107,16 +157,8 @@
`;
- 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;
}