[ts] Added transform constraint demo

spine-ts/webgl/demos/assets/transformConstraint.atlas

@@ -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

spine-ts/webgl/demos/assets/transformConstraint.json

@@ -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}]}}}}

spine-ts/webgl/demos/transformconstraint.html

@@ -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>

spine-ts/webgl/demos/transformconstraint.js

@@ -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();
+};

spine-ts/webgl/demos/vine.js

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