[ts] fixed animation mixing demo, moved spineboy up. Fixed spritesheet demo, raptor jumps on click

This commit is contained in:
badlogic 2016-09-02 23:29:53 +02:00
parent ee833b3043
commit 4995371c41
2 changed files with 32 additions and 5 deletions

View File

@ -116,7 +116,7 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
var size = bounds.size; var size = bounds.size;
renderer.camera.position.x = offset.x + size.x - 50; renderer.camera.position.x = offset.x + size.x - 50;
renderer.camera.position.y = offset.y + size.y / 2; renderer.camera.position.y = offset.y + size.y / 2 - 50;
renderer.camera.viewportWidth = size.x * 2.4; renderer.camera.viewportWidth = size.x * 2.4;
renderer.camera.viewportHeight = size.y * 1.2; renderer.camera.viewportHeight = size.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.webgl.ResizeMode.Fit);

View File

@ -8,7 +8,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
var skeletonAtlas; var skeletonAtlas;
var viewportWidth, viewportHeight; var viewportWidth, viewportHeight;
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30; var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
var timeKeeper, loadingScreen; var timeKeeper, loadingScreen, input;
var playTime = 0, framePlaytime = 0; var playTime = 0, framePlaytime = 0;
var DEMO_NAME = "SpritesheetDemo"; var DEMO_NAME = "SpritesheetDemo";
@ -27,6 +27,7 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas1.atlas"); assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas);
loadingScreen = new spine.webgl.LoadingScreen(renderer); loadingScreen = new spine.webgl.LoadingScreen(renderer);
loadingScreen.backgroundColor = bgColor; loadingScreen.backgroundColor = bgColor;
requestAnimationFrame(load); requestAnimationFrame(load);
@ -42,7 +43,10 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor); var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json").raptor);
skeleton = new spine.Skeleton(skeletonData); skeleton = new spine.Skeleton(skeletonData);
animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); var stateData = new spine.AnimationStateData(skeleton.data);
stateData.setMix("walk", "Jump", 0.5);
stateData.setMix("Jump", "walk", 0.5);
animationState = new spine.AnimationState(stateData);
animationState.setAnimation(0, "walk", true); animationState.setAnimation(0, "walk", true);
animationState.apply(skeleton); animationState.apply(skeleton);
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
@ -59,6 +63,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
viewportHeight = ((0 + bounds.y) - offset.y); viewportHeight = ((0 + bounds.y) - offset.y);
setupUI(); setupUI();
setupInput();
$("#spritesheetdemo-overlay").removeClass("overlay-hide"); $("#spritesheetdemo-overlay").removeClass("overlay-hide");
$("#spritesheetdemo-overlay").addClass("overlay"); $("#spritesheetdemo-overlay").addClass("overlay");
loadingComplete(canvas, render); loadingComplete(canvas, render);
@ -74,6 +80,27 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
timeSliderLabel = $("#spritesheetdemo-timeslider-label"); timeSliderLabel = $("#spritesheetdemo-timeslider-label");
} }
function setupInput() {
input.addListener({
down: function(x, y) {
animationState.setAnimation(0, "Jump", false).listener = {
event: function (trackIndex, event) {
},
complete: function (trackIndex, loopCount) {
animationState.setAnimation(0, "walk", true);
},
start: function (trackIndex) {
},
end: function (trackIndex) {
}
}
},
up: function(x, y) { },
moved: function(x, y) { },
dragged: function(x, y) { }
});
}
function render () { function render () {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;