Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[ts] Fixed examples to use full page size and scale animations automatically

badlogic 9 years ago
parent
24404b4adf
commit
1a24433403
9 changed files with 152 additions and 49 deletions
Unified View Show Diff Stats
  1. 1 1
      spine-ts/build/spine-all.js
  2. 1 1
      spine-ts/build/spine-core.js
  3. 1 1
      spine-ts/build/spine-threejs.js
  4. 1 1
      spine-ts/build/spine-webgl.js
  5. 1 1
      spine-ts/build/spine-widget.js
  6. 61 26
      spine-ts/canvas/example/index.html
  7. 1 1
      spine-ts/core/src/Skeleton.ts
  8. 27 1
      spine-ts/threejs/example/index.html
  9. 58 16
      spine-ts/webgl/example/index.html

+ 1 - 1
spine-ts/build/spine-all.js
View File 

@@ -2593,7 +2593,7 @@ var spine;
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                 if (vertices != null) {
 
                 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];
 
                         var x = vertices[ii], y = vertices[ii + 1];
 
                         minX = Math.min(minX, x);
 
                         minX = Math.min(minX, x);
 
                         minY = Math.min(minY, y);
 
                         minY = Math.min(minY, y);

+ 1 - 1
spine-ts/build/spine-core.js
View File 

@@ -2593,7 +2593,7 @@ var spine;
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                 if (vertices != null) {
 
                 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];
 
                         var x = vertices[ii], y = vertices[ii + 1];
 
                         minX = Math.min(minX, x);
 
                         minX = Math.min(minX, x);
 
                         minY = Math.min(minY, y);
 
                         minY = Math.min(minY, y);

+ 1 - 1
spine-ts/build/spine-threejs.js
View File 

@@ -2351,7 +2351,7 @@ var spine;
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                 if (vertices != null) {
 
                 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];
 
                         var x = vertices[ii], y = vertices[ii + 1];
 
                         minX = Math.min(minX, x);
 
                         minX = Math.min(minX, x);
 
                         minY = Math.min(minY, y);
 
                         minY = Math.min(minY, y);

+ 1 - 1
spine-ts/build/spine-webgl.js
View File 

@@ -2351,7 +2351,7 @@ var spine;
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                 if (vertices != null) {
 
                 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];
 
                         var x = vertices[ii], y = vertices[ii + 1];
 
                         minX = Math.min(minX, x);
 
                         minX = Math.min(minX, x);
 
                         minY = Math.min(minY, y);
 
                         minY = Math.min(minY, y);

+ 1 - 1
spine-ts/build/spine-widget.js
View File 

@@ -2351,7 +2351,7 @@ var spine;
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                 else if (attachment instanceof spine.MeshAttachment)
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                     vertices = attachment.updateWorldVertices(slot, true);
 
                 if (vertices != null) {
 
                 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];
 
                         var x = vertices[ii], y = vertices[ii + 1];
 
                         minX = Math.min(minX, x);
 
                         minX = Math.min(minX, x);
 
                         minY = Math.min(minY, y);
 
                         minY = Math.min(minY, y);

+ 61 - 26
spine-ts/canvas/example/index.html
View File 

@@ -1,41 +1,39 @@
 
 <html>
 
 <html>
 
 <script src="../../build/spine-canvas.js"></script>
 
 <script src="../../build/spine-canvas.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.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>
 
 <body>
 
-<center>
 
-<canvas id="canvas" style="width: 640; height: 480"></canvas>
 
-</center>
 
+<canvas id="canvas"></canvas>
 
 </body>
 
 </body>
 
 <script>
 
 <script>
 
 
 
 var lastFrameTime = Date.now() / 1000;
 
 var lastFrameTime = Date.now() / 1000;
 
-var canvas;
 
-var context;
 
+var canvas, context;
 
 var assetManager;
 
 var assetManager;
 
-var skeleton;
 
-var state;
 
+var skeleton, state, bounds;
 
 var skeletonRenderer;
 
 var skeletonRenderer;
 
 
 
 function init () {
 
 function init () {
 
 	canvas = document.getElementById("canvas");
 
 	canvas = document.getElementById("canvas");
 
-	canvas.width = 640;
 
-	canvas.height = 480;
 
+	canvas.width = window.innerWidth;
 
+	canvas.height = window.innerHeight;
 
 	context = canvas.getContext("2d");
 
 	context = canvas.getContext("2d");
 
 
 
 	skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
 
 	skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
 
 	// enable debug rendering
 
 	// enable debug rendering
 
 	skeletonRenderer.debugRendering = true;
 
 	skeletonRenderer.debugRendering = true;
 
 	// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
 
 	// 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 = new spine.canvas.AssetManager();	
 
 
 	assetManager.loadText("assets/spineboy.json");
 
 	assetManager.loadText("assets/spineboy.json");
 
 	assetManager.loadText("assets/spineboy.atlas");
 
 	assetManager.loadText("assets/spineboy.atlas");
 
 	assetManager.loadTexture("assets/spineboy.png");
 
 	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.json");
 
 	assetManager.loadText("assets/raptor.atlas");
 
 	assetManager.loadText("assets/raptor.atlas");
 
 	assetManager.loadTexture("assets/raptor.png");
 
 	assetManager.loadTexture("assets/raptor.png");
 
@@ -45,16 +43,17 @@ function init () {
 
 
 
 function load () {
 
 function load () {
 
 	if (assetManager.isLoadingComplete()) {
 
 	if (assetManager.isLoadingComplete()) {
 
-		var data = loadSkeleton("spineboy", 0.7, "walk", 320, 460, "default");
 
+		var data = loadSkeleton("spineboy", "walk", "default");
 
 		skeleton = data.skeleton;
 
 		skeleton = data.skeleton;
 
-		state = data.state;		
+		state = data.state;
 
+		bounds = data.bounds;	
 		requestAnimationFrame(render);
 
 		requestAnimationFrame(render);
 
 	} else {
 
 	} else {
 
 		requestAnimationFrame(load);
 
 		requestAnimationFrame(load);
 
 	}
 
 	}
 
 }
 
 }
 
 
 
-function loadSkeleton (name, scale, initialAnimation, positionX, positionY, skin) {
 
+function loadSkeleton (name, initialAnimation, skin) {
 
 	if (skin === undefined) skin = "default";
 
 	if (skin === undefined) skin = "default";
 
 
 
 	// Load the texture atlas using name.atlas and name.png from the AssetManager.
 
 	// 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.
 
 	// Create a SkeletonJson instance for parsing the .json file.
 
 	var skeletonJson = new spine.SkeletonJson(atlasLoader);
 
 	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 skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
 
 	var skeleton = new spine.Skeleton(skeletonData);
 
 	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);
 
 	skeleton.setSkinByName(skin);
 
 
 
 	// Create an AnimationState, and set the initial animation in looping mode.
 
 	// 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.
 
 	// 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 () {
 
 function render () {
 
@@ -105,18 +112,46 @@ function render () {
 
 	var delta = now - lastFrameTime;
 
 	var delta = now - lastFrameTime;
 
 	lastFrameTime = now;
 
 	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.fillStyle = "#cccccc";
 
 	context.fillRect(0, 0, canvas.width, canvas.height);
 
 	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);
 
 	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() {
 
 (function() {
 
 	init();
 
 	init();
 
 }());
 
 }());

+ 1 - 1
spine-ts/core/src/Skeleton.ts
View File 

@@ -449,7 +449,7 @@ module spine {
 
 				else if (attachment instanceof MeshAttachment) //
 
 				else if (attachment instanceof MeshAttachment) //
 
 					vertices = (<MeshAttachment>attachment).updateWorldVertices(slot, true);
 
 					vertices = (<MeshAttachment>attachment).updateWorldVertices(slot, true);
 
 				if (vertices != null) {
 
 				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];
 
 						let x = vertices[ii], y = vertices[ii + 1];
 
 						minX = Math.min(minX, x);
 
 						minX = Math.min(minX, x);
 
 						minY = Math.min(minY, y);
 
 						minY = Math.min(minY, y);

+ 27 - 1
spine-ts/threejs/example/index.html
View File 

@@ -5,23 +5,31 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
 
 <script src="../../build/spine-threejs.js"></script>
 
 <script src="../../build/spine-threejs.js"></script>
 
 </head>
 
 </head>
 
+<style>
 
+	* { margin: 0; padding: 0; }
 
+	body, html { height: 100% }
 
+	canvas { position: absolute; width: 100% ;height: 100%; }
 
+</style>
 
 <body>
 
 <body>
 
 <script>
 
 <script>
 
 
 
 var scene, camera, renderer;
 
 var scene, camera, renderer;
 
 var geometry, material, mesh, skeletonMesh;
 
 var geometry, material, mesh, skeletonMesh;
 
 var assetManager;
 
 var assetManager;
 
+var canvas;
 
 var lastFrameTime = Date.now() / 1000;
 
 var lastFrameTime = Date.now() / 1000;
 
 
 
 function init () {
 
 function init () {
 
 	// create the THREE.JS camera, scene and renderer (WebGL)
 
 	// 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 = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
 
+	camera.position.y = 100;
 
 	camera.position.z = 400;	
 	camera.position.z = 400;	
 	scene = new THREE.Scene();
 
 	scene = new THREE.Scene();
 
 	renderer = new THREE.WebGLRenderer();
 
 	renderer = new THREE.WebGLRenderer();
 
 	renderer.setSize(width, height);
 
 	renderer.setSize(width, height);
 
 	document.body.appendChild(renderer.domElement);
 
 	document.body.appendChild(renderer.domElement);
 
+	canvas = renderer.domElement;
 
 
 
 	// load the assets required to display the Raptor model
 
 	// load the assets required to display the Raptor model
 
 	assetManager = new spine.threejs.AssetManager();
 
 	assetManager = new spine.threejs.AssetManager();
 
@@ -82,6 +90,9 @@ function render() {
 
 	var delta = now - lastFrameTime;
 
 	var delta = now - lastFrameTime;
 
 	lastFrameTime = now;
 
 	lastFrameTime = now;
 
 	
 	
+	// resize canvas to use full page, adjust camera/renderer
 
+	resize();
 
+
 
 	// rotate the cube
 
 	// rotate the cube
 
 	mesh.rotation.x = Math.sin(now) * Math.PI * 0.2;
 
 	mesh.rotation.x = Math.sin(now) * Math.PI * 0.2;
 
 	mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
 
 	mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
 
@@ -94,6 +105,21 @@ function render() {
 
 
 
 	requestAnimationFrame(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() {
 
 (function() {
 
 	init();
 
 	init();
 
 }());
 
 }());

+ 58 - 16
spine-ts/webgl/example/index.html
View File 

@@ -1,12 +1,19 @@
 
 <html>
 
 <html>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.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>
 
 <body>
 
+<canvas id="canvas"></canvas>
 
 <center>
 
 <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>Skeleton:</span><select id="skeletonList"></select>
 
 <span>Animation:</span><select id="animationList"></select>
 
 <span>Animation:</span><select id="animationList"></select>
 
 <span>Skin:</span><select id="skinList"></select>
 
 <span>Skin:</span><select id="skinList"></select>
 
+<div>
 
 </center>
 
 </center>
 
 </body>
 
 </body>
 
 <script>
 
 <script>
 
@@ -20,21 +27,21 @@ var mvp = new spine.webgl.Matrix4();
 
 var assetManager;
 
 var assetManager;
 
 var skeletonRenderer;
 
 var skeletonRenderer;
 
 var skeletons = {};
 
 var skeletons = {};
 
-var activeSkeleton = "raptor";
 
+var activeSkeleton = "spineboy";
 
 
 
 function init () {
 
 function init () {
 
 	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
 
 	// 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.
 
 	// loading textures. That is handled separately by PolygonBatcher.
 
 	canvas = document.getElementById("canvas");
 
 	canvas = document.getElementById("canvas");
 
-	canvas.width = 640;
 
-	canvas.height = 480;
 
+	canvas.width = window.innerWidth;
 
+	canvas.height = window.innerHeight;
 
 	var config = { alpha: false };
 
 	var config = { alpha: false };
 
 	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);	
 	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);	
 	
 	
 	// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
 
 	// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
 
 	shader = spine.webgl.Shader.newColoredTextured(gl);
 
 	shader = spine.webgl.Shader.newColoredTextured(gl);
 
 	batcher = new spine.webgl.PolygonBatcher(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);
 
 	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
 
 	assetManager = new spine.webgl.AssetManager(gl);
 
 	assetManager = new spine.webgl.AssetManager(gl);
 
 
 
@@ -61,11 +68,11 @@ function init () {
 
 function load () {
 
 function load () {
 
 	// Wait until the AssetManager has loaded all resources, then load the skeletons.
 
 	// Wait until the AssetManager has loaded all resources, then load the skeletons.
 
 	if (assetManager.isLoadingComplete()) {
 
 	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();
 
 		setupUI();
 
 		requestAnimationFrame(render);
 
 		requestAnimationFrame(render);
 
 	} else {
 
 	} 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";
 
 	if (skin === undefined) skin = "default";
 
 
 
 	// Load the texture atlas using name.atlas and name.png from the AssetManager.
 
 	// 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.
 
 	// Create a SkeletonJson instance for parsing the .json file.
 
 	var skeletonJson = new spine.SkeletonJson(atlasLoader);
 
 	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 skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/" + name + ".json"));
 
 	var skeleton = new spine.Skeleton(skeletonData);
 
 	var skeleton = new spine.Skeleton(skeletonData);
 
-	skeleton.x = positionX;
 
-	skeleton.y = positionY;
 
+	var bounds = calculateBounds(skeleton);
 
 	skeleton.setSkinByName(skin);
 
 	skeleton.setSkinByName(skin);
 
 
 
 	// Create an AnimationState, and set the initial animation in looping mode.
 
 	// 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.
 
 	// 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 () {
 
 function setupUI () {
 
@@ -146,6 +161,7 @@ function setupUI () {
 
 			var animationName = $("#animationList option:selected").text();
 
 			var animationName = $("#animationList option:selected").text();
 
 			skeleton.setToSetupPose();
 
 			skeleton.setToSetupPose();
 
 			state.setAnimation(0, animationName, true);
 
 			state.setAnimation(0, animationName, true);
 
+			scaleAndCenter(skeleton);
 
 		})
 
 		})
 
 	}
 
 	}
 
 
 
@@ -184,6 +200,9 @@ function render () {
 
 	var delta = now - lastFrameTime;
 
 	var delta = now - lastFrameTime;
 
 	lastFrameTime = now;
 
 	lastFrameTime = now;
 
 
 
+	// Update the MVP matrix to adjust for canvas size changes
 
+	resize();
 
+
 
 	gl.clearColor(0.3, 0.3, 0.3, 1);
 
 	gl.clearColor(0.3, 0.3, 0.3, 1);
 
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
 
 
@@ -211,6 +230,29 @@ function render () {
 
 	requestAnimationFrame(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() {
 
 (function() {
 
 	init();
 
 	init();
 
 })();
 
 })();