-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
test-additive-animation-blending.html
105 lines (94 loc) · 3.45 KB
/
test-additive-animation-blending.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML>
<html>
<head>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
input, label {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
<label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input>
<label>Down</label><input type="range" id="down" min="0" max="100" value="0"></input>
<label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input>
<label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input>
</body>
<script>
var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl;
var time = new spine.TimeKeeper();
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context);
var skeleton, animationState;
var upEntry, downEntry, leftEntry, rightEntry;
assetManager.loadTexture("deform_sample.png");
assetManager.loadText("deform_sample.atlas");
assetManager.loadText("deform_sample.json");
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("deform_sample.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("deform_sample.json")));
skeleton = new spine.Skeleton(skeletonData);
var animationStateData = new spine.AnimationStateData(skeletonData);
animationStateData.defaultMix = 0.3;
animationState = new spine.AnimationState(animationStateData);
animationState.setAnimation(0, "breath", true);
upEntry = animationState.setAnimation(1, "up", true);
upEntry.alpha = 0;
upEntry.mixBlend = spine.MixBlend.add;
downEntry = animationState.setAnimation(2, "down", true);
downEntry.alpha = 0;
downEntry.mixBlend = spine.MixBlend.add;
leftEntry = animationState.setAnimation(3, "left", true);
leftEntry.alpha = 0;
leftEntry.mixBlend = spine.MixBlend.add;
rightEntry = animationState.setAnimation(4, "right", true);
rightEntry.alpha = 0;
rightEntry.mixBlend = spine.MixBlend.add;
requestAnimationFrame(render);
} else {
requestAnimationFrame(load);
}
}
function render () {
time.update();
animationState.update(time.delta);
animationState.apply(skeleton);
skeleton.y = -canvas.height / 2 / 2;
skeleton.updateWorldTransform();
gl.clearColor(0.3, 0.3, 0.3, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.end();
requestAnimationFrame(render);
}
function setupUI () {
$("#up").on("input", function() {
upEntry.alpha = $(this).val() / 100;
});
$("#down").on("input", function() {
downEntry.alpha = $(this).val() / 100;
});
$("#left").on("input", function() {
leftEntry.alpha = $(this).val() / 100;
});
$("#right").on("input", function() {
rightEntry.alpha = $(this).val() / 100;
});
}
setupUI();
load();
</script>
</html>