From 1a24433403bbe5c409710c975212f16080320403 Mon Sep 17 00:00:00 2001
From: badlogic <badlogicgames@gmail.com>
Date: Fri, 19 Aug 2016 12:18:26 +0200
Subject: [PATCH] [ts] Fixed examples to use full page size and scale
 animations automatically

---
 spine-ts/build/spine-all.js         |  2 +-
 spine-ts/build/spine-core.js        |  2 +-
 spine-ts/build/spine-threejs.js     |  2 +-
 spine-ts/build/spine-webgl.js       |  2 +-
 spine-ts/build/spine-widget.js      |  2 +-
 spine-ts/canvas/example/index.html  | 87 ++++++++++++++++++++---------
 spine-ts/core/src/Skeleton.ts       |  2 +-
 spine-ts/threejs/example/index.html | 28 +++++++++-
 spine-ts/webgl/example/index.html   | 74 ++++++++++++++++++------
 9 files changed, 152 insertions(+), 49 deletions(-)

diff --git a/spine-ts/build/spine-all.js b/spine-ts/build/spine-all.js
index d8f9a2e7c..9d19a9048 100644
--- a/spine-ts/build/spine-all.js
+++ b/spine-ts/build/spine-all.js
@@ -2593,7 +2593,7 @@ var spine;
                 else if (attachment instanceof spine.MeshAttachment)
                     vertices = attachment.updateWorldVertices(slot, true);
                 if (vertices != null) {
-                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) {
+                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
                         var x = vertices[ii], y = vertices[ii + 1];
                         minX = Math.min(minX, x);
                         minY = Math.min(minY, y);
diff --git a/spine-ts/build/spine-core.js b/spine-ts/build/spine-core.js
index b4cbb91ca..d88236e7e 100644
--- a/spine-ts/build/spine-core.js
+++ b/spine-ts/build/spine-core.js
@@ -2593,7 +2593,7 @@ var spine;
                 else if (attachment instanceof spine.MeshAttachment)
                     vertices = attachment.updateWorldVertices(slot, true);
                 if (vertices != null) {
-                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) {
+                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
                         var x = vertices[ii], y = vertices[ii + 1];
                         minX = Math.min(minX, x);
                         minY = Math.min(minY, y);
diff --git a/spine-ts/build/spine-threejs.js b/spine-ts/build/spine-threejs.js
index 7b1b9692e..8615bfbda 100644
--- a/spine-ts/build/spine-threejs.js
+++ b/spine-ts/build/spine-threejs.js
@@ -2351,7 +2351,7 @@ var spine;
                 else if (attachment instanceof spine.MeshAttachment)
                     vertices = attachment.updateWorldVertices(slot, true);
                 if (vertices != null) {
-                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) {
+                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
                         var x = vertices[ii], y = vertices[ii + 1];
                         minX = Math.min(minX, x);
                         minY = Math.min(minY, y);
diff --git a/spine-ts/build/spine-webgl.js b/spine-ts/build/spine-webgl.js
index 4d10a0932..38d8df3b9 100644
--- a/spine-ts/build/spine-webgl.js
+++ b/spine-ts/build/spine-webgl.js
@@ -2351,7 +2351,7 @@ var spine;
                 else if (attachment instanceof spine.MeshAttachment)
                     vertices = attachment.updateWorldVertices(slot, true);
                 if (vertices != null) {
-                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) {
+                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
                         var x = vertices[ii], y = vertices[ii + 1];
                         minX = Math.min(minX, x);
                         minY = Math.min(minY, y);
diff --git a/spine-ts/build/spine-widget.js b/spine-ts/build/spine-widget.js
index 46a1c6a5b..36d982eb3 100644
--- a/spine-ts/build/spine-widget.js
+++ b/spine-ts/build/spine-widget.js
@@ -2351,7 +2351,7 @@ var spine;
                 else if (attachment instanceof spine.MeshAttachment)
                     vertices = attachment.updateWorldVertices(slot, true);
                 if (vertices != null) {
-                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 5) {
+                    for (var ii = 0, nn = vertices.length; ii < nn; ii += 8) {
                         var x = vertices[ii], y = vertices[ii + 1];
                         minX = Math.min(minX, x);
                         minY = Math.min(minY, y);
diff --git a/spine-ts/canvas/example/index.html b/spine-ts/canvas/example/index.html
index 2cfd5d8d7..89f1a06dc 100644
--- a/spine-ts/canvas/example/index.html
+++ b/spine-ts/canvas/example/index.html
@@ -1,41 +1,39 @@
 <html>
 <script src="../../build/spine-canvas.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>
-<center>
-<canvas id="canvas" style="width: 640; height: 480"></canvas>
-</center>
+<canvas id="canvas"></canvas>
 </body>
 <script>
 
 var lastFrameTime = Date.now() / 1000;
-var canvas;
-var context;
+var canvas, context;
 var assetManager;
-var skeleton;
-var state;
+var skeleton, state, bounds;
 var skeletonRenderer;
 
 function init () {
 	canvas = document.getElementById("canvas");
-	canvas.width = 640;
-	canvas.height = 480;
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
 	context = canvas.getContext("2d");
 
 	skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
 	// enable debug rendering
 	skeletonRenderer.debugRendering = true;
 	// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
-	skeletonRenderer.triangleRendering = true;
+	skeletonRenderer.triangleRendering = false;
 
 	assetManager = new spine.canvas.AssetManager();	
 
 	assetManager.loadText("assets/spineboy.json");
 	assetManager.loadText("assets/spineboy.atlas");
 	assetManager.loadTexture("assets/spineboy.png");
-	assetManager.loadText("assets/test.json");
-	assetManager.loadText("assets/test.atlas");
-	assetManager.loadTexture("assets/test.png");
 	assetManager.loadText("assets/raptor.json");
 	assetManager.loadText("assets/raptor.atlas");
 	assetManager.loadTexture("assets/raptor.png");
@@ -45,16 +43,17 @@ function init () {
 
 function load () {
 	if (assetManager.isLoadingComplete()) {
-		var data = loadSkeleton("spineboy", 0.7, "walk", 320, 460, "default");
+		var data = loadSkeleton("spineboy", "walk", "default");
 		skeleton = data.skeleton;
-		state = data.state;		
+		state = data.state;
+		bounds = data.bounds;	
 		requestAnimationFrame(render);
 	} else {
 		requestAnimationFrame(load);
 	}
 }
 
-function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin) {
+function loadSkeleton (name, initialAnimation, skin) {
 	if (skin === undefined) skin = "default";
 
 	// Load the texture atlas using name.atlas and name.png from the AssetManager.
@@ -69,13 +68,11 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin
 	// Create a SkeletonJson instance for parsing the .json file.
 	var skeletonJson = new spine.SkeletonJson(atlasLoader);
 	
-	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
-	skeletonJson.scale = scale;
+	// Set the scale to apply during parsing, parse the file, and create a new skeleton.	
 	var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
 	var skeleton = new spine.Skeleton(skeletonData);
-	skeleton.x = positionX;
-	skeleton.y = positionY;
-	skeleton.flipY = true;
+	skeleton.flipY = true;		
+	var bounds = calculateBounds(skeleton);	
 	skeleton.setSkinByName(skin);
 
 	// Create an AnimationState, and set the initial animation in looping mode.
@@ -97,7 +94,17 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin
 	})
 
 	// Pack everything up and return to caller.
-	return { skeleton: skeleton, state: animationState };
+	return { skeleton: skeleton, state: animationState, bounds: bounds };
+}
+
+function calculateBounds(skeleton) {
+	var data = skeleton.data;
+	skeleton.setToSetupPose();
+	skeleton.updateWorldTransform();
+	var offset = new spine.Vector2();
+	var size = new spine.Vector2();
+	skeleton.getBounds(offset, size);	
+	return { offset: offset, size: size };
 }
 
 function render () {
@@ -105,18 +112,46 @@ function render () {
 	var delta = now - lastFrameTime;
 	lastFrameTime = now;
 	
-	state.update(delta);
-	state.apply(skeleton);
-	skeleton.updateWorldTransform();
+	resize();
 
+	context.save();
+	context.setTransform(1, 0, 0, 1, 0, 0);
 	context.fillStyle = "#cccccc";
 	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.restore();
 
-	skeletonRenderer.draw(skeleton);
+	state.update(delta);
+	state.apply(skeleton);
+	skeleton.updateWorldTransform();		 			
+	skeletonRenderer.draw(skeleton);	
 
 	requestAnimationFrame(render);
 }
 
+function resize () {
+	var w = canvas.clientWidth;
+	var h = canvas.clientHeight;	
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+
+	// magic
+	var centerX = bounds.offset.x + bounds.size.x / 2;
+	var centerY = bounds.offset.y + bounds.size.y / 2;
+	var scaleX = bounds.size.x / canvas.width;
+	var scaleY = bounds.size.y / canvas.height;
+	var scale = Math.max(scaleX, scaleY) * 1.2;
+	if (scale < 1) scale = 1;
+	var width = canvas.width * scale;
+	var height = canvas.height * scale;
+	
+	context.resetTransform();
+	context.scale(1 / scale, 1 / scale);
+	context.translate(-centerX, -centerY);	
+	context.translate(width / 2, height / 2);
+}
+
 (function() {
 	init();
 }());
diff --git a/spine-ts/core/src/Skeleton.ts b/spine-ts/core/src/Skeleton.ts
index 1d4f65a4e..c8d986396 100644
--- a/spine-ts/core/src/Skeleton.ts
+++ b/spine-ts/core/src/Skeleton.ts
@@ -449,7 +449,7 @@ module spine {
 				else if (attachment instanceof MeshAttachment) //
 					vertices = (<MeshAttachment>attachment).updateWorldVertices(slot, true);
 				if (vertices != null) {
-					for (let ii = 0, nn = vertices.length; ii < nn; ii += 5) {
+					for (let ii = 0, nn = vertices.length; ii < nn; ii += 8) {
 						let x = vertices[ii], y = vertices[ii + 1];
 						minX = Math.min(minX, x);
 						minY = Math.min(minY, y);
diff --git a/spine-ts/threejs/example/index.html b/spine-ts/threejs/example/index.html
index 95fb1dd10..6e5d67e15 100644
--- a/spine-ts/threejs/example/index.html
+++ b/spine-ts/threejs/example/index.html
@@ -5,23 +5,31 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
 <script src="../../build/spine-threejs.js"></script>
 </head>
+<style>
+	* { margin: 0; padding: 0; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
 <body>
 <script>
 
 var scene, camera, renderer;
 var geometry, material, mesh, skeletonMesh;
 var assetManager;
+var canvas;
 var lastFrameTime = Date.now() / 1000;
 
 function init () {
 	// create the THREE.JS camera, scene and renderer (WebGL)
-	var width = 640, height = 480;
+	var width = window.innerWidth, height = window.innerHeight;	
 	camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
+	camera.position.y = 100;
 	camera.position.z = 400;	
 	scene = new THREE.Scene();
 	renderer = new THREE.WebGLRenderer();
 	renderer.setSize(width, height);
 	document.body.appendChild(renderer.domElement);
+	canvas = renderer.domElement;
 
 	// load the assets required to display the Raptor model
 	assetManager = new spine.threejs.AssetManager();
@@ -82,6 +90,9 @@ function render() {
 	var delta = now - lastFrameTime;
 	lastFrameTime = now;
 	
+	// resize canvas to use full page, adjust camera/renderer
+	resize();
+
 	// rotate the cube
 	mesh.rotation.x = Math.sin(now) * Math.PI * 0.2;
 	mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
@@ -94,6 +105,21 @@ function render() {
 
 	requestAnimationFrame(render);
 }
+
+function resize () {
+	var w = window.innerWidth;
+	var h = window.innerHeight;	
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+
+	camera.aspect = w / h;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(w, h);
+}
+
 (function() {
 	init();
 }());
diff --git a/spine-ts/webgl/example/index.html b/spine-ts/webgl/example/index.html
index bb6c08428..1c46c5f14 100644
--- a/spine-ts/webgl/example/index.html
+++ b/spine-ts/webgl/example/index.html
@@ -1,12 +1,19 @@
 <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>
 <center>
-<canvas id="canvas" style="width: 640; height: 480"></canvas></br>
+<div style="color: #fff; position: fixed; top: 0; width: 100%">
 <span>Skeleton:</span><select id="skeletonList"></select>
 <span>Animation:</span><select id="animationList"></select>
 <span>Skin:</span><select id="skinList"></select>
+<div>
 </center>
 </body>
 <script>
@@ -20,21 +27,21 @@ var mvp = new spine.webgl.Matrix4();
 var assetManager;
 var skeletonRenderer;
 var skeletons = {};
-var activeSkeleton = "raptor";
+var activeSkeleton = "spineboy";
 
 function init () {
 	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
 	// loading textures. That is handled separately by PolygonBatcher.
 	canvas = document.getElementById("canvas");
-	canvas.width = 640;
-	canvas.height = 480;
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
 	var config = { alpha: false };
 	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);	
 	
 	// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
 	shader = spine.webgl.Shader.newColoredTextured(gl);
 	batcher = new spine.webgl.PolygonBatcher(gl);
-	mvp.ortho2d(0, 0, 639, 479);
+	mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
 	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
 	assetManager = new spine.webgl.AssetManager(gl);
 
@@ -61,11 +68,11 @@ function init () {
 function load () {
 	// Wait until the AssetManager has loaded all resources, then load the skeletons.
 	if (assetManager.isLoadingComplete()) {
-		skeletons["spineboy"] = loadSkeleton("spineboy", 0.5, "test", 320, 20, false);
-		skeletons["raptor"] = loadSkeleton("raptor", 0.4, "walk", 320, 20, false);
-		skeletons["tank"] = loadSkeleton("tank", 0.3, "drive", 400, 20, false);
-		skeletons["goblins"] = loadSkeleton("goblins-mesh", 1, "walk", 320, 20, true, "goblin");
-		skeletons["vine"] = loadSkeleton("vine", 0.5, "animation", 320, 20, false);
+		skeletons["spineboy"] = loadSkeleton("spineboy", "run", false);
+		skeletons["raptor"] = loadSkeleton("raptor", "walk", false);
+		skeletons["tank"] = loadSkeleton("tank", "drive", false);
+		skeletons["goblins"] = loadSkeleton("goblins-mesh", "walk", true, "goblin");
+		skeletons["vine"] = loadSkeleton("vine", "animation", false);
 		setupUI();
 		requestAnimationFrame(render);
 	} else {
@@ -73,7 +80,7 @@ function load () {
 	}
 }
 
-function loadSkeleton (name, scale, initialAnimation, positionX, positionY, premultipliedAlpha, skin) {
+function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
 	if (skin === undefined) skin = "default";
 
 	// Load the texture atlas using name.atlas and name.png from the AssetManager.
@@ -88,12 +95,10 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, prem
 	// Create a SkeletonJson instance for parsing the .json file.
 	var skeletonJson = new spine.SkeletonJson(atlasLoader);
 	
-	// Set the scale to apply during parsing, parse the file, and create a new skeleton.
-	skeletonJson.scale = scale;
+	// Set the scale to apply during parsing, parse the file, and create a new skeleton.	
 	var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
 	var skeleton = new spine.Skeleton(skeletonData);
-	skeleton.x = positionX;
-	skeleton.y = positionY;
+	var bounds = calculateBounds(skeleton);
 	skeleton.setSkinByName(skin);
 
 	// Create an AnimationState, and set the initial animation in looping mode.
@@ -115,7 +120,17 @@ function loadSkeleton (name, scale, initialAnimation, positionX, positionY, prem
 	})
 
 	// Pack everything up and return to caller.
-	return { skeleton: skeleton, state: animationState, premultipliedAlpha: premultipliedAlpha };
+	return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
+}
+
+function calculateBounds(skeleton) {
+	var data = skeleton.data;
+	skeleton.setToSetupPose();
+	skeleton.updateWorldTransform();
+	var offset = new spine.Vector2();
+	var size = new spine.Vector2();
+	skeleton.getBounds(offset, size);
+	return { offset: offset, size: size };
 }
 
 function setupUI () {
@@ -146,6 +161,7 @@ function setupUI () {
 			var animationName = $("#animationList option:selected").text();
 			skeleton.setToSetupPose();
 			state.setAnimation(0, animationName, true);
+			scaleAndCenter(skeleton);
 		})
 	}
 
@@ -184,6 +200,9 @@ function render () {
 	var delta = now - lastFrameTime;
 	lastFrameTime = now;
 
+	// Update the MVP matrix to adjust for canvas size changes
+	resize();
+
 	gl.clearColor(0.3, 0.3, 0.3, 1);
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
@@ -211,6 +230,29 @@ function render () {
 	requestAnimationFrame(render);
 }
 
+function resize () {
+	var w = canvas.clientWidth;
+	var h = canvas.clientHeight;
+	var bounds = skeletons[activeSkeleton].bounds;
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+
+	// magic
+	var centerX = bounds.offset.x + bounds.size.x / 2;
+	var centerY = bounds.offset.y + bounds.size.y / 2;
+	var scaleX = bounds.size.x / canvas.width;
+	var scaleY = bounds.size.y / canvas.height;
+	var scale = Math.max(scaleX, scaleY) * 1.2;
+	if (scale < 1) scale = 1;
+	var width = canvas.width * scale;
+	var height = canvas.height * scale;
+
+	mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+	gl.viewport(0, 0, canvas.width, canvas.height);
+}
+
 (function() {
 	init();
 })();