mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 15:24:55 +08:00
[ts] Finished porting new AnimationState, works as intended
This commit is contained in:
parent
3d9ee5a743
commit
969ae94f9d
@ -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();
|
||||
|
||||
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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) {
|
||||
|
||||
@ -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();
|
||||
|
||||
81
spine-ts/webgl/example/test.html
Normal file
81
spine-ts/webgl/example/test.html
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user