Merge branch '3.7-beta' into 3.7-beta-cpp

2026-02-04 22:34:53 +08:00 · 2018-12-21 11:33:27 +01:00 · 2018-12-21 11:33:27 +01:00 · 959a71893b
commit 959a71893b
parent 8ab455fcf4 c774c45cb7
37 changed files with 26594 additions and 12535 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -433,6 +433,7 @@
  * Removed `RegionAttachment.vertices` field. The vertices array is provided to `RegionAttachment.computeWorldVertices` by the API user now.
  * Removed `RegionAttachment.updateWorldVertices`, added `RegionAttachment.computeWorldVertices`. The new method now computes the x/y positions of the 4 vertices of the corner and places them in the provided `worldVertices` array, starting at `offset`, then moving by `stride` array elements when advancing to the next vertex. This allows to directly compose the vertex buffer and avoids a copy. The computation of the full vertices, including vertex colors and texture coordinates, is now done by the backend's respective renderer.
  * The completion event will fire for looped 0 duration animations every frame.
+  * Removed the Spine Widget in favor of [Spine Web Player](https://esotericsoftware.com/spine-player).

 * **Additions**
  * Added support for local and relative transform constraint calculation, including additional fields in `TransformConstraintData`
@ -444,6 +445,7 @@
  * `AnimationState#apply` returns boolean indicating if any timeline was applied or not.
  * `Animation#apply` and `Timeline#apply`` now take enums `MixPose` and `MixDirection` instead of booleans
  * Added `AssetManager.loadTextureAtlas`. Instead of loading the `.atlas` and corresponding image files manually, you can simply specify the location of the `.atlas` file and AssetManager will load the atlas and all its images automatically. `AssetManager.get("atlasname.atlas")` will then return an instance of `spine.TextureAtlas`.
+  * Added the [Spine Web Player](https://esotericsoftware.com/spine-player)


 ### WebGL backend
--- a/spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/attachments/MeshAttachment.java
+++ b/spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/attachments/MeshAttachment.java
@ -33,6 +33,7 @@ package com.esotericsoftware.spine.attachments;
 import com.badlogic.gdx.graphics.Color;
 import com.badlogic.gdx.graphics.g2d.TextureAtlas.AtlasRegion;
 import com.badlogic.gdx.graphics.g2d.TextureRegion;
+
 import com.esotericsoftware.spine.Animation.DeformTimeline;

 /** An attachment that displays a textured mesh. A mesh has hull vertices and internal vertices within the hull. Holes are not
@ -70,8 +71,29 @@ public class MeshAttachment extends VertexAttachment {
 	/** Calculates {@link #uvs} using {@link #regionUVs} and the {@link #region}. Must be called after changing the region UVs or
 	 * region. */
 	public void updateUVs () {
+		float[] regionUVs = this.regionUVs;
+		if (this.uvs == null || this.uvs.length != regionUVs.length) this.uvs = new float[regionUVs.length];
+		float[] uvs = this.uvs;
 		float u, v, width, height;
-		if (region == null) {
+		if (region instanceof AtlasRegion) {
+			AtlasRegion region = (AtlasRegion)this.region;
+			float textureWidth = region.getTexture().getWidth(), textureHeight = region.getTexture().getHeight();
+			if (region.rotate) {
+				u = region.getU() - (region.originalHeight - region.offsetY - region.packedWidth) / textureWidth;
+				v = region.getV() - (region.originalWidth - region.offsetX - region.packedHeight) / textureHeight;
+				width = region.originalHeight / textureWidth;
+				height = region.originalWidth / textureHeight;
+				for (int i = 0, n = uvs.length; i < n; i += 2) {
+					uvs[i] = u + regionUVs[i + 1] * width;
+					uvs[i + 1] = v + height - regionUVs[i] * height;
+				}
+				return;
+			}
+			u = region.getU() - region.offsetX / textureWidth;
+			v = region.getV() - (region.originalHeight - region.offsetY - region.packedHeight) / textureHeight;
+			width = region.originalWidth / textureWidth;
+			height = region.originalHeight / textureHeight;
+		} else if (region == null) {
 			u = v = 0;
 			width = height = 1;
 		} else {
@ -80,19 +102,9 @@ public class MeshAttachment extends VertexAttachment {
 			width = region.getU2() - u;
 			height = region.getV2() - v;
 		}
-		float[] regionUVs = this.regionUVs;
-		if (this.uvs == null || this.uvs.length != regionUVs.length) this.uvs = new float[regionUVs.length];
-		float[] uvs = this.uvs;
-		if (region instanceof AtlasRegion && ((AtlasRegion)region).rotate) {
-			for (int i = 0, n = uvs.length; i < n; i += 2) {
-				uvs[i] = u + regionUVs[i + 1] * width;
-				uvs[i + 1] = v + height - regionUVs[i] * height;
-			}
-		} else {
-			for (int i = 0, n = uvs.length; i < n; i += 2) {
-				uvs[i] = u + regionUVs[i] * width;
-				uvs[i + 1] = v + regionUVs[i + 1] * height;
-			}
+		for (int i = 0, n = uvs.length; i < n; i += 2) {
+			uvs[i] = u + regionUVs[i] * width;
+			uvs[i + 1] = v + regionUVs[i + 1] * height;
 		}
 	}

--- a/spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/attachments/RegionAttachment.java
+++ b/spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/attachments/RegionAttachment.java
@ -70,14 +70,12 @@ public class RegionAttachment extends Attachment {
 		float localY = -localY2;
 		if (region instanceof AtlasRegion) {
 			AtlasRegion region = (AtlasRegion)this.region;
+			localX += region.offsetX / region.originalWidth * width;
+			localY += region.offsetY / region.originalHeight * height;
 			if (region.rotate) {
-				localX += region.offsetX / region.originalWidth * width;
-				localY += region.offsetY / region.originalHeight * height;
 				localX2 -= (region.originalWidth - region.offsetX - region.packedHeight) / region.originalWidth * width;
 				localY2 -= (region.originalHeight - region.offsetY - region.packedWidth) / region.originalHeight * height;
 			} else {
-				localX += region.offsetX / region.originalWidth * width;
-				localY += region.offsetY / region.originalHeight * height;
 				localX2 -= (region.originalWidth - region.offsetX - region.packedWidth) / region.originalWidth * width;
 				localY2 -= (region.originalHeight - region.offsetY - region.packedHeight) / region.originalHeight * height;
 			}
--- a/spine-ts/README.md
+++ b/spine-ts/README.md
@ -7,7 +7,7 @@ up into multiple modules:
 1. **WebGL**: `webgl/`, a self-contained WebGL backend, build on the core classes
 1. **Canvas**: `canvas/`, a self-contained Canvas backend, build on the core classes
 1. **THREE.JS**: `threejs/`, a self-contained THREE.JS backend, build on the core classes
-1. **Widget**: `widget/`, a self-contained widget to easily display Spine animations on your website, build on core classes & WebGL backend.
+1. **Player**: `player/`, a self-contained player to easily display Spine animations on your website, build on core classes & WebGL backend.

 While the source code for the core library and backends is written in TypeScript, all code is compiled to easily consumable JavaScript.

@ -20,7 +20,7 @@ The Spine Runtimes are developed with the intent to be used with data exported f

 spine-ts works with data exported from Spine 3.7.xx.

-spine-ts WebGL & Widget backends supports all Spine features.
+spine-ts WebGL & players backends supports all Spine features.

 spine-ts Canvas does not support color tinting, mesh attachments and clipping. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers.

@ -31,10 +31,10 @@ spine-ts does not yet support loading the binary format.
 ## Usage
 1. Download the Spine Runtimes source using [git](https://help.github.com/articles/set-up-git) or by downloading it as a zip via the download button above.
 2. To use only the core library without rendering support, include the `build/spine-core.js` file in your project.
-3. To use the WebGL backend, include the `spine-webgl.js` file in your project.
-3. To use the Canvas backend, include the `spine-canvas.js` file in your project.
-4. To use the Widget, include `spine-widget.js` file in your project.
-5. To use the THREE.JS backend, include the `spine-threejs.js` file in your project. THREE.JS must be loaded first.
+3. To use the WebGL backend, include the `build/spine-webgl.js` file in your project.
+3. To use the Canvas backend, include the `build/spine-canvas.js` file in your project.
+4. To use the Player, include `build/spine-player.js` and `player/css/spine-player.css` file in your project.
+5. To use the THREE.JS backend, include the `build/spine-threejs.js` file in your project. THREE.JS must be loaded first.

 All `*.js` files are self-contained and include both the core and respective backend classes.

@ -60,7 +60,7 @@ cd spine-ts
 python -m SimpleHTTPServer
 ```

-Then open `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `https://localhost:8000/threejs/example` or `http://localhost:8000/widget/example` in your browser.
+Then open `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `https://localhost:8000/threejs/example` or `http://localhost:8000/player/example` in your browser.

 ## WebGL Demos
 The spine-ts WebGL demos load their image, atlas, and JSON files from our webserver and so can be run directly, without needing a webserver. The demos can be viewed [all on one page](http://esotericsoftware.com/spine-demos/) or in individual, standalone pages which are easy for you to explore and edit. See the [standalone demos source code](webgl/demos) and view the pages here:
@ -92,7 +92,7 @@ setup a development environment, follow these steps.
  * **WebGL**: `tsc -w -p tsconfig.webgl.json`, builds `core/src` and `webgl/src`, outputs `build/spine-webgl.js|d.ts|js.map`
  * **Canvas**: `tsc -w -p tsconfig.canvas.json`, builds `core/src` and `canvas/src`, outputs `build/spine-canvas.js|d.ts|js.map`
  * **THREE.JS**: `tsc -w -p tsconfig.threejs.json`, builds `core/src` and `threejs/src`, outputs `build/spine-threejs.js|d.ts|js.map`
-  * **Widget**: `tsc -w -p tsconfig.widget.json`, builds `core/src` and `widget/src`, outputs `build/spine-widget.js|d.ts|js.map`
+  * **Player**: `tsc -w -p tsconfig.player.json`, builds `core/src` and `player/src`, outputs `build/spine-player.js|d.ts|js.map`
 6. Open the `spine-ts` folder in Visual Studio Code. VS Code will use the `tsconfig.json` file all source files from core and all
 backends for your development pleasure. The actual JavaScript output is still created by the command line TypeScript compiler process from the previous step.

@ -104,7 +104,7 @@ cd spine-ts
 python -m SimpleHTTPServer
 ```

-Then navigate to `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `http://localhost:8000/threejs/example` or `http://localhost:8000/widget/example`
+Then navigate to `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `http://localhost:8000/threejs/example` or `http://localhost:8000/player/example`

 ### Spine-ts WebGL backend
 By default, the spine-ts WebGL backend supports two-color tinting. This has a neglible effect on performance, as more per vertex data has to be submitted to the GPU, and the fragment shader has to do a few more arithmetic operations.
@ -124,98 +124,5 @@ var skeletonRenderer = new spine.SkeletonRenderer(gl, false);
 var shader = Shader.newColoredTextured();
 ```

-### Using the Widget
-To easily display Spine animations on your website, you can use the spine-ts Widget backend.
-
-1. Export your Spine animation with a texture atlas and put the resulting `.json`, `.atlas` and `.png` files on your server.
-2. Copy the `build/spine-widget.js` file to your server and include it on your website `<script src="spine-widget.js"></script>`, adjusting the src to match the location of the file on your server.
-3. Add HTML elements, e.g. a `<div>`, with the class `spine-widget` to your website, specifying its configuration such as the location of the files, the animation to display, etc.
-
-You can configure a HTML element either directly via HTML, or using JavaScript. At a minimum, you need to specify the location of the
-`.json` and `.atlas` file as well as the name of the animation to play back.
-
-#### HTML configuration
-To specify the configuration of a Spine Widget via HTML, you can use these HTML element attributes:
-
-  * `data-json`: required, path to the `.json` file, absolute or relative, e.g. "assets/animation.json"
-  * `data-atlas`: required, path to the `.atlas` file, absolute or relative, e.g. "assets/animation.atlas"
-  * `data-animation`: required, the name of the animation to play back
-  * `data-images-path`: optional, the location of images on the server to load atlas pages from. If omitted, atlas `.png` page files are loaded relative to the `.atlas` file.
-  * `data-skin`: optional, the name of the skin to use. Defaults to `default` if omitted.
-  * `data-loop`: optional, whether to loop the animation or not. Defaults to `true` if omitted.
-  * `data-scale`: optional, the scaling factor to apply when loading the `.json` file. Defaults to `1` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
-  * `data-x`: optional, the x-coordinate to display the animation at. The origin is in the bottom left corner. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
-  * `data-y`: optional, the y-coordinate to display the animation at. The origin is in the bottom left corner with the y-axis pointing upwards. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
-  * `data-fit-to-canvas`: optional, whether to fit the animation to the canvas size or not. Defaults to `true` if omitted, in which case `data-scale`, `data-x` and `data-y` are irrelevant. This setting calculates the setup pose bounding box using the specified skin to center and scale the animation on the canvas.
-  * `data-background-color`: optional, the background color to use. Defaults to `#000000` if omitted.
-  * `data-premultiplied-alpha`: optional, whether the atlas pages use premultiplied alpha or not. Defaults to `false` if omitted.
-  * `data-debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted.
-
-You can specify these as attribuets on the HTML element like this:
-
-```html
-<div class="spine-widget" data-json="assets/animation.json" data-atlas="assets/animation.atlas" data-animation="walk"></div>
-```
-
-All HTML elements with class `spine-widget` will be automatically loaded when the website is finished loading by the browser. To add
-widgets dynamically, use the JavaScript configuration described below.
-
-#### JavaScript configuration
-You can dynamically add Spine Widgets to your web page by using the JavaScript API.
-
-Create a HTML element on your website, either statically or via JavaScript:
-
-```html
-<div id="my-widget"></div>
-```
-
-Then create a new `spine.SpineWidget`, providing a [`SpineWidgetConfiguration`](widget/src/Widget.ts#L281) object, e.g.:
-
-```JavaScript
-new spine.SpineWidget("my-widget", {
-	json: "assets/spineboy.json",
-	atlas: "assets/spineboy.atlas",
-	animation: "run",
-	backgroundColor: "#000000",
-	success: function (widget) {
-		var animIndex = 0;
-		widget.canvas.onclick = function () {
-			animIndex++;
-			let animations = widget.skeleton.data.animations;
-			if (animIndex >= animations.length) animIndex = 0;
-			widget.setAnimation(animations[animIndex].name);
-		}
-	}
-});
-```
-
-The configuration object has the following fields:
-
-  * `json`: required, path to the `.json` file, absolute or relative, e.g. "assets/animation.json"
-  * `jsonContent`: optional, string or JSON object holding the content of a skeleton `.json` file. Overrides `json` if given.
-  * `atlas`: required, path to the `.atlas` file, absolute or relative, e.g. "assets/animation.atlas"
-  * `atlasContent`: optional, string holding the content of an .atlas file. Overrides `atlas` if given.
-  * `animation`: required, the name of the animation to play back
-  * `imagesPath`: optional, the location of images on the server to load atlas pages from. If omitted, atlas `.png` page files are loaded relative to the `.atlas` file.
-  * `atlasPages`: optional, the list of atlas page images, e.g. `atlasPages: ["assets/page1.png", "assets/page2.png"]` when using code, or `data-atlas-pages="assets/page1.png,assets/page2.png"` on case of HTML instantiation. Use this if you have a multi-page atlas. If ommited, only one atlas page image is loaded based on the atlas file name, replacing `.atlas` with `.png`.
-  * `atlasPagesContent`: optional, the list of atlas page images as data URIs. If given, `atlasPages` must also be given.
-  * `skin`: optional, the name of the skin to use. Defaults to `default` if omitted.
-  * `loop`: optional, whether to loop the animation or not. Defaults to `true` if omitted.
-  * `scale`: optional, the scaling factor to apply when loading the `.json` file. Defaults to `1` if omitted. Irrelevant if `data-fit-to-canavs` is `true`.
-  * `x`: optional, the x-coordinate to display the animation at. The origin is in the bottom left corner. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
-  * `y`: optional, the y-coordinate to display the animation at. The origin is in the bottom left corner with the y-axis pointing upwards. Defaults to `0` if omitted. Irrelevant if `data-fit-to-canvas` is `true`.
-  * `fitToCanvas`: optional, whether to fit the animation to the canvas size or not. Defaults to `true` if omitted, in which case `data-scale`, `data-x` and `data-y` are irrelevant. This setting calculates the setup pose bounding box using the specified skin to center and scale the animation on the canvas.
-  * `alpha`: optional, whether to allow the canvas to be transparent. Defaults to `true`. Set the alpha channel in ``backgroundColor` to 0 as well, e.g. `#00000000`.
-  * `backgroundColor`: optional, the background color to use. Defaults to `#000000` if omitted.
-  * `premultipliedAlpha`: optional, whether the atlas pages use premultiplied alpha or not. Defaults to `false` if omitted.
-  * `debug`: optional, whether to show debug information such as bones, attachments, etc. Defaults to `false` if omitted.
-  * `success`: optional, a callback taking a `SpineWidget` called when the animation has been loaded successfully
-  * `error`: optional, a callback taking a `SpineWidget` and an error string called when the animation couldn't be loaded
-
-You can also create a HTML element with class `spine-widget` and `data-` attributes as described above and call `spine.widget.SpineWidget.loadWidget(element)` to load
-an element via JavaScript on demand.
-
-The resulting `SpineWidget` has various fields that let you modify the animation programmatically. Most notably, the `skeleton` and `state` fields
-let you modify all aspects of your animation as you wish. See the [example](widget/example/index.html#L21).
-
-You can also modify what debug information is shown by accessing `SpineWidget.debugRenderer` and set the various `drawXXX` fields to `true` or `false`.
+### Using the Player
+Please see the documentation for the [Spine Web Player](https://esotericsoftware.com/spine-player)
--- a/spine-ts/build/spine-all.d.ts
+++ b/spine-ts/build/spine-all.d.ts
@ -1772,3 +1772,112 @@ declare module spine.threejs {
 		static toThreeJsTextureWrap(wrap: TextureWrap): THREE.Wrapping;
 	}
 }
+declare module spine {
+	interface Viewport {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+		padLeft: string | number;
+		padRight: string | number;
+		padTop: string | number;
+		padBottom: string | number;
+	}
+	interface SpinePlayerConfig {
+		jsonUrl: string;
+		atlasUrl: string;
+		animation: string;
+		animations: string[];
+		defaultMix: number;
+		skin: string;
+		skins: string[];
+		controlBones: string[];
+		premultipliedAlpha: boolean;
+		showControls: boolean;
+		debug: {
+			bones: boolean;
+			regions: boolean;
+			meshes: boolean;
+			bounds: boolean;
+			paths: boolean;
+			clipping: boolean;
+			points: boolean;
+			hulls: boolean;
+		};
+		viewport: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+			padLeft: string | number;
+			padRight: string | number;
+			padTop: string | number;
+			padBottom: string | number;
+			animations: Map<Viewport>;
+			debugRender: boolean;
+			transitionTime: number;
+		};
+		alpha: boolean;
+		backgroundColor: string;
+		backgroundImage: {
+			url: string;
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		};
+		fullScreenBackgroundColor: string;
+		success: (widget: SpinePlayer) => void;
+		error: (widget: SpinePlayer, msg: string) => void;
+	}
+	class SpinePlayer {
+		parent: HTMLElement | string;
+		private config;
+		static HOVER_COLOR_INNER: Color;
+		static HOVER_COLOR_OUTER: Color;
+		static NON_HOVER_COLOR_INNER: Color;
+		static NON_HOVER_COLOR_OUTER: Color;
+		private sceneRenderer;
+		private dom;
+		private playerControls;
+		private canvas;
+		private timelineSlider;
+		private playButton;
+		private skinButton;
+		private animationButton;
+		private context;
+		private loadingScreen;
+		private assetManager;
+		private loaded;
+		private skeleton;
+		private animationState;
+		private time;
+		private paused;
+		private playTime;
+		private speed;
+		private animationViewports;
+		private currentViewport;
+		private previousViewport;
+		private viewportTransitionStart;
+		private selectedBones;
+		constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
+		validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
+		showError(error: string): void;
+		render(): HTMLElement;
+		private lastPopup;
+		showSpeedDialog(speedButton: HTMLElement): void;
+		showAnimationsDialog(animationsButton: HTMLElement): void;
+		showSkinsDialog(skinButton: HTMLElement): void;
+		showSettingsDialog(settingsButton: HTMLElement): void;
+		drawFrame(requestNextFrame?: boolean): void;
+		scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
+		loadSkeleton(): void;
+		private cancelId;
+		setupInput(): void;
+		private play();
+		private pause();
+		private setAnimation(animation);
+		private percentageToWorldUnit(size, percentageOrAbsolute);
+		private calculateAnimationViewport(animationName);
+	}
+}
--- a/spine-ts/build/spine-all.js
+++ b/spine-ts/build/spine-all.js
--- a/spine-ts/build/spine-all.js.map
+++ b/spine-ts/build/spine-all.js.map
--- a/spine-ts/build/spine-player.d.ts
+++ b/spine-ts/build/spine-player.d.ts
--- a/spine-ts/build/spine-player.js
+++ b/spine-ts/build/spine-player.js
--- a/spine-ts/build/spine-player.js.map
+++ b/spine-ts/build/spine-player.js.map
--- a/spine-ts/player/css/spine-player.css
+++ b/spine-ts/player/css/spine-player.css
@ -381,4 +381,27 @@
 /** Speed slider **/
 .spine-player-speed-slider {
 	width: 150px;
+}
+
+/** Player editor **/
+.spine-player-editor-container {
+	display: flex;
+	flex-direction: row;
+	height: 100%;
+	width: 100%;
+}
+
+.spine-player-editor-code {
+	flex: 1;
+	overflow: auto;
+}
+
+.CodeMirror {
+	height: 100%;
+}
+
+.spine-player-editor-player {
+	flex: 1;
+	border: none;
+	background: black;
 }
--- a/spine-ts/player/example/editor.html
+++ b/spine-ts/player/example/editor.html
@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<script src="./external/codemirror.js"></script>
+	<script src="../../build/spine-player.js"></script>
+	<link rel="stylesheet" href="../css/spine-player.css">
+	<link rel="stylesheet" href="./external/codemirror.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<style>
+body {
+	background: gray;
+	margin: 0px;
+}
+</style>
+
+<body>
+	<div id="editor" style="height: 700px;"></div>
+</body>
+<script>
+	new spine.SpinePlayerEditor(document.getElementById("editor"));
+</script>
+</body>
+</html>
--- a/spine-ts/player/example/external/codemirror.css
+++ b/spine-ts/player/example/external/codemirror.css
@ -0,0 +1,395 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
+
+.CodeMirror {
+  font-family: Monaco, "Courier New", monospace;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0px;
+  height: 100%;
+}
+
+.cm-s-monokai.CodeMirror { background: #1e1e1e; color: #f8f8f2; }
+.cm-s-monokai div.CodeMirror-selected { background: #464646; }
+.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
+.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
+.cm-s-monokai .CodeMirror-gutters { background: #1e1e1e; border-right: 0px; }
+.cm-s-monokai .CodeMirror-guttermarker { color: white; }
+.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
+.cm-s-monokai .CodeMirror-linenumber { color: #828282; }
+.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+
+.cm-s-monokai span.cm-comment { color: #84ea53; }
+.cm-s-monokai span.cm-atom { color: #539BD8; }
+.cm-s-monokai span.cm-number { color: #AFC9A2; }
+
+.cm-s-monokai span.cm-comment.cm-attribute { color: #97b757; }
+.cm-s-monokai span.cm-comment.cm-def { color: #bc9262; }
+.cm-s-monokai span.cm-comment.cm-tag { color: #bc6283; }
+.cm-s-monokai span.cm-comment.cm-type { color: #5998a6; }
+
+.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }
+.cm-s-monokai span.cm-keyword { color: #b97cb5; }
+.cm-s-monokai span.cm-builtin { color: #b97cb5; }
+.cm-s-monokai span.cm-string { color: #CA8D73; }
+
+.cm-s-monokai span.cm-variable { color: #99D9FE; }
+.cm-s-monokai span.cm-variable-2 { color: #DCDDA7; }
+.cm-s-monokai span.cm-variable-3, .cm-s-monokai span.cm-type { color: #DCDDA7; }
+.cm-s-monokai span.cm-def { color: #fd971f; }
+.cm-s-monokai span.cm-bracket { color: #f8f8f2; }
+.cm-s-monokai span.cm-tag { color: #f92672; }
+.cm-s-monokai span.cm-header { color: #ae81ff; }
+.cm-s-monokai span.cm-link { color: #ae81ff; }
+.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }
+
+.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
+.cm-s-monokai .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}
--- a/spine-ts/player/example/external/codemirror.js
+++ b/spine-ts/player/example/external/codemirror.js
--- a/spine-ts/player/example/index.html
+++ b/spine-ts/player/example/index.html
@ -21,7 +21,7 @@ body {
 <script>
 	// Creates a new spine player. The debugRender option enables
 	// rendering of viewports and padding for debugging purposes.
-	new spine.SpinePlayer(document.getElementById("container"), {
+	new spine.SpinePlayer("container", {
 		jsonUrl: "assets/spineboy-pro.json",
 		atlasUrl: "assets/spineboy-pma.atlas",
 		animation: "run",
@ -32,9 +32,9 @@ body {
 		}
 	});

-	// Creates a new spine player with a transparent background,
+	/*// Creates a new spine player with a transparent background,
 	// so content from the website shines through. Hides the controls.
-	new spine.SpinePlayer(document.getElementById("container-raptor"), {
+	new spine.SpinePlayer("container-raptor", {
 		jsonUrl: "assets/raptor-pro.json",
 		atlasUrl: "assets/raptor-pma.atlas",
 		animation: "walk",
@ -42,7 +42,7 @@ body {
 		premultipliedAlpha: true,
 		backgroundColor: "#00000000",
 		alpha: true
-	});
+	});*/
 </script>
 </body>
 </html>
--- a/spine-ts/player/src/Player.ts
+++ b/spine-ts/player/src/Player.ts
@ -62,10 +62,7 @@
 		/* Optional: list of skin names from which the user can choose. */
 		skins: string[]

-		/* Optional: list of bone names that the user can control by dragging. */
-		controlBones: string[]
-
-		/* Optional: whether the skeleton uses premultiplied alpha. Default: false. */
+		/* Optional: whether the skeleton uses premultiplied alpha. Default: true. */
 		premultipliedAlpha: boolean

 		/* Optional: whether to show the player controls. Default: true. */
@ -119,6 +116,9 @@
 		/* Optional: the background color used in fullscreen mode. Must be given in the format #rrggbbaa. Default: backgroundColor. */
 		fullScreenBackgroundColor: string

+		/* Optional: list of bone names that the user can control by dragging. */
+		controlBones: string[]
+
 		/* Optional: callback when the widget and its assets have been successfully loaded. */
 		success: (widget: SpinePlayer) => void

@ -138,7 +138,7 @@
 			parent.appendChild(this.dom);
 		}

-		show (dismissedListener = () => {}) {
+		show (dismissedListener: () => void) {
 			this.dom.classList.remove("spine-player-hidden");

 			// Make sure the popup isn't bigger than the player.
@ -310,9 +310,12 @@
 		private viewportTransitionStart = 0;

 		private selectedBones: Bone[];
+		private parent: HTMLElement;

-		constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
-			parent.appendChild(this.render());
+		constructor(parent: HTMLElement | string, private config: SpinePlayerConfig) {
+			if (typeof parent === "string") this.parent = document.getElementById(parent);
+			else this.parent = parent;
+			this.parent.appendChild(this.render());
 		}

 		validateConfig(config: SpinePlayerConfig): SpinePlayerConfig {
@ -322,7 +325,7 @@
 			if (!config.alpha) config.alpha = false;
 			if (!config.backgroundColor) config.backgroundColor = "#000000";
 			if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor;
-			if (!config.premultipliedAlpha) config.premultipliedAlpha = false;
+			if (!config.premultipliedAlpha) config.premultipliedAlpha = true;
 			if (!config.success) config.success = (widget) => {};
 			if (!config.error) config.error = (widget, msg) => {};
 			if (!config.debug) config.debug = {
@ -545,6 +548,8 @@
 			speedButton.classList.add("spine-player-button-icon-speed-selected")
 			popup.show(() => {
 				speedButton.classList.remove("spine-player-button-icon-speed-selected")
+				popup.dom.remove();
+				this.lastPopup = null;
 			});
 			this.lastPopup = popup;
 		}
@ -593,6 +598,8 @@
 			animationsButton.classList.add("spine-player-button-icon-animations-selected")
 			popup.show(() => {
 				animationsButton.classList.remove("spine-player-button-icon-animations-selected")
+				popup.dom.remove();
+				this.lastPopup = null;
 			});
 			this.lastPopup = popup;
 		}
@ -642,6 +649,8 @@
 			skinButton.classList.add("spine-player-button-icon-skins-selected")
 			popup.show(() => {
 				skinButton.classList.remove("spine-player-button-icon-skins-selected")
+				popup.dom.remove();
+				this.lastPopup = null;
 			});
 			this.lastPopup = popup;
 		}
@ -686,6 +695,8 @@
 			settingsButton.classList.add("spine-player-button-icon-settings-selected")
 			popup.show(() => {
 				settingsButton.classList.remove("spine-player-button-icon-settings-selected")
+				popup.dom.remove();
+				this.lastPopup = null;
 			});
 			this.lastPopup = popup;
 		}
@ -951,6 +962,7 @@
 			this.loaded = true;
 		}

+		private cancelId = 0;
 		setupInput () {
 			let controlBones = this.config.controlBones;
 			let selectedBones = this.selectedBones = new Array<Bone>(this.config.controlBones.length);
@ -972,11 +984,16 @@
 							target = bone;
 						}
 					}
-					handleHover();
 				},
 				up: (x, y) => {
-					target = null;
-					handleHover();
+					if (target) {
+						target = null;
+					} else {
+						if (this.paused)
+							this.play()
+						else
+							this.pause();
+					}
 				},
 				dragged: (x, y) => {
 					if (target != null) {
@ -990,7 +1007,6 @@
 							target.y = coords.y - skeleton.y;
 						}
 					}
-					handleHover();
 				},
 				moved: (x, y) => {
 					for (var i = 0; i < controlBones.length; i++) {
@ -1003,7 +1019,6 @@
 							selectedBones[i] = null;
 						}
 					}
-					handleHover();
 				}
 			});

@ -1013,35 +1028,57 @@
 			// For this we need to register a mouse handler on
 			// the document and see if we are within the canvas
 			// area :/
-			var mouseOverChildren = true;
+			var mouseOverControls = true;
+			var mouseOverCanvas = false;
 			document.addEventListener("mousemove", (ev: UIEvent) => {
 				if (ev instanceof MouseEvent) {
-					let rect = this.playerControls.getBoundingClientRect();
-					let x = ev.clientX - rect.left;
-					let y = ev.clientY - rect.top;
-					mouseOverChildren = x >= 0 && x <= this.playerControls.clientWidth && y >= 0 && y <= this.playerControls.clientHeight;
+					handleHover(ev.clientX, ev.clientY);
+				}
+			});
+			document.addEventListener("touchmove", (ev: UIEvent) => {
+				if (ev instanceof TouchEvent) {
+					var touches = ev.changedTouches;
+					if (touches.length > 0) {
+						var touch = touches[0];
+						handleHover(touch.clientX, touch.clientY);
+					}
 				}
 			});

-			let cancelId = 0;
-			let handleHover = () => {
+			let handleHover = (mouseX: number, mouseY: number) => {
 				if (!this.config.showControls) return;
-				clearTimeout(cancelId);
-				this.playerControls.classList.remove("spine-player-controls-hidden");
-				let remove = () => {
+
 					let popup = findWithClass(this.dom, "spine-player-popup");
-					if (popup.length == 0 && !mouseOverChildren && !this.paused) {
+					mouseOverControls = overlap(mouseX, mouseY, this.playerControls.getBoundingClientRect());
+					mouseOverCanvas = overlap(mouseX, mouseY, this.canvas.getBoundingClientRect());
+					clearTimeout(this.cancelId);
+					let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
+					if (hide) {
 						this.playerControls.classList.add("spine-player-controls-hidden");
 					} else {
-						cancelId = setTimeout(remove, 1000);
+						this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
-				};
-				cancelId = setTimeout(remove, 1000);
+					if (!mouseOverControls && popup.length == 0 && !this.paused) {
+						let remove = () => {
+							if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
+						};
+						this.cancelId = setTimeout(remove, 1000);
+					}
+			}
+
+			let overlap = (mouseX: number, mouseY: number, rect: DOMRect | ClientRect): boolean => {
+					let x = mouseX - rect.left;
+					let y = mouseY - rect.top;
+					return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
 			}
 		}

 		private play () {
 			this.paused = false;
+			let remove = () => {
+				if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
+			};
+			this.cancelId = setTimeout(remove, 1000);
 			this.playButton.classList.remove("spine-player-button-icon-play");
 			this.playButton.classList.add("spine-player-button-icon-pause");

@ -1054,6 +1091,9 @@

 		private pause () {
 			this.paused = true;
+			this.playerControls.classList.remove("spine-player-controls-hidden");
+			clearTimeout(this.cancelId);
+
 			this.playButton.classList.remove("spine-player-button-icon-pause");
 			this.playButton.classList.add("spine-player-button-icon-play");
 		}
--- a/spine-ts/player/src/PlayerEditor.ts
+++ b/spine-ts/player/src/PlayerEditor.ts
@ -0,0 +1,90 @@
+declare function CodeMirror(el: Element, config: any): void;
+
+module spine {
+	export class SpinePlayerEditor {
+		private static DEFAULT_CODE =
+		`
+<script src="https://esotericsoftware.com/files/spine-player/3.7/spine-player.js"></script>
+<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css">
+
+<div id="player-container" style="width: 100%; height: 100vh;"></div>
+
+<script>
+new spine.SpinePlayer("player-container", {
+	jsonUrl: "https://esotericsoftware.com/files/examples/spineboy/export/spineboy-pro.json",
+	atlasUrl: "https://esotericsoftware.com/files/examples/spineboy/export/spineboy-pma.atlas"
+});
+</script>
+		`.trim();
+
+		private prefix: string =
+`<html>
+<head>
+<style>
+body {
+	margin: 0px;
+}
+</style>
+</head>
+<body>`.trim()
+		private postfix: string = `</body>`;
+		private code: any;
+		private player: HTMLIFrameElement;
+
+		constructor(parent: HTMLElement) {
+			this.render(parent);
+		}
+
+		private render (parent: HTMLElement) {
+			let dom = /*html*/`
+				<div class="spine-player-editor-container">
+					<div class="spine-player-editor-code"></div>
+					<iframe class="spine-player-editor-player"></iframe>
+				</div>
+			`;
+			parent.innerHTML = dom;
+			let codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
+			this.player = parent.getElementsByClassName("spine-player-editor-player")[0] as HTMLIFrameElement;
+
+			requestAnimationFrame(() => {
+				this.code = CodeMirror(codeElement, {
+					lineNumbers: true,
+					tabSize: 3,
+					indentUnit: 3,
+					indentWithTabs: true,
+					scrollBarStyle: "native",
+					mode: "htmlmixed",
+					theme: "monokai"
+				});
+				this.code.on("change", () => {
+					this.startPlayer();
+				});
+
+				this.setCode(SpinePlayerEditor.DEFAULT_CODE);
+			})
+		}
+
+		setPreAndPostfix(prefix: string, postfix: string) {
+			this.prefix = prefix;
+			this.postfix = postfix;
+			this.startPlayer()
+		}
+
+		setCode(code: string) {
+			this.code.setValue(code);
+			this.startPlayer();
+		}
+
+		private timerId = 0;
+		startPlayer() {
+			clearTimeout(this.timerId);
+			this.timerId = setTimeout( () => {
+				let code = this.code.getDoc().getValue();
+				code = this.prefix + code + this.postfix;
+				code = window.btoa(code);
+				this.player.src = "";
+				this.player.src = "data:text/html;base64," + code;
+			}, 500);
+		}
+	}
+}
--- a/spine-ts/tsconfig.json
+++ b/spine-ts/tsconfig.json
@ -13,9 +13,9 @@
 		"canvas/src/**/*",
 		"webgl/src/**/*",
 		"threejs/src/**/*",
-		"widget/src/**/*"
+		"player/src/**/*"
 	],
-	"exclude": [		
-		"build"				 
+	"exclude": [
+		"build"
 	]
 }
--- a/spine-ts/webgl/src/LoadingScreen.ts
+++ b/spine-ts/webgl/src/LoadingScreen.ts
@ -80,7 +80,7 @@ module spine.webgl {

 			this.timeKeeper.update();
 			let a = Math.abs(Math.sin(this.timeKeeper.totalTime + 0.75));
-			this.angle -= this.timeKeeper.delta * 360 * (1 + 1.5 * Math.pow(a, 5));
+			this.angle -= this.timeKeeper.delta / 1.4 * 360 * (1 + 1.5 * Math.pow(a, 5));

 			let renderer = this.renderer;
 			let canvas = renderer.canvas;
--- a/Examples/FixedTimestepUpdates.unity
+++ b/Examples/FixedTimestepUpdates.unity
@ -142,7 +142,7 @@ MonoBehaviour:
  frameDeltaTime: 0.083333336
  maxFrameSkip: 2
  frameskipMeshUpdate: 1
-  timeOffset: 0.033333335
+  timeOffset: 0.04166667
 --- !u!114 &466319116
 MonoBehaviour:
  m_ObjectHideFlags: 0
@ -222,7 +222,7 @@ Transform:
  m_LocalScale: {x: 1, y: 1, z: 1}
  m_Children: []
  m_Father: {fileID: 0}
-  m_RootOrder: 4
+  m_RootOrder: 3
  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
 --- !u!1 &706647559
 GameObject:
@ -386,7 +386,7 @@ RectTransform:
  m_Children:
  - {fileID: 706647560}
  m_Father: {fileID: 0}
-  m_RootOrder: 2
+  m_RootOrder: 4
  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
  m_AnchorMin: {x: 0, y: 0}
  m_AnchorMax: {x: 0, y: 0}
@ -491,7 +491,7 @@ Transform:
  m_LocalScale: {x: 1, y: 1, z: 1}
  m_Children: []
  m_Father: {fileID: 0}
-  m_RootOrder: 3
+  m_RootOrder: 2
  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
 --- !u!114 &1140995466
 MonoBehaviour:
--- a/SkeletonAnimation/AnimationState
+++ b/SkeletonAnimation/AnimationState
@ -1,336 +0,0 @@
-%YAML 1.1
-%TAG !u! tag:unity3d.com,2011:
--- !u!29 &1
-OcclusionCullingSettings:
-  m_ObjectHideFlags: 0
-  serializedVersion: 2
-  m_OcclusionBakeSettings:
-    smallestOccluder: 5
-    smallestHole: 0.25
-    backfaceThreshold: 100
-  m_SceneGUID: 00000000000000000000000000000000
-  m_OcclusionCullingData: {fileID: 0}
--- !u!104 &2
-RenderSettings:
-  m_ObjectHideFlags: 0
-  serializedVersion: 8
-  m_Fog: 0
-  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
-  m_FogMode: 3
-  m_FogDensity: 0.01
-  m_LinearFogStart: 0
-  m_LinearFogEnd: 300
-  m_AmbientSkyColor: {r: 0.212, g: 0.227, b: 0.259, a: 1}
-  m_AmbientEquatorColor: {r: 0.114, g: 0.125, b: 0.133, a: 1}
-  m_AmbientGroundColor: {r: 0.047, g: 0.043, b: 0.035, a: 1}
-  m_AmbientIntensity: 1
-  m_AmbientMode: 3
-  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
-  m_SkyboxMaterial: {fileID: 0}
-  m_HaloStrength: 0.5
-  m_FlareStrength: 1
-  m_FlareFadeSpeed: 3
-  m_HaloTexture: {fileID: 0}
-  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
-  m_DefaultReflectionMode: 0
-  m_DefaultReflectionResolution: 128
-  m_ReflectionBounces: 1
-  m_ReflectionIntensity: 1
-  m_CustomReflection: {fileID: 0}
-  m_Sun: {fileID: 0}
-  m_IndirectSpecularColor: {r: 0, g: 0, b: 0, a: 1}
--- !u!157 &3
-LightmapSettings:
-  m_ObjectHideFlags: 0
-  serializedVersion: 9
-  m_GIWorkflowMode: 1
-  m_GISettings:
-    serializedVersion: 2
-    m_BounceScale: 1
-    m_IndirectOutputScale: 1
-    m_AlbedoBoost: 1
-    m_TemporalCoherenceThreshold: 1
-    m_EnvironmentLightingMode: 0
-    m_EnableBakedLightmaps: 0
-    m_EnableRealtimeLightmaps: 0
-  m_LightmapEditorSettings:
-    serializedVersion: 8
-    m_Resolution: 2
-    m_BakeResolution: 40
-    m_TextureWidth: 1024
-    m_TextureHeight: 1024
-    m_AO: 0
-    m_AOMaxDistance: 1
-    m_CompAOExponent: 1
-    m_CompAOExponentDirect: 0
-    m_Padding: 2
-    m_LightmapParameters: {fileID: 0}
-    m_LightmapsBakeMode: 1
-    m_TextureCompression: 1
-    m_FinalGather: 0
-    m_FinalGatherFiltering: 1
-    m_FinalGatherRayCount: 256
-    m_ReflectionCompression: 2
-    m_MixedBakeMode: 3
-    m_BakeBackend: 0
-    m_PVRSampling: 1
-    m_PVRDirectSampleCount: 32
-    m_PVRSampleCount: 500
-    m_PVRBounces: 2
-    m_PVRFiltering: 0
-    m_PVRFilteringMode: 1
-    m_PVRCulling: 1
-    m_PVRFilteringGaussRadiusDirect: 1
-    m_PVRFilteringGaussRadiusIndirect: 5
-    m_PVRFilteringGaussRadiusAO: 2
-    m_PVRFilteringAtrousColorSigma: 1
-    m_PVRFilteringAtrousNormalSigma: 1
-    m_PVRFilteringAtrousPositionSigma: 1
-  m_LightingDataAsset: {fileID: 0}
-  m_ShadowMaskMode: 2
--- !u!196 &4
-NavMeshSettings:
-  serializedVersion: 2
-  m_ObjectHideFlags: 0
-  m_BuildSettings:
-    serializedVersion: 2
-    agentTypeID: 0
-    agentRadius: 0.5
-    agentHeight: 2
-    agentSlope: 45
-    agentClimb: 0.4
-    ledgeDropHeight: 0
-    maxJumpAcrossDistance: 0
-    minRegionArea: 2
-    manualCellSize: 0
-    cellSize: 0.16666667
-    manualTileSize: 0
-    tileSize: 256
-    accuratePlacement: 0
-  m_NavMeshData: {fileID: 0}
--- !u!1 &1801506823
-GameObject:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  serializedVersion: 5
-  m_Component:
-  - component: {fileID: 1801506828}
-  - component: {fileID: 1801506827}
-  - component: {fileID: 1801506826}
-  - component: {fileID: 1801506825}
-  - component: {fileID: 1801506824}
-  - component: {fileID: 1801506829}
-  m_Layer: 0
-  m_Name: Spine GameObject (hero-pro)
-  m_TagString: Untagged
-  m_Icon: {fileID: 0}
-  m_NavMeshLayer: 0
-  m_StaticEditorFlags: 0
-  m_IsActive: 1
--- !u!95 &1801506824
-Animator:
-  serializedVersion: 3
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1801506823}
-  m_Enabled: 1
-  m_Avatar: {fileID: 0}
-  m_Controller: {fileID: 9100000, guid: cec34498f2eb26b488452ec274c54439, type: 2}
-  m_CullingMode: 0
-  m_UpdateMode: 0
-  m_ApplyRootMotion: 0
-  m_LinearVelocityBlending: 0
-  m_WarningMessage: 
-  m_HasTransformHierarchy: 1
-  m_AllowConstantClipSamplingOptimization: 1
--- !u!114 &1801506825
-MonoBehaviour:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1801506823}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: d247ba06193faa74d9335f5481b2b56c, type: 3}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  skeletonDataAsset: {fileID: 11400000, guid: 2f899e95232e6144786de8fb99678a8d, type: 2}
-  initialSkinName: default
-  initialFlipX: 0
-  initialFlipY: 0
-  separatorSlotNames: []
-  zSpacing: 0
-  useClipping: 1
-  immutableTriangles: 0
-  pmaVertexColors: 1
-  clearStateOnDisable: 0
-  tintBlack: 0
-  singleSubmesh: 0
-  addNormals: 0
-  calculateTangents: 0
-  disableRenderingOnOverride: 1
-  _animationName: 
-  loop: 0
-  timeScale: 1
--- !u!23 &1801506826
-MeshRenderer:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1801506823}
-  m_Enabled: 1
-  m_CastShadows: 1
-  m_ReceiveShadows: 1
-  m_MotionVectors: 1
-  m_LightProbeUsage: 1
-  m_ReflectionProbeUsage: 1
-  m_Materials:
-  - {fileID: 2100000, guid: 9aa2023c2c91b254f9cb0a4fba19af00, type: 2}
-  m_StaticBatchInfo:
-    firstSubMesh: 0
-    subMeshCount: 0
-  m_StaticBatchRoot: {fileID: 0}
-  m_ProbeAnchor: {fileID: 0}
-  m_LightProbeVolumeOverride: {fileID: 0}
-  m_ScaleInLightmap: 1
-  m_PreserveUVs: 0
-  m_IgnoreNormalsForChartDetection: 0
-  m_ImportantGI: 0
-  m_SelectedEditorRenderState: 3
-  m_MinimumChartSize: 4
-  m_AutoUVMaxDistance: 0.5
-  m_AutoUVMaxAngle: 89
-  m_LightmapParameters: {fileID: 0}
-  m_SortingLayerID: 0
-  m_SortingLayer: 0
-  m_SortingOrder: 0
--- !u!33 &1801506827
-MeshFilter:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1801506823}
-  m_Mesh: {fileID: 0}
--- !u!4 &1801506828
-Transform:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1801506823}
-  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
-  m_LocalPosition: {x: 0, y: 0, z: 0}
-  m_LocalScale: {x: 1, y: 1, z: 1}
-  m_Children: []
-  m_Father: {fileID: 0}
-  m_RootOrder: 1
-  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- !u!114 &1801506829
-MonoBehaviour:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1801506823}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: 782062825deffd64ba7e7e9f978788e5, type: 3}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  walkButton: 304
-  jumpButton: 32
-  horizontalSpeedProperty: Speed
-  verticalSpeedProperty: VerticalSpeed
-  groundedProperty: Grounded
-  jumpDuration: 0.8
-  speed: {x: 0, y: 0}
-  isGrounded: 1
--- !u!1 &1959713007
-GameObject:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  serializedVersion: 5
-  m_Component:
-  - component: {fileID: 1959713012}
-  - component: {fileID: 1959713011}
-  - component: {fileID: 1959713010}
-  - component: {fileID: 1959713009}
-  - component: {fileID: 1959713008}
-  m_Layer: 0
-  m_Name: Main Camera
-  m_TagString: MainCamera
-  m_Icon: {fileID: 0}
-  m_NavMeshLayer: 0
-  m_StaticEditorFlags: 0
-  m_IsActive: 1
--- !u!81 &1959713008
-AudioListener:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1959713007}
-  m_Enabled: 1
--- !u!124 &1959713009
-Behaviour:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1959713007}
-  m_Enabled: 1
--- !u!92 &1959713010
-Behaviour:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1959713007}
-  m_Enabled: 1
--- !u!20 &1959713011
-Camera:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1959713007}
-  m_Enabled: 1
-  serializedVersion: 2
-  m_ClearFlags: 1
-  m_BackGroundColor: {r: 0.19215687, g: 0.3019608, b: 0.4745098, a: 0}
-  m_NormalizedViewPortRect:
-    serializedVersion: 2
-    x: 0
-    y: 0
-    width: 1
-    height: 1
-  near clip plane: 0.3
-  far clip plane: 1000
-  field of view: 60
-  orthographic: 1
-  orthographic size: 5
-  m_Depth: -1
-  m_CullingMask:
-    serializedVersion: 2
-    m_Bits: 4294967295
-  m_RenderingPath: -1
-  m_TargetTexture: {fileID: 0}
-  m_TargetDisplay: 0
-  m_TargetEye: 3
-  m_HDR: 1
-  m_AllowMSAA: 1
-  m_ForceIntoRT: 0
-  m_OcclusionCulling: 1
-  m_StereoConvergence: 10
-  m_StereoSeparation: 0.022
-  m_StereoMirrorMode: 0
--- !u!4 &1959713012
-Transform:
-  m_ObjectHideFlags: 0
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 1959713007}
-  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
-  m_LocalPosition: {x: 0, y: 0, z: -10}
-  m_LocalScale: {x: 1, y: 1, z: 1}
-  m_Children: []
-  m_Father: {fileID: 0}
-  m_RootOrder: 0
-  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- a/SkeletonAnimation/Hero.controller
+++ b/SkeletonAnimation/Hero.controller
@ -5,7 +5,7 @@ AnimatorController:
  m_ObjectHideFlags: 0
  m_PrefabParentObject: {fileID: 0}
  m_PrefabInternal: {fileID: 0}
-  m_Name: Hero
+  m_Name: Hero Logic StateMachine
  serializedVersion: 5
  m_AnimatorParameters:
  - m_Name: Speed
@ -39,7 +39,7 @@ AnimatorController:
    m_IKPass: 0
    m_SyncedLayerAffectsTiming: 0
    m_Controller: {fileID: 9100000}
--- !u!114 &114120869086152502
+--- !u!114 &114611893236435034
 MonoBehaviour:
  m_ObjectHideFlags: 1
  m_PrefabParentObject: {fileID: 0}
@ -47,71 +47,9 @@ MonoBehaviour:
  m_GameObject: {fileID: 0}
  m_Enabled: 1
  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: 536bdde8dc7bbb641b17da9221d6562f, type: 3}
+  m_Script: {fileID: 11500000, guid: 16f3a0143bc0dbc4793717b6d2ff94a2, type: 3}
  m_Name: 
  m_EditorClassIdentifier: 
-  animation: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
-  fromTransitions: []
--- !u!114 &114405704584849640
-MonoBehaviour:
-  m_ObjectHideFlags: 3
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 0}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: 536bdde8dc7bbb641b17da9221d6562f, type: 3}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  animation: {fileID: 11400000, guid: cc83238c61de380499565292bef7ada4, type: 2}
-  fromTransitions:
-  - from: {fileID: 11400000, guid: 9fc9ad17b39175242a17dedc100251e5, type: 2}
-    transition: {fileID: 11400000, guid: fcca5e996ae24ba43baaaadef1fb6ad9, type: 2}
-  - from: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
-    transition: {fileID: 11400000, guid: fcca5e996ae24ba43baaaadef1fb6ad9, type: 2}
--- !u!114 &114705841842784304
-MonoBehaviour:
-  m_ObjectHideFlags: 1
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 0}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: 536bdde8dc7bbb641b17da9221d6562f, type: 3}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  animation: {fileID: 11400000, guid: 8e32f0310bb5c02488c5c002dd41e7cb, type: 2}
-  fromTransitions:
-  - from: {fileID: 11400000, guid: 9fc9ad17b39175242a17dedc100251e5, type: 2}
-    transition: {fileID: 11400000, guid: 714e39dce7285c145bdf142c38ef9a9b, type: 2}
-  - from: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
-    transition: {fileID: 11400000, guid: 714e39dce7285c145bdf142c38ef9a9b, type: 2}
--- !u!114 &114724632308633334
-MonoBehaviour:
-  m_ObjectHideFlags: 3
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 0}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: 536bdde8dc7bbb641b17da9221d6562f, type: 3}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  animation: {fileID: 11400000, guid: 096b05b71bb32cb409c1c8fd233b7ac3, type: 2}
-  fromTransitions: []
--- !u!114 &114920507004961638
-MonoBehaviour:
-  m_ObjectHideFlags: 3
-  m_PrefabParentObject: {fileID: 0}
-  m_PrefabInternal: {fileID: 0}
-  m_GameObject: {fileID: 0}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 11500000, guid: 536bdde8dc7bbb641b17da9221d6562f, type: 3}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  animation: {fileID: 11400000, guid: 9fc9ad17b39175242a17dedc100251e5, type: 2}
-  fromTransitions: []
 --- !u!114 &114924159685657998
 MonoBehaviour:
  m_ObjectHideFlags: 1
@ -546,8 +484,7 @@ AnimatorState:
  m_Transitions:
  - {fileID: 1101201216029417820}
  - {fileID: 1101340356729470006}
-  m_StateMachineBehaviours:
-  - {fileID: 114705841842784304}
+  m_StateMachineBehaviours: []
  m_Position: {x: 50, y: 50, z: 0}
  m_IKOnFeet: 0
  m_WriteDefaultValues: 1
@ -573,8 +510,7 @@ AnimatorState:
  - {fileID: 1101630671207954956}
  - {fileID: 1101961669674605828}
  - {fileID: 1101908416750231440}
-  m_StateMachineBehaviours:
-  - {fileID: 114724632308633334}
+  m_StateMachineBehaviours: []
  m_Position: {x: 50, y: 50, z: 0}
  m_IKOnFeet: 0
  m_WriteDefaultValues: 1
@ -600,8 +536,7 @@ AnimatorState:
  - {fileID: 1101441186354543552}
  - {fileID: 1101479631958084084}
  - {fileID: 1101080999605414308}
-  m_StateMachineBehaviours:
-  - {fileID: 114920507004961638}
+  m_StateMachineBehaviours: []
  m_Position: {x: 50, y: 50, z: 0}
  m_IKOnFeet: 0
  m_WriteDefaultValues: 1
@ -626,8 +561,7 @@ AnimatorState:
  m_Transitions:
  - {fileID: 1101191797102245804}
  - {fileID: 1101149887938196740}
-  m_StateMachineBehaviours:
-  - {fileID: 114405704584849640}
+  m_StateMachineBehaviours: []
  m_Position: {x: 50, y: 50, z: 0}
  m_IKOnFeet: 0
  m_WriteDefaultValues: 1
@ -652,8 +586,7 @@ AnimatorState:
  m_Transitions:
  - {fileID: 1101246723209160918}
  - {fileID: 1101284229063918858}
-  m_StateMachineBehaviours:
-  - {fileID: 114120869086152502}
+  m_StateMachineBehaviours: []
  m_Position: {x: 50, y: 50, z: 0}
  m_IKOnFeet: 0
  m_WriteDefaultValues: 1
@ -693,7 +626,8 @@ AnimatorStateMachine:
  m_AnyStateTransitions: []
  m_EntryTransitions: []
  m_StateMachineTransitions: {}
-  m_StateMachineBehaviours: []
+  m_StateMachineBehaviours:
+  - {fileID: 114611893236435034}
  m_AnyStatePosition: {x: -72, y: 84, z: 0}
  m_EntryPosition: {x: -72, y: 132, z: 0}
  m_ExitPosition: {x: 888, y: 84, z: 0}
--- a/SkeletonAnimation/Hero.controller.meta
+++ b/SkeletonAnimation/Hero.controller.meta
--- a/SkeletonAnimation/Mecanim
+++ b/SkeletonAnimation/Mecanim
@ -0,0 +1,701 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 8
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.212, g: 0.227, b: 0.259, a: 1}
+  m_AmbientEquatorColor: {r: 0.114, g: 0.125, b: 0.133, a: 1}
+  m_AmbientGroundColor: {r: 0.047, g: 0.043, b: 0.035, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_IndirectSpecularColor: {r: 0, g: 0, b: 0, a: 1}
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 9
+  m_GIWorkflowMode: 1
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_TemporalCoherenceThreshold: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 0
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 8
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_TextureWidth: 1024
+    m_TextureHeight: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_FinalGather: 0
+    m_FinalGatherFiltering: 1
+    m_FinalGatherRayCount: 256
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 3
+    m_BakeBackend: 0
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 500
+    m_PVRBounces: 2
+    m_PVRFiltering: 0
+    m_PVRFilteringMode: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 5
+    m_PVRFilteringGaussRadiusAO: 2
+    m_PVRFilteringAtrousColorSigma: 1
+    m_PVRFilteringAtrousNormalSigma: 1
+    m_PVRFilteringAtrousPositionSigma: 1
+  m_LightingDataAsset: {fileID: 0}
+  m_ShadowMaskMode: 2
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 2
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    accuratePlacement: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &54157323
+GameObject:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  serializedVersion: 5
+  m_Component:
+  - component: {fileID: 54157327}
+  - component: {fileID: 54157326}
+  - component: {fileID: 54157325}
+  - component: {fileID: 54157324}
+  m_Layer: 5
+  m_Name: Canvas
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &54157324
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 54157323}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 1301386320, guid: f70555f144d8491a825f0804e09c671c, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_IgnoreReversedGraphics: 1
+  m_BlockingObjects: 0
+  m_BlockingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+--- !u!114 &54157325
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 54157323}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 1980459831, guid: f70555f144d8491a825f0804e09c671c, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_UiScaleMode: 0
+  m_ReferencePixelsPerUnit: 100
+  m_ScaleFactor: 1
+  m_ReferenceResolution: {x: 800, y: 600}
+  m_ScreenMatchMode: 0
+  m_MatchWidthOrHeight: 0
+  m_PhysicalUnit: 3
+  m_FallbackScreenDPI: 96
+  m_DefaultSpriteDPI: 96
+  m_DynamicPixelsPerUnit: 1
+--- !u!223 &54157326
+Canvas:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 54157323}
+  m_Enabled: 1
+  serializedVersion: 3
+  m_RenderMode: 0
+  m_Camera: {fileID: 0}
+  m_PlaneDistance: 100
+  m_PixelPerfect: 0
+  m_ReceivesEvents: 1
+  m_OverrideSorting: 0
+  m_OverridePixelPerfect: 0
+  m_SortingBucketNormalizedSize: 0
+  m_AdditionalShaderChannelsFlag: 0
+  m_SortingLayerID: 0
+  m_SortingOrder: 0
+  m_TargetDisplay: 0
+--- !u!224 &54157327
+RectTransform:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 54157323}
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 0, y: 0, z: 0}
+  m_Children:
+  - {fileID: 220954932}
+  m_Father: {fileID: 0}
+  m_RootOrder: 2
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+  m_AnchorMin: {x: 0, y: 0}
+  m_AnchorMax: {x: 0, y: 0}
+  m_AnchoredPosition: {x: 0, y: 0}
+  m_SizeDelta: {x: 0, y: 0}
+  m_Pivot: {x: 0, y: 0}
+--- !u!1 &220954931
+GameObject:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  serializedVersion: 5
+  m_Component:
+  - component: {fileID: 220954932}
+  - component: {fileID: 220954934}
+  - component: {fileID: 220954933}
+  m_Layer: 5
+  m_Name: Text
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!224 &220954932
+RectTransform:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 220954931}
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 54157327}
+  m_RootOrder: 0
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+  m_AnchorMin: {x: 0.5, y: 0.5}
+  m_AnchorMax: {x: 0.5, y: 0.5}
+  m_AnchoredPosition: {x: -0.000024796, y: -263}
+  m_SizeDelta: {x: 643, y: 183}
+  m_Pivot: {x: 0.5, y: 0.5}
+--- !u!114 &220954933
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 220954931}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 708705254, guid: f70555f144d8491a825f0804e09c671c, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_Material: {fileID: 0}
+  m_Color: {r: 1, g: 1, b: 1, a: 1}
+  m_RaycastTarget: 1
+  m_OnCullStateChanged:
+    m_PersistentCalls:
+      m_Calls: []
+    m_TypeName: UnityEngine.UI.MaskableGraphic+CullStateChangedEvent, UnityEngine.UI,
+      Version=1.0.0.0, Culture=neutral, PublicKeyToken=null
+  m_FontData:
+    m_Font: {fileID: 10102, guid: 0000000000000000e000000000000000, type: 0}
+    m_FontSize: 21
+    m_FontStyle: 0
+    m_BestFit: 0
+    m_MinSize: 2
+    m_MaxSize: 40
+    m_Alignment: 0
+    m_AlignByGeometry: 0
+    m_RichText: 1
+    m_HorizontalOverflow: 0
+    m_VerticalOverflow: 0
+    m_LineSpacing: 1
+  m_Text: An example of Mecanim-driven character logic that commands SkeletonAnimation.
+    One script handles communicating with SkeletonAnimation (and handling transitions
+    and other animation logic), a StateMachineBehaviour sends information to that
+    script to let it know what character game state is active.
+--- !u!222 &220954934
+CanvasRenderer:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 220954931}
+--- !u!1 &391192147
+GameObject:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  serializedVersion: 5
+  m_Component:
+  - component: {fileID: 391192151}
+  - component: {fileID: 391192150}
+  - component: {fileID: 391192149}
+  - component: {fileID: 391192148}
+  - component: {fileID: 391192152}
+  m_Layer: 0
+  m_Name: Spine GameObject (hero-pro)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &391192148
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 391192147}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: d247ba06193faa74d9335f5481b2b56c, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  skeletonDataAsset: {fileID: 11400000, guid: 2f899e95232e6144786de8fb99678a8d, type: 2}
+  initialSkinName: 
+  initialFlipX: 0
+  initialFlipY: 0
+  separatorSlotNames: []
+  zSpacing: 0
+  useClipping: 1
+  immutableTriangles: 0
+  pmaVertexColors: 1
+  clearStateOnDisable: 0
+  tintBlack: 0
+  singleSubmesh: 0
+  addNormals: 0
+  calculateTangents: 0
+  disableRenderingOnOverride: 1
+  _animationName: 
+  loop: 1
+  timeScale: 1
+--- !u!23 &391192149
+MeshRenderer:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 391192147}
+  m_Enabled: 1
+  m_CastShadows: 1
+  m_ReceiveShadows: 1
+  m_MotionVectors: 1
+  m_LightProbeUsage: 1
+  m_ReflectionProbeUsage: 1
+  m_Materials:
+  - {fileID: 2100000, guid: 9aa2023c2c91b254f9cb0a4fba19af00, type: 2}
+  m_StaticBatchInfo:
+    firstSubMesh: 0
+    subMeshCount: 0
+  m_StaticBatchRoot: {fileID: 0}
+  m_ProbeAnchor: {fileID: 0}
+  m_LightProbeVolumeOverride: {fileID: 0}
+  m_ScaleInLightmap: 1
+  m_PreserveUVs: 0
+  m_IgnoreNormalsForChartDetection: 0
+  m_ImportantGI: 0
+  m_SelectedEditorRenderState: 3
+  m_MinimumChartSize: 4
+  m_AutoUVMaxDistance: 0.5
+  m_AutoUVMaxAngle: 89
+  m_LightmapParameters: {fileID: 0}
+  m_SortingLayerID: 0
+  m_SortingLayer: 0
+  m_SortingOrder: 0
+--- !u!33 &391192150
+MeshFilter:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 391192147}
+  m_Mesh: {fileID: 0}
+--- !u!4 &391192151
+Transform:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 391192147}
+  m_LocalRotation: {x: -0, y: -0, z: -0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 939164933}
+  m_RootOrder: 0
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!114 &391192152
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 391192147}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 1d55a3bd6ac81af44b2f9a4447f2ae72, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  skeletonAnimation: {fileID: 391192148}
+  eventName: footstep
+  audioSource: {fileID: 913482839}
+  audioClip: {fileID: 8300000, guid: e885484e1bc99fb47a0ac3f6bfa586b1, type: 3}
+  basePitch: 1
+  randomPitchOffset: 0.1
+  logDebugMessage: 0
+--- !u!1 &913482838
+GameObject:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  serializedVersion: 5
+  m_Component:
+  - component: {fileID: 913482840}
+  - component: {fileID: 913482839}
+  m_Layer: 0
+  m_Name: Audio Source
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!82 &913482839
+AudioSource:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 913482838}
+  m_Enabled: 1
+  serializedVersion: 4
+  OutputAudioMixerGroup: {fileID: 0}
+  m_audioClip: {fileID: 0}
+  m_PlayOnAwake: 1
+  m_Volume: 0.297
+  m_Pitch: 1
+  Loop: 0
+  Mute: 0
+  Spatialize: 0
+  SpatializePostEffects: 0
+  Priority: 128
+  DopplerLevel: 1
+  MinDistance: 1
+  MaxDistance: 500
+  Pan2D: 0
+  rolloffMode: 0
+  BypassEffects: 0
+  BypassListenerEffects: 0
+  BypassReverbZones: 0
+  rolloffCustomCurve:
+    serializedVersion: 2
+    m_Curve:
+    - serializedVersion: 2
+      time: 0
+      value: 1
+      inSlope: 0
+      outSlope: 0
+      tangentMode: 0
+    - serializedVersion: 2
+      time: 1
+      value: 0
+      inSlope: 0
+      outSlope: 0
+      tangentMode: 0
+    m_PreInfinity: 2
+    m_PostInfinity: 2
+    m_RotationOrder: 4
+  panLevelCustomCurve:
+    serializedVersion: 2
+    m_Curve:
+    - serializedVersion: 2
+      time: 0
+      value: 0
+      inSlope: 0
+      outSlope: 0
+      tangentMode: 0
+    m_PreInfinity: 2
+    m_PostInfinity: 2
+    m_RotationOrder: 0
+  spreadCustomCurve:
+    serializedVersion: 2
+    m_Curve:
+    - serializedVersion: 2
+      time: 0
+      value: 0
+      inSlope: 0
+      outSlope: 0
+      tangentMode: 0
+    m_PreInfinity: 2
+    m_PostInfinity: 2
+    m_RotationOrder: 4
+  reverbZoneMixCustomCurve:
+    serializedVersion: 2
+    m_Curve:
+    - serializedVersion: 2
+      time: 0
+      value: 1
+      inSlope: 0
+      outSlope: 0
+      tangentMode: 0
+    m_PreInfinity: 2
+    m_PostInfinity: 2
+    m_RotationOrder: 0
+--- !u!4 &913482840
+Transform:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 913482838}
+  m_LocalRotation: {x: -0, y: -0, z: -0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 939164933}
+  m_RootOrder: 1
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &939164930
+GameObject:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  serializedVersion: 5
+  m_Component:
+  - component: {fileID: 939164933}
+  - component: {fileID: 939164932}
+  - component: {fileID: 939164931}
+  - component: {fileID: 939164934}
+  m_Layer: 0
+  m_Name: Hero
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &939164931
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 939164930}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 782062825deffd64ba7e7e9f978788e5, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  logicAnimator: {fileID: 939164932}
+  animationHandle: {fileID: 939164934}
+  walkButton: 304
+  jumpButton: 32
+  horizontalSpeedProperty: Speed
+  verticalSpeedProperty: VerticalSpeed
+  groundedProperty: Grounded
+  jumpDuration: 1.5
+  speed: {x: 0, y: 0}
+  isGrounded: 0
+--- !u!95 &939164932
+Animator:
+  serializedVersion: 3
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 939164930}
+  m_Enabled: 1
+  m_Avatar: {fileID: 0}
+  m_Controller: {fileID: 9100000, guid: cec34498f2eb26b488452ec274c54439, type: 2}
+  m_CullingMode: 0
+  m_UpdateMode: 0
+  m_ApplyRootMotion: 0
+  m_LinearVelocityBlending: 0
+  m_WarningMessage: 
+  m_HasTransformHierarchy: 1
+  m_AllowConstantClipSamplingOptimization: 1
+--- !u!4 &939164933
+Transform:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 939164930}
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: -0.03, y: -0.96, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children:
+  - {fileID: 391192151}
+  - {fileID: 913482840}
+  m_Father: {fileID: 0}
+  m_RootOrder: 1
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!114 &939164934
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 939164930}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: dd8d49de34fd0724ca8c1ae3c44afe59, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  skeletonAnimation: {fileID: 391192148}
+  statesAndAnimations:
+  - stateName: Idle
+    animation: {fileID: 11400000, guid: 8e32f0310bb5c02488c5c002dd41e7cb, type: 2}
+  - stateName: Walk
+    animation: {fileID: 11400000, guid: 096b05b71bb32cb409c1c8fd233b7ac3, type: 2}
+  - stateName: Run
+    animation: {fileID: 11400000, guid: cc83238c61de380499565292bef7ada4, type: 2}
+  - stateName: Jump
+    animation: {fileID: 11400000, guid: 9fc9ad17b39175242a17dedc100251e5, type: 2}
+  - stateName: Fall
+    animation: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
+  transitions:
+  - from: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
+    to: {fileID: 11400000, guid: cc83238c61de380499565292bef7ada4, type: 2}
+    transition: {fileID: 11400000, guid: fcca5e996ae24ba43baaaadef1fb6ad9, type: 2}
+  - from: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
+    to: {fileID: 11400000, guid: 8e32f0310bb5c02488c5c002dd41e7cb, type: 2}
+    transition: {fileID: 11400000, guid: 714e39dce7285c145bdf142c38ef9a9b, type: 2}
+  - from: {fileID: 11400000, guid: 29c1381a00cfb2c4d996f2a02fcc4506, type: 2}
+    to: {fileID: 11400000, guid: 25961ff211f6f3947be85f8aab3f2630, type: 2}
+    transition: {fileID: 11400000, guid: 6c587772a6f7df94b934b353291c008c, type: 2}
+--- !u!1 &1042501228
+GameObject:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  serializedVersion: 5
+  m_Component:
+  - component: {fileID: 1042501233}
+  - component: {fileID: 1042501232}
+  - component: {fileID: 1042501231}
+  - component: {fileID: 1042501230}
+  - component: {fileID: 1042501229}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!81 &1042501229
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 1042501228}
+  m_Enabled: 1
+--- !u!124 &1042501230
+Behaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 1042501228}
+  m_Enabled: 1
+--- !u!92 &1042501231
+Behaviour:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 1042501228}
+  m_Enabled: 1
+--- !u!20 &1042501232
+Camera:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 1042501228}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 1
+  m_BackGroundColor: {r: 0.19215687, g: 0.3019608, b: 0.4745098, a: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+  m_StereoMirrorMode: 0
+--- !u!4 &1042501233
+Transform:
+  m_ObjectHideFlags: 0
+  m_PrefabParentObject: {fileID: 0}
+  m_PrefabInternal: {fileID: 0}
+  m_GameObject: {fileID: 1042501228}
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_RootOrder: 0
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- a/SkeletonAnimation/AnimationState
+++ b/SkeletonAnimation/AnimationState
@ -1,6 +1,6 @@
 fileFormatVersion: 2
-guid: afd3c9ec31200bc49b169c22f00b010b
-timeCreated: 1531300871
+guid: 1fba3cdaf99163b4cb14533eb6bd9b2a
+timeCreated: 1545228667
 licenseType: Free
 DefaultImporter:
  userData: 
--- a/Examples/Scripts/AnimationStateMecanimState.cs
+++ b/Examples/Scripts/AnimationStateMecanimState.cs
@ -1,62 +0,0 @@
-using System.Collections;
-using System.Collections.Generic;
-using UnityEngine;
-
-using Spine;
-using Spine.Unity;
-
-public class AnimationStateMecanimState : StateMachineBehaviour {
-
-	#region Inspector
-	public AnimationReferenceAsset animation;
-
-	[System.Serializable]
-	public struct AnimationTransition {
-		public AnimationReferenceAsset from;
-		public AnimationReferenceAsset transition;
-	}
-
-	[UnityEngine.Serialization.FormerlySerializedAs("transitions")]
-	public List<AnimationTransition> fromTransitions = new List<AnimationTransition>();
-	#endregion
-
-	Spine.AnimationState state;
-
-	public void Initialize (Animator animator) {
-		if (state == null) {
-			var animationStateComponent = (animator.GetComponent(typeof(IAnimationStateComponent))) as IAnimationStateComponent;
-			state = animationStateComponent.AnimationState;
-		}
-	}
-
-	override public void OnStateEnter (Animator animator, AnimatorStateInfo stateInfo, int layerIndex) {
-		if (state == null) {
-			Initialize(animator);
-		}
-		
-		float timeScale = stateInfo.speed;
-		var current = state.GetCurrent(layerIndex);
-
-		bool transitionPlayed = false;
-		if (current != null && fromTransitions.Count > 0) {
-			foreach (var t in fromTransitions) {
-				if (t.from.Animation == current.Animation) {
-					var transitionEntry = state.SetAnimation(layerIndex, t.transition.Animation, false);
-					transitionEntry.TimeScale = timeScale;
-					transitionPlayed = true;
-					break;
-				}
-			}
-		}
-
-		TrackEntry trackEntry;
-		if (transitionPlayed) {
-			trackEntry = state.AddAnimation(layerIndex, animation.Animation, stateInfo.loop, 0);
-		} else {
-			trackEntry = state.SetAnimation(layerIndex, animation.Animation, stateInfo.loop);
-		}
-		trackEntry.TimeScale = timeScale;
-
-	}
-
-}
--- a/Examples/Scripts/Mecanim
+++ b/Examples/Scripts/Mecanim
@ -0,0 +1,9 @@
+fileFormatVersion: 2
+guid: deef60f3c6fd9ae45b2c4dfcac0706f1
+folderAsset: yes
+timeCreated: 1545227769
+licenseType: Free
+DefaultImporter:
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
--- a/Examples/Scripts/AnimationStateWithMecanimExample.cs
+++ b/Examples/Scripts/AnimationStateWithMecanimExample.cs
@ -2,14 +2,11 @@
 using System.Collections.Generic;
 using UnityEngine;

-using Spine;
-using Spine.Unity;
-
 namespace Spine.Unity.Examples {
-	public class AnimationStateWithMecanimExample : MonoBehaviour {
+	public class DummyMecanimControllerExample : MonoBehaviour {

-		SkeletonAnimation skeletonAnimation;
-		Animator logicAnimator;
+		public Animator logicAnimator;
+		public SkeletonAnimationHandleExample animationHandle; 
 		
 		[Header("Controls")]
 		public KeyCode walkButton = KeyCode.LeftShift;
@ -26,9 +23,6 @@ namespace Spine.Unity.Examples {
 		public bool isGrounded;

 		void Awake () {
-			skeletonAnimation = GetComponent<SkeletonAnimation>();
-			logicAnimator = GetComponent<Animator>();
-
 			isGrounded = true;
 		}

@ -42,7 +36,7 @@ namespace Spine.Unity.Examples {

 			// Flip skeleton.
 			if (x != 0) {
-				skeletonAnimation.Skeleton.ScaleX = x > 0 ? 1f : -1f;
+				animationHandle.SetFlip(x);
 			}

 			if (Input.GetKeyDown(jumpButton)) {
@ -53,7 +47,6 @@ namespace Spine.Unity.Examples {
 			logicAnimator.SetFloat(horizontalSpeedProperty, Mathf.Abs(speed.x));
 			logicAnimator.SetFloat(verticalSpeedProperty, speed.y);
 			logicAnimator.SetBool(groundedProperty, isGrounded);
-			
 		}

 		IEnumerator FakeJump () {
--- a/Examples/Scripts/AnimationStateWithMecanimExample.cs.meta
+++ b/Examples/Scripts/AnimationStateWithMecanimExample.cs.meta
--- a/Logic/MecanimToAnimationHandleExample.cs
+++ b/Logic/MecanimToAnimationHandleExample.cs
@ -0,0 +1,22 @@
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+
+namespace Spine.Unity.Examples {
+	
+	// This StateMachineBehaviour handles sending the Mecanim state information to the component that handles playing the Spine animations.
+	public class MecanimToAnimationHandleExample : StateMachineBehaviour {
+		SkeletonAnimationHandleExample animationHandle;
+		bool initialized;
+
+		override public void OnStateEnter (Animator animator, AnimatorStateInfo stateInfo, int layerIndex) {
+			if (!initialized) {
+				animationHandle = animator.GetComponent<SkeletonAnimationHandleExample>();
+				initialized = true;
+			}
+
+			animationHandle.PlayAnimationForState(stateInfo.shortNameHash, layerIndex);
+		}
+	}
+
+}
--- a/Examples/Scripts/AnimationStateMecanimState.cs.meta
+++ b/Examples/Scripts/AnimationStateMecanimState.cs.meta
@ -1,6 +1,6 @@
 fileFormatVersion: 2
-guid: 536bdde8dc7bbb641b17da9221d6562f
-timeCreated: 1531293563
+guid: 16f3a0143bc0dbc4793717b6d2ff94a2
+timeCreated: 1545230670
 licenseType: Free
 MonoImporter:
  serializedVersion: 2
--- a/Logic/SkeletonAnimationHandleExample.cs
+++ b/Logic/SkeletonAnimationHandleExample.cs
@ -0,0 +1,77 @@
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+
+
+namespace Spine.Unity.Examples {
+	public class SkeletonAnimationHandleExample : MonoBehaviour {
+
+		public SkeletonAnimation skeletonAnimation;
+		public List<StateNameToAnimationReference> statesAndAnimations = new List<StateNameToAnimationReference>();
+		public List<AnimationTransition> transitions = new List<AnimationTransition>();
+
+		[System.Serializable]
+		public class StateNameToAnimationReference {
+			public string stateName;
+			public AnimationReferenceAsset animation;
+		}
+
+		[System.Serializable]
+		public struct AnimationTransition {
+			public AnimationReferenceAsset from;
+			public AnimationReferenceAsset to;
+			public AnimationReferenceAsset transition;
+		}
+
+		readonly Dictionary<Spine.AnimationStateData.AnimationPair, Spine.Animation> transitionDictionary = new Dictionary<AnimationStateData.AnimationPair, Animation>(Spine.AnimationStateData.AnimationPairComparer.Instance);
+
+		void Awake () {
+			foreach (var entry in transitions) {
+				// If uninitialized
+				entry.from.Initialize();
+				entry.to.Initialize();
+				entry.transition.Initialize();
+
+				transitionDictionary.Add(new AnimationStateData.AnimationPair(entry.from.Animation, entry.to.Animation), entry.transition.Animation);
+			}
+		}
+
+		public void SetFlip (float horizontal) {
+			if (horizontal != 0) {
+				skeletonAnimation.Skeleton.ScaleX = horizontal > 0 ? 1f : -1f;
+			}
+		}
+
+		public void PlayAnimationForState (int shortNameHash, int layerIndex) {
+			var foundAnimation = GetAnimationForState(shortNameHash);
+			if (foundAnimation == null)
+				return;
+
+			PlayNewAnimation(foundAnimation, layerIndex);
+		}
+
+		public Spine.Animation GetAnimationForState (int shortNameHash) {
+			var foundState = statesAndAnimations.Find(entry => Animator.StringToHash(entry.stateName) == shortNameHash);
+			return (foundState == null) ? null : foundState.animation;
+		}
+
+		void PlayNewAnimation (Spine.Animation target, int layerIndex) {
+			Spine.Animation transition = null;
+			Spine.Animation current = null;
+
+			var currentTrackEntry = skeletonAnimation.AnimationState.GetCurrent(layerIndex);
+			if (currentTrackEntry != null) {
+				current = currentTrackEntry.Animation;
+				if (current != null)
+					transitionDictionary.TryGetValue(new AnimationStateData.AnimationPair(current, target), out transition);
+			}
+
+			if (transition != null) {
+				skeletonAnimation.AnimationState.SetAnimation(layerIndex, transition, false);
+				skeletonAnimation.AnimationState.AddAnimation(layerIndex, target, true, 0f);
+			} else {
+				skeletonAnimation.AnimationState.SetAnimation(layerIndex, target, true);
+			}
+		}
+	}
+}
--- a/Logic/SkeletonAnimationHandleExample.cs.meta
+++ b/Logic/SkeletonAnimationHandleExample.cs.meta
@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: dd8d49de34fd0724ca8c1ae3c44afe59
+timeCreated: 1545230473
+licenseType: Free
+MonoImporter:
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
--- a/Components/SkeletonAnimationFixedTimestep.cs
+++ b/Components/SkeletonAnimationFixedTimestep.cs
@ -1,4 +1,4 @@
-/******************************************************************************
+/******************************************************************************
 * Spine Runtimes Software License v2.5
 *
 * Copyright (c) 2013-2016, Esoteric Software
--- a/Examples/Scripts/SpineboyFootplanter.cs
+++ b/Examples/Scripts/SpineboyFootplanter.cs
@ -1,4 +1,4 @@
-using System.Collections;
+using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;

--- a/Skeletons/spineboy-pro/spineboy-pro_Material.mat
+++ b/Skeletons/spineboy-pro/spineboy-pro_Material.mat
@ -7,7 +7,7 @@ Material:
  m_PrefabParentObject: {fileID: 0}
  m_PrefabInternal: {fileID: 0}
  m_Name: spineboy-pro_Material
-  m_Shader: {fileID: 4800000, guid: 1e8a610c9e01c3648bac42585e5fc676, type: 3}
+  m_Shader: {fileID: 4800000, guid: 45495790b394f894a967dbf44489b57b, type: 3}
  m_ShaderKeywords: 
  m_LightmapFlags: 4
  m_EnableInstancingVariants: 0
@ -24,5 +24,9 @@ Material:
        m_Offset: {x: 0, y: 0}
    m_Floats:
    - _Cutoff: 0.1
+    - _FillPhase: 0
    - _StraightAlphaInput: 0
-    m_Colors: []
+    m_Colors:
+    - _Black: {r: 0, g: 0, b: 0, a: 0}
+    - _Color: {r: 1, g: 1, b: 1, a: 1}
+    - _FillColor: {r: 1, g: 1, b: 1, a: 1}
--- a/spine-unity/Assets/Spine/Runtime/spine-unity/Mesh
+++ b/spine-unity/Assets/Spine/Runtime/spine-unity/Mesh
@ -979,13 +979,13 @@ namespace Spine.Unity {
 			var vbi = vertexBuffer.Items;
 			var ubi = uvBuffer.Items;
 			var cbi = colorBuffer.Items;
+			int vbiLength = vbi.Length;

 			// Zero the extra.
 			{
 				int listCount = vertexBuffer.Count;
-				int arrayLength = vertexBuffer.Items.Length;
 				var vector3zero = Vector3.zero;
-				for (int i = listCount; i < arrayLength; i++)
+				for (int i = listCount; i < vbiLength; i++)
 					vbi[i] = vector3zero;
 			}

@ -1028,6 +1028,12 @@ namespace Spine.Unity {

 				if (settings.tintBlack) {
 					if (uv2 != null) {
+						// Sometimes, the vertex buffer becomes smaller. We need to trim the size of the tint black buffers to match.
+						if (vbiLength > uv2.Items.Length) {
+							Array.Resize(ref uv2.Items, vbiLength);
+							Array.Resize(ref uv3.Items, vbiLength);
+							uv2.Count = uv3.Count = vbiLength;
+						}
 						mesh.uv2 = this.uv2.Items;
 						mesh.uv3 = this.uv3.Items;
 					}