mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[ts] fixed animation mixing demo, moved spineboy up. Fixed spritesheet demo, raptor jumps on click
This commit is contained in:
parent
ee833b3043
commit
4995371c41
@ -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);
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user