UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Added transform constraint demo

Browse Source
This commit is contained in:
badlogic 2016-08-30 11:06:00 +02:00
parent 973a078c1c
commit d5688bf999
7 changed files with 167 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
spine-ts/webgl/demos/assets/transformConstraint.atlas
View File

@ -1,33 +1,33 @@
transformConstraint.png
size: 512,128
size: 256,256
format: RGBA8888
filter: Linear,Linear
repeat: none
images/wheel-big
rotate: false
xy: 2, 2
xy: 2, 142
size: 96, 96
orig: 96, 96
offset: 0, 0
index: -1
images/wheel-big-overlay
rotate: false
xy: 100, 5
xy: 2, 47
size: 93, 93
orig: 93, 93
offset: 0, 0
index: -1
images/wheel-mid
rotate: false
xy: 195, 30
xy: 100, 170
size: 68, 68
orig: 68, 68
offset: 0, 0
index: -1
images/wheel-mid-overlay
rotate: false
xy: 265, 30
xy: 170, 170
size: 68, 68
orig: 68, 68
offset: 0, 0

2
spine-ts/webgl/demos/assets/transformConstraint.json Normal file → Executable file
View File

@ -1 +1 @@
{"skeleton":{"hash":"hGDUmkXy2AdrPeqXVmkIQqfIAyU","spine":"3.4.02","width":566.2,"height":397.26},"bones":[{"name":"root"},{"name":"wheel1overlay","parent":"root","x":-152.12,"y":220.65},{"name":"wheel1","parent":"wheel1overlay"},{"name":"wheel2overlay","parent":"root","x":202.3,"y":91.97},{"name":"wheel2","parent":"wheel2overlay"},{"name":"wheel3overlay","parent":"root","x":226.28,"y":312.42},{"name":"wheel3","parent":"wheel3overlay"}],"slots":[{"name":"images/wheel-big","bone":"wheel1","attachment":"images/wheel-big"},{"name":"images/wheel-mid","bone":"wheel3","attachment":"images/wheel-mid"},{"name":"images/wheel-mid2","bone":"wheel2","attachment":"images/wheel-mid"},{"name":"images/wheel-big-overlay","bone":"wheel1overlay","attachment":"images/wheel-big-overlay","blend":"multiply"},{"name":"images/wheel-mid-overlay","bone":"wheel2overlay","attachment":"images/wheel-mid-overlay","blend":"multiply"},{"name":"images/wheel-mid-overlay2","bone":"wheel3overlay","attachment":"images/wheel-mid-overlay","blend":"multiply"}],"transform":[{"name":"wheel2","bones":["wheel2"],"target":"wheel1","rotation":73.5,"x":354.42,"y":-128.67,"translateMix":0,"scaleMix":0,"shearMix":0},{"name":"wheel3","bones":["wheel3"],"target":"wheel1","rotation":-28.7,"x":378.4,"y":91.77,"translateMix":0,"scaleMix":0,"shearMix":0}],"skins":{"default":{"images/wheel-big":{"images/wheel-big":{"width":191,"height":191}},"images/wheel-big-overlay":{"images/wheel-big-overlay":{"width":186,"height":186}},"images/wheel-mid":{"images/wheel-mid":{"width":136,"height":136}},"images/wheel-mid-overlay":{"images/wheel-mid-overlay":{"width":136,"height":136}},"images/wheel-mid-overlay2":{"images/wheel-mid-overlay":{"width":136,"height":136}},"images/wheel-mid2":{"images/wheel-mid":{"width":136,"height":136}}}},"animations":{"animation":{}}}
{"skeleton":{"hash":"tPmh6vxs0ZG3D3+Kg4d6EroS5Uc","spine":"3.4.02","width":566.2,"height":397.26},"bones":[{"name":"root","x":8.29,"y":-14.33},{"name":"wheel1overlay","parent":"root","x":-152.12,"y":220.65},{"name":"wheel1","parent":"wheel1overlay","length":93.7},{"name":"wheel2overlay","parent":"root","x":202.3,"y":91.97},{"name":"wheel2","parent":"wheel2overlay","length":67},{"name":"wheel3overlay","parent":"root","x":226.28,"y":312.42},{"name":"wheel3","parent":"wheel3overlay","length":67}],"slots":[{"name":"images/wheel-big","bone":"wheel1","attachment":"images/wheel-big"},{"name":"images/wheel-mid","bone":"wheel3","attachment":"images/wheel-mid"},{"name":"images/wheel-mid2","bone":"wheel2","attachment":"images/wheel-mid"},{"name":"images/wheel-big-overlay","bone":"wheel1overlay","attachment":"images/wheel-big-overlay","blend":"multiply"},{"name":"images/wheel-mid-overlay","bone":"wheel2overlay","attachment":"images/wheel-mid-overlay","blend":"multiply"},{"name":"images/wheel-mid-overlay2","bone":"wheel3overlay","attachment":"images/wheel-mid-overlay","blend":"multiply"}],"transform":[{"name":"wheel2","bones":["wheel2"],"target":"wheel1","x":354.42,"y":-128.67,"translateMix":0,"scaleMix":0,"shearMix":0},{"name":"wheel3","bones":["wheel3"],"target":"wheel1","x":378.4,"y":91.77,"translateMix":0,"scaleMix":0,"shearMix":0}],"skins":{"default":{"images/wheel-big":{"images/wheel-big":{"width":191,"height":191}},"images/wheel-big-overlay":{"images/wheel-big-overlay":{"width":186,"height":186}},"images/wheel-mid":{"images/wheel-mid":{"width":136,"height":136}},"images/wheel-mid-overlay":{"images/wheel-mid-overlay":{"width":136,"height":136}},"images/wheel-mid-overlay2":{"images/wheel-mid-overlay":{"width":136,"height":136}},"images/wheel-mid2":{"images/wheel-mid":{"width":136,"height":136}}}},"animations":{"animation":{"bones":{"wheel1":{"rotate":[{"time":0,"angle":115.77}]}},"transform":{"wheel2":[{"time":0,"translateMix":0,"scaleMix":0,"shearMix":0}]}}}}

BIN
spine-ts/webgl/demos/assets/transformConstraint.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 43 KiB

2
spine-ts/webgl/demos/assets/vine.json
View File

File diff suppressed because one or more lines are too long

28
spine-ts/webgl/demos/transformconstraint.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
* { margin: 0; padding: 0; }
div { color: #fff; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
.slider { width: 50% }
</style>
<body>
<canvas id="transformdemo-canvas"></canvas>
<center>
<div style="position: fixed; top: 0; width: 100%">
<div id="info"></div></br>
<div>Rotation Offset</div><div id="transformdemo-rotationoffset" class="slider"></div>
<div>Rotation Mix</div><div id="transformdemo-rotationmix" class="slider"></div>
</div>
</center>
<script src="transformconstraint.js"></script>
<script>
transformConstraintDemo();
</script>
</body>
</html>

131
spine-ts/webgl/demos/transformconstraint.js Normal file
View File

@ -0,0 +1,131 @@
var transformConstraintDemo = function(pathPrefix) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var lastFrameTime = Date.now() / 1000;
var target = null;
var wheel1;
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0;
var rotationOffset, mix, lastOffset = 0;
function init () {
canvas = document.getElementById("transformdemo-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, pathPrefix);
input = new spine.webgl.Input(canvas);
var getRotation = function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
if (v.y < 0) angle = 360 - angle;
return angle;
}
input.addListener({
down: function(x, y) {
lastRotation = getRotation(x, y);
},
up: function(x, y) { },
dragged: function(x, y) {
var rotation = getRotation(x, y);
var delta = rotation - lastRotation;
wheel1.rotation += delta;
lastRotation = rotation;
},
moved: function (x, y) { }
})
assetManager.loadTexture("assets/transformConstraint.png");
assetManager.loadText("assets/transformConstraint.json");
assetManager.loadText("assets/transformConstraint.atlas");
requestAnimationFrame(load);
}
function load () {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("assets/transformConstraint.atlas"), function(path) {
return assetManager.get("assets/" + path);
});
var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/transformConstraint.json"));
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
wheel1 = skeleton.findBone("wheel1");
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI();
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function setupUI() {
rotationOffset = $("#transformdemo-rotationoffset");
rotationOffset.slider({ range: "max", min: -180, max: 180, value: 0, slide: function () {
var val = rotationOffset.slider("value");
var delta = val - lastOffset;
lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transformdemo-rotationoffset-label").text(val + "%");
}});
mix = $("#transformdemo-rotationmix");
mix.slider({ range: "max", min: 0, max: 100, value: 100, slide: function () {
var val = mix.slider("value");
skeleton.findTransformConstraint("wheel2").rotateMix = val / 100;
skeleton.findTransformConstraint("wheel3").rotateMix = val / 100;
$("#transformdemo-rotationmix-label").text(val + "%");
}});
}
function render () {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
if (delta > 0.032) delta = 0.032;
skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton);
var bone = wheel1;
var colorInner = bone === target ? COLOR_INNER_SELECTED : COLOR_INNER;
var colorOuter = bone === target ? COLOR_OUTER_SELECTED : COLOR_OUTER;
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
renderer.end();
requestAnimationFrame(render);
}
init();
};

4
spine-ts/webgl/demos/vine.js
View File

@ -166,9 +166,7 @@ var vineDemo = function(pathPrefix) {
}
renderer.end();
requestAnimationFrame(render);
$("#info").text(JSON.stringify(input.currTouch));
requestAnimationFrame(render);
}
init();