Эх сурвалжийг харах

[ts] Final touches to samples, removed underscore from private fields

badlogic 9 жил өмнө
parent
commit
28b97e4532
33 өөрчлөгдсөн 4174 нэмэгдсэн , 1461 устгасан
  1. 77 76
      spine-ts/build/spine-all.d.ts
  2. 323 288
      spine-ts/build/spine-all.js
  3. 0 0
      spine-ts/build/spine-all.js.map
  4. 13 13
      spine-ts/build/spine-core.d.ts
  5. 47 47
      spine-ts/build/spine-core.js
  6. 0 0
      spine-ts/build/spine-core.js.map
  7. 18 18
      spine-ts/build/spine-threejs.d.ts
  8. 65 65
      spine-ts/build/spine-threejs.js
  9. 0 0
      spine-ts/build/spine-threejs.js.map
  10. 55 55
      spine-ts/build/spine-webgl.d.ts
  11. 218 218
      spine-ts/build/spine-webgl.js
  12. 0 0
      spine-ts/build/spine-webgl.js.map
  13. 70 69
      spine-ts/build/spine-widget.d.ts
  14. 301 269
      spine-ts/build/spine-widget.js
  15. 0 0
      spine-ts/build/spine-widget.js.map
  16. 5 5
      spine-ts/canvas/src/SkeletonRenderer.ts
  17. 33 33
      spine-ts/core/src/AssetManager.ts
  18. 2 2
      spine-ts/core/src/SkeletonBounds.ts
  19. 7 7
      spine-ts/core/src/Utils.ts
  20. 4 4
      spine-ts/core/src/attachments/MeshAttachment.ts
  21. 22 22
      spine-ts/threejs/src/MeshBatcher.ts
  22. 4 4
      spine-ts/threejs/src/SkeletonMesh.ts
  23. 1 2
      spine-ts/webgl/example/index.html
  24. 15 15
      spine-ts/webgl/src/GLTexture.ts
  25. 68 68
      spine-ts/webgl/src/Mesh.ts
  26. 51 51
      spine-ts/webgl/src/PolygonBatcher.ts
  27. 50 50
      spine-ts/webgl/src/Shader.ts
  28. 3 3
      spine-ts/webgl/src/SkeletonRenderer.ts
  29. 195 0
      spine-ts/widget/example/assets/spineboy.atlas
  30. 2412 0
      spine-ts/widget/example/assets/spineboy.json
  31. BIN
      spine-ts/widget/example/assets/spineboy.png
  32. 20 18
      spine-ts/widget/example/index.html
  33. 95 59
      spine-ts/widget/src/Widget.ts

+ 77 - 76
spine-ts/build/spine-all.d.ts

@@ -1,10 +1,10 @@
 declare module spine {
     class AssetManager implements Disposable {
-        private _textureLoader;
-        private _assets;
-        private _errors;
-        private _toLoad;
-        private _loaded;
+        private textureLoader;
+        private assets;
+        private errors;
+        private toLoad;
+        private loaded;
         constructor(textureLoader: (image: HTMLImageElement) => any);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
@@ -12,11 +12,11 @@ declare module spine {
         remove(path: string): void;
         removeAll(): void;
         isLoadingComplete(): boolean;
-        toLoad(): number;
-        loaded(): number;
+        getToLoad(): number;
+        getLoaded(): number;
         dispose(): void;
         hasErrors(): boolean;
-        errors(): Map<string>;
+        getErrors(): Map<string>;
     }
 }
 declare module spine.canvas {
@@ -75,7 +75,7 @@ declare module spine.canvas {
 declare module spine.canvas {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];
-        private _ctx;
+        private ctx;
         triangleRendering: boolean;
         debugRendering: boolean;
         constructor(context: CanvasRenderingContext2D);
@@ -541,7 +541,7 @@ declare module spine {
         maxY: number;
         boundingBoxes: BoundingBoxAttachment[];
         polygons: ArrayLike<number>[];
-        private _polygonPool;
+        private polygonPool;
         update(skeleton: Skeleton, updateAabb: boolean): void;
         aabbCompute(): void;
         aabbContainsPoint(x: number, y: number): boolean;
@@ -757,8 +757,8 @@ declare module spine {
         static toFloatArray(array: Array<number>): Float32Array | number[];
     }
     class Pool<T> {
-        private _items;
-        private _instantiator;
+        private items;
+        private instantiator;
         constructor(instantiator: () => T);
         obtain(): T;
         free(item: T): void;
@@ -818,7 +818,7 @@ declare module spine {
         triangles: Array<number>;
         color: Color;
         hullLength: number;
-        private _parentMesh;
+        private parentMesh;
         inheritDeform: boolean;
         tempColor: Color;
         constructor(name: string);
@@ -908,11 +908,11 @@ declare module spine.threejs {
     class MeshBatcher {
         mesh: THREE.Mesh;
         private static VERTEX_SIZE;
-        private _vertexBuffer;
-        private _vertices;
-        private _verticesLength;
-        private _indices;
-        private _indicesLength;
+        private vertexBuffer;
+        private vertices;
+        private verticesLength;
+        private indices;
+        private indicesLength;
         constructor(mesh: THREE.Mesh, maxVertices?: number);
         begin(): void;
         batch(vertices: ArrayLike<number>, indices: ArrayLike<number>, z?: number): void;
@@ -924,7 +924,7 @@ declare module spine.threejs {
         skeleton: Skeleton;
         state: AnimationState;
         zOffset: number;
-        private _batcher;
+        private batcher;
         static QUAD_TRIANGLES: number[];
         constructor(skeletonData: SkeletonData);
         update(deltaTime: number): void;
@@ -950,9 +950,9 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class GLTexture extends Texture implements Disposable {
-        private _gl;
-        private _texture;
-        private _boundUnit;
+        private gl;
+        private texture;
+        private boundUnit;
         constructor(gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
         setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -999,27 +999,27 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class Mesh implements Disposable {
-        private _attributes;
-        private _gl;
-        private _vertices;
-        private _verticesBuffer;
-        private _verticesLength;
-        private _dirtyVertices;
-        private _indices;
-        private _indicesBuffer;
-        private _indicesLength;
-        private _dirtyIndices;
-        private _elementsPerVertex;
-        attributes(): VertexAttribute[];
+        private attributes;
+        private gl;
+        private vertices;
+        private verticesBuffer;
+        private verticesLength;
+        private dirtyVertices;
+        private indices;
+        private indicesBuffer;
+        private indicesLength;
+        private dirtyIndices;
+        private elementsPerVertex;
+        getAttributes(): VertexAttribute[];
         maxVertices(): number;
         numVertices(): number;
         setVerticesLength(length: number): void;
-        vertices(): Float32Array;
+        getVertices(): Float32Array;
         maxIndices(): number;
         numIndices(): number;
         setIndicesLength(length: number): void;
-        indices(): Uint16Array;
-        constructor(gl: WebGLRenderingContext, _attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
+        getIndices(): Uint16Array;
+        constructor(gl: WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
         setVertices(vertices: Array<number>): void;
         setIndices(indices: Array<number>): void;
         draw(shader: Shader, primitiveType: number): void;
@@ -1053,45 +1053,45 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class PolygonBatcher {
-        private _gl;
-        private _drawCalls;
-        private _drawing;
-        private _mesh;
-        private _shader;
-        private _lastTexture;
-        private _verticesLength;
-        private _indicesLength;
-        private _srcBlend;
-        private _dstBlend;
+        private gl;
+        private drawCalls;
+        private drawing;
+        private mesh;
+        private shader;
+        private lastTexture;
+        private verticesLength;
+        private indicesLength;
+        private srcBlend;
+        private dstBlend;
         constructor(gl: WebGLRenderingContext, maxVertices?: number);
         begin(shader: Shader): void;
         setBlendMode(srcBlend: number, dstBlend: number): void;
         draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
         private flush();
         end(): void;
-        drawCalls(): number;
+        getDrawCalls(): number;
     }
 }
 declare module spine.webgl {
     class Shader implements Disposable {
-        private _vertexShader;
-        private _fragmentShader;
+        private vertexShader;
+        private fragmentShader;
         static MVP_MATRIX: string;
         static POSITION: string;
         static COLOR: string;
         static TEXCOORDS: string;
         static SAMPLER: string;
-        private _gl;
-        private _vs;
-        private _fs;
-        private _program;
-        private _tmp2x2;
-        private _tmp3x3;
-        private _tmp4x4;
-        program(): WebGLProgram;
-        vertexShader(): string;
-        fragmentShader(): string;
-        constructor(gl: WebGLRenderingContext, _vertexShader: string, _fragmentShader: string);
+        private gl;
+        private vs;
+        private fs;
+        private program;
+        private tmp2x2;
+        private tmp3x3;
+        private tmp4x4;
+        getProgram(): WebGLProgram;
+        getVertexShader(): string;
+        getFragmentShader(): string;
+        constructor(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string);
         private compile();
         private compileShader(type, source);
         private compileProgram(vs, fs);
@@ -1116,7 +1116,7 @@ declare module spine.webgl {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];
         premultipliedAlpha: boolean;
-        private _gl;
+        private gl;
         constructor(gl: WebGLRenderingContext);
         draw(batcher: PolygonBatcher, skeleton: Skeleton): void;
     }
@@ -1149,26 +1149,28 @@ declare module spine {
         state: AnimationState;
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
-        private _config;
-        private _assetManager;
-        private _shader;
-        private _batcher;
-        private _mvp;
-        private _skeletonRenderer;
-        private _paused;
-        private _lastFrameTime;
-        private _backgroundColor;
-        private _loaded;
-        constructor(element: Element | string, config: SpineWidgetConfig);
+        private config;
+        private assetManager;
+        private shader;
+        private batcher;
+        private mvp;
+        private skeletonRenderer;
+        private paused;
+        private lastFrameTime;
+        private backgroundColor;
+        private loaded;
+        private bounds;
+        constructor(element: HTMLElement | string, config: SpineWidgetConfig);
         private validateConfig(config);
         private load();
         private render();
+        private resize();
         pause(): void;
         play(): void;
         isPlaying(): boolean;
         setAnimation(animationName: string): void;
         static loadWidgets(): void;
-        static loadWidget(widget: Element): void;
+        static loadWidget(widget: HTMLElement): void;
         static pageLoaded: boolean;
         private static ready();
         static setupDOMListener(): void;
@@ -1183,8 +1185,7 @@ declare module spine {
         scale: number;
         x: number;
         y: number;
-        width: number;
-        height: number;
+        fitToCanvas: boolean;
         backgroundColor: string;
         premultipliedAlpha: boolean;
         success: (widget: SpineWidget) => void;

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 323 - 288
spine-ts/build/spine-all.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
spine-ts/build/spine-all.js.map


+ 13 - 13
spine-ts/build/spine-core.d.ts

@@ -1,10 +1,10 @@
 declare module spine {
     class AssetManager implements Disposable {
-        private _textureLoader;
-        private _assets;
-        private _errors;
-        private _toLoad;
-        private _loaded;
+        private textureLoader;
+        private assets;
+        private errors;
+        private toLoad;
+        private loaded;
         constructor(textureLoader: (image: HTMLImageElement) => any);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
@@ -12,11 +12,11 @@ declare module spine {
         remove(path: string): void;
         removeAll(): void;
         isLoadingComplete(): boolean;
-        toLoad(): number;
-        loaded(): number;
+        getToLoad(): number;
+        getLoaded(): number;
         dispose(): void;
         hasErrors(): boolean;
-        errors(): Map<string>;
+        getErrors(): Map<string>;
     }
 }
 declare module spine.canvas {
@@ -75,7 +75,7 @@ declare module spine.canvas {
 declare module spine.canvas {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];
-        private _ctx;
+        private ctx;
         triangleRendering: boolean;
         debugRendering: boolean;
         constructor(context: CanvasRenderingContext2D);
@@ -541,7 +541,7 @@ declare module spine {
         maxY: number;
         boundingBoxes: BoundingBoxAttachment[];
         polygons: ArrayLike<number>[];
-        private _polygonPool;
+        private polygonPool;
         update(skeleton: Skeleton, updateAabb: boolean): void;
         aabbCompute(): void;
         aabbContainsPoint(x: number, y: number): boolean;
@@ -757,8 +757,8 @@ declare module spine {
         static toFloatArray(array: Array<number>): Float32Array | number[];
     }
     class Pool<T> {
-        private _items;
-        private _instantiator;
+        private items;
+        private instantiator;
         constructor(instantiator: () => T);
         obtain(): T;
         free(item: T): void;
@@ -818,7 +818,7 @@ declare module spine {
         triangles: Array<number>;
         color: Color;
         hullLength: number;
-        private _parentMesh;
+        private parentMesh;
         inheritDeform: boolean;
         tempColor: Color;
         constructor(name: string);

+ 47 - 47
spine-ts/build/spine-core.js

@@ -2,32 +2,32 @@ var spine;
 (function (spine) {
     var AssetManager = (function () {
         function AssetManager(textureLoader) {
-            this._assets = {};
-            this._errors = {};
-            this._toLoad = 0;
-            this._loaded = 0;
-            this._textureLoader = textureLoader;
+            this.assets = {};
+            this.errors = {};
+            this.toLoad = 0;
+            this.loaded = 0;
+            this.textureLoader = textureLoader;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
                 if (request.readyState == XMLHttpRequest.DONE) {
                     if (request.status >= 200 && request.status < 300) {
                         if (success)
                             success(path, request.responseText);
-                        _this._assets[path] = request.responseText;
+                        _this.assets[path] = request.responseText;
                     }
                     else {
                         if (error)
                             error(path, "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText);
-                        _this._errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
+                        _this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
                     }
-                    _this._toLoad--;
-                    _this._loaded++;
+                    _this.toLoad--;
+                    _this.loaded++;
                 }
             };
             request.open("GET", path, true);
@@ -37,59 +37,59 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var img = new Image();
             img.src = path;
             img.onload = function (ev) {
                 if (success)
                     success(path, img);
-                var texture = _this._textureLoader(img);
-                _this._assets[path] = texture;
-                _this._toLoad--;
-                _this._loaded++;
+                var texture = _this.textureLoader(img);
+                _this.assets[path] = texture;
+                _this.toLoad--;
+                _this.loaded++;
             };
             img.onerror = function (ev) {
                 if (error)
                     error(path, "Couldn't load image " + path);
-                _this._errors[path] = "Couldn't load image " + path;
-                _this._toLoad--;
-                _this._loaded++;
+                _this.errors[path] = "Couldn't load image " + path;
+                _this.toLoad--;
+                _this.loaded++;
             };
         };
         AssetManager.prototype.get = function (path) {
-            return this._assets[path];
+            return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
-            var asset = this._assets[path];
+            var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
-            this._assets[path] = null;
+            this.assets[path] = null;
         };
         AssetManager.prototype.removeAll = function () {
-            for (var key in this._assets) {
-                var asset = this._assets[key];
+            for (var key in this.assets) {
+                var asset = this.assets[key];
                 if (asset.dispose)
                     asset.dispose();
             }
-            this._assets = {};
+            this.assets = {};
         };
         AssetManager.prototype.isLoadingComplete = function () {
-            return this._toLoad == 0;
+            return this.toLoad == 0;
         };
-        AssetManager.prototype.toLoad = function () {
-            return this._toLoad;
+        AssetManager.prototype.getToLoad = function () {
+            return this.toLoad;
         };
-        AssetManager.prototype.loaded = function () {
-            return this._loaded;
+        AssetManager.prototype.getLoaded = function () {
+            return this.loaded;
         };
         AssetManager.prototype.dispose = function () {
             this.removeAll();
         };
         AssetManager.prototype.hasErrors = function () {
-            return Object.keys(this._errors).length > 0;
+            return Object.keys(this.errors).length > 0;
         };
-        AssetManager.prototype.errors = function () {
-            return this._errors;
+        AssetManager.prototype.getErrors = function () {
+            return this.errors;
         };
         return AssetManager;
     }());
@@ -205,7 +205,7 @@ var spine;
             function SkeletonRenderer(context) {
                 this.triangleRendering = false;
                 this.debugRendering = false;
-                this._ctx = context;
+                this.ctx = context;
             }
             SkeletonRenderer.prototype.draw = function (skeleton) {
                 if (this.triangleRendering)
@@ -214,7 +214,7 @@ var spine;
                     this.drawImages(skeleton);
             };
             SkeletonRenderer.prototype.drawImages = function (skeleton) {
-                var ctx = this._ctx;
+                var ctx = this.ctx;
                 var drawOrder = skeleton.drawOrder;
                 if (this.debugRendering)
                     ctx.strokeStyle = "green";
@@ -288,7 +288,7 @@ var spine;
                         if (slotBlendMode != blendMode) {
                             blendMode = slotBlendMode;
                         }
-                        var ctx = this._ctx;
+                        var ctx = this.ctx;
                         for (var j = 0; j < triangles.length; j += 3) {
                             var t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
                             var x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
@@ -309,7 +309,7 @@ var spine;
                 }
             };
             SkeletonRenderer.prototype.drawTriangle = function (img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
-                var ctx = this._ctx;
+                var ctx = this.ctx;
                 u0 *= img.width;
                 v0 *= img.height;
                 u1 *= img.width;
@@ -2622,7 +2622,7 @@ var spine;
             this.maxY = 0;
             this.boundingBoxes = new Array();
             this.polygons = new Array();
-            this._polygonPool = new spine.Pool(function () {
+            this.polygonPool = new spine.Pool(function () {
                 return spine.Utils.newFloatArray(16);
             });
         }
@@ -2631,7 +2631,7 @@ var spine;
                 throw new Error("skeleton cannot be null.");
             var boundingBoxes = this.boundingBoxes;
             var polygons = this.polygons;
-            var polygonPool = this._polygonPool;
+            var polygonPool = this.polygonPool;
             var slots = skeleton.slots;
             var slotCount = slots.length;
             boundingBoxes.length = 0;
@@ -4080,21 +4080,21 @@ var spine;
     spine.Utils = Utils;
     var Pool = (function () {
         function Pool(instantiator) {
-            this._items = new Array(16);
-            this._instantiator = instantiator;
+            this.items = new Array(16);
+            this.instantiator = instantiator;
         }
         Pool.prototype.obtain = function () {
-            return this._items.length > 0 ? this._items.pop() : this._instantiator();
+            return this.items.length > 0 ? this.items.pop() : this.instantiator();
         };
         Pool.prototype.free = function (item) {
-            this._items.push(item);
+            this.items.push(item);
         };
         Pool.prototype.freeAll = function (items) {
             for (var i = 0; i < items.length; i++)
-                this._items[i] = items[i];
+                this.items[i] = items[i];
         };
         Pool.prototype.clear = function () {
-            this._items.length = 0;
+            this.items.length = 0;
         };
         return Pool;
     }());
@@ -4335,13 +4335,13 @@ var spine;
             return worldVertices;
         };
         MeshAttachment.prototype.applyDeform = function (sourceAttachment) {
-            return this == sourceAttachment || (this.inheritDeform && this._parentMesh == sourceAttachment);
+            return this == sourceAttachment || (this.inheritDeform && this.parentMesh == sourceAttachment);
         };
         MeshAttachment.prototype.getParentMesh = function () {
-            return this._parentMesh;
+            return this.parentMesh;
         };
         MeshAttachment.prototype.setParentMesh = function (parentMesh) {
-            this._parentMesh = parentMesh;
+            this.parentMesh = parentMesh;
             if (parentMesh != null) {
                 this.bones = parentMesh.bones;
                 this.vertices = parentMesh.vertices;

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
spine-ts/build/spine-core.js.map


+ 18 - 18
spine-ts/build/spine-threejs.d.ts

@@ -236,11 +236,11 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
-        private _textureLoader;
-        private _assets;
-        private _errors;
-        private _toLoad;
-        private _loaded;
+        private textureLoader;
+        private assets;
+        private errors;
+        private toLoad;
+        private loaded;
         constructor(textureLoader: (image: HTMLImageElement) => any);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
@@ -248,11 +248,11 @@ declare module spine {
         remove(path: string): void;
         removeAll(): void;
         isLoadingComplete(): boolean;
-        toLoad(): number;
-        loaded(): number;
+        getToLoad(): number;
+        getLoaded(): number;
         dispose(): void;
         hasErrors(): boolean;
-        errors(): Map<string>;
+        getErrors(): Map<string>;
     }
 }
 declare module spine {
@@ -475,7 +475,7 @@ declare module spine {
         maxY: number;
         boundingBoxes: BoundingBoxAttachment[];
         polygons: ArrayLike<number>[];
-        private _polygonPool;
+        private polygonPool;
         update(skeleton: Skeleton, updateAabb: boolean): void;
         aabbCompute(): void;
         aabbContainsPoint(x: number, y: number): boolean;
@@ -731,8 +731,8 @@ declare module spine {
         static toFloatArray(array: Array<number>): Float32Array | number[];
     }
     class Pool<T> {
-        private _items;
-        private _instantiator;
+        private items;
+        private instantiator;
         constructor(instantiator: () => T);
         obtain(): T;
         free(item: T): void;
@@ -792,7 +792,7 @@ declare module spine {
         triangles: Array<number>;
         color: Color;
         hullLength: number;
-        private _parentMesh;
+        private parentMesh;
         inheritDeform: boolean;
         tempColor: Color;
         constructor(name: string);
@@ -882,11 +882,11 @@ declare module spine.threejs {
     class MeshBatcher {
         mesh: THREE.Mesh;
         private static VERTEX_SIZE;
-        private _vertexBuffer;
-        private _vertices;
-        private _verticesLength;
-        private _indices;
-        private _indicesLength;
+        private vertexBuffer;
+        private vertices;
+        private verticesLength;
+        private indices;
+        private indicesLength;
         constructor(mesh: THREE.Mesh, maxVertices?: number);
         begin(): void;
         batch(vertices: ArrayLike<number>, indices: ArrayLike<number>, z?: number): void;
@@ -898,7 +898,7 @@ declare module spine.threejs {
         skeleton: Skeleton;
         state: AnimationState;
         zOffset: number;
-        private _batcher;
+        private batcher;
         static QUAD_TRIANGLES: number[];
         constructor(skeletonData: SkeletonData);
         update(deltaTime: number): void;

+ 65 - 65
spine-ts/build/spine-threejs.js

@@ -990,32 +990,32 @@ var spine;
 (function (spine) {
     var AssetManager = (function () {
         function AssetManager(textureLoader) {
-            this._assets = {};
-            this._errors = {};
-            this._toLoad = 0;
-            this._loaded = 0;
-            this._textureLoader = textureLoader;
+            this.assets = {};
+            this.errors = {};
+            this.toLoad = 0;
+            this.loaded = 0;
+            this.textureLoader = textureLoader;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
                 if (request.readyState == XMLHttpRequest.DONE) {
                     if (request.status >= 200 && request.status < 300) {
                         if (success)
                             success(path, request.responseText);
-                        _this._assets[path] = request.responseText;
+                        _this.assets[path] = request.responseText;
                     }
                     else {
                         if (error)
                             error(path, "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText);
-                        _this._errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
+                        _this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
                     }
-                    _this._toLoad--;
-                    _this._loaded++;
+                    _this.toLoad--;
+                    _this.loaded++;
                 }
             };
             request.open("GET", path, true);
@@ -1025,59 +1025,59 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var img = new Image();
             img.src = path;
             img.onload = function (ev) {
                 if (success)
                     success(path, img);
-                var texture = _this._textureLoader(img);
-                _this._assets[path] = texture;
-                _this._toLoad--;
-                _this._loaded++;
+                var texture = _this.textureLoader(img);
+                _this.assets[path] = texture;
+                _this.toLoad--;
+                _this.loaded++;
             };
             img.onerror = function (ev) {
                 if (error)
                     error(path, "Couldn't load image " + path);
-                _this._errors[path] = "Couldn't load image " + path;
-                _this._toLoad--;
-                _this._loaded++;
+                _this.errors[path] = "Couldn't load image " + path;
+                _this.toLoad--;
+                _this.loaded++;
             };
         };
         AssetManager.prototype.get = function (path) {
-            return this._assets[path];
+            return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
-            var asset = this._assets[path];
+            var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
-            this._assets[path] = null;
+            this.assets[path] = null;
         };
         AssetManager.prototype.removeAll = function () {
-            for (var key in this._assets) {
-                var asset = this._assets[key];
+            for (var key in this.assets) {
+                var asset = this.assets[key];
                 if (asset.dispose)
                     asset.dispose();
             }
-            this._assets = {};
+            this.assets = {};
         };
         AssetManager.prototype.isLoadingComplete = function () {
-            return this._toLoad == 0;
+            return this.toLoad == 0;
         };
-        AssetManager.prototype.toLoad = function () {
-            return this._toLoad;
+        AssetManager.prototype.getToLoad = function () {
+            return this.toLoad;
         };
-        AssetManager.prototype.loaded = function () {
-            return this._loaded;
+        AssetManager.prototype.getLoaded = function () {
+            return this.loaded;
         };
         AssetManager.prototype.dispose = function () {
             this.removeAll();
         };
         AssetManager.prototype.hasErrors = function () {
-            return Object.keys(this._errors).length > 0;
+            return Object.keys(this.errors).length > 0;
         };
-        AssetManager.prototype.errors = function () {
-            return this._errors;
+        AssetManager.prototype.getErrors = function () {
+            return this.errors;
         };
         return AssetManager;
     }());
@@ -2380,7 +2380,7 @@ var spine;
             this.maxY = 0;
             this.boundingBoxes = new Array();
             this.polygons = new Array();
-            this._polygonPool = new spine.Pool(function () {
+            this.polygonPool = new spine.Pool(function () {
                 return spine.Utils.newFloatArray(16);
             });
         }
@@ -2389,7 +2389,7 @@ var spine;
                 throw new Error("skeleton cannot be null.");
             var boundingBoxes = this.boundingBoxes;
             var polygons = this.polygons;
-            var polygonPool = this._polygonPool;
+            var polygonPool = this.polygonPool;
             var slots = skeleton.slots;
             var slotCount = slots.length;
             boundingBoxes.length = 0;
@@ -3904,21 +3904,21 @@ var spine;
     spine.Utils = Utils;
     var Pool = (function () {
         function Pool(instantiator) {
-            this._items = new Array(16);
-            this._instantiator = instantiator;
+            this.items = new Array(16);
+            this.instantiator = instantiator;
         }
         Pool.prototype.obtain = function () {
-            return this._items.length > 0 ? this._items.pop() : this._instantiator();
+            return this.items.length > 0 ? this.items.pop() : this.instantiator();
         };
         Pool.prototype.free = function (item) {
-            this._items.push(item);
+            this.items.push(item);
         };
         Pool.prototype.freeAll = function (items) {
             for (var i = 0; i < items.length; i++)
-                this._items[i] = items[i];
+                this.items[i] = items[i];
         };
         Pool.prototype.clear = function () {
-            this._items.length = 0;
+            this.items.length = 0;
         };
         return Pool;
     }());
@@ -4159,13 +4159,13 @@ var spine;
             return worldVertices;
         };
         MeshAttachment.prototype.applyDeform = function (sourceAttachment) {
-            return this == sourceAttachment || (this.inheritDeform && this._parentMesh == sourceAttachment);
+            return this == sourceAttachment || (this.inheritDeform && this.parentMesh == sourceAttachment);
         };
         MeshAttachment.prototype.getParentMesh = function () {
-            return this._parentMesh;
+            return this.parentMesh;
         };
         MeshAttachment.prototype.setParentMesh = function (parentMesh) {
-            this._parentMesh = parentMesh;
+            this.parentMesh = parentMesh;
             if (parentMesh != null) {
                 this.bones = parentMesh.bones;
                 this.vertices = parentMesh.vertices;
@@ -4376,15 +4376,15 @@ var spine;
         var MeshBatcher = (function () {
             function MeshBatcher(mesh, maxVertices) {
                 if (maxVertices === void 0) { maxVertices = 10920; }
-                this._verticesLength = 0;
-                this._indicesLength = 0;
+                this.verticesLength = 0;
+                this.indicesLength = 0;
                 if (maxVertices > 10920)
                     throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
-                var vertices = this._vertices = new Float32Array(maxVertices * MeshBatcher.VERTEX_SIZE);
-                var indices = this._indices = new Uint16Array(maxVertices * 3);
+                var vertices = this.vertices = new Float32Array(maxVertices * MeshBatcher.VERTEX_SIZE);
+                var indices = this.indices = new Uint16Array(maxVertices * 3);
                 this.mesh = mesh;
                 var geo = new THREE.BufferGeometry();
-                var vertexBuffer = this._vertexBuffer = new THREE.InterleavedBuffer(vertices, MeshBatcher.VERTEX_SIZE);
+                var vertexBuffer = this.vertexBuffer = new THREE.InterleavedBuffer(vertices, MeshBatcher.VERTEX_SIZE);
                 vertexBuffer.dynamic = true;
                 geo.addAttribute("position", new THREE.InterleavedBufferAttribute(vertexBuffer, 3, 0, false));
                 geo.addAttribute("color", new THREE.InterleavedBufferAttribute(vertexBuffer, 4, 3, false));
@@ -4396,14 +4396,14 @@ var spine;
                 mesh.geometry = geo;
             }
             MeshBatcher.prototype.begin = function () {
-                this._verticesLength = 0;
-                this._indicesLength = 0;
+                this.verticesLength = 0;
+                this.indicesLength = 0;
             };
             MeshBatcher.prototype.batch = function (vertices, indices, z) {
                 if (z === void 0) { z = 0; }
-                var indexStart = this._verticesLength / MeshBatcher.VERTEX_SIZE;
-                var vertexBuffer = this._vertices;
-                var i = this._verticesLength;
+                var indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE;
+                var vertexBuffer = this.vertices;
+                var i = this.verticesLength;
                 var j = 0;
                 for (; j < vertices.length;) {
                     vertexBuffer[i++] = vertices[j++];
@@ -4416,22 +4416,22 @@ var spine;
                     vertexBuffer[i++] = vertices[j++];
                     vertexBuffer[i++] = vertices[j++];
                 }
-                this._verticesLength = i;
-                var indicesArray = this._indices;
-                for (i = this._indicesLength, j = 0; j < indices.length; i++, j++)
+                this.verticesLength = i;
+                var indicesArray = this.indices;
+                for (i = this.indicesLength, j = 0; j < indices.length; i++, j++)
                     indicesArray[i] = indices[j] + indexStart;
-                this._indicesLength += indices.length;
+                this.indicesLength += indices.length;
             };
             MeshBatcher.prototype.end = function () {
-                this._vertexBuffer.needsUpdate = true;
-                this._vertexBuffer.updateRange.offset = 0;
-                this._vertexBuffer.updateRange.count = this._verticesLength;
+                this.vertexBuffer.needsUpdate = true;
+                this.vertexBuffer.updateRange.offset = 0;
+                this.vertexBuffer.updateRange.count = this.verticesLength;
                 var geo = this.mesh.geometry;
                 geo.getIndex().needsUpdate = true;
                 geo.getIndex().updateRange.offset = 0;
-                geo.getIndex().updateRange.count = this._indicesLength;
+                geo.getIndex().updateRange.count = this.indicesLength;
                 geo.drawRange.start = 0;
-                geo.drawRange.count = this._indicesLength;
+                geo.drawRange.count = this.indicesLength;
             };
             MeshBatcher.VERTEX_SIZE = 9;
             return MeshBatcher;
@@ -4455,7 +4455,7 @@ var spine;
                 material.side = THREE.DoubleSide;
                 material.transparent = true;
                 material.alphaTest = 0.5;
-                this._batcher = new threejs.MeshBatcher(this);
+                this.batcher = new threejs.MeshBatcher(this);
             }
             SkeletonMesh.prototype.update = function (deltaTime) {
                 var state = this.state;
@@ -4474,7 +4474,7 @@ var spine;
                 var vertices = null;
                 var triangles = null;
                 var drawOrder = this.skeleton.drawOrder;
-                var batcher = this._batcher;
+                var batcher = this.batcher;
                 batcher.begin();
                 var z = 0;
                 var zOffset = this.zOffset;
@@ -4502,7 +4502,7 @@ var spine;
                             mat.map = texture.texture;
                             mat.needsUpdate = true;
                         }
-                        this._batcher.batch(vertices, triangles, z);
+                        this.batcher.batch(vertices, triangles, z);
                         z += zOffset;
                     }
                 }

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
spine-ts/build/spine-threejs.js.map


+ 55 - 55
spine-ts/build/spine-webgl.d.ts

@@ -236,11 +236,11 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
-        private _textureLoader;
-        private _assets;
-        private _errors;
-        private _toLoad;
-        private _loaded;
+        private textureLoader;
+        private assets;
+        private errors;
+        private toLoad;
+        private loaded;
         constructor(textureLoader: (image: HTMLImageElement) => any);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
@@ -248,11 +248,11 @@ declare module spine {
         remove(path: string): void;
         removeAll(): void;
         isLoadingComplete(): boolean;
-        toLoad(): number;
-        loaded(): number;
+        getToLoad(): number;
+        getLoaded(): number;
         dispose(): void;
         hasErrors(): boolean;
-        errors(): Map<string>;
+        getErrors(): Map<string>;
     }
 }
 declare module spine {
@@ -475,7 +475,7 @@ declare module spine {
         maxY: number;
         boundingBoxes: BoundingBoxAttachment[];
         polygons: ArrayLike<number>[];
-        private _polygonPool;
+        private polygonPool;
         update(skeleton: Skeleton, updateAabb: boolean): void;
         aabbCompute(): void;
         aabbContainsPoint(x: number, y: number): boolean;
@@ -731,8 +731,8 @@ declare module spine {
         static toFloatArray(array: Array<number>): Float32Array | number[];
     }
     class Pool<T> {
-        private _items;
-        private _instantiator;
+        private items;
+        private instantiator;
         constructor(instantiator: () => T);
         obtain(): T;
         free(item: T): void;
@@ -792,7 +792,7 @@ declare module spine {
         triangles: Array<number>;
         color: Color;
         hullLength: number;
-        private _parentMesh;
+        private parentMesh;
         inheritDeform: boolean;
         tempColor: Color;
         constructor(name: string);
@@ -880,9 +880,9 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class GLTexture extends Texture implements Disposable {
-        private _gl;
-        private _texture;
-        private _boundUnit;
+        private gl;
+        private texture;
+        private boundUnit;
         constructor(gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
         setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -929,27 +929,27 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class Mesh implements Disposable {
-        private _attributes;
-        private _gl;
-        private _vertices;
-        private _verticesBuffer;
-        private _verticesLength;
-        private _dirtyVertices;
-        private _indices;
-        private _indicesBuffer;
-        private _indicesLength;
-        private _dirtyIndices;
-        private _elementsPerVertex;
-        attributes(): VertexAttribute[];
+        private attributes;
+        private gl;
+        private vertices;
+        private verticesBuffer;
+        private verticesLength;
+        private dirtyVertices;
+        private indices;
+        private indicesBuffer;
+        private indicesLength;
+        private dirtyIndices;
+        private elementsPerVertex;
+        getAttributes(): VertexAttribute[];
         maxVertices(): number;
         numVertices(): number;
         setVerticesLength(length: number): void;
-        vertices(): Float32Array;
+        getVertices(): Float32Array;
         maxIndices(): number;
         numIndices(): number;
         setIndicesLength(length: number): void;
-        indices(): Uint16Array;
-        constructor(gl: WebGLRenderingContext, _attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
+        getIndices(): Uint16Array;
+        constructor(gl: WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
         setVertices(vertices: Array<number>): void;
         setIndices(indices: Array<number>): void;
         draw(shader: Shader, primitiveType: number): void;
@@ -983,45 +983,45 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class PolygonBatcher {
-        private _gl;
-        private _drawCalls;
-        private _drawing;
-        private _mesh;
-        private _shader;
-        private _lastTexture;
-        private _verticesLength;
-        private _indicesLength;
-        private _srcBlend;
-        private _dstBlend;
+        private gl;
+        private drawCalls;
+        private drawing;
+        private mesh;
+        private shader;
+        private lastTexture;
+        private verticesLength;
+        private indicesLength;
+        private srcBlend;
+        private dstBlend;
         constructor(gl: WebGLRenderingContext, maxVertices?: number);
         begin(shader: Shader): void;
         setBlendMode(srcBlend: number, dstBlend: number): void;
         draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
         private flush();
         end(): void;
-        drawCalls(): number;
+        getDrawCalls(): number;
     }
 }
 declare module spine.webgl {
     class Shader implements Disposable {
-        private _vertexShader;
-        private _fragmentShader;
+        private vertexShader;
+        private fragmentShader;
         static MVP_MATRIX: string;
         static POSITION: string;
         static COLOR: string;
         static TEXCOORDS: string;
         static SAMPLER: string;
-        private _gl;
-        private _vs;
-        private _fs;
-        private _program;
-        private _tmp2x2;
-        private _tmp3x3;
-        private _tmp4x4;
-        program(): WebGLProgram;
-        vertexShader(): string;
-        fragmentShader(): string;
-        constructor(gl: WebGLRenderingContext, _vertexShader: string, _fragmentShader: string);
+        private gl;
+        private vs;
+        private fs;
+        private program;
+        private tmp2x2;
+        private tmp3x3;
+        private tmp4x4;
+        getProgram(): WebGLProgram;
+        getVertexShader(): string;
+        getFragmentShader(): string;
+        constructor(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string);
         private compile();
         private compileShader(type, source);
         private compileProgram(vs, fs);
@@ -1046,7 +1046,7 @@ declare module spine.webgl {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];
         premultipliedAlpha: boolean;
-        private _gl;
+        private gl;
         constructor(gl: WebGLRenderingContext);
         draw(batcher: PolygonBatcher, skeleton: Skeleton): void;
     }

+ 218 - 218
spine-ts/build/spine-webgl.js

@@ -990,32 +990,32 @@ var spine;
 (function (spine) {
     var AssetManager = (function () {
         function AssetManager(textureLoader) {
-            this._assets = {};
-            this._errors = {};
-            this._toLoad = 0;
-            this._loaded = 0;
-            this._textureLoader = textureLoader;
+            this.assets = {};
+            this.errors = {};
+            this.toLoad = 0;
+            this.loaded = 0;
+            this.textureLoader = textureLoader;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
                 if (request.readyState == XMLHttpRequest.DONE) {
                     if (request.status >= 200 && request.status < 300) {
                         if (success)
                             success(path, request.responseText);
-                        _this._assets[path] = request.responseText;
+                        _this.assets[path] = request.responseText;
                     }
                     else {
                         if (error)
                             error(path, "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText);
-                        _this._errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
+                        _this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
                     }
-                    _this._toLoad--;
-                    _this._loaded++;
+                    _this.toLoad--;
+                    _this.loaded++;
                 }
             };
             request.open("GET", path, true);
@@ -1025,59 +1025,59 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var img = new Image();
             img.src = path;
             img.onload = function (ev) {
                 if (success)
                     success(path, img);
-                var texture = _this._textureLoader(img);
-                _this._assets[path] = texture;
-                _this._toLoad--;
-                _this._loaded++;
+                var texture = _this.textureLoader(img);
+                _this.assets[path] = texture;
+                _this.toLoad--;
+                _this.loaded++;
             };
             img.onerror = function (ev) {
                 if (error)
                     error(path, "Couldn't load image " + path);
-                _this._errors[path] = "Couldn't load image " + path;
-                _this._toLoad--;
-                _this._loaded++;
+                _this.errors[path] = "Couldn't load image " + path;
+                _this.toLoad--;
+                _this.loaded++;
             };
         };
         AssetManager.prototype.get = function (path) {
-            return this._assets[path];
+            return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
-            var asset = this._assets[path];
+            var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
-            this._assets[path] = null;
+            this.assets[path] = null;
         };
         AssetManager.prototype.removeAll = function () {
-            for (var key in this._assets) {
-                var asset = this._assets[key];
+            for (var key in this.assets) {
+                var asset = this.assets[key];
                 if (asset.dispose)
                     asset.dispose();
             }
-            this._assets = {};
+            this.assets = {};
         };
         AssetManager.prototype.isLoadingComplete = function () {
-            return this._toLoad == 0;
+            return this.toLoad == 0;
         };
-        AssetManager.prototype.toLoad = function () {
-            return this._toLoad;
+        AssetManager.prototype.getToLoad = function () {
+            return this.toLoad;
         };
-        AssetManager.prototype.loaded = function () {
-            return this._loaded;
+        AssetManager.prototype.getLoaded = function () {
+            return this.loaded;
         };
         AssetManager.prototype.dispose = function () {
             this.removeAll();
         };
         AssetManager.prototype.hasErrors = function () {
-            return Object.keys(this._errors).length > 0;
+            return Object.keys(this.errors).length > 0;
         };
-        AssetManager.prototype.errors = function () {
-            return this._errors;
+        AssetManager.prototype.getErrors = function () {
+            return this.errors;
         };
         return AssetManager;
     }());
@@ -2380,7 +2380,7 @@ var spine;
             this.maxY = 0;
             this.boundingBoxes = new Array();
             this.polygons = new Array();
-            this._polygonPool = new spine.Pool(function () {
+            this.polygonPool = new spine.Pool(function () {
                 return spine.Utils.newFloatArray(16);
             });
         }
@@ -2389,7 +2389,7 @@ var spine;
                 throw new Error("skeleton cannot be null.");
             var boundingBoxes = this.boundingBoxes;
             var polygons = this.polygons;
-            var polygonPool = this._polygonPool;
+            var polygonPool = this.polygonPool;
             var slots = skeleton.slots;
             var slotCount = slots.length;
             boundingBoxes.length = 0;
@@ -3904,21 +3904,21 @@ var spine;
     spine.Utils = Utils;
     var Pool = (function () {
         function Pool(instantiator) {
-            this._items = new Array(16);
-            this._instantiator = instantiator;
+            this.items = new Array(16);
+            this.instantiator = instantiator;
         }
         Pool.prototype.obtain = function () {
-            return this._items.length > 0 ? this._items.pop() : this._instantiator();
+            return this.items.length > 0 ? this.items.pop() : this.instantiator();
         };
         Pool.prototype.free = function (item) {
-            this._items.push(item);
+            this.items.push(item);
         };
         Pool.prototype.freeAll = function (items) {
             for (var i = 0; i < items.length; i++)
-                this._items[i] = items[i];
+                this.items[i] = items[i];
         };
         Pool.prototype.clear = function () {
-            this._items.length = 0;
+            this.items.length = 0;
         };
         return Pool;
     }());
@@ -4159,13 +4159,13 @@ var spine;
             return worldVertices;
         };
         MeshAttachment.prototype.applyDeform = function (sourceAttachment) {
-            return this == sourceAttachment || (this.inheritDeform && this._parentMesh == sourceAttachment);
+            return this == sourceAttachment || (this.inheritDeform && this.parentMesh == sourceAttachment);
         };
         MeshAttachment.prototype.getParentMesh = function () {
-            return this._parentMesh;
+            return this.parentMesh;
         };
         MeshAttachment.prototype.setParentMesh = function (parentMesh) {
-            this._parentMesh = parentMesh;
+            this.parentMesh = parentMesh;
             if (parentMesh != null) {
                 this.bones = parentMesh.bones;
                 this.vertices = parentMesh.vertices;
@@ -4376,25 +4376,25 @@ var spine;
             function GLTexture(gl, image, useMipMaps) {
                 if (useMipMaps === void 0) { useMipMaps = false; }
                 _super.call(this, image);
-                this._boundUnit = 0;
-                this._gl = gl;
-                this._texture = gl.createTexture();
+                this.boundUnit = 0;
+                this.gl = gl;
+                this.texture = gl.createTexture();
                 this.update(useMipMaps);
             }
             GLTexture.prototype.setFilters = function (minFilter, magFilter) {
-                var gl = this._gl;
+                var gl = this.gl;
                 this.bind();
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
             };
             GLTexture.prototype.setWraps = function (uWrap, vWrap) {
-                var gl = this._gl;
+                var gl = this.gl;
                 this.bind();
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap);
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap);
             };
             GLTexture.prototype.update = function (useMipMaps) {
-                var gl = this._gl;
+                var gl = this.gl;
                 this.bind();
                 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -4406,19 +4406,19 @@ var spine;
             };
             GLTexture.prototype.bind = function (unit) {
                 if (unit === void 0) { unit = 0; }
-                var gl = this._gl;
-                this._boundUnit = unit;
+                var gl = this.gl;
+                this.boundUnit = unit;
                 gl.activeTexture(gl.TEXTURE0 + unit);
-                gl.bindTexture(gl.TEXTURE_2D, this._texture);
+                gl.bindTexture(gl.TEXTURE_2D, this.texture);
             };
             GLTexture.prototype.unbind = function () {
-                var gl = this._gl;
-                gl.activeTexture(gl.TEXTURE0 + this._boundUnit);
+                var gl = this.gl;
+                gl.activeTexture(gl.TEXTURE0 + this.boundUnit);
                 gl.bindTexture(gl.TEXTURE_2D, null);
             };
             GLTexture.prototype.dispose = function () {
-                var gl = this._gl;
-                gl.deleteTexture(this._texture);
+                var gl = this.gl;
+                gl.deleteTexture(this.texture);
             };
             return GLTexture;
         }(spine.Texture));
@@ -4693,113 +4693,113 @@ var spine;
     var webgl;
     (function (webgl) {
         var Mesh = (function () {
-            function Mesh(gl, _attributes, maxVertices, maxIndices) {
-                this._attributes = _attributes;
-                this._verticesLength = 0;
-                this._dirtyVertices = false;
-                this._indicesLength = 0;
-                this._dirtyIndices = false;
-                this._elementsPerVertex = 0;
-                this._gl = gl;
-                this._elementsPerVertex = 0;
-                for (var i = 0; i < _attributes.length; i++) {
-                    this._elementsPerVertex += _attributes[i].numElements;
+            function Mesh(gl, attributes, maxVertices, maxIndices) {
+                this.attributes = attributes;
+                this.verticesLength = 0;
+                this.dirtyVertices = false;
+                this.indicesLength = 0;
+                this.dirtyIndices = false;
+                this.elementsPerVertex = 0;
+                this.gl = gl;
+                this.elementsPerVertex = 0;
+                for (var i = 0; i < attributes.length; i++) {
+                    this.elementsPerVertex += attributes[i].numElements;
                 }
-                this._vertices = new Float32Array(maxVertices * this._elementsPerVertex);
-                this._indices = new Uint16Array(maxIndices);
+                this.vertices = new Float32Array(maxVertices * this.elementsPerVertex);
+                this.indices = new Uint16Array(maxIndices);
             }
-            Mesh.prototype.attributes = function () { return this._attributes; };
-            Mesh.prototype.maxVertices = function () { return this._vertices.length / this._elementsPerVertex; };
-            Mesh.prototype.numVertices = function () { return this._verticesLength / this._elementsPerVertex; };
+            Mesh.prototype.getAttributes = function () { return this.attributes; };
+            Mesh.prototype.maxVertices = function () { return this.vertices.length / this.elementsPerVertex; };
+            Mesh.prototype.numVertices = function () { return this.verticesLength / this.elementsPerVertex; };
             Mesh.prototype.setVerticesLength = function (length) {
-                this._dirtyVertices = true;
-                this._verticesLength = length;
+                this.dirtyVertices = true;
+                this.verticesLength = length;
             };
-            Mesh.prototype.vertices = function () { return this._vertices; };
-            Mesh.prototype.maxIndices = function () { return this._indices.length; };
-            Mesh.prototype.numIndices = function () { return this._indicesLength; };
+            Mesh.prototype.getVertices = function () { return this.vertices; };
+            Mesh.prototype.maxIndices = function () { return this.indices.length; };
+            Mesh.prototype.numIndices = function () { return this.indicesLength; };
             Mesh.prototype.setIndicesLength = function (length) {
-                this._dirtyIndices = true;
-                this._indicesLength = length;
+                this.dirtyIndices = true;
+                this.indicesLength = length;
             };
-            Mesh.prototype.indices = function () { return this._indices; };
+            Mesh.prototype.getIndices = function () { return this.indices; };
             ;
             Mesh.prototype.setVertices = function (vertices) {
-                this._dirtyVertices = true;
-                if (vertices.length > this._vertices.length)
+                this.dirtyVertices = true;
+                if (vertices.length > this.vertices.length)
                     throw Error("Mesh can't store more than " + this.maxVertices() + " vertices");
-                this._vertices.set(vertices, 0);
-                this._verticesLength = vertices.length;
+                this.vertices.set(vertices, 0);
+                this.verticesLength = vertices.length;
             };
             Mesh.prototype.setIndices = function (indices) {
-                this._dirtyIndices = true;
-                if (indices.length > this._indices.length)
+                this.dirtyIndices = true;
+                if (indices.length > this.indices.length)
                     throw Error("Mesh can't store more than " + this.maxIndices() + " indices");
-                this._indices.set(indices, 0);
-                this._indicesLength = indices.length;
+                this.indices.set(indices, 0);
+                this.indicesLength = indices.length;
             };
             Mesh.prototype.draw = function (shader, primitiveType) {
-                this.drawWithOffset(shader, primitiveType, 0, this._indicesLength > 0 ? this._indicesLength : this._verticesLength);
+                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
             };
             Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
-                var gl = this._gl;
-                if (this._dirtyVertices || this._dirtyIndices)
+                var gl = this.gl;
+                if (this.dirtyVertices || this.dirtyIndices)
                     this.update();
                 this.bind(shader);
-                if (this._indicesLength > 0)
+                if (this.indicesLength > 0)
                     gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
                 else
                     gl.drawArrays(primitiveType, offset, count);
                 this.unbind(shader);
             };
             Mesh.prototype.bind = function (shader) {
-                var gl = this._gl;
-                gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
+                var gl = this.gl;
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
                 var offset = 0;
-                for (var i = 0; i < this._attributes.length; i++) {
-                    var attrib = this._attributes[i];
+                for (var i = 0; i < this.attributes.length; i++) {
+                    var attrib = this.attributes[i];
                     var location_1 = shader.getAttributeLocation(attrib.name);
                     gl.enableVertexAttribArray(location_1);
-                    gl.vertexAttribPointer(location_1, attrib.numElements, gl.FLOAT, false, this._elementsPerVertex * 4, offset * 4);
+                    gl.vertexAttribPointer(location_1, attrib.numElements, gl.FLOAT, false, this.elementsPerVertex * 4, offset * 4);
                     offset += attrib.numElements;
                 }
-                if (this._indicesLength > 0)
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer);
+                if (this.indicesLength > 0)
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
             };
             Mesh.prototype.unbind = function (shader) {
-                var gl = this._gl;
-                for (var i = 0; i < this._attributes.length; i++) {
-                    var attrib = this._attributes[i];
+                var gl = this.gl;
+                for (var i = 0; i < this.attributes.length; i++) {
+                    var attrib = this.attributes[i];
                     var location_2 = shader.getAttributeLocation(attrib.name);
                     gl.disableVertexAttribArray(location_2);
                 }
                 gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                if (this._indicesLength > 0)
+                if (this.indicesLength > 0)
                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
             };
             Mesh.prototype.update = function () {
-                var gl = this._gl;
-                if (this._dirtyVertices) {
-                    if (!this._verticesBuffer) {
-                        this._verticesBuffer = gl.createBuffer();
+                var gl = this.gl;
+                if (this.dirtyVertices) {
+                    if (!this.verticesBuffer) {
+                        this.verticesBuffer = gl.createBuffer();
                     }
-                    gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, this._vertices.subarray(0, this._verticesLength), gl.STATIC_DRAW);
-                    this._dirtyVertices = false;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
+                    gl.bufferData(gl.ARRAY_BUFFER, this.vertices.subarray(0, this.verticesLength), gl.STATIC_DRAW);
+                    this.dirtyVertices = false;
                 }
-                if (this._dirtyIndices) {
-                    if (!this._indicesBuffer) {
-                        this._indicesBuffer = gl.createBuffer();
+                if (this.dirtyIndices) {
+                    if (!this.indicesBuffer) {
+                        this.indicesBuffer = gl.createBuffer();
                     }
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer);
-                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices.subarray(0, this._indicesLength), gl.STATIC_DRAW);
-                    this._dirtyIndices = false;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices.subarray(0, this.indicesLength), gl.STATIC_DRAW);
+                    this.dirtyIndices = false;
                 }
             };
             Mesh.prototype.dispose = function () {
-                var gl = this._gl;
-                gl.deleteBuffer(this._verticesBuffer);
-                gl.deleteBuffer(this._indicesBuffer);
+                var gl = this.gl;
+                gl.deleteBuffer(this.verticesBuffer);
+                gl.deleteBuffer(this.indicesBuffer);
             };
             return Mesh;
         }());
@@ -4859,81 +4859,81 @@ var spine;
         var PolygonBatcher = (function () {
             function PolygonBatcher(gl, maxVertices) {
                 if (maxVertices === void 0) { maxVertices = 10920; }
-                this._drawing = false;
-                this._shader = null;
-                this._lastTexture = null;
-                this._verticesLength = 0;
-                this._indicesLength = 0;
-                this._srcBlend = WebGLRenderingContext.SRC_ALPHA;
-                this._dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
+                this.drawing = false;
+                this.shader = null;
+                this.lastTexture = null;
+                this.verticesLength = 0;
+                this.indicesLength = 0;
+                this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
+                this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
                 if (maxVertices > 10920)
                     throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
-                this._gl = gl;
-                this._mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()], maxVertices, maxVertices * 3);
+                this.gl = gl;
+                this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()], maxVertices, maxVertices * 3);
             }
             PolygonBatcher.prototype.begin = function (shader) {
-                var gl = this._gl;
-                if (this._drawing)
+                var gl = this.gl;
+                if (this.drawing)
                     throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
-                this._drawCalls = 0;
-                this._shader = shader;
-                this._lastTexture = null;
-                this._drawing = true;
+                this.drawCalls = 0;
+                this.shader = shader;
+                this.lastTexture = null;
+                this.drawing = true;
                 gl.enable(gl.BLEND);
-                gl.blendFunc(this._srcBlend, this._dstBlend);
+                gl.blendFunc(this.srcBlend, this.dstBlend);
             };
             PolygonBatcher.prototype.setBlendMode = function (srcBlend, dstBlend) {
-                var gl = this._gl;
-                this._srcBlend = srcBlend;
-                this._dstBlend = dstBlend;
-                if (this._drawing) {
+                var gl = this.gl;
+                this.srcBlend = srcBlend;
+                this.dstBlend = dstBlend;
+                if (this.drawing) {
                     this.flush();
-                    gl.blendFunc(this._srcBlend, this._dstBlend);
+                    gl.blendFunc(this.srcBlend, this.dstBlend);
                 }
             };
             PolygonBatcher.prototype.draw = function (texture, vertices, indices) {
-                if (texture != this._lastTexture) {
+                if (texture != this.lastTexture) {
                     this.flush();
-                    this._lastTexture = texture;
+                    this.lastTexture = texture;
                     texture.bind();
                 }
-                else if (this._verticesLength + vertices.length > this._mesh.vertices().length ||
-                    this._indicesLength + indices.length > this._mesh.indices().length) {
+                else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
+                    this.indicesLength + indices.length > this.mesh.getIndices().length) {
                     this.flush();
                 }
-                var indexStart = this._mesh.numVertices();
-                this._mesh.vertices().set(vertices, this._verticesLength);
-                this._verticesLength += vertices.length;
-                this._mesh.setVerticesLength(this._verticesLength);
-                var indicesArray = this._mesh.indices();
-                for (var i = this._indicesLength, j = 0; j < indices.length; i++, j++)
+                var indexStart = this.mesh.numVertices();
+                this.mesh.getVertices().set(vertices, this.verticesLength);
+                this.verticesLength += vertices.length;
+                this.mesh.setVerticesLength(this.verticesLength);
+                var indicesArray = this.mesh.getIndices();
+                for (var i = this.indicesLength, j = 0; j < indices.length; i++, j++)
                     indicesArray[i] = indices[j] + indexStart;
-                this._indicesLength += indices.length;
-                this._mesh.setIndicesLength(this._indicesLength);
+                this.indicesLength += indices.length;
+                this.mesh.setIndicesLength(this.indicesLength);
             };
             PolygonBatcher.prototype.flush = function () {
-                var gl = this._gl;
-                if (this._verticesLength == 0)
+                var gl = this.gl;
+                if (this.verticesLength == 0)
                     return;
-                this._mesh.draw(this._shader, gl.TRIANGLES);
-                this._verticesLength = 0;
-                this._indicesLength = 0;
-                this._mesh.setVerticesLength(0);
-                this._mesh.setIndicesLength(0);
-                this._drawCalls++;
+                this.mesh.draw(this.shader, gl.TRIANGLES);
+                this.verticesLength = 0;
+                this.indicesLength = 0;
+                this.mesh.setVerticesLength(0);
+                this.mesh.setIndicesLength(0);
+                this.drawCalls++;
             };
             PolygonBatcher.prototype.end = function () {
-                var gl = this._gl;
-                if (!this._drawing)
+                var gl = this.gl;
+                if (!this.drawing)
                     throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
-                if (this._verticesLength > 0 || this._indicesLength > 0)
+                if (this.verticesLength > 0 || this.indicesLength > 0)
                     this.flush();
-                this._shader = null;
-                this._lastTexture = null;
-                this._drawing = false;
+                this.shader = null;
+                this.lastTexture = null;
+                this.drawing = false;
                 gl.disable(gl.BLEND);
             };
-            PolygonBatcher.prototype.drawCalls = function () { return this._drawCalls; };
+            PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
             return PolygonBatcher;
         }());
         webgl.PolygonBatcher = PolygonBatcher;
@@ -4944,27 +4944,27 @@ var spine;
     var webgl;
     (function (webgl) {
         var Shader = (function () {
-            function Shader(gl, _vertexShader, _fragmentShader) {
-                this._vertexShader = _vertexShader;
-                this._fragmentShader = _fragmentShader;
-                this._vs = null;
-                this._fs = null;
-                this._program = null;
-                this._tmp2x2 = new Float32Array(2 * 2);
-                this._tmp3x3 = new Float32Array(3 * 3);
-                this._tmp4x4 = new Float32Array(4 * 4);
-                this._gl = gl;
+            function Shader(gl, vertexShader, fragmentShader) {
+                this.vertexShader = vertexShader;
+                this.fragmentShader = fragmentShader;
+                this.vs = null;
+                this.fs = null;
+                this.program = null;
+                this.tmp2x2 = new Float32Array(2 * 2);
+                this.tmp3x3 = new Float32Array(3 * 3);
+                this.tmp4x4 = new Float32Array(4 * 4);
+                this.gl = gl;
                 this.compile();
             }
-            Shader.prototype.program = function () { return this._program; };
-            Shader.prototype.vertexShader = function () { return this._vertexShader; };
-            Shader.prototype.fragmentShader = function () { return this._fragmentShader; };
+            Shader.prototype.getProgram = function () { return this.program; };
+            Shader.prototype.getVertexShader = function () { return this.vertexShader; };
+            Shader.prototype.getFragmentShader = function () { return this.fragmentShader; };
             Shader.prototype.compile = function () {
-                var gl = this._gl;
+                var gl = this.gl;
                 try {
-                    this._vs = this.compileShader(gl.VERTEX_SHADER, this._vertexShader);
-                    this._fs = this.compileShader(gl.FRAGMENT_SHADER, this._fragmentShader);
-                    this._program = this.compileProgram(this._vs, this._fs);
+                    this.vs = this.compileShader(gl.VERTEX_SHADER, this.vertexShader);
+                    this.fs = this.compileShader(gl.FRAGMENT_SHADER, this.fragmentShader);
+                    this.program = this.compileProgram(this.vs, this.fs);
                 }
                 catch (e) {
                     this.dispose();
@@ -4972,7 +4972,7 @@ var spine;
                 }
             };
             Shader.prototype.compileShader = function (type, source) {
-                var gl = this._gl;
+                var gl = this.gl;
                 var shader = gl.createShader(type);
                 gl.shaderSource(shader, source);
                 gl.compileShader(shader);
@@ -4984,7 +4984,7 @@ var spine;
                 return shader;
             };
             Shader.prototype.compileProgram = function (vs, fs) {
-                var gl = this._gl;
+                var gl = this.gl;
                 var program = gl.createProgram();
                 gl.attachShader(program, vs);
                 gl.attachShader(program, fs);
@@ -4997,68 +4997,68 @@ var spine;
                 return program;
             };
             Shader.prototype.bind = function () {
-                this._gl.useProgram(this._program);
+                this.gl.useProgram(this.program);
             };
             Shader.prototype.unbind = function () {
-                this._gl.useProgram(null);
+                this.gl.useProgram(null);
             };
             Shader.prototype.setUniformi = function (uniform, value) {
-                this._gl.uniform1i(this.getUniformLocation(uniform), value);
+                this.gl.uniform1i(this.getUniformLocation(uniform), value);
             };
             Shader.prototype.setUniformf = function (uniform, value) {
-                this._gl.uniform1f(this.getUniformLocation(uniform), value);
+                this.gl.uniform1f(this.getUniformLocation(uniform), value);
             };
             Shader.prototype.setUniform2f = function (uniform, value, value2) {
-                this._gl.uniform2f(this.getUniformLocation(uniform), value, value2);
+                this.gl.uniform2f(this.getUniformLocation(uniform), value, value2);
             };
             Shader.prototype.setUniform3f = function (uniform, value, value2, value3) {
-                this._gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
+                this.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
             };
             Shader.prototype.setUniform4f = function (uniform, value, value2, value3, value4) {
-                this._gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
+                this.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
             };
             Shader.prototype.setUniform2x2f = function (uniform, value) {
-                var gl = this._gl;
-                this._tmp2x2.set(value);
-                gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this._tmp2x2);
+                var gl = this.gl;
+                this.tmp2x2.set(value);
+                gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this.tmp2x2);
             };
             Shader.prototype.setUniform3x3f = function (uniform, value) {
-                var gl = this._gl;
-                this._tmp3x3.set(value);
-                gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this._tmp3x3);
+                var gl = this.gl;
+                this.tmp3x3.set(value);
+                gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this.tmp3x3);
             };
             Shader.prototype.setUniform4x4f = function (uniform, value) {
-                var gl = this._gl;
-                this._tmp4x4.set(value);
-                gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this._tmp4x4);
+                var gl = this.gl;
+                this.tmp4x4.set(value);
+                gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this.tmp4x4);
             };
             Shader.prototype.getUniformLocation = function (uniform) {
-                var gl = this._gl;
-                var location = gl.getUniformLocation(this._program, uniform);
+                var gl = this.gl;
+                var location = gl.getUniformLocation(this.program, uniform);
                 if (!location)
                     throw new Error("Couldn't find location for uniform " + uniform);
                 return location;
             };
             Shader.prototype.getAttributeLocation = function (attribute) {
-                var gl = this._gl;
-                var location = gl.getAttribLocation(this._program, attribute);
+                var gl = this.gl;
+                var location = gl.getAttribLocation(this.program, attribute);
                 if (location == -1)
                     throw new Error("Couldn't find location for attribute " + attribute);
                 return location;
             };
             Shader.prototype.dispose = function () {
-                var gl = this._gl;
-                if (this._vs) {
-                    gl.deleteShader(this._vs);
-                    this._vs = null;
+                var gl = this.gl;
+                if (this.vs) {
+                    gl.deleteShader(this.vs);
+                    this.vs = null;
                 }
-                if (this._fs) {
-                    gl.deleteShader(this._fs);
-                    this._fs = null;
+                if (this.fs) {
+                    gl.deleteShader(this.fs);
+                    this.fs = null;
                 }
-                if (this._program) {
-                    gl.deleteProgram(this._program);
-                    this._program = null;
+                if (this.program) {
+                    gl.deleteProgram(this.program);
+                    this.program = null;
                 }
             };
             Shader.newColoredTextured = function (gl) {
@@ -5088,7 +5088,7 @@ var spine;
         var SkeletonRenderer = (function () {
             function SkeletonRenderer(gl) {
                 this.premultipliedAlpha = false;
-                this._gl = gl;
+                this.gl = gl;
             }
             SkeletonRenderer.prototype.draw = function (batcher, skeleton) {
                 var premultipliedAlpha = this.premultipliedAlpha;
@@ -5118,7 +5118,7 @@ var spine;
                         var slotBlendMode = slot.data.blendMode;
                         if (slotBlendMode != blendMode) {
                             blendMode = slotBlendMode;
-                            batcher.setBlendMode(webgl.getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(this._gl, blendMode));
+                            batcher.setBlendMode(webgl.getSourceGLBlendMode(this.gl, blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(this.gl, blendMode));
                         }
                         batcher.draw(texture, vertices, triangles);
                     }

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
spine-ts/build/spine-webgl.js.map


+ 70 - 69
spine-ts/build/spine-widget.d.ts

@@ -236,11 +236,11 @@ declare module spine {
 }
 declare module spine {
     class AssetManager implements Disposable {
-        private _textureLoader;
-        private _assets;
-        private _errors;
-        private _toLoad;
-        private _loaded;
+        private textureLoader;
+        private assets;
+        private errors;
+        private toLoad;
+        private loaded;
         constructor(textureLoader: (image: HTMLImageElement) => any);
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
@@ -248,11 +248,11 @@ declare module spine {
         remove(path: string): void;
         removeAll(): void;
         isLoadingComplete(): boolean;
-        toLoad(): number;
-        loaded(): number;
+        getToLoad(): number;
+        getLoaded(): number;
         dispose(): void;
         hasErrors(): boolean;
-        errors(): Map<string>;
+        getErrors(): Map<string>;
     }
 }
 declare module spine {
@@ -475,7 +475,7 @@ declare module spine {
         maxY: number;
         boundingBoxes: BoundingBoxAttachment[];
         polygons: ArrayLike<number>[];
-        private _polygonPool;
+        private polygonPool;
         update(skeleton: Skeleton, updateAabb: boolean): void;
         aabbCompute(): void;
         aabbContainsPoint(x: number, y: number): boolean;
@@ -731,8 +731,8 @@ declare module spine {
         static toFloatArray(array: Array<number>): Float32Array | number[];
     }
     class Pool<T> {
-        private _items;
-        private _instantiator;
+        private items;
+        private instantiator;
         constructor(instantiator: () => T);
         obtain(): T;
         free(item: T): void;
@@ -792,7 +792,7 @@ declare module spine {
         triangles: Array<number>;
         color: Color;
         hullLength: number;
-        private _parentMesh;
+        private parentMesh;
         inheritDeform: boolean;
         tempColor: Color;
         constructor(name: string);
@@ -880,9 +880,9 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class GLTexture extends Texture implements Disposable {
-        private _gl;
-        private _texture;
-        private _boundUnit;
+        private gl;
+        private texture;
+        private boundUnit;
         constructor(gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
         setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -929,27 +929,27 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class Mesh implements Disposable {
-        private _attributes;
-        private _gl;
-        private _vertices;
-        private _verticesBuffer;
-        private _verticesLength;
-        private _dirtyVertices;
-        private _indices;
-        private _indicesBuffer;
-        private _indicesLength;
-        private _dirtyIndices;
-        private _elementsPerVertex;
-        attributes(): VertexAttribute[];
+        private attributes;
+        private gl;
+        private vertices;
+        private verticesBuffer;
+        private verticesLength;
+        private dirtyVertices;
+        private indices;
+        private indicesBuffer;
+        private indicesLength;
+        private dirtyIndices;
+        private elementsPerVertex;
+        getAttributes(): VertexAttribute[];
         maxVertices(): number;
         numVertices(): number;
         setVerticesLength(length: number): void;
-        vertices(): Float32Array;
+        getVertices(): Float32Array;
         maxIndices(): number;
         numIndices(): number;
         setIndicesLength(length: number): void;
-        indices(): Uint16Array;
-        constructor(gl: WebGLRenderingContext, _attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
+        getIndices(): Uint16Array;
+        constructor(gl: WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
         setVertices(vertices: Array<number>): void;
         setIndices(indices: Array<number>): void;
         draw(shader: Shader, primitiveType: number): void;
@@ -983,45 +983,45 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class PolygonBatcher {
-        private _gl;
-        private _drawCalls;
-        private _drawing;
-        private _mesh;
-        private _shader;
-        private _lastTexture;
-        private _verticesLength;
-        private _indicesLength;
-        private _srcBlend;
-        private _dstBlend;
+        private gl;
+        private drawCalls;
+        private drawing;
+        private mesh;
+        private shader;
+        private lastTexture;
+        private verticesLength;
+        private indicesLength;
+        private srcBlend;
+        private dstBlend;
         constructor(gl: WebGLRenderingContext, maxVertices?: number);
         begin(shader: Shader): void;
         setBlendMode(srcBlend: number, dstBlend: number): void;
         draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
         private flush();
         end(): void;
-        drawCalls(): number;
+        getDrawCalls(): number;
     }
 }
 declare module spine.webgl {
     class Shader implements Disposable {
-        private _vertexShader;
-        private _fragmentShader;
+        private vertexShader;
+        private fragmentShader;
         static MVP_MATRIX: string;
         static POSITION: string;
         static COLOR: string;
         static TEXCOORDS: string;
         static SAMPLER: string;
-        private _gl;
-        private _vs;
-        private _fs;
-        private _program;
-        private _tmp2x2;
-        private _tmp3x3;
-        private _tmp4x4;
-        program(): WebGLProgram;
-        vertexShader(): string;
-        fragmentShader(): string;
-        constructor(gl: WebGLRenderingContext, _vertexShader: string, _fragmentShader: string);
+        private gl;
+        private vs;
+        private fs;
+        private program;
+        private tmp2x2;
+        private tmp3x3;
+        private tmp4x4;
+        getProgram(): WebGLProgram;
+        getVertexShader(): string;
+        getFragmentShader(): string;
+        constructor(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string);
         private compile();
         private compileShader(type, source);
         private compileProgram(vs, fs);
@@ -1046,7 +1046,7 @@ declare module spine.webgl {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];
         premultipliedAlpha: boolean;
-        private _gl;
+        private gl;
         constructor(gl: WebGLRenderingContext);
         draw(batcher: PolygonBatcher, skeleton: Skeleton): void;
     }
@@ -1079,26 +1079,28 @@ declare module spine {
         state: AnimationState;
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
-        private _config;
-        private _assetManager;
-        private _shader;
-        private _batcher;
-        private _mvp;
-        private _skeletonRenderer;
-        private _paused;
-        private _lastFrameTime;
-        private _backgroundColor;
-        private _loaded;
-        constructor(element: Element | string, config: SpineWidgetConfig);
+        private config;
+        private assetManager;
+        private shader;
+        private batcher;
+        private mvp;
+        private skeletonRenderer;
+        private paused;
+        private lastFrameTime;
+        private backgroundColor;
+        private loaded;
+        private bounds;
+        constructor(element: HTMLElement | string, config: SpineWidgetConfig);
         private validateConfig(config);
         private load();
         private render();
+        private resize();
         pause(): void;
         play(): void;
         isPlaying(): boolean;
         setAnimation(animationName: string): void;
         static loadWidgets(): void;
-        static loadWidget(widget: Element): void;
+        static loadWidget(widget: HTMLElement): void;
         static pageLoaded: boolean;
         private static ready();
         static setupDOMListener(): void;
@@ -1113,8 +1115,7 @@ declare module spine {
         scale: number;
         x: number;
         y: number;
-        width: number;
-        height: number;
+        fitToCanvas: boolean;
         backgroundColor: string;
         premultipliedAlpha: boolean;
         success: (widget: SpineWidget) => void;

+ 301 - 269
spine-ts/build/spine-widget.js

@@ -990,32 +990,32 @@ var spine;
 (function (spine) {
     var AssetManager = (function () {
         function AssetManager(textureLoader) {
-            this._assets = {};
-            this._errors = {};
-            this._toLoad = 0;
-            this._loaded = 0;
-            this._textureLoader = textureLoader;
+            this.assets = {};
+            this.errors = {};
+            this.toLoad = 0;
+            this.loaded = 0;
+            this.textureLoader = textureLoader;
         }
         AssetManager.prototype.loadText = function (path, success, error) {
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var request = new XMLHttpRequest();
             request.onreadystatechange = function () {
                 if (request.readyState == XMLHttpRequest.DONE) {
                     if (request.status >= 200 && request.status < 300) {
                         if (success)
                             success(path, request.responseText);
-                        _this._assets[path] = request.responseText;
+                        _this.assets[path] = request.responseText;
                     }
                     else {
                         if (error)
                             error(path, "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText);
-                        _this._errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
+                        _this.errors[path] = "Couldn't load text " + path + ": status " + request.status + ", " + request.responseText;
                     }
-                    _this._toLoad--;
-                    _this._loaded++;
+                    _this.toLoad--;
+                    _this.loaded++;
                 }
             };
             request.open("GET", path, true);
@@ -1025,59 +1025,59 @@ var spine;
             var _this = this;
             if (success === void 0) { success = null; }
             if (error === void 0) { error = null; }
-            this._toLoad++;
+            this.toLoad++;
             var img = new Image();
             img.src = path;
             img.onload = function (ev) {
                 if (success)
                     success(path, img);
-                var texture = _this._textureLoader(img);
-                _this._assets[path] = texture;
-                _this._toLoad--;
-                _this._loaded++;
+                var texture = _this.textureLoader(img);
+                _this.assets[path] = texture;
+                _this.toLoad--;
+                _this.loaded++;
             };
             img.onerror = function (ev) {
                 if (error)
                     error(path, "Couldn't load image " + path);
-                _this._errors[path] = "Couldn't load image " + path;
-                _this._toLoad--;
-                _this._loaded++;
+                _this.errors[path] = "Couldn't load image " + path;
+                _this.toLoad--;
+                _this.loaded++;
             };
         };
         AssetManager.prototype.get = function (path) {
-            return this._assets[path];
+            return this.assets[path];
         };
         AssetManager.prototype.remove = function (path) {
-            var asset = this._assets[path];
+            var asset = this.assets[path];
             if (asset.dispose)
                 asset.dispose();
-            this._assets[path] = null;
+            this.assets[path] = null;
         };
         AssetManager.prototype.removeAll = function () {
-            for (var key in this._assets) {
-                var asset = this._assets[key];
+            for (var key in this.assets) {
+                var asset = this.assets[key];
                 if (asset.dispose)
                     asset.dispose();
             }
-            this._assets = {};
+            this.assets = {};
         };
         AssetManager.prototype.isLoadingComplete = function () {
-            return this._toLoad == 0;
+            return this.toLoad == 0;
         };
-        AssetManager.prototype.toLoad = function () {
-            return this._toLoad;
+        AssetManager.prototype.getToLoad = function () {
+            return this.toLoad;
         };
-        AssetManager.prototype.loaded = function () {
-            return this._loaded;
+        AssetManager.prototype.getLoaded = function () {
+            return this.loaded;
         };
         AssetManager.prototype.dispose = function () {
             this.removeAll();
         };
         AssetManager.prototype.hasErrors = function () {
-            return Object.keys(this._errors).length > 0;
+            return Object.keys(this.errors).length > 0;
         };
-        AssetManager.prototype.errors = function () {
-            return this._errors;
+        AssetManager.prototype.getErrors = function () {
+            return this.errors;
         };
         return AssetManager;
     }());
@@ -2380,7 +2380,7 @@ var spine;
             this.maxY = 0;
             this.boundingBoxes = new Array();
             this.polygons = new Array();
-            this._polygonPool = new spine.Pool(function () {
+            this.polygonPool = new spine.Pool(function () {
                 return spine.Utils.newFloatArray(16);
             });
         }
@@ -2389,7 +2389,7 @@ var spine;
                 throw new Error("skeleton cannot be null.");
             var boundingBoxes = this.boundingBoxes;
             var polygons = this.polygons;
-            var polygonPool = this._polygonPool;
+            var polygonPool = this.polygonPool;
             var slots = skeleton.slots;
             var slotCount = slots.length;
             boundingBoxes.length = 0;
@@ -3904,21 +3904,21 @@ var spine;
     spine.Utils = Utils;
     var Pool = (function () {
         function Pool(instantiator) {
-            this._items = new Array(16);
-            this._instantiator = instantiator;
+            this.items = new Array(16);
+            this.instantiator = instantiator;
         }
         Pool.prototype.obtain = function () {
-            return this._items.length > 0 ? this._items.pop() : this._instantiator();
+            return this.items.length > 0 ? this.items.pop() : this.instantiator();
         };
         Pool.prototype.free = function (item) {
-            this._items.push(item);
+            this.items.push(item);
         };
         Pool.prototype.freeAll = function (items) {
             for (var i = 0; i < items.length; i++)
-                this._items[i] = items[i];
+                this.items[i] = items[i];
         };
         Pool.prototype.clear = function () {
-            this._items.length = 0;
+            this.items.length = 0;
         };
         return Pool;
     }());
@@ -4159,13 +4159,13 @@ var spine;
             return worldVertices;
         };
         MeshAttachment.prototype.applyDeform = function (sourceAttachment) {
-            return this == sourceAttachment || (this.inheritDeform && this._parentMesh == sourceAttachment);
+            return this == sourceAttachment || (this.inheritDeform && this.parentMesh == sourceAttachment);
         };
         MeshAttachment.prototype.getParentMesh = function () {
-            return this._parentMesh;
+            return this.parentMesh;
         };
         MeshAttachment.prototype.setParentMesh = function (parentMesh) {
-            this._parentMesh = parentMesh;
+            this.parentMesh = parentMesh;
             if (parentMesh != null) {
                 this.bones = parentMesh.bones;
                 this.vertices = parentMesh.vertices;
@@ -4376,25 +4376,25 @@ var spine;
             function GLTexture(gl, image, useMipMaps) {
                 if (useMipMaps === void 0) { useMipMaps = false; }
                 _super.call(this, image);
-                this._boundUnit = 0;
-                this._gl = gl;
-                this._texture = gl.createTexture();
+                this.boundUnit = 0;
+                this.gl = gl;
+                this.texture = gl.createTexture();
                 this.update(useMipMaps);
             }
             GLTexture.prototype.setFilters = function (minFilter, magFilter) {
-                var gl = this._gl;
+                var gl = this.gl;
                 this.bind();
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
             };
             GLTexture.prototype.setWraps = function (uWrap, vWrap) {
-                var gl = this._gl;
+                var gl = this.gl;
                 this.bind();
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap);
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap);
             };
             GLTexture.prototype.update = function (useMipMaps) {
-                var gl = this._gl;
+                var gl = this.gl;
                 this.bind();
                 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
                 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -4406,19 +4406,19 @@ var spine;
             };
             GLTexture.prototype.bind = function (unit) {
                 if (unit === void 0) { unit = 0; }
-                var gl = this._gl;
-                this._boundUnit = unit;
+                var gl = this.gl;
+                this.boundUnit = unit;
                 gl.activeTexture(gl.TEXTURE0 + unit);
-                gl.bindTexture(gl.TEXTURE_2D, this._texture);
+                gl.bindTexture(gl.TEXTURE_2D, this.texture);
             };
             GLTexture.prototype.unbind = function () {
-                var gl = this._gl;
-                gl.activeTexture(gl.TEXTURE0 + this._boundUnit);
+                var gl = this.gl;
+                gl.activeTexture(gl.TEXTURE0 + this.boundUnit);
                 gl.bindTexture(gl.TEXTURE_2D, null);
             };
             GLTexture.prototype.dispose = function () {
-                var gl = this._gl;
-                gl.deleteTexture(this._texture);
+                var gl = this.gl;
+                gl.deleteTexture(this.texture);
             };
             return GLTexture;
         }(spine.Texture));
@@ -4693,113 +4693,113 @@ var spine;
     var webgl;
     (function (webgl) {
         var Mesh = (function () {
-            function Mesh(gl, _attributes, maxVertices, maxIndices) {
-                this._attributes = _attributes;
-                this._verticesLength = 0;
-                this._dirtyVertices = false;
-                this._indicesLength = 0;
-                this._dirtyIndices = false;
-                this._elementsPerVertex = 0;
-                this._gl = gl;
-                this._elementsPerVertex = 0;
-                for (var i = 0; i < _attributes.length; i++) {
-                    this._elementsPerVertex += _attributes[i].numElements;
+            function Mesh(gl, attributes, maxVertices, maxIndices) {
+                this.attributes = attributes;
+                this.verticesLength = 0;
+                this.dirtyVertices = false;
+                this.indicesLength = 0;
+                this.dirtyIndices = false;
+                this.elementsPerVertex = 0;
+                this.gl = gl;
+                this.elementsPerVertex = 0;
+                for (var i = 0; i < attributes.length; i++) {
+                    this.elementsPerVertex += attributes[i].numElements;
                 }
-                this._vertices = new Float32Array(maxVertices * this._elementsPerVertex);
-                this._indices = new Uint16Array(maxIndices);
+                this.vertices = new Float32Array(maxVertices * this.elementsPerVertex);
+                this.indices = new Uint16Array(maxIndices);
             }
-            Mesh.prototype.attributes = function () { return this._attributes; };
-            Mesh.prototype.maxVertices = function () { return this._vertices.length / this._elementsPerVertex; };
-            Mesh.prototype.numVertices = function () { return this._verticesLength / this._elementsPerVertex; };
+            Mesh.prototype.getAttributes = function () { return this.attributes; };
+            Mesh.prototype.maxVertices = function () { return this.vertices.length / this.elementsPerVertex; };
+            Mesh.prototype.numVertices = function () { return this.verticesLength / this.elementsPerVertex; };
             Mesh.prototype.setVerticesLength = function (length) {
-                this._dirtyVertices = true;
-                this._verticesLength = length;
+                this.dirtyVertices = true;
+                this.verticesLength = length;
             };
-            Mesh.prototype.vertices = function () { return this._vertices; };
-            Mesh.prototype.maxIndices = function () { return this._indices.length; };
-            Mesh.prototype.numIndices = function () { return this._indicesLength; };
+            Mesh.prototype.getVertices = function () { return this.vertices; };
+            Mesh.prototype.maxIndices = function () { return this.indices.length; };
+            Mesh.prototype.numIndices = function () { return this.indicesLength; };
             Mesh.prototype.setIndicesLength = function (length) {
-                this._dirtyIndices = true;
-                this._indicesLength = length;
+                this.dirtyIndices = true;
+                this.indicesLength = length;
             };
-            Mesh.prototype.indices = function () { return this._indices; };
+            Mesh.prototype.getIndices = function () { return this.indices; };
             ;
             Mesh.prototype.setVertices = function (vertices) {
-                this._dirtyVertices = true;
-                if (vertices.length > this._vertices.length)
+                this.dirtyVertices = true;
+                if (vertices.length > this.vertices.length)
                     throw Error("Mesh can't store more than " + this.maxVertices() + " vertices");
-                this._vertices.set(vertices, 0);
-                this._verticesLength = vertices.length;
+                this.vertices.set(vertices, 0);
+                this.verticesLength = vertices.length;
             };
             Mesh.prototype.setIndices = function (indices) {
-                this._dirtyIndices = true;
-                if (indices.length > this._indices.length)
+                this.dirtyIndices = true;
+                if (indices.length > this.indices.length)
                     throw Error("Mesh can't store more than " + this.maxIndices() + " indices");
-                this._indices.set(indices, 0);
-                this._indicesLength = indices.length;
+                this.indices.set(indices, 0);
+                this.indicesLength = indices.length;
             };
             Mesh.prototype.draw = function (shader, primitiveType) {
-                this.drawWithOffset(shader, primitiveType, 0, this._indicesLength > 0 ? this._indicesLength : this._verticesLength);
+                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
             };
             Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
-                var gl = this._gl;
-                if (this._dirtyVertices || this._dirtyIndices)
+                var gl = this.gl;
+                if (this.dirtyVertices || this.dirtyIndices)
                     this.update();
                 this.bind(shader);
-                if (this._indicesLength > 0)
+                if (this.indicesLength > 0)
                     gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
                 else
                     gl.drawArrays(primitiveType, offset, count);
                 this.unbind(shader);
             };
             Mesh.prototype.bind = function (shader) {
-                var gl = this._gl;
-                gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
+                var gl = this.gl;
+                gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
                 var offset = 0;
-                for (var i = 0; i < this._attributes.length; i++) {
-                    var attrib = this._attributes[i];
+                for (var i = 0; i < this.attributes.length; i++) {
+                    var attrib = this.attributes[i];
                     var location_1 = shader.getAttributeLocation(attrib.name);
                     gl.enableVertexAttribArray(location_1);
-                    gl.vertexAttribPointer(location_1, attrib.numElements, gl.FLOAT, false, this._elementsPerVertex * 4, offset * 4);
+                    gl.vertexAttribPointer(location_1, attrib.numElements, gl.FLOAT, false, this.elementsPerVertex * 4, offset * 4);
                     offset += attrib.numElements;
                 }
-                if (this._indicesLength > 0)
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer);
+                if (this.indicesLength > 0)
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
             };
             Mesh.prototype.unbind = function (shader) {
-                var gl = this._gl;
-                for (var i = 0; i < this._attributes.length; i++) {
-                    var attrib = this._attributes[i];
+                var gl = this.gl;
+                for (var i = 0; i < this.attributes.length; i++) {
+                    var attrib = this.attributes[i];
                     var location_2 = shader.getAttributeLocation(attrib.name);
                     gl.disableVertexAttribArray(location_2);
                 }
                 gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                if (this._indicesLength > 0)
+                if (this.indicesLength > 0)
                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
             };
             Mesh.prototype.update = function () {
-                var gl = this._gl;
-                if (this._dirtyVertices) {
-                    if (!this._verticesBuffer) {
-                        this._verticesBuffer = gl.createBuffer();
+                var gl = this.gl;
+                if (this.dirtyVertices) {
+                    if (!this.verticesBuffer) {
+                        this.verticesBuffer = gl.createBuffer();
                     }
-                    gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
-                    gl.bufferData(gl.ARRAY_BUFFER, this._vertices.subarray(0, this._verticesLength), gl.STATIC_DRAW);
-                    this._dirtyVertices = false;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
+                    gl.bufferData(gl.ARRAY_BUFFER, this.vertices.subarray(0, this.verticesLength), gl.STATIC_DRAW);
+                    this.dirtyVertices = false;
                 }
-                if (this._dirtyIndices) {
-                    if (!this._indicesBuffer) {
-                        this._indicesBuffer = gl.createBuffer();
+                if (this.dirtyIndices) {
+                    if (!this.indicesBuffer) {
+                        this.indicesBuffer = gl.createBuffer();
                     }
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer);
-                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices.subarray(0, this._indicesLength), gl.STATIC_DRAW);
-                    this._dirtyIndices = false;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices.subarray(0, this.indicesLength), gl.STATIC_DRAW);
+                    this.dirtyIndices = false;
                 }
             };
             Mesh.prototype.dispose = function () {
-                var gl = this._gl;
-                gl.deleteBuffer(this._verticesBuffer);
-                gl.deleteBuffer(this._indicesBuffer);
+                var gl = this.gl;
+                gl.deleteBuffer(this.verticesBuffer);
+                gl.deleteBuffer(this.indicesBuffer);
             };
             return Mesh;
         }());
@@ -4859,81 +4859,81 @@ var spine;
         var PolygonBatcher = (function () {
             function PolygonBatcher(gl, maxVertices) {
                 if (maxVertices === void 0) { maxVertices = 10920; }
-                this._drawing = false;
-                this._shader = null;
-                this._lastTexture = null;
-                this._verticesLength = 0;
-                this._indicesLength = 0;
-                this._srcBlend = WebGLRenderingContext.SRC_ALPHA;
-                this._dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
+                this.drawing = false;
+                this.shader = null;
+                this.lastTexture = null;
+                this.verticesLength = 0;
+                this.indicesLength = 0;
+                this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
+                this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
                 if (maxVertices > 10920)
                     throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
-                this._gl = gl;
-                this._mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()], maxVertices, maxVertices * 3);
+                this.gl = gl;
+                this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()], maxVertices, maxVertices * 3);
             }
             PolygonBatcher.prototype.begin = function (shader) {
-                var gl = this._gl;
-                if (this._drawing)
+                var gl = this.gl;
+                if (this.drawing)
                     throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
-                this._drawCalls = 0;
-                this._shader = shader;
-                this._lastTexture = null;
-                this._drawing = true;
+                this.drawCalls = 0;
+                this.shader = shader;
+                this.lastTexture = null;
+                this.drawing = true;
                 gl.enable(gl.BLEND);
-                gl.blendFunc(this._srcBlend, this._dstBlend);
+                gl.blendFunc(this.srcBlend, this.dstBlend);
             };
             PolygonBatcher.prototype.setBlendMode = function (srcBlend, dstBlend) {
-                var gl = this._gl;
-                this._srcBlend = srcBlend;
-                this._dstBlend = dstBlend;
-                if (this._drawing) {
+                var gl = this.gl;
+                this.srcBlend = srcBlend;
+                this.dstBlend = dstBlend;
+                if (this.drawing) {
                     this.flush();
-                    gl.blendFunc(this._srcBlend, this._dstBlend);
+                    gl.blendFunc(this.srcBlend, this.dstBlend);
                 }
             };
             PolygonBatcher.prototype.draw = function (texture, vertices, indices) {
-                if (texture != this._lastTexture) {
+                if (texture != this.lastTexture) {
                     this.flush();
-                    this._lastTexture = texture;
+                    this.lastTexture = texture;
                     texture.bind();
                 }
-                else if (this._verticesLength + vertices.length > this._mesh.vertices().length ||
-                    this._indicesLength + indices.length > this._mesh.indices().length) {
+                else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
+                    this.indicesLength + indices.length > this.mesh.getIndices().length) {
                     this.flush();
                 }
-                var indexStart = this._mesh.numVertices();
-                this._mesh.vertices().set(vertices, this._verticesLength);
-                this._verticesLength += vertices.length;
-                this._mesh.setVerticesLength(this._verticesLength);
-                var indicesArray = this._mesh.indices();
-                for (var i = this._indicesLength, j = 0; j < indices.length; i++, j++)
+                var indexStart = this.mesh.numVertices();
+                this.mesh.getVertices().set(vertices, this.verticesLength);
+                this.verticesLength += vertices.length;
+                this.mesh.setVerticesLength(this.verticesLength);
+                var indicesArray = this.mesh.getIndices();
+                for (var i = this.indicesLength, j = 0; j < indices.length; i++, j++)
                     indicesArray[i] = indices[j] + indexStart;
-                this._indicesLength += indices.length;
-                this._mesh.setIndicesLength(this._indicesLength);
+                this.indicesLength += indices.length;
+                this.mesh.setIndicesLength(this.indicesLength);
             };
             PolygonBatcher.prototype.flush = function () {
-                var gl = this._gl;
-                if (this._verticesLength == 0)
+                var gl = this.gl;
+                if (this.verticesLength == 0)
                     return;
-                this._mesh.draw(this._shader, gl.TRIANGLES);
-                this._verticesLength = 0;
-                this._indicesLength = 0;
-                this._mesh.setVerticesLength(0);
-                this._mesh.setIndicesLength(0);
-                this._drawCalls++;
+                this.mesh.draw(this.shader, gl.TRIANGLES);
+                this.verticesLength = 0;
+                this.indicesLength = 0;
+                this.mesh.setVerticesLength(0);
+                this.mesh.setIndicesLength(0);
+                this.drawCalls++;
             };
             PolygonBatcher.prototype.end = function () {
-                var gl = this._gl;
-                if (!this._drawing)
+                var gl = this.gl;
+                if (!this.drawing)
                     throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
-                if (this._verticesLength > 0 || this._indicesLength > 0)
+                if (this.verticesLength > 0 || this.indicesLength > 0)
                     this.flush();
-                this._shader = null;
-                this._lastTexture = null;
-                this._drawing = false;
+                this.shader = null;
+                this.lastTexture = null;
+                this.drawing = false;
                 gl.disable(gl.BLEND);
             };
-            PolygonBatcher.prototype.drawCalls = function () { return this._drawCalls; };
+            PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
             return PolygonBatcher;
         }());
         webgl.PolygonBatcher = PolygonBatcher;
@@ -4944,27 +4944,27 @@ var spine;
     var webgl;
     (function (webgl) {
         var Shader = (function () {
-            function Shader(gl, _vertexShader, _fragmentShader) {
-                this._vertexShader = _vertexShader;
-                this._fragmentShader = _fragmentShader;
-                this._vs = null;
-                this._fs = null;
-                this._program = null;
-                this._tmp2x2 = new Float32Array(2 * 2);
-                this._tmp3x3 = new Float32Array(3 * 3);
-                this._tmp4x4 = new Float32Array(4 * 4);
-                this._gl = gl;
+            function Shader(gl, vertexShader, fragmentShader) {
+                this.vertexShader = vertexShader;
+                this.fragmentShader = fragmentShader;
+                this.vs = null;
+                this.fs = null;
+                this.program = null;
+                this.tmp2x2 = new Float32Array(2 * 2);
+                this.tmp3x3 = new Float32Array(3 * 3);
+                this.tmp4x4 = new Float32Array(4 * 4);
+                this.gl = gl;
                 this.compile();
             }
-            Shader.prototype.program = function () { return this._program; };
-            Shader.prototype.vertexShader = function () { return this._vertexShader; };
-            Shader.prototype.fragmentShader = function () { return this._fragmentShader; };
+            Shader.prototype.getProgram = function () { return this.program; };
+            Shader.prototype.getVertexShader = function () { return this.vertexShader; };
+            Shader.prototype.getFragmentShader = function () { return this.fragmentShader; };
             Shader.prototype.compile = function () {
-                var gl = this._gl;
+                var gl = this.gl;
                 try {
-                    this._vs = this.compileShader(gl.VERTEX_SHADER, this._vertexShader);
-                    this._fs = this.compileShader(gl.FRAGMENT_SHADER, this._fragmentShader);
-                    this._program = this.compileProgram(this._vs, this._fs);
+                    this.vs = this.compileShader(gl.VERTEX_SHADER, this.vertexShader);
+                    this.fs = this.compileShader(gl.FRAGMENT_SHADER, this.fragmentShader);
+                    this.program = this.compileProgram(this.vs, this.fs);
                 }
                 catch (e) {
                     this.dispose();
@@ -4972,7 +4972,7 @@ var spine;
                 }
             };
             Shader.prototype.compileShader = function (type, source) {
-                var gl = this._gl;
+                var gl = this.gl;
                 var shader = gl.createShader(type);
                 gl.shaderSource(shader, source);
                 gl.compileShader(shader);
@@ -4984,7 +4984,7 @@ var spine;
                 return shader;
             };
             Shader.prototype.compileProgram = function (vs, fs) {
-                var gl = this._gl;
+                var gl = this.gl;
                 var program = gl.createProgram();
                 gl.attachShader(program, vs);
                 gl.attachShader(program, fs);
@@ -4997,68 +4997,68 @@ var spine;
                 return program;
             };
             Shader.prototype.bind = function () {
-                this._gl.useProgram(this._program);
+                this.gl.useProgram(this.program);
             };
             Shader.prototype.unbind = function () {
-                this._gl.useProgram(null);
+                this.gl.useProgram(null);
             };
             Shader.prototype.setUniformi = function (uniform, value) {
-                this._gl.uniform1i(this.getUniformLocation(uniform), value);
+                this.gl.uniform1i(this.getUniformLocation(uniform), value);
             };
             Shader.prototype.setUniformf = function (uniform, value) {
-                this._gl.uniform1f(this.getUniformLocation(uniform), value);
+                this.gl.uniform1f(this.getUniformLocation(uniform), value);
             };
             Shader.prototype.setUniform2f = function (uniform, value, value2) {
-                this._gl.uniform2f(this.getUniformLocation(uniform), value, value2);
+                this.gl.uniform2f(this.getUniformLocation(uniform), value, value2);
             };
             Shader.prototype.setUniform3f = function (uniform, value, value2, value3) {
-                this._gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
+                this.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
             };
             Shader.prototype.setUniform4f = function (uniform, value, value2, value3, value4) {
-                this._gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
+                this.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
             };
             Shader.prototype.setUniform2x2f = function (uniform, value) {
-                var gl = this._gl;
-                this._tmp2x2.set(value);
-                gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this._tmp2x2);
+                var gl = this.gl;
+                this.tmp2x2.set(value);
+                gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this.tmp2x2);
             };
             Shader.prototype.setUniform3x3f = function (uniform, value) {
-                var gl = this._gl;
-                this._tmp3x3.set(value);
-                gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this._tmp3x3);
+                var gl = this.gl;
+                this.tmp3x3.set(value);
+                gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this.tmp3x3);
             };
             Shader.prototype.setUniform4x4f = function (uniform, value) {
-                var gl = this._gl;
-                this._tmp4x4.set(value);
-                gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this._tmp4x4);
+                var gl = this.gl;
+                this.tmp4x4.set(value);
+                gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this.tmp4x4);
             };
             Shader.prototype.getUniformLocation = function (uniform) {
-                var gl = this._gl;
-                var location = gl.getUniformLocation(this._program, uniform);
+                var gl = this.gl;
+                var location = gl.getUniformLocation(this.program, uniform);
                 if (!location)
                     throw new Error("Couldn't find location for uniform " + uniform);
                 return location;
             };
             Shader.prototype.getAttributeLocation = function (attribute) {
-                var gl = this._gl;
-                var location = gl.getAttribLocation(this._program, attribute);
+                var gl = this.gl;
+                var location = gl.getAttribLocation(this.program, attribute);
                 if (location == -1)
                     throw new Error("Couldn't find location for attribute " + attribute);
                 return location;
             };
             Shader.prototype.dispose = function () {
-                var gl = this._gl;
-                if (this._vs) {
-                    gl.deleteShader(this._vs);
-                    this._vs = null;
+                var gl = this.gl;
+                if (this.vs) {
+                    gl.deleteShader(this.vs);
+                    this.vs = null;
                 }
-                if (this._fs) {
-                    gl.deleteShader(this._fs);
-                    this._fs = null;
+                if (this.fs) {
+                    gl.deleteShader(this.fs);
+                    this.fs = null;
                 }
-                if (this._program) {
-                    gl.deleteProgram(this._program);
-                    this._program = null;
+                if (this.program) {
+                    gl.deleteProgram(this.program);
+                    this.program = null;
                 }
             };
             Shader.newColoredTextured = function (gl) {
@@ -5088,7 +5088,7 @@ var spine;
         var SkeletonRenderer = (function () {
             function SkeletonRenderer(gl) {
                 this.premultipliedAlpha = false;
-                this._gl = gl;
+                this.gl = gl;
             }
             SkeletonRenderer.prototype.draw = function (batcher, skeleton) {
                 var premultipliedAlpha = this.premultipliedAlpha;
@@ -5118,7 +5118,7 @@ var spine;
                         var slotBlendMode = slot.data.blendMode;
                         if (slotBlendMode != blendMode) {
                             blendMode = slotBlendMode;
-                            batcher.setBlendMode(webgl.getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(this._gl, blendMode));
+                            batcher.setBlendMode(webgl.getSourceGLBlendMode(this.gl, blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(this.gl, blendMode));
                         }
                         batcher.draw(texture, vertices, triangles);
                     }
@@ -5235,11 +5235,12 @@ var spine;
     var SpineWidget = (function () {
         function SpineWidget(element, config) {
             var _this = this;
-            this._mvp = new spine.webgl.Matrix4();
-            this._paused = false;
-            this._lastFrameTime = Date.now() / 1000.0;
-            this._backgroundColor = new spine.Color();
-            this._loaded = false;
+            this.mvp = new spine.webgl.Matrix4();
+            this.paused = false;
+            this.lastFrameTime = Date.now() / 1000.0;
+            this.backgroundColor = new spine.Color();
+            this.loaded = false;
+            this.bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
             if (!element)
                 throw new Error("Please provide a DOM element, e.g. document.getElementById('myelement')");
             if (!config)
@@ -5251,16 +5252,18 @@ var spine;
                 throw new Error("Element " + elementId + " does not exist");
             this.validateConfig(config);
             var canvas = this.canvas = document.createElement("canvas");
+            canvas.style.width = "100%";
+            canvas.style.height = "100%";
             element.appendChild(canvas);
-            canvas.width = config.width;
-            canvas.height = config.height;
+            canvas.width = element.clientWidth;
+            canvas.height = element.clientHeight;
             var webglConfig = { alpha: false };
             var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
-            this._shader = spine.webgl.Shader.newColoredTextured(gl);
-            this._batcher = new spine.webgl.PolygonBatcher(gl);
-            this._mvp.ortho2d(0, 0, 639, 479);
-            this._skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
-            var assets = this._assetManager = new spine.webgl.AssetManager(gl);
+            this.shader = spine.webgl.Shader.newColoredTextured(gl);
+            this.batcher = new spine.webgl.PolygonBatcher(gl);
+            this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+            this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+            var assets = this.assetManager = new spine.webgl.AssetManager(gl);
             assets.loadText(config.atlas);
             assets.loadText(config.json);
             assets.loadTexture(config.atlas.replace(".atlas", ".png"));
@@ -5279,14 +5282,12 @@ var spine;
                 config.skin = "default";
             if (config.loop === undefined)
                 config.loop = true;
-            if (!config.y)
-                config.y = 20;
-            if (!config.width)
-                config.width = 640;
-            if (!config.height)
-                config.height = 480;
             if (!config.x)
-                config.x = config.width / 2;
+                config.x = 0;
+            if (!config.y)
+                config.y = 0;
+            if (config.fitToCanvas === undefined)
+                config.fitToCanvas = true;
             if (!config.backgroundColor)
                 config.backgroundColor = "#555555";
             if (!config.imagesPath) {
@@ -5300,22 +5301,22 @@ var spine;
             }
             if (!config.premultipliedAlpha === undefined)
                 config.premultipliedAlpha = false;
-            this._backgroundColor.setFromString(config.backgroundColor);
-            this._config = config;
+            this.backgroundColor.setFromString(config.backgroundColor);
+            this.config = config;
         };
         SpineWidget.prototype.load = function () {
             var _this = this;
-            var assetManager = this._assetManager;
-            var imagesPath = this._config.imagesPath;
-            var config = this._config;
+            var assetManager = this.assetManager;
+            var imagesPath = this.config.imagesPath;
+            var config = this.config;
             if (assetManager.isLoadingComplete()) {
                 if (assetManager.hasErrors()) {
                     if (config.error)
-                        config.error(this, "Failed to load assets: " + JSON.stringify(assetManager.errors));
+                        config.error(this, "Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
                     else
-                        throw new Error("Failed to load assets: " + JSON.stringify(assetManager.errors));
+                        throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
                 }
-                var atlas = new spine.TextureAtlas(this._assetManager.get(this._config.atlas), function (path) {
+                var atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas), function (path) {
                     var texture = assetManager.get(imagesPath + path);
                     return texture;
                 });
@@ -5324,14 +5325,20 @@ var spine;
                 skeletonJson.scale = config.scale;
                 var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json));
                 var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
-                skeleton.x = config.x;
-                skeleton.y = config.y;
+                var bounds = this.bounds;
+                skeleton.setToSetupPose();
+                skeleton.updateWorldTransform();
+                skeleton.getBounds(bounds.offset, bounds.size);
+                if (!config.fitToCanvas) {
+                    skeleton.x = config.x;
+                    skeleton.y = config.y;
+                }
                 skeleton.setSkinByName(config.skin);
                 var animationState = this.state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
                 animationState.setAnimation(0, config.animation, true);
                 if (config.success)
                     config.success(this);
-                this._loaded = true;
+                this.loaded = true;
                 requestAnimationFrame(function () { _this.render(); });
             }
             else
@@ -5340,50 +5347,78 @@ var spine;
         SpineWidget.prototype.render = function () {
             var _this = this;
             var now = Date.now() / 1000;
-            var delta = now - this._lastFrameTime;
+            var delta = now - this.lastFrameTime;
             if (delta > 0.1)
                 delta = 0;
-            this._lastFrameTime = now;
+            this.lastFrameTime = now;
             var gl = this.gl;
-            var color = this._backgroundColor;
+            var color = this.backgroundColor;
+            this.resize();
             gl.clearColor(color.r, color.g, color.b, color.a);
             gl.clear(gl.COLOR_BUFFER_BIT);
             var state = this.state;
             var skeleton = this.skeleton;
-            var premultipliedAlpha = this._config.premultipliedAlpha;
+            var premultipliedAlpha = this.config.premultipliedAlpha;
             state.update(delta);
             state.apply(skeleton);
             skeleton.updateWorldTransform();
-            var shader = this._shader;
+            var shader = this.shader;
             shader.bind();
             shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
-            shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this._mvp.values);
-            var batcher = this._batcher;
-            var skeletonRenderer = this._skeletonRenderer;
+            shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
+            var batcher = this.batcher;
+            var skeletonRenderer = this.skeletonRenderer;
             batcher.begin(shader);
             skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
             skeletonRenderer.draw(batcher, skeleton);
             batcher.end();
             shader.unbind();
-            if (!this._paused)
+            if (!this.paused)
                 requestAnimationFrame(function () { _this.render(); });
         };
+        SpineWidget.prototype.resize = function () {
+            var canvas = this.canvas;
+            var w = canvas.clientWidth;
+            var h = canvas.clientHeight;
+            var bounds = this.bounds;
+            if (canvas.width != w || canvas.height != h) {
+                canvas.width = w;
+                canvas.height = h;
+            }
+            if (this.config.fitToCanvas) {
+                var centerX = bounds.offset.x + bounds.size.x / 2;
+                var centerY = bounds.offset.y + bounds.size.y / 2;
+                var scaleX = bounds.size.x / canvas.width;
+                var scaleY = bounds.size.y / canvas.height;
+                var scale = Math.max(scaleX, scaleY) * 1.2;
+                if (scale < 1)
+                    scale = 1;
+                var width = canvas.width * scale;
+                var height = canvas.height * scale;
+                this.skeleton.x = this.skeleton.y = 0;
+                this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+            }
+            else {
+                this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+            }
+            this.gl.viewport(0, 0, canvas.width, canvas.height);
+        };
         SpineWidget.prototype.pause = function () {
-            this._paused = true;
+            this.paused = true;
         };
         SpineWidget.prototype.play = function () {
             var _this = this;
-            this._paused = false;
+            this.paused = false;
             requestAnimationFrame(function () { _this.render(); });
         };
         SpineWidget.prototype.isPlaying = function () {
-            return !this._paused;
+            return !this.paused;
         };
         SpineWidget.prototype.setAnimation = function (animationName) {
-            if (!this._loaded)
+            if (!this.loaded)
                 throw new Error("Widget isn't loaded yet");
             this.skeleton.setToSetupPose();
-            this.state.setAnimation(0, animationName, this._config.loop);
+            this.state.setAnimation(0, animationName, this.config.loop);
         };
         SpineWidget.loadWidgets = function () {
             var widgets = document.getElementsByClassName("spine-widget");
@@ -5407,11 +5442,9 @@ var spine;
             if (widget.getAttribute("data-x"))
                 config.x = parseFloat(widget.getAttribute("data-x"));
             if (widget.getAttribute("data-y"))
-                config.x = parseFloat(widget.getAttribute("data-y"));
-            if (widget.getAttribute("data-width"))
-                config.width = parseInt(widget.getAttribute("data-width"));
-            if (widget.getAttribute("data-height"))
-                config.height = parseInt(widget.getAttribute("data-height"));
+                config.y = parseFloat(widget.getAttribute("data-y"));
+            if (widget.getAttribute("data-fit-to-canvas"))
+                config.fitToCanvas = widget.getAttribute("data-fit-to-canvas") === "true";
             if (widget.getAttribute("data-background-color"))
                 config.backgroundColor = widget.getAttribute("data-background-color");
             if (widget.getAttribute("data-premultiplied-alpha"))
@@ -5448,8 +5481,7 @@ var spine;
             this.scale = 1.0;
             this.x = 0;
             this.y = 0;
-            this.width = 640;
-            this.height = 480;
+            this.fitToCanvas = true;
             this.backgroundColor = "#555555";
             this.premultipliedAlpha = false;
         }

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
spine-ts/build/spine-widget.js.map


+ 5 - 5
spine-ts/canvas/src/SkeletonRenderer.ts

@@ -33,13 +33,13 @@ module spine.canvas {
 	export class SkeletonRenderer {
 		static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
 		
-		private _ctx: CanvasRenderingContext2D;
+		private ctx: CanvasRenderingContext2D;
 
 		public triangleRendering = false;
 		public debugRendering = false;
 		
 		constructor (context: CanvasRenderingContext2D) {
-			this._ctx = context;
+			this.ctx = context;
 		}
 
 		draw (skeleton: Skeleton) {
@@ -48,7 +48,7 @@ module spine.canvas {
 		}
 
 		private drawImages (skeleton: Skeleton) {
-			let ctx = this._ctx;
+			let ctx = this.ctx;
 			let drawOrder = skeleton.drawOrder;
 
 			if (this.debugRendering) ctx.strokeStyle = "green";			
@@ -124,7 +124,7 @@ module spine.canvas {
 						blendMode = slotBlendMode;						
 					}
 
-					let ctx = this._ctx;		
+					let ctx = this.ctx;		
 
 					for (var j = 0; j < triangles.length; j+=3) {
 						let t1 = triangles[j] * 8, t2 = triangles[j+1] * 8, t3 = triangles[j+2] * 8;
@@ -154,7 +154,7 @@ module spine.canvas {
 		private drawTriangle(img: HTMLImageElement, x0: number, y0: number, u0: number, v0: number,
 						x1: number, y1: number, u1: number, v1: number,
 						x2: number, y2: number, u2: number, v2: number) {
-			let ctx = this._ctx;
+			let ctx = this.ctx;
 
 			u0 *= img.width;
 			v0 *= img.height;

+ 33 - 33
spine-ts/core/src/AssetManager.ts

@@ -31,33 +31,33 @@
 
 module spine {
 	export class AssetManager implements Disposable {
-		private _textureLoader: (image: HTMLImageElement) => any;
-		private _assets: Map<any> = {};
-		private _errors: Map<string> = {};
-		private _toLoad = 0;
-		private _loaded = 0;
+		private textureLoader: (image: HTMLImageElement) => any;
+		private assets: Map<any> = {};
+		private errors: Map<string> = {};
+		private toLoad = 0;
+		private loaded = 0;
 
 		constructor (textureLoader: (image: HTMLImageElement) => any) {
-			this._textureLoader = textureLoader;
+			this.textureLoader = textureLoader;
 		}
 
 		loadText(path: string,
 			success: (path: string, text: string) => void = null,
 			error: (path: string, error: string) => void = null
 		) {
-			this._toLoad++;
+			this.toLoad++;
 			let request = new XMLHttpRequest();
 			request.onreadystatechange = () => {
 				if (request.readyState == XMLHttpRequest.DONE) {
 					if (request.status >= 200 && request.status < 300) {
 						if (success) success(path, request.responseText);
-						this._assets[path] = request.responseText;
+						this.assets[path] = request.responseText;
 					} else {
 						if (error) error(path, `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`);
-						this._errors[path] = `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`;
+						this.errors[path] = `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`;
 					}
-					this._toLoad--;
-					this._loaded++;
+					this.toLoad--;
+					this.loaded++;
 				}
 			};
 			request.open("GET", path, true);
@@ -68,52 +68,52 @@ module spine {
 			success: (path: string, image: HTMLImageElement) => void = null,
 			error: (path: string, error: string) => void = null
 		) {
-			this._toLoad++;
+			this.toLoad++;
 			let img = new Image();
 			img.src = path;
 			img.onload = (ev) => {
 				if (success) success(path, img);
-				let texture = this._textureLoader(img);
-				this._assets[path] = texture;
-				this._toLoad--;
-				this._loaded++;
+				let texture = this.textureLoader(img);
+				this.assets[path] = texture;
+				this.toLoad--;
+				this.loaded++;
 			}
 			img.onerror = (ev) => {
 				if (error) error(path, `Couldn't load image ${path}`);
-				this._errors[path] =  `Couldn't load image ${path}`;
-				this._toLoad--;
-				this._loaded++;
+				this.errors[path] =  `Couldn't load image ${path}`;
+				this.toLoad--;
+				this.loaded++;
 			}
 		}
 
 		get (path: string) {
-			return this._assets[path];
+			return this.assets[path];
 		}
 
 		remove (path: string) {
-			let asset = this._assets[path];
+			let asset = this.assets[path];
 			if ((<any>asset).dispose) (<any>asset).dispose();			
-			this._assets[path] = null;
+			this.assets[path] = null;
 		}
 
 		removeAll () {
-			for (let key in this._assets) {
-				let asset = this._assets[key];
+			for (let key in this.assets) {
+				let asset = this.assets[key];
 				if ((<any>asset).dispose) (<any>asset).dispose();
 			}
-			this._assets = {};
+			this.assets = {};
 		}
 
 		isLoadingComplete (): boolean {
-			return this._toLoad == 0;
+			return this.toLoad == 0;
 		}
 
-		toLoad (): number {
-			return this._toLoad;
+		getToLoad (): number {
+			return this.toLoad;
 		}
 
-		loaded (): number {
-			return this._loaded;
+		getLoaded (): number {
+			return this.loaded;
 		}
 
 		dispose () {
@@ -121,11 +121,11 @@ module spine {
 		}
 
 		hasErrors() {
-			return Object.keys(this._errors).length > 0;
+			return Object.keys(this.errors).length > 0;
 		}
 
-		errors() {
-			return this._errors;
+		getErrors() {
+			return this.errors;
 		}
 	}
 }

+ 2 - 2
spine-ts/core/src/SkeletonBounds.ts

@@ -34,7 +34,7 @@ module spine {
 		minX = 0; minY = 0; maxX = 0; maxY = 0;
 		boundingBoxes = new Array<BoundingBoxAttachment>();
 		polygons = new Array<ArrayLike<number>>();
-		private _polygonPool = new Pool<ArrayLike<number>>(() => {
+		private polygonPool = new Pool<ArrayLike<number>>(() => {
 			return Utils.newFloatArray(16);
 		});
 
@@ -42,7 +42,7 @@ module spine {
 			if (skeleton == null) throw new Error("skeleton cannot be null.");
 			let boundingBoxes = this.boundingBoxes;
 			let polygons = this.polygons;
-			let polygonPool = this._polygonPool;
+			let polygonPool = this.polygonPool;
 			let slots = skeleton.slots;
 			let slotCount = slots.length;
 

+ 7 - 7
spine-ts/core/src/Utils.ts

@@ -161,27 +161,27 @@ module spine {
 	}
 
 	export class Pool<T> {
-		private _items = new Array<T>(16);
-		private _instantiator: () => T;
+		private items = new Array<T>(16);
+		private instantiator: () => T;
 
 		constructor (instantiator: () => T) {
-			this._instantiator = instantiator;
+			this.instantiator = instantiator;
 		}
 
 		obtain () {
-			return this._items.length > 0 ? this._items.pop() : this._instantiator();
+			return this.items.length > 0 ? this.items.pop() : this.instantiator();
 		}
 
 		free (item: T) {
-			this._items.push(item);
+			this.items.push(item);
 		}
 
 		freeAll (items: ArrayLike<T>) {
-			for (let i = 0; i < items.length; i++) this._items[i] = items[i];
+			for (let i = 0; i < items.length; i++) this.items[i] = items[i];
 		}
 
 		clear () {
-			this._items.length = 0;
+			this.items.length = 0;
 		}
 	}
 

+ 4 - 4
spine-ts/core/src/attachments/MeshAttachment.ts

@@ -37,7 +37,7 @@ module spine {
 		triangles: Array<number>;
 		color = new Color(1, 1, 1, 1);
 		hullLength: number;
-		private _parentMesh: MeshAttachment;
+		private parentMesh: MeshAttachment;
 		inheritDeform = false;
 		tempColor = new Color(0, 0, 0, 0);
 
@@ -150,16 +150,16 @@ module spine {
 		}
 
 		applyDeform (sourceAttachment: VertexAttachment): boolean {
-			return this == sourceAttachment || (this.inheritDeform && this._parentMesh == sourceAttachment);
+			return this == sourceAttachment || (this.inheritDeform && this.parentMesh == sourceAttachment);
 		}
 
 		getParentMesh () {
-			return this._parentMesh;
+			return this.parentMesh;
 		}
 
 		/** @param parentMesh May be null. */
 		setParentMesh (parentMesh: MeshAttachment) {
-			this._parentMesh = parentMesh;
+			this.parentMesh = parentMesh;
 			if (parentMesh != null) {
 				this.bones = parentMesh.bones;
 				this.vertices = parentMesh.vertices;

+ 22 - 22
spine-ts/threejs/src/MeshBatcher.ts

@@ -34,20 +34,20 @@ module spine.threejs {
 		mesh: THREE.Mesh;
 
 		private static VERTEX_SIZE = 9;
-		private _vertexBuffer: THREE.InterleavedBuffer;
-		private _vertices: Float32Array;
-		private _verticesLength = 0;		
-		private _indices: Uint16Array;
-		private _indicesLength = 0;
+		private vertexBuffer: THREE.InterleavedBuffer;
+		private vertices: Float32Array;
+		private verticesLength = 0;		
+		private indices: Uint16Array;
+		private indicesLength = 0;
 
 		constructor (mesh: THREE.Mesh, maxVertices: number = 10920) {
 			if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
 
-			let vertices = this._vertices = new Float32Array(maxVertices * MeshBatcher.VERTEX_SIZE);
-			let indices = this._indices = new Uint16Array(maxVertices * 3);
+			let vertices = this.vertices = new Float32Array(maxVertices * MeshBatcher.VERTEX_SIZE);
+			let indices = this.indices = new Uint16Array(maxVertices * 3);
 			this.mesh = mesh;			
 			let geo = new THREE.BufferGeometry();
-			let vertexBuffer = this._vertexBuffer = new THREE.InterleavedBuffer(vertices, MeshBatcher.VERTEX_SIZE);
+			let vertexBuffer = this.vertexBuffer = new THREE.InterleavedBuffer(vertices, MeshBatcher.VERTEX_SIZE);
 			vertexBuffer.dynamic = true;
 			geo.addAttribute("position", new THREE.InterleavedBufferAttribute(vertexBuffer, 3, 0, false));
 			geo.addAttribute("color", new THREE.InterleavedBufferAttribute(vertexBuffer, 4, 3, false));
@@ -60,14 +60,14 @@ module spine.threejs {
 		}
 
 		begin () {
-			this._verticesLength = 0;
-			this._indicesLength = 0;
+			this.verticesLength = 0;
+			this.indicesLength = 0;
 		}
 
 		batch (vertices: ArrayLike<number>, indices: ArrayLike<number>, z: number = 0) {
-			let indexStart = this._verticesLength / MeshBatcher.VERTEX_SIZE;
-			let vertexBuffer = this._vertices;
-			let i = this._verticesLength;
+			let indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE;
+			let vertexBuffer = this.vertices;
+			let i = this.verticesLength;
 			let j = 0;
 			for (;j < vertices.length;) {
 				vertexBuffer[i++] = vertices[j++];
@@ -80,24 +80,24 @@ module spine.threejs {
 				vertexBuffer[i++] = vertices[j++];
 				vertexBuffer[i++] = vertices[j++];
 			}			
-			this._verticesLength = i;			
+			this.verticesLength = i;			
 
-			let indicesArray = this._indices;
-			for (i = this._indicesLength, j = 0; j < indices.length; i++, j++)
+			let indicesArray = this.indices;
+			for (i = this.indicesLength, j = 0; j < indices.length; i++, j++)
 				indicesArray[i] = indices[j] + indexStart;
-			this._indicesLength += indices.length;			
+			this.indicesLength += indices.length;			
 		}
 
 		end () {
-			this._vertexBuffer.needsUpdate = true;
-			this._vertexBuffer.updateRange.offset = 0;
-			this._vertexBuffer.updateRange.count = this._verticesLength;
+			this.vertexBuffer.needsUpdate = true;
+			this.vertexBuffer.updateRange.offset = 0;
+			this.vertexBuffer.updateRange.count = this.verticesLength;
 			let geo = (<THREE.BufferGeometry>this.mesh.geometry);
 			geo.getIndex().needsUpdate = true;
 			geo.getIndex().updateRange.offset = 0;
-			geo.getIndex().updateRange.count = this._indicesLength;
+			geo.getIndex().updateRange.count = this.indicesLength;
 			geo.drawRange.start = 0;
-			geo.drawRange.count = this._indicesLength;				
+			geo.drawRange.count = this.indicesLength;				
 		}
 	}
 }

+ 4 - 4
spine-ts/threejs/src/SkeletonMesh.ts

@@ -36,7 +36,7 @@ module spine.threejs {
 		state: AnimationState;
 		zOffset: number = 0.1;
 
-		private _batcher: MeshBatcher;
+		private batcher: MeshBatcher;
 
 		static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
 
@@ -51,7 +51,7 @@ module spine.threejs {
 			material.side = THREE.DoubleSide;
 			material.transparent = true;
 			material.alphaTest = 0.5;									
-			this._batcher = new MeshBatcher(this);			
+			this.batcher = new MeshBatcher(this);			
 		}
 
 		update(deltaTime: number) {
@@ -76,7 +76,7 @@ module spine.threejs {
 			let vertices: ArrayLike<number> = null;
 			let triangles: Array<number>  = null;
 			let drawOrder = this.skeleton.drawOrder;
-			let batcher = this._batcher;
+			let batcher = this.batcher;
 			batcher.begin();
 			let z = 0;
 			let zOffset = this.zOffset;
@@ -110,7 +110,7 @@ module spine.threejs {
 					//	batcher.setBlendMode(getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this._gl, blendMode));
 					//}
 					
-					this._batcher.batch(vertices, triangles, z);
+					this.batcher.batch(vertices, triangles, z);
 					z += zOffset;				
 				}
 			}

+ 1 - 2
spine-ts/webgl/example/index.html

@@ -123,8 +123,7 @@ function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
 	return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
 }
 
-function calculateBounds(skeleton) {
-	var data = skeleton.data;
+function calculateBounds(skeleton) {	
 	skeleton.setToSetupPose();
 	skeleton.updateWorldTransform();
 	var offset = new spine.Vector2();

+ 15 - 15
spine-ts/webgl/src/GLTexture.ts

@@ -31,33 +31,33 @@
 
 module spine.webgl {
 	export class GLTexture extends Texture implements Disposable {
-		private _gl: WebGLRenderingContext;
-		private _texture: WebGLTexture;		
-		private _boundUnit = 0;
+		private gl: WebGLRenderingContext;
+		private texture: WebGLTexture;		
+		private boundUnit = 0;
 
 		constructor (gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps: boolean = false) {
 			super(image);
-			this._gl = gl;			
-			this._texture = gl.createTexture();			
+			this.gl = gl;			
+			this.texture = gl.createTexture();			
 			this.update(useMipMaps);
 		}
 
 		setFilters (minFilter: TextureFilter, magFilter: TextureFilter) {
-			let gl = this._gl;
+			let gl = this.gl;
 			this.bind();
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
 		}
 
 		setWraps (uWrap: TextureWrap, vWrap: TextureWrap) {
-			let gl = this._gl;
+			let gl = this.gl;
 			this.bind();
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap);
 		}
 
 		update (useMipMaps: boolean) {
-			let gl = this._gl;
+			let gl = this.gl;
 			this.bind();
 			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -68,21 +68,21 @@ module spine.webgl {
 		}
 
 		bind (unit: number = 0) {
-			let gl = this._gl;
-			this._boundUnit = unit;
+			let gl = this.gl;
+			this.boundUnit = unit;
 			gl.activeTexture(gl.TEXTURE0 + unit);
-			gl.bindTexture(gl.TEXTURE_2D, this._texture);
+			gl.bindTexture(gl.TEXTURE_2D, this.texture);
 		}
 
 		unbind () {
-			let gl = this._gl;
-			gl.activeTexture(gl.TEXTURE0 + this._boundUnit);
+			let gl = this.gl;
+			gl.activeTexture(gl.TEXTURE0 + this.boundUnit);
 			gl.bindTexture(gl.TEXTURE_2D, null);
 		}
 
 		dispose () {
-			let gl = this._gl;
-			gl.deleteTexture(this._texture);
+			let gl = this.gl;
+			gl.deleteTexture(this.texture);
 		}
 	}
 }

+ 68 - 68
spine-ts/webgl/src/Mesh.ts

@@ -31,122 +31,122 @@
 
 module spine.webgl {
 	export class Mesh implements Disposable {
-		private _gl: WebGLRenderingContext;
-		private _vertices:Float32Array;
-		private _verticesBuffer: WebGLBuffer;
-		private _verticesLength = 0;
-		private _dirtyVertices = false;
-		private _indices:Uint16Array;
-		private _indicesBuffer: WebGLBuffer;
-		private _indicesLength = 0;
-		private _dirtyIndices = false;
-		private _elementsPerVertex = 0;
-
-		attributes (): VertexAttribute[] { return this._attributes; }
-
-		maxVertices (): number { return this._vertices.length / this._elementsPerVertex; }
-		numVertices (): number { return this._verticesLength / this._elementsPerVertex; }
+		private gl: WebGLRenderingContext;
+		private vertices:Float32Array;
+		private verticesBuffer: WebGLBuffer;
+		private verticesLength = 0;
+		private dirtyVertices = false;
+		private indices:Uint16Array;
+		private indicesBuffer: WebGLBuffer;
+		private indicesLength = 0;
+		private dirtyIndices = false;
+		private elementsPerVertex = 0;
+
+		getAttributes (): VertexAttribute[] { return this.attributes; }
+
+		maxVertices (): number { return this.vertices.length / this.elementsPerVertex; }
+		numVertices (): number { return this.verticesLength / this.elementsPerVertex; }
 		setVerticesLength (length: number) {
-			this._dirtyVertices = true;
-			this._verticesLength = length;
+			this.dirtyVertices = true;
+			this.verticesLength = length;
 		}
-		vertices (): Float32Array { return this._vertices; }
+		getVertices (): Float32Array { return this.vertices; }
 
-		maxIndices (): number { return this._indices.length; }
-		numIndices (): number { return this._indicesLength; }
+		maxIndices (): number { return this.indices.length; }
+		numIndices (): number { return this.indicesLength; }
 		setIndicesLength (length: number) {
-			this._dirtyIndices = true;
-			this._indicesLength = length;
+			this.dirtyIndices = true;
+			this.indicesLength = length;
 		}
-		indices (): Uint16Array { return this._indices };
+		getIndices (): Uint16Array { return this.indices };
 
-		constructor (gl: WebGLRenderingContext, private _attributes: VertexAttribute[], maxVertices: number, maxIndices: number) {
-			this._gl = gl;
-			this._elementsPerVertex = 0;
-			for (let i = 0; i < _attributes.length; i++) {
-				this._elementsPerVertex += _attributes[i].numElements;
+		constructor (gl: WebGLRenderingContext, private attributes: VertexAttribute[], maxVertices: number, maxIndices: number) {
+			this.gl = gl;
+			this.elementsPerVertex = 0;
+			for (let i = 0; i < attributes.length; i++) {
+				this.elementsPerVertex += attributes[i].numElements;
 			}
-			this._vertices = new Float32Array(maxVertices * this._elementsPerVertex);
-			this._indices = new Uint16Array(maxIndices);
+			this.vertices = new Float32Array(maxVertices * this.elementsPerVertex);
+			this.indices = new Uint16Array(maxIndices);
 		}
 
 		setVertices (vertices: Array<number>) {
-			this._dirtyVertices = true;
-			if (vertices.length > this._vertices.length) throw Error("Mesh can't store more than " + this.maxVertices() + " vertices");
-			this._vertices.set(vertices, 0);
-			this._verticesLength = vertices.length;
+			this.dirtyVertices = true;
+			if (vertices.length > this.vertices.length) throw Error("Mesh can't store more than " + this.maxVertices() + " vertices");
+			this.vertices.set(vertices, 0);
+			this.verticesLength = vertices.length;
 		}
 
 		setIndices (indices: Array<number>) {
-			this._dirtyIndices = true;
-			if (indices.length > this._indices.length) throw Error("Mesh can't store more than " + this.maxIndices() + " indices");
-			this._indices.set(indices, 0);
-			this._indicesLength = indices.length;
+			this.dirtyIndices = true;
+			if (indices.length > this.indices.length) throw Error("Mesh can't store more than " + this.maxIndices() + " indices");
+			this.indices.set(indices, 0);
+			this.indicesLength = indices.length;
 		}
 
 		draw (shader: Shader, primitiveType: number) {
-			this.drawWithOffset(shader, primitiveType, 0, this._indicesLength > 0? this._indicesLength: this._verticesLength);
+			this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0? this.indicesLength: this.verticesLength);
 		}
 
 		drawWithOffset (shader: Shader, primitiveType: number, offset: number, count: number) {
-			let gl = this._gl;
-			if (this._dirtyVertices || this._dirtyIndices) this.update();
+			let gl = this.gl;
+			if (this.dirtyVertices || this.dirtyIndices) this.update();
 			this.bind(shader);
-			if (this._indicesLength > 0) gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
+			if (this.indicesLength > 0) gl.drawElements(primitiveType, count, gl.UNSIGNED_SHORT, offset * 2);
 			else gl.drawArrays(primitiveType, offset, count);
 			this.unbind(shader);
 		}
 
 		bind (shader: Shader) {
-			let gl = this._gl;
-			gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
+			let gl = this.gl;
+			gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
 			let offset = 0;
-			for (let i = 0; i < this._attributes.length; i++) {
-				let attrib = this._attributes[i];
+			for (let i = 0; i < this.attributes.length; i++) {
+				let attrib = this.attributes[i];
 				let location = shader.getAttributeLocation(attrib.name);
 				gl.enableVertexAttribArray(location);
-				gl.vertexAttribPointer(location, attrib.numElements, gl.FLOAT, false, this._elementsPerVertex * 4, offset * 4);
+				gl.vertexAttribPointer(location, attrib.numElements, gl.FLOAT, false, this.elementsPerVertex * 4, offset * 4);
 				offset += attrib.numElements;
 			}
-			if (this._indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer);
+			if (this.indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
 		}
 
 		unbind (shader: Shader) {
-			let gl = this._gl;
-			for (let i = 0; i < this._attributes.length; i++) {
-				let attrib = this._attributes[i];
+			let gl = this.gl;
+			for (let i = 0; i < this.attributes.length; i++) {
+				let attrib = this.attributes[i];
 				let location = shader.getAttributeLocation(attrib.name);
 				gl.disableVertexAttribArray(location);
 			}
 			gl.bindBuffer(gl.ARRAY_BUFFER, null);
-			if (this._indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+			if (this.indicesLength > 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
 		}
 
 		private update () {
-			let gl = this._gl;
-			if (this._dirtyVertices) {
-				if (!this._verticesBuffer) {
-					this._verticesBuffer = gl.createBuffer();
+			let gl = this.gl;
+			if (this.dirtyVertices) {
+				if (!this.verticesBuffer) {
+					this.verticesBuffer = gl.createBuffer();
 				}
-				gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
-				gl.bufferData(gl.ARRAY_BUFFER, this._vertices.subarray(0, this._verticesLength), gl.STATIC_DRAW);
-				this._dirtyVertices = false;
+				gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
+				gl.bufferData(gl.ARRAY_BUFFER, this.vertices.subarray(0, this.verticesLength), gl.STATIC_DRAW);
+				this.dirtyVertices = false;
 			}
 
-			if (this._dirtyIndices) {
-				if (!this._indicesBuffer) {
-					this._indicesBuffer = gl.createBuffer();
+			if (this.dirtyIndices) {
+				if (!this.indicesBuffer) {
+					this.indicesBuffer = gl.createBuffer();
 				}
-				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer);
-				gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices.subarray(0, this._indicesLength), gl.STATIC_DRAW);
-				this._dirtyIndices = false;
+				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+				gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices.subarray(0, this.indicesLength), gl.STATIC_DRAW);
+				this.dirtyIndices = false;
 			}
 		}
 
 		dispose () {
-			let gl = this._gl;
-			gl.deleteBuffer(this._verticesBuffer);
-			gl.deleteBuffer(this._indicesBuffer);
+			let gl = this.gl;
+			gl.deleteBuffer(this.verticesBuffer);
+			gl.deleteBuffer(this.indicesBuffer);
 		}
 	}
 

+ 51 - 51
spine-ts/webgl/src/PolygonBatcher.ts

@@ -31,91 +31,91 @@
 
 module spine.webgl {
 	export class PolygonBatcher {
-		private _gl: WebGLRenderingContext;
-		private _drawCalls: number;
-		private _drawing = false;
-		private _mesh: Mesh;
-		private _shader: Shader = null;
-		private _lastTexture: GLTexture = null;
-		private _verticesLength = 0;
-		private _indicesLength = 0;
-		private _srcBlend: number = WebGLRenderingContext.SRC_ALPHA;
-		private _dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
+		private gl: WebGLRenderingContext;
+		private drawCalls: number;
+		private drawing = false;
+		private mesh: Mesh;
+		private shader: Shader = null;
+		private lastTexture: GLTexture = null;
+		private verticesLength = 0;
+		private indicesLength = 0;
+		private srcBlend: number = WebGLRenderingContext.SRC_ALPHA;
+		private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
 
 		constructor (gl: WebGLRenderingContext, maxVertices: number = 10920) {
 			if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
-			this._gl = gl;
-			this._mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()], maxVertices, maxVertices * 3);
+			this.gl = gl;
+			this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()], maxVertices, maxVertices * 3);
 		}
 
 		begin (shader: Shader) {
-			let gl = this._gl;
-			if (this._drawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
-			this._drawCalls = 0;
-			this._shader = shader;
-			this._lastTexture = null;
-			this._drawing = true;
+			let gl = this.gl;
+			if (this.drawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
+			this.drawCalls = 0;
+			this.shader = shader;
+			this.lastTexture = null;
+			this.drawing = true;
 
 			gl.enable(gl.BLEND);
-			gl.blendFunc(this._srcBlend, this._dstBlend);
+			gl.blendFunc(this.srcBlend, this.dstBlend);
 		}
 
 		setBlendMode (srcBlend: number, dstBlend: number) {
-			let gl = this._gl;
-			this._srcBlend = srcBlend;
-			this._dstBlend = dstBlend;
-			if (this._drawing) {
+			let gl = this.gl;
+			this.srcBlend = srcBlend;
+			this.dstBlend = dstBlend;
+			if (this.drawing) {
 				this.flush();
-				gl.blendFunc(this._srcBlend, this._dstBlend);
+				gl.blendFunc(this.srcBlend, this.dstBlend);
 			}
 		}
 
 		draw (texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>) {
-			if (texture != this._lastTexture) {
+			if (texture != this.lastTexture) {
 				this.flush();
-				this._lastTexture = texture;
+				this.lastTexture = texture;
 				texture.bind();
-			} else if (this._verticesLength + vertices.length > this._mesh.vertices().length ||
-					this._indicesLength + indices.length > this._mesh.indices().length) {
+			} else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
+					this.indicesLength + indices.length > this.mesh.getIndices().length) {
 				this.flush();
 			}
 
-			let indexStart = this._mesh.numVertices();
-			this._mesh.vertices().set(vertices, this._verticesLength);
-			this._verticesLength += vertices.length;
-			this._mesh.setVerticesLength(this._verticesLength)
+			let indexStart = this.mesh.numVertices();
+			this.mesh.getVertices().set(vertices, this.verticesLength);
+			this.verticesLength += vertices.length;
+			this.mesh.setVerticesLength(this.verticesLength)
 
-			let indicesArray = this._mesh.indices();
-			for (let i = this._indicesLength, j = 0; j < indices.length; i++, j++)
+			let indicesArray = this.mesh.getIndices();
+			for (let i = this.indicesLength, j = 0; j < indices.length; i++, j++)
 				indicesArray[i] = indices[j] + indexStart;
-			this._indicesLength += indices.length;
-			this._mesh.setIndicesLength(this._indicesLength);
+			this.indicesLength += indices.length;
+			this.mesh.setIndicesLength(this.indicesLength);
 		}
 
 		private flush () {
-			let gl = this._gl;
-			if (this._verticesLength == 0) return;
+			let gl = this.gl;
+			if (this.verticesLength == 0) return;
 
-			this._mesh.draw(this._shader, gl.TRIANGLES);
+			this.mesh.draw(this.shader, gl.TRIANGLES);
 
-			this._verticesLength = 0;
-			this._indicesLength = 0;
-			this._mesh.setVerticesLength(0);
-			this._mesh.setIndicesLength(0);
-			this._drawCalls++;
+			this.verticesLength = 0;
+			this.indicesLength = 0;
+			this.mesh.setVerticesLength(0);
+			this.mesh.setIndicesLength(0);
+			this.drawCalls++;
 		}
 
 		end () {
-			let gl = this._gl;
-			if (!this._drawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
-			if (this._verticesLength > 0 || this._indicesLength > 0) this.flush();
-			this._shader = null;
-			this._lastTexture = null;
-			this._drawing = false;
+			let gl = this.gl;
+			if (!this.drawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
+			if (this.verticesLength > 0 || this.indicesLength > 0) this.flush();
+			this.shader = null;
+			this.lastTexture = null;
+			this.drawing = false;
 
 			gl.disable(gl.BLEND);
 		}
 
-		drawCalls () { return this._drawCalls; }
+		getDrawCalls () { return this.drawCalls; }
 	}
 }

+ 50 - 50
spine-ts/webgl/src/Shader.ts

@@ -37,29 +37,29 @@ module spine.webgl {
 		public static TEXCOORDS = "a_texCoords";
 		public static SAMPLER = "u_texture";
 
-		private _gl: WebGLRenderingContext;
-		private _vs: WebGLShader = null;
-		private _fs: WebGLShader = null;
-		private _program: WebGLProgram = null;
-		private _tmp2x2: Float32Array = new Float32Array(2 * 2);
-		private _tmp3x3: Float32Array = new Float32Array(3 * 3);
-		private _tmp4x4: Float32Array = new Float32Array(4 * 4);
-
-		public program () { return this._program; }
-		public vertexShader () { return this._vertexShader; }
-		public fragmentShader () { return this._fragmentShader; }
-
-		constructor (gl: WebGLRenderingContext, private _vertexShader: string, private _fragmentShader: string) {
-			this._gl = gl;
+		private gl: WebGLRenderingContext;
+		private vs: WebGLShader = null;
+		private fs: WebGLShader = null;
+		private program: WebGLProgram = null;
+		private tmp2x2: Float32Array = new Float32Array(2 * 2);
+		private tmp3x3: Float32Array = new Float32Array(3 * 3);
+		private tmp4x4: Float32Array = new Float32Array(4 * 4);
+
+		public getProgram () { return this.program; }
+		public getVertexShader () { return this.vertexShader; }
+		public getFragmentShader () { return this.fragmentShader; }
+
+		constructor (gl: WebGLRenderingContext, private vertexShader: string, private fragmentShader: string) {
+			this.gl = gl;
 			this.compile();
 		}
 
 		private compile () {
-			let gl = this._gl;
+			let gl = this.gl;
 			try {
-				this._vs = this.compileShader(gl.VERTEX_SHADER, this._vertexShader);
-				this._fs = this.compileShader(gl.FRAGMENT_SHADER, this._fragmentShader);
-				this._program = this.compileProgram(this._vs, this._fs);
+				this.vs = this.compileShader(gl.VERTEX_SHADER, this.vertexShader);
+				this.fs = this.compileShader(gl.FRAGMENT_SHADER, this.fragmentShader);
+				this.program = this.compileProgram(this.vs, this.fs);
 			} catch (e) {
 				this.dispose();
 				throw e;
@@ -67,7 +67,7 @@ module spine.webgl {
 		}
 
 		private compileShader (type: number, source: string) {
-			let gl = this._gl;
+			let gl = this.gl;
 			let shader = gl.createShader(type);
 			gl.shaderSource(shader, source);
 			gl.compileShader(shader);
@@ -80,7 +80,7 @@ module spine.webgl {
 		}
 
 		private compileProgram (vs: WebGLShader, fs: WebGLShader) {
-			let gl = this._gl;
+			let gl = this.gl;
 			let program = gl.createProgram();
 			gl.attachShader(program, vs);
 			gl.attachShader(program, fs);
@@ -95,80 +95,80 @@ module spine.webgl {
 		}
 
 		public bind () {
-			this._gl.useProgram(this._program);
+			this.gl.useProgram(this.program);
 		}
 
 		public unbind () {
-			this._gl.useProgram(null);
+			this.gl.useProgram(null);
 		}
 
 		public setUniformi (uniform: string, value: number) {
-			this._gl.uniform1i(this.getUniformLocation(uniform), value);
+			this.gl.uniform1i(this.getUniformLocation(uniform), value);
 		}
 
 		public setUniformf (uniform: string, value: number) {
-			this._gl.uniform1f(this.getUniformLocation(uniform), value);
+			this.gl.uniform1f(this.getUniformLocation(uniform), value);
 		}
 
 		public setUniform2f (uniform: string, value: number, value2: number) {
-			this._gl.uniform2f(this.getUniformLocation(uniform), value, value2);
+			this.gl.uniform2f(this.getUniformLocation(uniform), value, value2);
 		}
 
 		public setUniform3f (uniform: string, value: number, value2: number, value3: number) {
-			this._gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
+			this.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
 		}
 
 		public setUniform4f (uniform: string, value: number, value2: number, value3: number, value4: number) {
-			this._gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
+			this.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
 		}
 
 		public setUniform2x2f (uniform: string, value: ArrayLike<number>) {
-			let gl = this._gl;
-			this._tmp2x2.set(value);
-			gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this._tmp2x2);
+			let gl = this.gl;
+			this.tmp2x2.set(value);
+			gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this.tmp2x2);
 		}
 
 		public setUniform3x3f (uniform: string, value: ArrayLike<number>) {
-			let gl = this._gl;
-			this._tmp3x3.set(value);
-			gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this._tmp3x3);
+			let gl = this.gl;
+			this.tmp3x3.set(value);
+			gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this.tmp3x3);
 		}
 
 		public setUniform4x4f (uniform: string, value: ArrayLike<number>) {
-			let gl = this._gl;
-			this._tmp4x4.set(value);
-			gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this._tmp4x4);
+			let gl = this.gl;
+			this.tmp4x4.set(value);
+			gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this.tmp4x4);
 		}
 
 		public getUniformLocation (uniform: string): WebGLUniformLocation {
-			let gl = this._gl;
-			let location = gl.getUniformLocation(this._program, uniform);
+			let gl = this.gl;
+			let location = gl.getUniformLocation(this.program, uniform);
 			if (!location) throw new Error(`Couldn't find location for uniform ${uniform}`);
 			return location;
 		}
 
 		public getAttributeLocation (attribute: string): number {
-			let gl = this._gl;
-			let location = gl.getAttribLocation(this._program, attribute);
+			let gl = this.gl;
+			let location = gl.getAttribLocation(this.program, attribute);
 			if (location == -1) throw new Error(`Couldn't find location for attribute ${attribute}`);
 			return location;
 		}
 
 		public dispose () {
-			let gl = this._gl;
-			if (this._vs) {
-				gl.deleteShader(this._vs);
-				this._vs = null;
+			let gl = this.gl;
+			if (this.vs) {
+				gl.deleteShader(this.vs);
+				this.vs = null;
 			}
 
-			if (this._fs) {
-				gl.deleteShader(this._fs);
-				this._fs = null;
+			if (this.fs) {
+				gl.deleteShader(this.fs);
+				this.fs = null;
 			}
 
-			if (this._program) {
-				gl.deleteProgram(this._program);
-				this._program = null;
+			if (this.program) {
+				gl.deleteProgram(this.program);
+				this.program = null;
 			}
 		}
 

+ 3 - 3
spine-ts/webgl/src/SkeletonRenderer.ts

@@ -34,10 +34,10 @@ module spine.webgl {
 		static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
 
 		premultipliedAlpha = false;
-		private _gl: WebGLRenderingContext;
+		private gl: WebGLRenderingContext;
 
 		constructor (gl: WebGLRenderingContext) {
-			this._gl = gl;
+			this.gl = gl;
 		}		
 
 		draw (batcher: PolygonBatcher, skeleton: Skeleton) {
@@ -68,7 +68,7 @@ module spine.webgl {
 					let slotBlendMode = slot.data.blendMode;
 					if (slotBlendMode != blendMode) {
 						blendMode = slotBlendMode;
-						batcher.setBlendMode(getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this._gl, blendMode));
+						batcher.setBlendMode(getSourceGLBlendMode(this.gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this.gl, blendMode));
 					}
 					batcher.draw(texture, vertices, triangles);
 				}

+ 195 - 0
spine-ts/widget/example/assets/spineboy.atlas

@@ -0,0 +1,195 @@
+
+spineboy.png
+size: 1024,1024
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+eye_indifferent
+  rotate: false
+  xy: 550, 694
+  size: 93, 89
+  orig: 93, 89
+  offset: 0, 0
+  index: -1
+eye_surprised
+  rotate: false
+  xy: 834, 856
+  size: 93, 89
+  orig: 93, 89
+  offset: 0, 0
+  index: -1
+front_bracer
+  rotate: false
+  xy: 678, 774
+  size: 58, 80
+  orig: 58, 80
+  offset: 0, 0
+  index: -1
+front_fist_closed
+  rotate: true
+  xy: 466, 593
+  size: 75, 82
+  orig: 75, 82
+  offset: 0, 0
+  index: -1
+front_fist_open
+  rotate: false
+  xy: 550, 605
+  size: 86, 87
+  orig: 86, 87
+  offset: 0, 0
+  index: -1
+front_foot
+  rotate: false
+  xy: 550, 785
+  size: 126, 69
+  orig: 126, 69
+  offset: 0, 0
+  index: -1
+front_foot_bend1
+  rotate: true
+  xy: 375, 492
+  size: 128, 70
+  orig: 128, 70
+  offset: 0, 0
+  index: -1
+front_foot_bend2
+  rotate: true
+  xy: 275, 330
+  size: 108, 93
+  orig: 108, 93
+  offset: 0, 0
+  index: -1
+front_shin
+  rotate: false
+  xy: 466, 670
+  size: 82, 184
+  orig: 82, 184
+  offset: 0, 0
+  index: -1
+front_thigh
+  rotate: false
+  xy: 214, 208
+  size: 48, 112
+  orig: 48, 112
+  offset: 0, 0
+  index: -1
+front_upper_arm
+  rotate: false
+  xy: 214, 109
+  size: 54, 97
+  orig: 54, 97
+  offset: 0, 0
+  index: -1
+goggles
+  rotate: false
+  xy: 466, 856
+  size: 261, 166
+  orig: 261, 166
+  offset: 0, 0
+  index: -1
+gun
+  rotate: false
+  xy: 2, 117
+  size: 210, 203
+  orig: 210, 203
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 2, 322
+  size: 271, 298
+  orig: 271, 298
+  offset: 0, 0
+  index: -1
+mouth_grind
+  rotate: false
+  xy: 929, 896
+  size: 93, 59
+  orig: 93, 59
+  offset: 0, 0
+  index: -1
+mouth_oooo
+  rotate: false
+  xy: 929, 835
+  size: 93, 59
+  orig: 93, 59
+  offset: 0, 0
+  index: -1
+mouth_smile
+  rotate: false
+  xy: 447, 532
+  size: 93, 59
+  orig: 93, 59
+  offset: 0, 0
+  index: -1
+muzzle
+  rotate: false
+  xy: 2, 622
+  size: 462, 400
+  orig: 462, 400
+  offset: 0, 0
+  index: -1
+neck
+  rotate: false
+  xy: 796, 819
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+rear_bracer
+  rotate: false
+  xy: 738, 788
+  size: 56, 72
+  orig: 56, 72
+  offset: 0, 0
+  index: -1
+rear_foot
+  rotate: true
+  xy: 2, 2
+  size: 113, 60
+  orig: 113, 60
+  offset: 0, 0
+  index: -1
+rear_foot_bend1
+  rotate: false
+  xy: 64, 49
+  size: 117, 66
+  orig: 117, 66
+  offset: 0, 0
+  index: -1
+rear_foot_bend2
+  rotate: false
+  xy: 729, 862
+  size: 103, 83
+  orig: 103, 83
+  offset: 0, 0
+  index: -1
+rear_shin
+  rotate: true
+  xy: 729, 947
+  size: 75, 178
+  orig: 75, 178
+  offset: 0, 0
+  index: -1
+rear_thigh
+  rotate: true
+  xy: 909, 957
+  size: 65, 104
+  orig: 65, 104
+  offset: 0, 0
+  index: -1
+rear_upper_arm
+  rotate: true
+  xy: 447, 483
+  size: 47, 87
+  orig: 47, 87
+  offset: 0, 0
+  index: -1
+torso
+  rotate: false
+  xy: 275, 440
+  size: 98, 180
+  orig: 98, 180
+  offset: 0, 0
+  index: -1

+ 2412 - 0
spine-ts/widget/example/assets/spineboy.json

@@ -0,0 +1,2412 @@
+{
+"skeleton": { "hash": "rPoYyBLFG6F0CGZ5wsUEBKDJU9U", "spine": "3.3.07", "width": 470.71, "height": 731.57, "images": "./images/" },
+"bones": [
+	{ "name": "hip", "y": 247.47 },
+	{ "name": "torso", "parent": "hip", "length": 127.55, "rotation": 103.82, "x": -1.61, "y": 4.9, "color": "e0da19ff" },
+	{ "name": "front_upper_arm", "parent": "torso", "length": 69.45, "rotation": 168.37, "x": 103.75, "y": 19.32, "color": "00ff04ff" },
+	{
+		"name": "front_bracer",
+		"parent": "front_upper_arm",
+		"length": 40.57,
+		"rotation": 18.29,
+		"x": 68.8,
+		"y": -0.68,
+		"color": "00ff04ff"
+	},
+	{ "name": "front_fist", "parent": "front_bracer", "length": 65.38, "rotation": 12.43, "x": 40.56, "y": 0.19, "color": "00ff04ff" },
+	{ "name": "front_thigh", "parent": "hip", "length": 74.8, "rotation": -95.51, "x": -17.45, "y": -11.64, "color": "00ff04ff" },
+	{ "name": "front_shin", "parent": "front_thigh", "length": 128.76, "rotation": -2.21, "x": 78.69, "y": 1.6, "color": "00ff04ff" },
+	{ "name": "front_foot", "parent": "front_shin", "length": 91.34, "rotation": 77.9, "x": 128.75, "y": -0.33, "color": "00ff04ff" },
+	{ "name": "rear_upper_arm", "parent": "torso", "length": 51.93, "rotation": -169.55, "x": 92.35, "y": -19.22, "color": "ff000dff" },
+	{ "name": "rear_bracer", "parent": "rear_upper_arm", "length": 34.55, "rotation": 23.15, "x": 51.35, "color": "ff000dff" },
+	{ "name": "gun", "parent": "rear_bracer", "length": 43.1, "rotation": 5.34, "x": 34.42, "y": -0.45, "color": "ff000dff" },
+	{ "name": "gunTip", "parent": "gun", "rotation": 6.83, "x": 201.04, "y": 52.13, "color": "ff000dff" },
+	{ "name": "neck", "parent": "torso", "length": 25.45, "rotation": -31.53, "x": 127.49, "y": -0.3, "color": "e0da19ff" },
+	{ "name": "head", "parent": "neck", "length": 263.57, "rotation": 23.18, "x": 27.66, "y": -0.25, "color": "e0da19ff" },
+	{ "name": "rear_thigh", "parent": "hip", "length": 85.71, "rotation": -72.54, "x": 8.91, "y": -5.62, "color": "ff000dff" },
+	{ "name": "rear_shin", "parent": "rear_thigh", "length": 121.87, "rotation": -19.83, "x": 86.1, "y": -1.32, "color": "ff000dff" },
+	{ "name": "rear_foot", "parent": "rear_shin", "length": 82.57, "rotation": 69.3, "x": 121.45, "y": -0.75, "color": "ff000dff" }
+],
+"slots": [
+	{ "name": "rear_upper_arm", "bone": "rear_upper_arm", "attachment": "rear_upper_arm" },
+	{ "name": "rear_bracer", "bone": "rear_bracer", "attachment": "rear_bracer" },
+	{ "name": "gun", "bone": "gun", "attachment": "gun" },
+	{ "name": "rear_foot", "bone": "rear_foot", "attachment": "rear_foot" },
+	{ "name": "rear_thigh", "bone": "rear_thigh", "attachment": "rear_thigh" },
+	{ "name": "rear_shin", "bone": "rear_shin", "attachment": "rear_shin" },
+	{ "name": "neck", "bone": "neck", "attachment": "neck" },
+	{ "name": "torso", "bone": "torso", "attachment": "torso" },
+	{ "name": "front_upper_arm", "bone": "front_upper_arm", "attachment": "front_upper_arm" },
+	{ "name": "head", "bone": "head", "attachment": "head" },
+	{ "name": "eye", "bone": "head", "attachment": "eye_indifferent" },
+	{ "name": "front_thigh", "bone": "front_thigh", "attachment": "front_thigh" },
+	{ "name": "front_foot", "bone": "front_foot", "attachment": "front_foot" },
+	{ "name": "front_shin", "bone": "front_shin", "attachment": "front_shin" },
+	{ "name": "mouth", "bone": "head", "attachment": "mouth_smile" },
+	{ "name": "goggles", "bone": "head", "attachment": "goggles" },
+	{ "name": "front_bracer", "bone": "front_bracer", "attachment": "front_bracer" },
+	{ "name": "front_fist", "bone": "front_fist", "attachment": "front_fist_closed" },
+	{ "name": "muzzle", "bone": "gunTip", "blend": "additive" },
+	{ "name": "head-bb", "bone": "head" }
+],
+"skins": {
+	"default": {
+		"eye": {
+			"eye_indifferent": { "x": 85.72, "y": -28.18, "rotation": -70.63, "width": 93, "height": 89 },
+			"eye_surprised": { "x": 85.72, "y": -28.18, "rotation": -70.63, "width": 93, "height": 89 }
+		},
+		"front_bracer": {
+			"front_bracer": { "x": 12.03, "y": -1.67, "rotation": 79.59, "width": 58, "height": 80 }
+		},
+		"front_fist": {
+			"front_fist_closed": { "x": 35.49, "y": 6, "rotation": 67.16, "width": 75, "height": 82 },
+			"front_fist_open": { "x": 39.56, "y": 7.76, "rotation": 67.16, "width": 86, "height": 87 }
+		},
+		"front_foot": {
+			"front_foot": { "x": 29.51, "y": 7.83, "rotation": 18.68, "width": 126, "height": 69 },
+			"front_foot_bend1": { "x": 29.51, "y": 7.83, "rotation": 18.68, "width": 128, "height": 70 },
+			"front_foot_bend2": { "x": 16.07, "y": 13.83, "rotation": 18.68, "width": 108, "height": 93 }
+		},
+		"front_shin": {
+			"front_shin": { "x": 55.11, "y": -3.54, "rotation": 96.59, "width": 82, "height": 184 }
+		},
+		"front_thigh": {
+			"front_thigh": { "x": 42.47, "y": 4.44, "rotation": 84.86, "width": 48, "height": 112 }
+		},
+		"front_upper_arm": {
+			"front_upper_arm": { "x": 28.3, "y": 7.37, "rotation": 97.89, "width": 54, "height": 97 }
+		},
+		"goggles": {
+			"goggles": { "x": 97.07, "y": 6.54, "rotation": -70.63, "width": 261, "height": 166 }
+		},
+		"gun": {
+			"gun": { "x": 77.3, "y": 16.4, "rotation": 60.82, "width": 210, "height": 203 }
+		},
+		"head": {
+			"head": { "x": 128.95, "y": 0.29, "rotation": -70.63, "width": 271, "height": 298 }
+		},
+		"head-bb": {
+			"head": {
+				"type": "boundingbox",
+				"vertexCount": 6,
+				"vertices": [ -19.14, -70.3, 40.8, -118.07, 257.77, -115.61, 285.16, 57.18, 120.77, 164.95, -5.06, 76.94 ]
+			}
+		},
+		"mouth": {
+			"mouth_grind": { "x": 23.68, "y": -32.23, "rotation": -70.63, "width": 93, "height": 59 },
+			"mouth_oooo": { "x": 23.68, "y": -32.23, "rotation": -70.63, "width": 93, "height": 59 },
+			"mouth_smile": { "x": 23.68, "y": -32.23, "rotation": -70.63, "width": 93, "height": 59 }
+		},
+		"muzzle": {
+			"muzzle": { "x": 18.25, "y": 5.44, "rotation": 0.15, "width": 462, "height": 400 }
+		},
+		"neck": {
+			"neck": { "x": 9.76, "y": -3.01, "rotation": -55.22, "width": 36, "height": 41 }
+		},
+		"rear_bracer": {
+			"rear_bracer": { "x": 11.15, "y": -2.2, "rotation": 66.17, "width": 56, "height": 72 }
+		},
+		"rear_foot": {
+			"rear_foot": { "x": 31.51, "y": 3.57, "rotation": 23.07, "width": 113, "height": 60 },
+			"rear_foot_bend1": { "x": 34.39, "y": 4.8, "rotation": 23.07, "width": 117, "height": 66 },
+			"rear_foot_bend2": { "x": 30.38, "y": 12.62, "rotation": 23.07, "width": 103, "height": 83 }
+		},
+		"rear_shin": {
+			"rear_shin": { "x": 58.29, "y": -2.75, "rotation": 92.37, "width": 75, "height": 178 }
+		},
+		"rear_thigh": {
+			"rear_thigh": { "x": 33.1, "y": -4.11, "rotation": 72.54, "width": 65, "height": 104 }
+		},
+		"rear_upper_arm": {
+			"rear_upper_arm": { "x": 21.12, "y": 4.08, "rotation": 89.32, "width": 47, "height": 87 }
+		},
+		"torso": {
+			"torso": { "x": 63.61, "y": 7.12, "rotation": -94.53, "width": 98, "height": 180 }
+		}
+	}
+},
+"events": {
+	"footstep": {},
+	"headAttach": { "int": 3, "float": 4 },
+	"headBehind": { "int": 5, "float": 6, "string": "setup" },
+	"headPop": { "int": 1, "float": 2 }
+},
+"animations": {
+	"death": {
+		"slots": {
+			"eye": {
+				"attachment": [
+					{ "time": 0, "name": "eye_surprised" },
+					{ "time": 0.4666, "name": "eye_indifferent" },
+					{ "time": 2.2333, "name": "eye_surprised" },
+					{ "time": 4.5333, "name": "eye_indifferent" }
+				]
+			},
+			"front_fist": {
+				"attachment": [
+					{ "time": 0, "name": "front_fist_open" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0, "name": "mouth_oooo" },
+					{ "time": 2.2333, "name": "mouth_grind" },
+					{ "time": 4.5333, "name": "mouth_oooo" }
+				]
+			}
+		},
+		"bones": {
+			"head": {
+				"rotate": [
+					{ "time": 0, "angle": -2.82 },
+					{ "time": 0.1333, "angle": -28.74 },
+					{ "time": 0.2333, "angle": 11.42 },
+					{ "time": 0.3333, "angle": -50.24 },
+					{ "time": 0.4, "angle": -72.66, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -72.66 },
+					{ "time": 0.5, "angle": -20.24 },
+					{ "time": 0.5666, "angle": -85.28, "curve": "stepped" },
+					{ "time": 0.9333, "angle": -85.28, "curve": "stepped" },
+					{ "time": 2.2333, "angle": -85.28 },
+					{ "time": 2.5, "angle": -51.96, "curve": "stepped" },
+					{ "time": 4.5333, "angle": -51.96 },
+					{ "time": 4.6666, "angle": -85.28 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": -2.82 },
+					{ "time": 0.1333, "angle": 12.35 },
+					{ "time": 0.2333, "angle": 29.89 },
+					{ "time": 0.3, "angle": 70.36 },
+					{ "time": 0.4, "angle": -10.22, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -10.22 },
+					{ "time": 0.5, "angle": 2.92 },
+					{ "time": 0.5666, "angle": 47.94, "curve": "stepped" },
+					{ "time": 2.2333, "angle": 47.94 },
+					{ "time": 2.5, "angle": 18.5, "curve": "stepped" },
+					{ "time": 4.5333, "angle": 18.5 },
+					{ "time": 4.6666, "angle": 47.94 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"torso": {
+				"rotate": [
+					{ "time": 0, "angle": -8.61 },
+					{ "time": 0.1333, "angle": 28.19 },
+					{ "time": 0.2666, "angle": -280.19 },
+					{ "time": 0.4, "angle": -237.22, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -237.22 },
+					{ "time": 0.5, "angle": 76.03, "curve": "stepped" },
+					{ "time": 0.8, "angle": 76.03, "curve": "stepped" },
+					{ "time": 0.9333, "angle": 76.03, "curve": "stepped" },
+					{ "time": 2.2333, "angle": 76.03 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 2.2333, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": -38.85 },
+					{ "time": 0.1333, "angle": -299.58 },
+					{ "time": 0.2666, "angle": -244.74 },
+					{ "time": 0.4, "angle": -292.35 },
+					{ "time": 0.4333, "angle": -315.84 },
+					{ "time": 0.5, "angle": -347.94 },
+					{ "time": 0.7, "angle": -347.33, "curve": "stepped" },
+					{ "time": 2.2333, "angle": -347.33 },
+					{ "time": 2.7, "angle": -290.68 },
+					{ "time": 2.7666, "angle": -285.1 },
+					{ "time": 4.6666, "angle": -290.68 },
+					{ "time": 4.8, "angle": 8.61 },
+					{ "time": 4.8666, "angle": 10.94 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": -44.69 },
+					{ "time": 0.1333, "angle": 112.26 },
+					{ "time": 0.2666, "angle": 129.07 },
+					{ "time": 0.4, "angle": 134.94, "curve": "stepped" },
+					{ "time": 0.4333, "angle": 134.94 },
+					{ "time": 0.5666, "angle": 172.6, "curve": "stepped" },
+					{ "time": 0.9333, "angle": 172.6, "curve": "stepped" },
+					{ "time": 2.2333, "angle": 172.6 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 21.88 },
+					{ "time": 0.1333, "angle": 11.48 },
+					{ "time": 0.2666, "angle": -18.81 },
+					{ "time": 0.4, "angle": -18.92 },
+					{ "time": 0.4333, "angle": -18.28 },
+					{ "time": 0.5, "angle": 60.61 },
+					{ "time": 0.7, "angle": -18.87, "curve": "stepped" },
+					{ "time": 2.2333, "angle": -18.87 },
+					{ "time": 2.7, "angle": -1.95, "curve": "stepped" },
+					{ "time": 4.6666, "angle": -1.95 },
+					{ "time": 4.8, "angle": 34.55 },
+					{ "time": 4.9333, "angle": -18.74 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_fist": {
+				"rotate": [
+					{ "time": 0, "angle": -2.33 },
+					{ "time": 0.2666, "angle": 26.34 },
+					{ "time": 0.7, "angle": -6.07, "curve": "stepped" },
+					{ "time": 2.2333, "angle": -6.07 },
+					{ "time": 2.7, "angle": 5.72, "curve": "stepped" },
+					{ "time": 4.6666, "angle": 5.72 },
+					{ "time": 4.8666, "angle": -6.52 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 10.36 },
+					{ "time": 0.1333, "angle": -23.12 },
+					{ "time": 0.2666, "angle": -23.11 },
+					{ "time": 0.4, "angle": -23.16, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -23.16 },
+					{ "time": 0.5666, "angle": -23.2, "curve": "stepped" },
+					{ "time": 0.9333, "angle": -23.2, "curve": "stepped" },
+					{ "time": 2.2333, "angle": -23.2 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{ "time": 0, "angle": -2.78 },
+					{ "time": 0.1333, "angle": -24.58 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"hip": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 0.9333, "angle": 0, "curve": "stepped" },
+					{ "time": 2.2333, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 },
+					{ "time": 0.2, "x": 50.34, "y": 151.73 },
+					{ "time": 0.4, "x": 5.16, "y": -119.64, "curve": "stepped" },
+					{ "time": 0.4333, "x": 5.16, "y": -119.64 },
+					{ "time": 0.5, "x": 50.34, "y": -205.18, "curve": "stepped" },
+					{ "time": 0.8, "x": 50.34, "y": -205.18, "curve": "stepped" },
+					{ "time": 0.9333, "x": 50.34, "y": -205.18, "curve": "stepped" },
+					{ "time": 2.2333, "x": 50.34, "y": -205.18 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1333, "angle": 8.47 },
+					{ "time": 0.2666, "angle": 115.95 },
+					{ "time": 0.4, "angle": 180.66, "curve": "stepped" },
+					{ "time": 0.4333, "angle": 180.66 },
+					{ "time": 0.5, "angle": 155.22 },
+					{ "time": 0.6, "angle": 97.73 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_shin": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1333, "angle": -27.37 },
+					{ "time": 0.2666, "angle": -35.1 },
+					{ "time": 0.4, "angle": -37.72, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -37.72 },
+					{ "time": 0.5, "angle": -40.06 },
+					{ "time": 0.6, "angle": 2.76 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1333, "angle": 70.45 },
+					{ "time": 0.2666, "angle": 155.34 },
+					{ "time": 0.4, "angle": 214.31, "curve": "stepped" },
+					{ "time": 0.4333, "angle": 214.31 },
+					{ "time": 0.5, "angle": 169.67 },
+					{ "time": 0.8, "angle": 83.27 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_shin": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1333, "angle": 18.93 },
+					{ "time": 0.2666, "angle": -21.04 },
+					{ "time": 0.4, "angle": -29.93, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -29.93 },
+					{ "time": 0.5, "angle": -16.79 },
+					{ "time": 0.8, "angle": 7.77 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1333, "angle": -11.62 },
+					{ "time": 0.4, "angle": -45.59, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -45.59 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.4, "angle": -48.75, "curve": "stepped" },
+					{ "time": 0.4333, "angle": -48.75 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"gunTip": {
+				"rotate": [
+					{ "time": 0, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			}
+		}
+	},
+	"hit": {
+		"slots": {
+			"front_fist": {
+				"attachment": [
+					{ "time": 0.1666, "name": "front_fist_open" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0, "name": "mouth_grind" },
+					{ "time": 0.3333, "name": "mouth_smile" }
+				]
+			}
+		},
+		"bones": {
+			"torso": {
+				"rotate": [
+					{ "time": 0, "angle": 56.42 },
+					{ "time": 0.3333, "angle": 8.89 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 35.38 },
+					{ "time": 0.2333, "angle": 24.94 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{ "time": 0, "angle": 10.21 },
+					{ "time": 0.3333, "angle": -41.3 }
+				]
+			},
+			"front_upper_arm": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -310.92,
+						"curve": [ 0.38, 0.53, 0.744, 1 ]
+					},
+					{ "time": 0.3333, "angle": -112.59 }
+				],
+				"translate": [
+					{ "time": 0, "x": 7.23, "y": -13.13 }
+				]
+			},
+			"front_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 36.99 },
+					{ "time": 0.3333, "angle": -28.64 }
+				]
+			},
+			"front_fist": {
+				"rotate": [
+					{ "time": 0, "angle": 13.59 },
+					{ "time": 0.3333, "angle": 7.55 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 271.02,
+						"curve": [ 0.342, 0.36, 0.68, 0.71 ]
+					},
+					{ "time": 0.3333, "angle": -15.84 }
+				],
+				"translate": [
+					{ "time": 0.3333, "x": -0.09, "y": -0.46 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.3333, "angle": 40.03 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{ "time": 0, "angle": 14.98 },
+					{ "time": 0.3333, "angle": 39.75 }
+				]
+			},
+			"hip": {
+				"translate": [
+					{ "time": 0, "x": -75.54, "y": -78.03 },
+					{ "time": 0.2333, "x": -36.48, "y": 12.42 },
+					{ "time": 0.3333, "x": -36.48, "y": -2.99 }
+				]
+			},
+			"front_thigh": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 90.94,
+						"curve": [ 0.227, 0.26, 0.432, 1 ]
+					},
+					{ "time": 0.3333, "angle": 32.02 }
+				],
+				"translate": [
+					{ "time": 0, "x": 7.21, "y": -4 }
+				]
+			},
+			"rear_thigh": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 40.51,
+						"curve": [ 0.295, 0.3, 0.59, 0.99 ]
+					},
+					{ "time": 0.3333, "angle": 90.76 }
+				],
+				"translate": [
+					{ "time": 0, "x": -1.96, "y": -0.32 }
+				]
+			},
+			"front_shin": {
+				"rotate": [
+					{ "time": 0, "angle": -96.62 },
+					{ "time": 0.3333, "angle": -15.13 }
+				]
+			},
+			"rear_shin": {
+				"rotate": [
+					{ "time": 0, "angle": 7.99 },
+					{ "time": 0.3333, "angle": -67.54 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 5.4 },
+					{ "time": 0.3333, "angle": -16.26 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 2.67 },
+					{ "time": 0.3333, "angle": -10.31 }
+				]
+			}
+		}
+	},
+	"idle": {
+		"slots": {
+			"front_fist": {
+				"attachment": [
+					{ "time": 0, "name": "front_fist_open" },
+					{ "time": 1.6666, "name": "front_fist_open" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0, "name": "mouth_smile" },
+					{ "time": 1.6666, "name": "mouth_smile" }
+				]
+			}
+		},
+		"bones": {
+			"torso": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -5.61,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.8333,
+						"angle": -9.65,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "angle": -5.61 }
+				],
+				"translate": [
+					{ "time": 0, "x": -6.49, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"front_upper_arm": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -59.85,
+						"curve": [ 0.492, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -54.31,
+						"curve": [ 0.324, 0.11, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "angle": -59.85 }
+				],
+				"translate": [
+					{ "time": 0, "x": -7.12, "y": -8.23 },
+					{ "time": 0.6666, "x": -6.32, "y": -8.3 },
+					{ "time": 1.6666, "x": -7.12, "y": -8.23 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 62.41,
+						"curve": [ 0.504, 0.02, 0.75, 1 ]
+					},
+					{
+						"time": 0.7333,
+						"angle": 43.83,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "angle": 62.41 }
+				],
+				"translate": [
+					{ "time": 0, "x": -1.83, "y": -16.78 },
+					{ "time": 0.6666, "x": 0.34, "y": -15.23 },
+					{ "time": 1.6666, "x": -1.83, "y": -16.78 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.6666, "angle": 2.39 },
+					{ "time": 1.6666, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": -1.88, "y": -4.76, "curve": "stepped" },
+					{ "time": 1.6666, "x": -1.88, "y": -4.76 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"front_thigh": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 0.64,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -4.34,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "angle": 0.64 }
+				],
+				"translate": [
+					{ "time": 0, "x": -13.39, "y": 6.69, "curve": "stepped" },
+					{ "time": 1.6666, "x": -13.39, "y": 6.69 }
+				],
+				"scale": [
+					{
+						"time": 0,
+						"x": 0.896,
+						"y": 1,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"x": 0.825,
+						"y": 1,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "x": 0.896, "y": 1 }
+				]
+			},
+			"front_shin": {
+				"rotate": [
+					{ "time": 0, "angle": -19.28, "curve": "stepped" },
+					{ "time": 1.6666, "angle": -19.28 }
+				],
+				"scale": [
+					{
+						"time": 0,
+						"x": 1,
+						"y": 1,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"x": 0.994,
+						"y": 1,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"rear_thigh": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 30.5,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": 40.15,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "angle": 30.5 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"rear_shin": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -23.83,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -43.77,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "angle": -23.83 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"front_foot": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 5.13,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": 10.04,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "angle": 5.13 }
+				],
+				"scale": [
+					{ "time": 0, "x": 0.755, "y": 1.309, "curve": "stepped" },
+					{ "time": 1.6666, "x": 0.755, "y": 1.309 }
+				]
+			},
+			"hip": {
+				"translate": [
+					{
+						"time": 0,
+						"x": -6.63,
+						"y": -23.01,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"x": 6.27,
+						"y": -35,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "x": -6.63, "y": -23.01 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"rear_foot": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -7.34,
+						"curve": [ 0.235, 0, 0.558, 0.99 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": 3.85,
+						"curve": [ 0.594, 0, 0.653, 1 ]
+					},
+					{ "time": 1.6666, "angle": -7.34 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -17.16,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": 12.52,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "angle": -17.16 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -5.51,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -3.12,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "angle": -5.51 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"front_bracer": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 45.46,
+						"curve": [ 0.492, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": 41.33,
+						"curve": [ 0.32, 0.1, 0.736, 0.91 ]
+					},
+					{ "time": 1.6666, "angle": 45.46 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 0,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -15.59,
+						"curve": [ 0.732, 0, 0.769, 0.99 ]
+					},
+					{ "time": 1.6666, "angle": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			},
+			"front_fist": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -6.84,
+						"curve": [ 0.492, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -14.63,
+						"curve": [ 0.324, 0.11, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "angle": -6.84 }
+				],
+				"scale": [
+					{
+						"time": 0,
+						"x": 1,
+						"y": 1,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"x": 0.689,
+						"y": 1.1,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 1.6666, "x": 1, "y": 1 }
+				]
+			}
+		}
+	},
+	"jump": {
+		"slots": {
+			"front_fist": {
+				"attachment": [
+					{ "time": 0, "name": "front_fist_open" },
+					{ "time": 0.2, "name": "front_fist_closed" },
+					{ "time": 0.6666, "name": "front_fist_open" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0, "name": "mouth_grind" }
+				]
+			},
+			"torso": {
+				"attachment": [
+					{ "time": 0, "name": "torso" }
+				]
+			}
+		},
+		"bones": {
+			"front_thigh": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 91.53,
+						"curve": [ 0.278, 0.46, 0.763, 1 ]
+					},
+					{
+						"time": 0.2,
+						"angle": -35.83,
+						"curve": [ 0.761, 0, 0.75, 1 ]
+					},
+					{ "time": 0.4333, "angle": 127.74 },
+					{
+						"time": 0.7333,
+						"angle": 48.18,
+						"curve": [ 0.227, 0.26, 0.432, 1 ]
+					},
+					{ "time": 0.8333, "angle": 25.35 },
+					{ "time": 0.9333, "angle": 45.37 },
+					{ "time": 1.0333, "angle": 38.12 },
+					{ "time": 1.1333, "angle": 25.35 },
+					{ "time": 1.3333, "angle": 91.53 }
+				],
+				"translate": [
+					{ "time": 0, "x": -2.56, "y": 5.77 },
+					{ "time": 0.4333, "x": 8.3, "y": 7.98 },
+					{ "time": 0.7333, "x": 7.21, "y": -4 },
+					{ "time": 1.3333, "x": -2.56, "y": 5.77 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"torso": {
+				"rotate": [
+					{ "time": 0, "angle": -42.63 },
+					{ "time": 0.2, "angle": -5.74 },
+					{ "time": 0.4333, "angle": -50.76 },
+					{ "time": 0.7333, "angle": 1.89 },
+					{ "time": 0.8333, "angle": 11.58 },
+					{ "time": 0.9666, "angle": -1.89 },
+					{ "time": 1.1333, "angle": 11.58 },
+					{ "time": 1.3333, "angle": -42.63 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": -26.32 },
+					{ "time": 0.2, "angle": 121.44 },
+					{ "time": 0.4333, "angle": 70.54 },
+					{
+						"time": 0.7333,
+						"angle": 79.89,
+						"curve": [ 0.295, 0.3, 0.59, 0.99 ]
+					},
+					{ "time": 0.8333, "angle": 99.12 },
+					{ "time": 0.9333, "angle": 74.05 },
+					{ "time": 1.0333, "angle": 98.04 },
+					{ "time": 1.1333, "angle": 99.12 },
+					{ "time": 1.3333, "angle": -26.32 }
+				],
+				"translate": [
+					{ "time": 0, "x": -0.56, "y": -0.32 },
+					{ "time": 0.4333, "x": -8.5, "y": 10.58 },
+					{ "time": 0.7333, "x": -1.96, "y": -0.32 },
+					{ "time": 1.3333, "x": -0.56, "y": -0.32 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_shin": {
+				"rotate": [
+					{ "time": 0, "angle": -78.69 },
+					{ "time": 0.4333, "angle": -55.56 },
+					{ "time": 0.7333, "angle": -62.84 },
+					{ "time": 0.8333, "angle": -80.74 },
+					{ "time": 0.9333, "angle": -41.12 },
+					{ "time": 1.0333, "angle": -77.4 },
+					{ "time": 1.1333, "angle": -80.74 },
+					{ "time": 1.3333, "angle": -78.69 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.7333, "x": 1, "y": 1 }
+				]
+			},
+			"front_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": -22.61 },
+					{ "time": 0.2, "angle": -246.68 },
+					{
+						"time": 0.6,
+						"angle": 11.28,
+						"curve": [ 0.246, 0, 0.633, 0.53 ]
+					},
+					{
+						"time": 0.7333,
+						"angle": -57.45,
+						"curve": [ 0.38, 0.53, 0.744, 1 ]
+					},
+					{ "time": 0.8666, "angle": -112.59 },
+					{ "time": 0.9333, "angle": -102.17 },
+					{ "time": 1.0333, "angle": -108.61 },
+					{ "time": 1.1333, "angle": -112.59 },
+					{ "time": 1.3333, "angle": -22.61 }
+				],
+				"translate": [
+					{ "time": 0, "x": 6.08, "y": 7.15 },
+					{ "time": 0.2, "x": 7.23, "y": -13.13, "curve": "stepped" },
+					{ "time": 0.7333, "x": 7.23, "y": -13.13 },
+					{ "time": 1.3333, "x": 6.08, "y": 7.15 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 66.46 },
+					{ "time": 0.2, "angle": 42.39 },
+					{ "time": 0.4333, "angle": 26.06 },
+					{ "time": 0.7333, "angle": 13.28 },
+					{ "time": 0.8666, "angle": -28.64 },
+					{ "time": 0.9333, "angle": -22.31 },
+					{ "time": 1.0333, "angle": -35.39 },
+					{ "time": 1.1333, "angle": -28.64 },
+					{ "time": 1.3333, "angle": 66.46 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_fist": {
+				"rotate": [
+					{ "time": 0, "angle": -28.43 },
+					{ "time": 0.4333, "angle": -45.6 },
+					{ "time": 0.7333, "angle": -53.66 },
+					{ "time": 0.8666, "angle": 7.55 },
+					{ "time": 0.9333, "angle": 31.15 },
+					{ "time": 1.0333, "angle": -32.58 },
+					{ "time": 1.1333, "angle": 7.55 },
+					{ "time": 1.3333, "angle": -28.43 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": 39.68 },
+					{ "time": 0.2, "angle": 276.57 },
+					{ "time": 0.3, "angle": 17.73 },
+					{ "time": 0.4333, "angle": 83.38 },
+					{
+						"time": 0.6,
+						"angle": -4.71,
+						"curve": [ 0.246, 0, 0.633, 0.53 ]
+					},
+					{
+						"time": 0.7333,
+						"angle": -69.63,
+						"curve": [ 0.342, 0.36, 0.68, 0.71 ]
+					},
+					{
+						"time": 0.7666,
+						"angle": 321.47,
+						"curve": [ 0.333, 0.33, 0.667, 0.66 ]
+					},
+					{
+						"time": 0.8,
+						"angle": 33.7,
+						"curve": [ 0.358, 0.64, 0.693, 1 ]
+					},
+					{ "time": 0.8666, "angle": 34.56 },
+					{ "time": 1.0333, "angle": 71.96 },
+					{ "time": 1.1333, "angle": 34.56 },
+					{ "time": 1.3333, "angle": 39.68 }
+				],
+				"translate": [
+					{ "time": 0, "x": -3.1, "y": -4.86 },
+					{ "time": 0.2, "x": 23.33, "y": 49.07 },
+					{ "time": 0.4333, "x": 20.78, "y": 40.21 },
+					{ "time": 1.3333, "x": -3.1, "y": -4.86 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 29.66 },
+					{ "time": 0.2, "angle": 45.06 },
+					{ "time": 0.4333, "angle": -4.34 },
+					{ "time": 0.7666, "angle": 61.68 },
+					{ "time": 0.8, "angle": 82.59 },
+					{ "time": 0.8666, "angle": 80.06 },
+					{ "time": 1.0333, "angle": 57.56 },
+					{ "time": 1.1333, "angle": 80.06 },
+					{ "time": 1.3333, "angle": 29.66 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 24.9 },
+					{ "time": 0.2, "angle": 16.31 },
+					{ "time": 0.4333, "angle": 7.44 },
+					{ "time": 0.7333, "angle": -20.35 },
+					{ "time": 0.8333, "angle": -0.69, "curve": "stepped" },
+					{ "time": 1.1333, "angle": -0.69 },
+					{ "time": 1.3333, "angle": 24.9 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{ "time": 0, "angle": 24.92 },
+					{ "time": 0.2, "angle": 10.36 },
+					{ "time": 0.4333, "angle": 28.65 },
+					{ "time": 0.7333, "angle": -2.65 },
+					{ "time": 0.8333, "angle": -28.94, "curve": "stepped" },
+					{ "time": 1.1333, "angle": -28.94 },
+					{ "time": 1.3333, "angle": 24.92 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"hip": {
+				"rotate": [
+					{ "time": 0, "angle": 0 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": -34.51,
+						"y": -78.62,
+						"curve": [ 0.232, 1, 0.75, 1 ]
+					},
+					{
+						"time": 0.2,
+						"x": -34.51,
+						"y": 182.5,
+						"curve": [ 0.232, 0.48, 0.598, 0.79 ]
+					},
+					{
+						"time": 0.7666,
+						"x": -34.51,
+						"y": 596.22,
+						"curve": [ 0.329, 0.17, 0.66, 0.21 ]
+					},
+					{ "time": 1.1333, "x": -34.51, "y": 2.49 },
+					{ "time": 1.3333, "x": -34.51, "y": -78.62 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_shin": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -90.62,
+						"curve": [ 0.416, 0.54, 0.743, 1 ]
+					},
+					{
+						"time": 0.2,
+						"angle": -10.52,
+						"curve": [ 0.644, 0, 0.75, 1 ]
+					},
+					{ "time": 0.4333, "angle": -127.72 },
+					{ "time": 0.7333, "angle": -19.91 },
+					{ "time": 0.8333, "angle": -5.16 },
+					{ "time": 0.9333, "angle": -35.06 },
+					{ "time": 1.0333, "angle": -43.97 },
+					{ "time": 1.1333, "angle": -5.16 },
+					{ "time": 1.3333, "angle": -90.62 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"front_foot": {
+				"rotate": [
+					{ "time": 0, "angle": -0.79 },
+					{ "time": 0.0333, "angle": 16.27 },
+					{ "time": 0.0666, "angle": 23.52 },
+					{ "time": 0.1, "angle": 21.02 },
+					{ "time": 0.1333, "angle": 10.92 },
+					{ "time": 0.2, "angle": -38.45 },
+					{ "time": 0.4333, "angle": 6.62 },
+					{ "time": 0.7333, "angle": -11.51 },
+					{ "time": 1.0333, "angle": -22.91 },
+					{ "time": 1.3333, "angle": -0.79 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"rear_foot": {
+				"rotate": [
+					{ "time": 0, "angle": -12.77 },
+					{ "time": 0.2, "angle": 17.05 },
+					{ "time": 0.4333, "angle": 19.45 },
+					{ "time": 0.7333, "angle": 2.67 },
+					{ "time": 1.0333, "angle": -28.49 },
+					{ "time": 1.3333, "angle": -12.77 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{ "time": 0, "angle": 6.18 },
+					{ "time": 0.2, "angle": 30.81 },
+					{ "time": 0.4333, "angle": 13.25 },
+					{ "time": 0.7333, "angle": 14.98 },
+					{ "time": 0.7666, "angle": 25.64 },
+					{ "time": 0.8, "angle": 20.62 },
+					{ "time": 0.8666, "angle": 64.52 },
+					{ "time": 1.0333, "angle": 8.59 },
+					{ "time": 1.1333, "angle": 64.52 },
+					{ "time": 1.3333, "angle": 6.18 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 }
+				]
+			}
+		}
+	},
+	"run": {
+		"slots": {
+			"front_fist": {
+				"attachment": [
+					{ "time": 0, "name": "front_fist_closed" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0, "name": "mouth_grind" }
+				]
+			},
+			"torso": {
+				"attachment": [
+					{ "time": 0, "name": "torso" }
+				]
+			}
+		},
+		"bones": {
+			"front_thigh": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 42.05,
+						"curve": [ 0.195, 0.86, 0.75, 1 ]
+					},
+					{ "time": 0.0666, "angle": 46.07 },
+					{ "time": 0.1333, "angle": -20.28 },
+					{ "time": 0.2, "angle": -27.23 },
+					{ "time": 0.2666, "angle": -47.16 },
+					{ "time": 0.3333, "angle": -39.79 },
+					{ "time": 0.4, "angle": -25.86 },
+					{ "time": 0.4666, "angle": 14.35 },
+					{ "time": 0.5333, "angle": 55.62 },
+					{ "time": 0.6, "angle": 69.65 },
+					{ "time": 0.6666, "angle": 86.4 },
+					{ "time": 0.7333, "angle": 65.87 },
+					{ "time": 0.8, "angle": 42.05 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 },
+					{ "time": 0.0333, "x": -5.79, "y": 11.15 },
+					{ "time": 0.0666, "x": -5.13, "y": 11.55 },
+					{ "time": 0.1333, "x": -7.7, "y": 8.98 },
+					{ "time": 0.5333, "x": -1.26, "y": 3.83 },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"torso": {
+				"rotate": [
+					{ "time": 0, "angle": -39.7 },
+					{ "time": 0.2, "angle": -57.29 },
+					{ "time": 0.4, "angle": -39.7 },
+					{ "time": 0.6, "angle": -57.29 },
+					{ "time": 0.8, "angle": -39.7 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.4, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": -56.59 },
+					{ "time": 0.0666, "angle": -21.57 },
+					{ "time": 0.1333, "angle": 27.95 },
+					{ "time": 0.2, "angle": 42.42 },
+					{ "time": 0.2666, "angle": 62.37 },
+					{ "time": 0.3333, "angle": 45.42 },
+					{ "time": 0.4, "angle": 15.67 },
+					{ "time": 0.4666, "angle": 28.22 },
+					{ "time": 0.5333, "angle": -38.62 },
+					{ "time": 0.6, "angle": -53.26 },
+					{ "time": 0.6666, "angle": -79.31 },
+					{ "time": 0.7333, "angle": -86.47 },
+					{ "time": 0.8, "angle": -56.59 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 },
+					{ "time": 0.4, "x": -6.76, "y": -3.86 },
+					{ "time": 0.4333, "x": -15.85, "y": 7.28 },
+					{ "time": 0.4666, "x": -13.04, "y": 4.04 },
+					{ "time": 0.5, "x": -10.24, "y": 7.11 },
+					{ "time": 0.5333, "x": -9.01, "y": -5.15 },
+					{ "time": 0.6666, "x": -23.18, "y": -2.57 },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_shin": {
+				"rotate": [
+					{ "time": 0, "angle": -74 },
+					{ "time": 0.0666, "angle": -83.38 },
+					{ "time": 0.1333, "angle": -106.69 },
+					{ "time": 0.2, "angle": -66.01 },
+					{ "time": 0.2666, "angle": -55.22 },
+					{ "time": 0.3333, "angle": -24.8 },
+					{
+						"time": 0.4,
+						"angle": 18.44,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 0.4666, "angle": -56.65 },
+					{
+						"time": 0.5333,
+						"angle": -11.94,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 0.6666, "angle": -41.26 },
+					{ "time": 0.7333, "angle": -43.6 },
+					{ "time": 0.8, "angle": -74 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": -89.36 },
+					{ "time": 0.0666, "angle": -95.67 },
+					{ "time": 0.1333, "angle": -22 },
+					{ "time": 0.2, "angle": -316.04 },
+					{ "time": 0.2666, "angle": -274.94 },
+					{ "time": 0.3333, "angle": -273.74 },
+					{ "time": 0.4, "angle": -272.09 },
+					{ "time": 0.4666, "angle": -264.89 },
+					{ "time": 0.5333, "angle": -320.09 },
+					{ "time": 0.6, "angle": -50.83 },
+					{ "time": 0.6666, "angle": -81.72 },
+					{ "time": 0.7333, "angle": -83.92 },
+					{ "time": 0.8, "angle": -89.36 }
+				],
+				"translate": [
+					{ "time": 0, "x": 6.24, "y": 10.05 },
+					{ "time": 0.2666, "x": 4.95, "y": -13.13 },
+					{ "time": 0.6, "x": -2.43, "y": 1.94 },
+					{ "time": 0.8, "x": 6.24, "y": 10.05 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 33.43 },
+					{ "time": 0.0666, "angle": 20.53 },
+					{ "time": 0.1333, "angle": 15.26 },
+					{ "time": 0.2, "angle": 19.28 },
+					{ "time": 0.2666, "angle": 22.62 },
+					{ "time": 0.3333, "angle": 37.29 },
+					{ "time": 0.4, "angle": 41.53 },
+					{ "time": 0.4666, "angle": 31.73 },
+					{ "time": 0.5333, "angle": 67.45 },
+					{ "time": 0.6666, "angle": 39.77 },
+					{ "time": 0.7333, "angle": 30.95 },
+					{ "time": 0.8, "angle": 33.43 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_fist": {
+				"rotate": [
+					{ "time": 0, "angle": -19.75 },
+					{ "time": 0.0666, "angle": -37.11 },
+					{ "time": 0.1333, "angle": -50.79 },
+					{ "time": 0.2666, "angle": -12.69 },
+					{ "time": 0.3333, "angle": 3.01 },
+					{ "time": 0.4333, "angle": 12.05 },
+					{ "time": 0.5333, "angle": 13.25 },
+					{ "time": 0.8, "angle": -19.75 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": 68.68 },
+					{ "time": 0.0666, "angle": 73.89 },
+					{ "time": 0.1333, "angle": -9.64 },
+					{ "time": 0.2, "angle": 284.27 },
+					{ "time": 0.2666, "angle": 283.29 },
+					{ "time": 0.3333, "angle": 278.28 },
+					{ "time": 0.4, "angle": 271.02 },
+					{ "time": 0.4666, "angle": 263.2 },
+					{ "time": 0.5333, "angle": 314.25 },
+					{ "time": 0.6, "angle": 16.83 },
+					{ "time": 0.6666, "angle": 70.35 },
+					{ "time": 0.7333, "angle": 73.53 },
+					{ "time": 0.8, "angle": 68.68 }
+				],
+				"translate": [
+					{ "time": 0, "x": -2.57, "y": -8.89 },
+					{ "time": 0.1333, "x": -4.68, "y": 7.2 },
+					{ "time": 0.2, "x": 21.73, "y": 51.17 },
+					{ "time": 0.6, "x": 4.33, "y": 2.05 },
+					{ "time": 0.8, "x": -2.57, "y": -8.89 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 31.04 },
+					{ "time": 0.0666, "angle": 28.28 },
+					{ "time": 0.1333, "angle": 49.36 },
+					{ "time": 0.2, "angle": 59.37 },
+					{ "time": 0.2666, "angle": 8.56 },
+					{ "time": 0.3333, "angle": 9.38 },
+					{ "time": 0.4, "angle": 11.51 },
+					{ "time": 0.4666, "angle": 7.22 },
+					{ "time": 0.5333, "angle": -18.44 },
+					{ "time": 0.6, "angle": 11.44 },
+					{ "time": 0.6666, "angle": 9.99 },
+					{ "time": 0.7333, "angle": 8.28 },
+					{ "time": 0.8, "angle": 31.04 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 11.03 },
+					{ "time": 0.2, "angle": 13.58 },
+					{ "time": 0.4, "angle": 11.03 },
+					{ "time": 0.6, "angle": 13.58 },
+					{ "time": 0.8, "angle": 11.03 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.4, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{ "time": 0, "angle": 11.03 },
+					{ "time": 0.1, "angle": 12.34 },
+					{ "time": 0.2, "angle": 25.55 },
+					{ "time": 0.4, "angle": 11.03 },
+					{ "time": 0.5, "angle": 12.34 },
+					{ "time": 0.6, "angle": 25.55 },
+					{ "time": 0.8, "angle": 11.03 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.4, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"hip": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": -62.47, "y": -23.1 },
+					{
+						"time": 0.0666,
+						"x": -62.47,
+						"y": -38.51,
+						"curve": [ 0.244, 0.04, 0.75, 1 ]
+					},
+					{
+						"time": 0.2666,
+						"x": -62.47,
+						"y": 22.28,
+						"curve": [ 0.17, 0.52, 0.75, 1 ]
+					},
+					{ "time": 0.4, "x": -62.47, "y": -23.1 },
+					{ "time": 0.4333, "x": -62.47, "y": -24.59 },
+					{
+						"time": 0.4666,
+						"x": -62.47,
+						"y": -43.29,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 0.6666, "x": -62.47, "y": 22.28 },
+					{ "time": 0.8, "x": -62.47, "y": -23.1 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_shin": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 0,
+						"curve": [ 0.481, 0.01, 0.75, 1 ]
+					},
+					{ "time": 0.0666, "angle": -64.42 },
+					{
+						"time": 0.1333,
+						"angle": -20.59,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 0.2666, "angle": -62.51 },
+					{ "time": 0.3333, "angle": -79.74 },
+					{ "time": 0.4, "angle": -78.28 },
+					{
+						"time": 0.4666,
+						"angle": -118.96,
+						"curve": [ 0.93, 0, 0.952, 0.95 ]
+					},
+					{ "time": 0.6, "angle": -88.95 },
+					{ "time": 0.6666, "angle": -79.09 },
+					{ "time": 0.7333, "angle": -47.77 },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{
+						"time": 0.0333,
+						"angle": -21.13,
+						"curve": [ 0.121, 0.23, 0.75, 1 ]
+					},
+					{ "time": 0.0666, "angle": 17.64 },
+					{ "time": 0.1, "angle": 29.92 },
+					{ "time": 0.1333, "angle": 16.44 },
+					{ "time": 0.2, "angle": -29.22 },
+					{ "time": 0.2666, "angle": -1.61 },
+					{ "time": 0.3333, "angle": -10.22 },
+					{ "time": 0.4666, "angle": -15.99 },
+					{ "time": 0.6, "angle": 9.03 },
+					{ "time": 0.7333, "angle": 17.32 },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.0666, "angle": -12.04 },
+					{ "time": 0.1333, "angle": -0.87 },
+					{ "time": 0.2, "angle": 25.81 },
+					{ "time": 0.2666, "angle": 4.71 },
+					{
+						"time": 0.4,
+						"angle": 18.09,
+						"curve": [ 0.281, 0.73, 0.75, 1 ]
+					},
+					{ "time": 0.4333, "angle": -1.7 },
+					{ "time": 0.4666, "angle": 27.12 },
+					{ "time": 0.5, "angle": 38.83 },
+					{ "time": 0.5333, "angle": 30.76 },
+					{ "time": 0.5666, "angle": -20.49 },
+					{ "time": 0.6, "angle": -30.8 },
+					{ "time": 0.6666, "angle": -1.31 },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.1333, "angle": 24.72 },
+					{ "time": 0.5, "angle": -11.87 },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			}
+		},
+		"events": [
+			{ "time": 0, "name": "footstep" },
+			{ "time": 0.4, "name": "footstep", "int": 1 }
+		]
+	},
+	"shoot": {
+		"slots": {
+			"front_fist": {
+				"attachment": [
+					{ "time": 0.1333, "name": "front_fist_closed" },
+					{ "time": 0.4, "name": "front_fist_open" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0.1333, "name": "mouth_grind" }
+				]
+			},
+			"muzzle": {
+				"color": [
+					{
+						"time": 0.1333,
+						"color": "ffffff00",
+						"curve": [ 0.118, 0.99, 0.75, 1 ]
+					},
+					{
+						"time": 0.1666,
+						"color": "ffffffff",
+						"curve": [ 0.821, 0, 0.909, 0.89 ]
+					},
+					{ "time": 0.2666, "color": "ffffff00" }
+				],
+				"attachment": [
+					{ "time": 0.1333, "name": "muzzle" },
+					{ "time": 0.2666, "name": null }
+				]
+			}
+		},
+		"bones": {
+			"front_fist": {
+				"scale": [
+					{ "time": 0.1333, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.4, "x": 1, "y": 1 }
+				]
+			},
+			"gunTip": {
+				"translate": [
+					{ "time": 0.1333, "x": 0, "y": 0 },
+					{ "time": 0.2, "x": 20.93, "y": 1.57 }
+				],
+				"scale": [
+					{ "time": 0.1333, "x": 1, "y": 1 },
+					{ "time": 0.2, "x": 1.247, "y": 1.516 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{ "time": 0, "angle": 1.9 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": 7.95,
+						"y": 5.84,
+						"curve": [ 0, 0.3, 0.678, 1 ]
+					},
+					{ "time": 0.3, "x": -9.3, "y": -1.41 },
+					{ "time": 0.4, "x": 0, "y": 0 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": -30.47 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": 0,
+						"y": 0,
+						"curve": [ 0, 0.3, 0.678, 1 ]
+					},
+					{ "time": 0.3, "x": -5.99, "y": -3.71 },
+					{ "time": 0.4, "x": 0, "y": 0 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": 62.3 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": 0,
+						"y": 0,
+						"curve": [ 0, 0.3, 0.678, 1 ]
+					},
+					{ "time": 0.3, "x": 2.81, "y": 11.41 },
+					{ "time": 0.4, "x": 0, "y": 0 }
+				]
+			}
+		}
+	},
+	"test": {
+		"slots": {
+			"front_foot": {
+				"color": [
+					{ "time": 0.6666, "color": "ffffffff" },
+					{ "time": 1.3333, "color": "ff0700ff" }
+				]
+			},
+			"gun": {
+				"color": [
+					{ "time": 0, "color": "ffffffff", "curve": "stepped" },
+					{ "time": 0.6666, "color": "ffffffff" },
+					{ "time": 1.3333, "color": "32ff00ff" }
+				]
+			},
+			"rear_foot": {
+				"color": [
+					{ "time": 0.6666, "color": "ffffffff" },
+					{ "time": 1.3333, "color": "ff0700ff" }
+				]
+			}
+		},
+		"bones": {
+			"head": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.3333, "angle": -20.72 },
+					{ "time": 0.6666, "angle": -32.41 },
+					{ "time": 1, "angle": -5.3 },
+					{ "time": 1.3333, "angle": 24.96 },
+					{ "time": 1.6666, "angle": 15.61 },
+					{ "time": 2, "angle": 0 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": 0,
+						"y": 0,
+						"curve": [ 0.172, 0.37, 0.574, 0.73 ]
+					},
+					{
+						"time": 0.1666,
+						"x": 144.19,
+						"y": -77.59,
+						"curve": [ 0.372, 0.61, 0.765, 1 ]
+					},
+					{
+						"time": 0.3333,
+						"x": 217.61,
+						"y": -192.63,
+						"curve": [ 0.282, 0, 0.624, 0.31 ]
+					},
+					{
+						"time": 0.5,
+						"x": 181.21,
+						"y": -365.66,
+						"curve": [ 0.313, 0.21, 0.654, 0.54 ]
+					},
+					{
+						"time": 0.6666,
+						"x": 20.09,
+						"y": -500.4,
+						"curve": [ 0.147, 0.27, 0.75, 1 ]
+					},
+					{ "time": 0.8333, "x": -194.24, "y": -341.84 },
+					{ "time": 1, "x": -307.93, "y": -114 },
+					{
+						"time": 1.1666,
+						"x": -330.38,
+						"y": 121.42,
+						"curve": [ 0.25, 0, 0.764, 0.48 ]
+					},
+					{
+						"time": 1.3333,
+						"x": -240.42,
+						"y": 335.66,
+						"curve": [ 0.229, 0.37, 0.58, 0.73 ]
+					},
+					{
+						"time": 1.5,
+						"x": -56.12,
+						"y": 288.06,
+						"curve": [ 0.296, 0.6, 0.641, 1 ]
+					},
+					{
+						"time": 1.6666,
+						"x": 87.63,
+						"y": 191.33,
+						"curve": [ 0.238, 0, 0.626, 0.39 ]
+					},
+					{
+						"time": 1.8333,
+						"x": 60.62,
+						"y": 95.14,
+						"curve": [ 0.41, 0.26, 0.803, 0.62 ]
+					},
+					{ "time": 2, "x": 0, "y": 0 }
+				]
+			}
+		},
+		"drawOrder": [
+			{
+				"time": 0.6666,
+				"offsets": [
+					{ "slot": "head", "offset": -9 },
+					{ "slot": "eye", "offset": -9 },
+					{ "slot": "mouth", "offset": -12 },
+					{ "slot": "goggles", "offset": -12 }
+				]
+			},
+			{ "time": 1.3333 }
+		],
+		"events": [
+			{ "time": 0, "name": "headPop", "int": 0, "float": 0, "string": "pop.wav" },
+			{ "time": 1, "name": "headBehind", "int": 7, "float": 8, "string": "animate" },
+			{ "time": 2, "name": "headAttach", "int": 0, "float": 0, "string": "attach.wav" }
+		]
+	},
+	"walk": {
+		"slots": {
+			"front_fist": {
+				"attachment": [
+					{ "time": 0, "name": "front_fist_closed" }
+				]
+			},
+			"mouth": {
+				"attachment": [
+					{ "time": 0, "name": "mouth_smile" }
+				]
+			},
+			"torso": {
+				"attachment": [
+					{ "time": 0, "name": "torso" }
+				]
+			}
+		},
+		"bones": {
+			"front_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": 15.79 },
+					{ "time": 0.1, "angle": 27.39 },
+					{ "time": 0.2, "angle": -7.94 },
+					{ "time": 0.3, "angle": -16.94 },
+					{ "time": 0.4, "angle": -28.62 },
+					{ "time": 0.5, "angle": -19.3 },
+					{ "time": 0.6, "angle": -3.08 },
+					{ "time": 0.7, "angle": 29.51 },
+					{ "time": 0.8, "angle": 15.79 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 },
+					{ "time": 0.4, "x": -1.18, "y": 0.54 },
+					{ "time": 0.5, "x": 0.11, "y": 0.41 },
+					{ "time": 0.6, "x": 9.48, "y": 0.27 },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.4, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_shin": {
+				"rotate": [
+					{ "time": 0, "angle": 5.12 },
+					{ "time": 0.1, "angle": -20.87 },
+					{ "time": 0.2, "angle": 13.37 },
+					{ "time": 0.3, "angle": 15.98 },
+					{ "time": 0.4, "angle": 5.94 },
+					{ "time": 0.5, "angle": -26.76 },
+					{ "time": 0.7, "angle": -55.44 },
+					{ "time": 0.8, "angle": 5.12 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_thigh": {
+				"rotate": [
+					{ "time": 0, "angle": -34.38 },
+					{ "time": 0.1, "angle": -30.32 },
+					{ "time": 0.2, "angle": -37.22 },
+					{ "time": 0.3, "angle": 20.73 },
+					{ "time": 0.4, "angle": 8.69 },
+					{ "time": 0.5, "angle": 12.16 },
+					{ "time": 0.6, "angle": -24.62 },
+					{ "time": 0.7, "angle": -27.26 },
+					{ "time": 0.8, "angle": -34.38 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 },
+					{ "time": 0.4, "x": 4.08, "y": -9.53 },
+					{ "time": 0.5, "x": 0, "y": 0 },
+					{ "time": 0.7, "x": -21.14, "y": -9.6 },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_shin": {
+				"rotate": [
+					{ "time": 0, "angle": 14.26 },
+					{ "time": 0.1, "angle": -17.3 },
+					{ "time": 0.2, "angle": -12.67 },
+					{ "time": 0.3, "angle": -58.89 },
+					{ "time": 0.4, "angle": 15.95 },
+					{ "time": 0.5, "angle": -9 },
+					{ "time": 0.6, "angle": 26.06 },
+					{ "time": 0.7, "angle": 21.85 },
+					{ "time": 0.8, "angle": 14.26 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1 },
+					{ "time": 0.1, "x": 0.951, "y": 1 },
+					{ "time": 0.5, "x": 0.975, "y": 1 },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 10.13 },
+					{ "time": 0.1, "angle": 12.27 },
+					{ "time": 0.2, "angle": -2.94 },
+					{ "time": 0.3, "angle": 6.29 },
+					{ "time": 0.4, "angle": 13.45 },
+					{ "time": 0.5, "angle": -3.57 },
+					{ "time": 0.6, "angle": -0.97 },
+					{ "time": 0.7, "angle": 2.97 },
+					{ "time": 0.8, "angle": 10.13 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": -23.74 },
+					{ "time": 0.4, "angle": -320.57 },
+					{ "time": 0.8, "angle": -23.74 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_upper_arm": {
+				"rotate": [
+					{ "time": 0, "angle": 11.62 },
+					{ "time": 0.1, "angle": 19.36 },
+					{ "time": 0.4, "angle": 345.26 },
+					{ "time": 0.5, "angle": 343.44 },
+					{ "time": 0.8, "angle": 11.62 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"torso": {
+				"rotate": [
+					{ "time": 0, "angle": -12.11 },
+					{ "time": 0.1666, "angle": -17.16 },
+					{ "time": 0.4, "angle": -12.11 },
+					{ "time": 0.5666, "angle": -15.81 },
+					{ "time": 0.8, "angle": -12.11 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 1.41 },
+					{ "time": 0.2333, "angle": -3.04 },
+					{ "time": 0.4, "angle": 1.41 },
+					{ "time": 0.6333, "angle": -3.04 },
+					{ "time": 0.8, "angle": 1.41 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.4, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{ "time": 0, "angle": 6.97 },
+					{ "time": 0.1666, "angle": 8.02 },
+					{ "time": 0.2666, "angle": 12.65 },
+					{ "time": 0.4, "angle": 6.97 },
+					{ "time": 0.5666, "angle": 8.02 },
+					{ "time": 0.6666, "angle": 12.65 },
+					{ "time": 0.8, "angle": 6.97 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.4, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"hip": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{
+						"time": 0,
+						"x": -23.93,
+						"y": 3.22,
+						"curve": [ 0.518, 0.03, 0.807, 0.61 ]
+					},
+					{
+						"time": 0.1,
+						"x": -23.93,
+						"y": -9.24,
+						"curve": [ 0.135, 0.33, 0.601, 0.99 ]
+					},
+					{
+						"time": 0.2,
+						"x": -23.93,
+						"y": 4.35,
+						"curve": [ 0.204, 0.68, 0.75, 1 ]
+					},
+					{
+						"time": 0.3,
+						"x": -23.93,
+						"y": 2.38,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.4,
+						"x": -23.93,
+						"y": -2.5,
+						"curve": [ 0.692, 0.01, 0.75, 1 ]
+					},
+					{
+						"time": 0.5,
+						"x": -23.93,
+						"y": -10.32,
+						"curve": [ 0.235, 0.77, 0.75, 1 ]
+					},
+					{
+						"time": 0.6,
+						"x": -23.93,
+						"y": 4.35,
+						"curve": [ 0.287, 0.37, 0.718, 0.76 ]
+					},
+					{
+						"time": 0.7,
+						"x": -23.93,
+						"y": 10.34,
+						"curve": [ 0.615, 0, 0.75, 1 ]
+					},
+					{ "time": 0.8, "x": -23.93, "y": 3.22 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 0 },
+					{ "time": 0.4, "angle": 20.59 },
+					{ "time": 0.8, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_foot": {
+				"rotate": [
+					{ "time": 0, "angle": 12.49 },
+					{ "time": 0.1, "angle": -8.34 },
+					{ "time": 0.2, "angle": -6.17 },
+					{ "time": 0.3, "angle": -0.75 },
+					{ "time": 0.3333, "angle": 3.89 },
+					{ "time": 0.4, "angle": 10.22 },
+					{ "time": 0.5, "angle": 11.44 },
+					{ "time": 0.6, "angle": -0.33 },
+					{ "time": 0.7, "angle": 0.15 },
+					{ "time": 0.8, "angle": 12.49 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"rear_bracer": {
+				"rotate": [
+					{ "time": 0, "angle": 3.58 },
+					{ "time": 0.1, "angle": 5.51 },
+					{ "time": 0.4, "angle": -22.77 },
+					{ "time": 0.5, "angle": -9.65 },
+					{ "time": 0.8, "angle": 3.58 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"front_fist": {
+				"rotate": [
+					{ "time": 0, "angle": -15.22 },
+					{ "time": 0.1, "angle": -51.4 },
+					{ "time": 0.4, "angle": -39.4 },
+					{ "time": 0.5, "angle": 19.26 },
+					{ "time": 0.8, "angle": -15.22 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			},
+			"gun": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -24.06,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.1,
+						"angle": -10.94,
+						"curve": [ 0.381, 0.54, 0.742, 1 ]
+					},
+					{
+						"time": 0.4,
+						"angle": 25.34,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{
+						"time": 0.6666,
+						"angle": -27.47,
+						"curve": [ 0.25, 0, 0.75, 1 ]
+					},
+					{ "time": 0.8, "angle": -24.06 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.8, "x": 0, "y": 0 }
+				],
+				"scale": [
+					{ "time": 0, "x": 1, "y": 1, "curve": "stepped" },
+					{ "time": 0.8, "x": 1, "y": 1 }
+				]
+			}
+		}
+	}
+}
+}

BIN
spine-ts/widget/example/assets/spineboy.png


+ 20 - 18
spine-ts/widget/example/index.html

@@ -3,28 +3,30 @@
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <body>
 <center>
-<div id="spine-widget" style="margin-bottom: 20px"></div>
-<div style="margin-bottom: 20px" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="Jump" data-scale="0.25" data-x="40"></div>
-<div style="margin-bottom: 20px" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="walk" data-scale="0.2" data-width="320" data-height="240" data-background-color="#cc0000"></div>
+<!-- You can programmatically initialize a widget -->
+<div id="spine-widget" style="margin-bottom: 20px; width: 640px; height: 480px;"></div>
+<!-- You can also specify your own x/y and scale for the skeleton -->
+<div style="margin-bottom: 20px; width: 100%; height: 150px;" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="Jump" data-fit-to-canvas="false" data-scale="0.1" data-x="200" data-y="10"></div>
+<!-- Or make things real small -->
+<div style="margin-bottom: 20px; width: 320px; height: 240px;" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="walk" data-background-color="#cc0000"></div>
 </center>
 </body>
 <script>
-	new spine.SpineWidget("spine-widget", {
-		json: "assets/raptor.json",
-		atlas: "assets/raptor.atlas",		
-		animation: "walk",
-		scale: 0.4,
-		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);
-			}
+new spine.SpineWidget("spine-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);
 		}
-	});	
+	}
+});
 </script>
 </body>
 </html>

+ 95 - 59
spine-ts/widget/src/Widget.ts

@@ -34,20 +34,21 @@ module spine {
 		skeleton: Skeleton;
 		state: AnimationState;
 		gl: WebGLRenderingContext;
-		canvas: HTMLCanvasElement;		
-
-		private _config: SpineWidgetConfig;
-		private _assetManager: spine.webgl.AssetManager;
-		private _shader: spine.webgl.Shader;
-		private _batcher: spine.webgl.PolygonBatcher;
-		private _mvp = new spine.webgl.Matrix4();
-		private _skeletonRenderer: spine.webgl.SkeletonRenderer;		
-		private _paused = false;
-		private _lastFrameTime = Date.now() / 1000.0;
-		private _backgroundColor = new Color();
-		private _loaded = false;
-
-		constructor (element: Element | string, config: SpineWidgetConfig) {
+		canvas: HTMLCanvasElement;			
+
+		private config: SpineWidgetConfig;
+		private assetManager: spine.webgl.AssetManager;
+		private shader: spine.webgl.Shader;
+		private batcher: spine.webgl.PolygonBatcher;
+		private mvp = new spine.webgl.Matrix4();
+		private skeletonRenderer: spine.webgl.SkeletonRenderer;		
+		private paused = false;
+		private lastFrameTime = Date.now() / 1000.0;
+		private backgroundColor = new Color();
+		private loaded = false;
+		private bounds = { offset: new Vector2(), size: new Vector2() };
+
+		constructor (element: HTMLElement | string, config: SpineWidgetConfig) {
 			if (!element) throw new Error("Please provide a DOM element, e.g. document.getElementById('myelement')");
 			if (!config) throw new Error("Please provide a configuration, specifying at least the json file, atlas file and animation name");
 
@@ -58,18 +59,20 @@ module spine {
 			this.validateConfig(config);
 
 			let canvas = this.canvas = document.createElement("canvas");
-			(<Element> element).appendChild(canvas);
-			canvas.width = config.width;
-			canvas.height = config.height;
+			canvas.style.width = "100%";
+			canvas.style.height = "100%";
+			(<HTMLElement> element).appendChild(canvas);
+			canvas.width = (<HTMLElement>element).clientWidth;
+			canvas.height = (<HTMLElement>element).clientHeight;
 			var webglConfig = { alpha: false };
 			let gl = this.gl = <WebGLRenderingContext> (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));	
 
-			this._shader = spine.webgl.Shader.newColoredTextured(gl);
-			this._batcher = new spine.webgl.PolygonBatcher(gl);
-			this._mvp.ortho2d(0, 0, 639, 479);
-			this._skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+			this.shader = spine.webgl.Shader.newColoredTextured(gl);
+			this.batcher = new spine.webgl.PolygonBatcher(gl);
+			this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
 
-			let assets = this._assetManager = new spine.webgl.AssetManager(gl);
+			let assets = this.assetManager = new spine.webgl.AssetManager(gl);
 			assets.loadText(config.atlas);
 			assets.loadText(config.json);
 			assets.loadTexture(config.atlas.replace(".atlas", ".png"));
@@ -83,11 +86,10 @@ module spine {
 
 			if (!config.scale) config.scale = 1.0;
 			if (!config.skin) config.skin = "default";
-			if (config.loop === undefined) config.loop = true;			
-			if (!config.y) config.y = 20;
-			if (!config.width) config.width = 640;
-			if (!config.height) config.height = 480;			
-			if (!config.x) config.x = config.width / 2;
+			if (config.loop === undefined) config.loop = true;
+			if (!config.x) config.x = 0;		
+			if (!config.y) config.y = 0;									
+			if (config.fitToCanvas === undefined) config.fitToCanvas = true;
 			if (!config.backgroundColor) config.backgroundColor = "#555555";
 			if (!config.imagesPath) {
 				let index = config.atlas.lastIndexOf("/");
@@ -98,21 +100,21 @@ module spine {
 				}
 			}
 			if (!config.premultipliedAlpha === undefined) config.premultipliedAlpha = false;
-			this._backgroundColor.setFromString(config.backgroundColor);
-			this._config = config;		
+			this.backgroundColor.setFromString(config.backgroundColor);
+			this.config = config;		
 		}
 
 		private load () {
-			let assetManager = this._assetManager;
-			let imagesPath = this._config.imagesPath;
-			let config = this._config;
+			let assetManager = this.assetManager;
+			let imagesPath = this.config.imagesPath;
+			let config = this.config;
 			if (assetManager.isLoadingComplete()) {
 				if (assetManager.hasErrors()) {
-					if (config.error) config.error(this, "Failed to load assets: " + JSON.stringify(assetManager.errors));
-					else throw new Error("Failed to load assets: " + JSON.stringify(assetManager.errors));
+					if (config.error) config.error(this, "Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
+					else throw new Error("Failed to load assets: " + JSON.stringify(assetManager.getErrors()));
 				}
 
-				let atlas = new spine.TextureAtlas(this._assetManager.get(this._config.atlas) as string, (path: string) => {
+				let atlas = new spine.TextureAtlas(this.assetManager.get(this.config.atlas) as string, (path: string) => {
 					let texture = assetManager.get(imagesPath + path) as spine.webgl.GLTexture;
 					return texture;
 				});
@@ -124,14 +126,20 @@ module spine {
 				skeletonJson.scale = config.scale;
 				var skeletonData = skeletonJson.readSkeletonData(assetManager.get(config.json) as string);
 				var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
-				skeleton.x = config.x;
-				skeleton.y = config.y;
+				var bounds = this.bounds;
+				skeleton.setToSetupPose();
+				skeleton.updateWorldTransform();
+				skeleton.getBounds(bounds.offset, bounds.size);
+				if (!config.fitToCanvas) {
+					skeleton.x = config.x;
+					skeleton.y = config.y;
+				}
 				skeleton.setSkinByName(config.skin);
 
 				var animationState = this.state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
 				animationState.setAnimation(0, config.animation, true);
 				if (config.success) config.success(this);
-				this._loaded = true;
+				this.loaded = true;
 				requestAnimationFrame(() => { this.render(); });
 			} else
 				requestAnimationFrame(() => { this.load(); });
@@ -139,32 +147,33 @@ module spine {
 
 		private render () {			
 			var now = Date.now() / 1000;
-			var delta = now - this._lastFrameTime;
+			var delta = now - this.lastFrameTime;
 			if (delta > 0.1) delta = 0;
-			this._lastFrameTime = now;
+			this.lastFrameTime = now;
 
 			let gl = this.gl;
-			let color = this._backgroundColor;
+			let color = this.backgroundColor;
+			this.resize();
 			gl.clearColor(color.r, color.g, color.b, color.a);
 			gl.clear(gl.COLOR_BUFFER_BIT);
 
 			// Apply the animation state based on the delta time.
 			var state = this.state;
 			var skeleton = this.skeleton;
-			var premultipliedAlpha = this._config.premultipliedAlpha;
+			var premultipliedAlpha = this.config.premultipliedAlpha;
 			state.update(delta);
 			state.apply(skeleton);
 			skeleton.updateWorldTransform();
 			
 			// Bind the shader and set the texture and model-view-projection matrix.
-			let shader = this._shader;
+			let shader = this.shader;
 			shader.bind();
 			shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
-			shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this._mvp.values);
+			shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
 
 			// Start the batch and tell the SkeletonRenderer to render the active skeleton.
-			let batcher = this._batcher;
-			let skeletonRenderer = this._skeletonRenderer;
+			let batcher = this.batcher;
+			let skeletonRenderer = this.skeletonRenderer;
 			batcher.begin(shader);
 			skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
 			skeletonRenderer.draw(batcher, skeleton);
@@ -172,37 +181,66 @@ module spine {
 				
 			shader.unbind();
 
-			if (!this._paused) requestAnimationFrame(() => { this.render(); });
+			if (!this.paused) requestAnimationFrame(() => { this.render(); });
+		}
+
+		private resize () {
+			let canvas = this.canvas;	
+			let w = canvas.clientWidth;
+			let h = canvas.clientHeight;
+			let bounds = this.bounds;
+			if (canvas.width != w || canvas.height != h) {
+				canvas.width = w;
+				canvas.height = h;
+			}
+
+			// magic
+			if (this.config.fitToCanvas) {
+				var centerX = bounds.offset.x + bounds.size.x / 2;
+				var centerY = bounds.offset.y + bounds.size.y / 2;
+				var scaleX = bounds.size.x / canvas.width;
+				var scaleY = bounds.size.y / canvas.height;
+				var scale = Math.max(scaleX, scaleY) * 1.2;
+				if (scale < 1) scale = 1;
+				var width = canvas.width * scale;
+				var height = canvas.height * scale;
+				this.skeleton.x = this.skeleton.y = 0;
+				this.mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
+			} else {
+				this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
+			}
+
+			this.gl.viewport(0, 0, canvas.width, canvas.height);		
 		}
 
 		pause () {
-			this._paused = true;
+			this.paused = true;
 		}
 
 		play () {
-			this._paused = false;
+			this.paused = false;
 			requestAnimationFrame(() => { this.render(); });
 		}
 
 		isPlaying () {
-			return !this._paused;
+			return !this.paused;
 		}
 
 		setAnimation (animationName: string) {
-			if (!this._loaded) throw new Error("Widget isn't loaded yet");
+			if (!this.loaded) throw new Error("Widget isn't loaded yet");
 			this.skeleton.setToSetupPose();
-			this.state.setAnimation(0, animationName, this._config.loop);
+			this.state.setAnimation(0, animationName, this.config.loop);
 		}
 
 
 		static loadWidgets() {
 			let widgets = document.getElementsByClassName("spine-widget");
 			for (var i = 0; i < widgets.length; i++) {
-				SpineWidget.loadWidget(widgets[i]);				
+				SpineWidget.loadWidget(<HTMLElement>widgets[i]);				
 			}
 		}
 
-		static loadWidget(widget: Element) {
+		static loadWidget(widget: HTMLElement) {
 			let config = new SpineWidgetConfig();
 			config.atlas = widget.getAttribute("data-atlas");
 			config.json = widget.getAttribute("data-json");
@@ -212,9 +250,8 @@ module spine {
 			if (widget.getAttribute("data-loop")) config.loop = widget.getAttribute("data-loop") === "true";
 			if (widget.getAttribute("data-scale")) config.scale = parseFloat(widget.getAttribute("data-scale"));
 			if (widget.getAttribute("data-x")) config.x = parseFloat(widget.getAttribute("data-x"));
-			if (widget.getAttribute("data-y")) config.x = parseFloat(widget.getAttribute("data-y"));
-			if (widget.getAttribute("data-width")) config.width = parseInt(widget.getAttribute("data-width"));
-			if (widget.getAttribute("data-height")) config.height = parseInt(widget.getAttribute("data-height"));			
+			if (widget.getAttribute("data-y")) config.y = parseFloat(widget.getAttribute("data-y"));
+			if (widget.getAttribute("data-fit-to-canvas")) config.fitToCanvas = widget.getAttribute("data-fit-to-canvas") === "true";							
 			if (widget.getAttribute("data-background-color")) config.backgroundColor = widget.getAttribute("data-background-color");
 			if (widget.getAttribute("data-premultiplied-alpha")) config.premultipliedAlpha = widget.getAttribute("data-premultiplied-alpha") === "true";			
 
@@ -251,8 +288,7 @@ module spine {
 		scale = 1.0;
 		x = 0;
 		y = 0;
-		width = 640;
-		height = 480;		
+		fitToCanvas = true;		
 		backgroundColor = "#555555";
 		premultipliedAlpha = false;		
 		success: (widget: SpineWidget) => void;

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно