[ts] Finished porting new AnimationState, works as intended

This commit is contained in:
badlogic 2016-10-25 11:26:14 +02:00
parent 3d9ee5a743
commit 969ae94f9d
16 changed files with 133 additions and 46 deletions

View File

@ -44,15 +44,15 @@ import com.badlogic.gdx.graphics.g2d.TextureAtlas;
* runtimes.
*/
public class Sandbox extends ApplicationAdapter {
static final String ATLAS = "../../examples/tank/export/tank.atlas";
static final String JSON = "../../examples/tank/export/tank.json";
static final float scale = 0.3f;
static final float X = 400;
static final float Y = 500;
static final String ANIMATION = "drive";
static final float ANIMATION_OFFSET = 0.5f;
static final boolean ANIMATION_UPDATE = false;
static final boolean Y_DOWN = true;
static final String ATLAS = "../../examples/raptor/export/raptor.atlas";
static final String JSON = "../../examples/raptor/export/raptor.json";
static final float scale = 0.5f;
static final float X = 0;
static final float Y = 0;
static final String ANIMATION = "walk";
static final float ANIMATION_OFFSET = 0.0f;
static final boolean ANIMATION_UPDATE = true;
static final boolean Y_DOWN = false;
static final boolean DRAW_DEBUG = false;
OrthographicCamera camera;
@ -85,7 +85,11 @@ public class Sandbox extends ApplicationAdapter {
AnimationStateData stateData = new AnimationStateData(skeletonData);
state = new AnimationState(stateData);
if (ANIMATION != null) state.setAnimation(0, ANIMATION, true);
if (ANIMATION != null) {
stateData.setMix("walk", "Jump", 0.5f);
state.setAnimation(0, ANIMATION, true);
state.addAnimation(0, "Jump", false, 0);
}
if (ANIMATION_OFFSET != 0) {
state.update(ANIMATION_OFFSET);
state.apply(skeleton);
@ -97,7 +101,9 @@ public class Sandbox extends ApplicationAdapter {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
if (ANIMATION_UPDATE) {
state.update(Gdx.graphics.getDeltaTime());
float delta = Gdx.graphics.getDeltaTime();
delta = 0.016f;
state.update(delta);
state.apply(skeleton);
}
skeleton.updateWorldTransform();

View File

@ -5286,7 +5286,7 @@ var spine;
return Math.sin(degrees * MathUtils.degRad);
};
MathUtils.signum = function (value) {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
};
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);

File diff suppressed because one or more lines are too long

View File

@ -5286,7 +5286,7 @@ var spine;
return Math.sin(degrees * MathUtils.degRad);
};
MathUtils.signum = function (value) {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
};
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);

File diff suppressed because one or more lines are too long

View File

@ -5109,7 +5109,7 @@ var spine;
return Math.sin(degrees * MathUtils.degRad);
};
MathUtils.signum = function (value) {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
};
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);

File diff suppressed because one or more lines are too long

View File

@ -5109,7 +5109,7 @@ var spine;
return Math.sin(degrees * MathUtils.degRad);
};
MathUtils.signum = function (value) {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
};
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);

File diff suppressed because one or more lines are too long

View File

@ -5109,7 +5109,7 @@ var spine;
return Math.sin(degrees * MathUtils.degRad);
};
MathUtils.signum = function (value) {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
};
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);

File diff suppressed because one or more lines are too long

View File

@ -5109,7 +5109,7 @@ var spine;
return Math.sin(degrees * MathUtils.degRad);
};
MathUtils.signum = function (value) {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
};
MathUtils.toInt = function (x) {
return x > 0 ? Math.floor(x) : Math.ceil(x);

File diff suppressed because one or more lines are too long

View File

@ -143,7 +143,7 @@ module spine {
}
static signum (value: number): number {
return value >= 0 ? 1 : -1;
return value > 0 ? 1 : value < 0 ? -1 : 0;
}
static toInt (x: number) {

View File

@ -1,27 +1,27 @@
var skinsDemo = function(loadingComplete, bgColor) {
var skinsDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
var playButton, timeLine, isPlaying = true, playTime = 0;
var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
var DEMO_NAME = "SkinsDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas = document.getElementById("skins-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "heroes.png");
assetManager.loadText(DEMO_NAME, "heroes.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@ -30,7 +30,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "heroes.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -40,9 +40,9 @@ var skinsDemo = function(loadingComplete, bgColor) {
var stateData = new spine.AnimationStateData(skeleton.data);
stateData.defaultMix = 0.2;
stateData.setMix("roll", "run", 0);
stateData.setMix("jump", "run2", 0);
state = new spine.AnimationState(stateData);
setupAnimations(state);
stateData.setMix("jump", "run2", 0);
state = new spine.AnimationState(stateData);
setupAnimations(state);
state.apply(skeleton);
skeleton.updateWorldTransform();
offset = new spine.Vector2();
@ -113,7 +113,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
}
function setupUI() {
var list = $("#skins-skin");
var list = $("#skins-skin");
for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin];
if (skin.name == "default") continue;
@ -144,11 +144,11 @@ var skinsDemo = function(loadingComplete, bgColor) {
skeleton.setSlotsToSetupPose();
slot.setAttachment(weapon);
}
function swingSword () {
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
}
function randomizeSkin () {
var result;
var count = 0;
@ -161,7 +161,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
setSkin(result);
$("#skins-skin option").filter(function() {
return ($(this).text() == result.name);
}).prop("selected", true);
}).prop("selected", true);
}
function randomizeAttachments () {
@ -203,22 +203,22 @@ var skinsDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.COLOR_BUFFER_BIT);
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform();
renderer.begin();
renderer.begin();
renderer.drawSkeleton(skeleton, true);
var texture = assetManager.get(DEMO_NAME, "heroes.png");
var width = bounds.x * 1.25;
var scale = width / texture.getImage().width;
var height = scale * texture.getImage().height;
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);
renderer.end();
loadingScreen.draw(true);
loadingScreen.draw(true);
}
init();

View File

@ -0,0 +1,81 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds, state;
var timeKeeper;
function init() {
canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, "assets/");
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
input = new spine.webgl.Input(canvas);
assetManager.loadTexture("raptor.png");
assetManager.loadText("raptor.atlas");
assetManager.loadText("raptor.json");
timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load);
}
function load() {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("raptor.atlas"), function(path) {
return assetManager.get(path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = 0.5;
var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("raptor.json")));
skeleton = new spine.Skeleton(skeletonData);
var stateData = new spine.AnimationStateData(skeleton.data);
state = new spine.AnimationState(stateData);
stateData.setMix("walk", "Jump", 0.5);
state.setAnimation(0, "walk", false);
state.addAnimation(0, "Jump", false, 0);
state.apply(skeleton);
skeleton.updateWorldTransform();
requestAnimationFrame(render);
} else {
requestAnimationFrame(load);
}
}
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
delta = 0.016;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.end();
requestAnimationFrame(render)
}
init();
</script>
</html>