UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
badlogic 2016-08-19 14:10:30 +02:00
parent baccb69e7d
commit 28b97e4532
33 changed files with 4177 additions and 1467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
spine-ts/build/spine-all.d.ts vendored
View File

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

622
spine-ts/build/spine-all.js
View File

File diff suppressed because it is too large Load Diff

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

26
spine-ts/build/spine-core.d.ts vendored
View File

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

94
spine-ts/build/spine-core.js
View File

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

2
spine-ts/build/spine-core.js.map
View File

File diff suppressed because one or more lines are too long

36
spine-ts/build/spine-threejs.d.ts vendored
View File

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

130
spine-ts/build/spine-threejs.js
View File

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

2
spine-ts/build/spine-threejs.js.map
View File

File diff suppressed because one or more lines are too long

110
spine-ts/build/spine-webgl.d.ts vendored
View File

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

436
spine-ts/build/spine-webgl.js
View File

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

2
spine-ts/build/spine-webgl.js.map
View File

File diff suppressed because one or more lines are too long

139
spine-ts/build/spine-widget.d.ts vendored
View File

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

570
spine-ts/build/spine-widget.js
View File

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

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

10
spine-ts/canvas/src/SkeletonRenderer.ts
View File

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

66
spine-ts/core/src/AssetManager.ts
View File

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

4
spine-ts/core/src/SkeletonBounds.ts
View File

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

14
spine-ts/core/src/Utils.ts
View File

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

8
spine-ts/core/src/attachments/MeshAttachment.ts
View File

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

44
spine-ts/threejs/src/MeshBatcher.ts
View File

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

8
spine-ts/threejs/src/SkeletonMesh.ts
View File

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

3
spine-ts/webgl/example/index.html
View File

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

30
spine-ts/webgl/src/GLTexture.ts
View File

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

132
spine-ts/webgl/src/Mesh.ts
View File

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

102
spine-ts/webgl/src/PolygonBatcher.ts
View File

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

96
spine-ts/webgl/src/Shader.ts
View File

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

6
spine-ts/webgl/src/SkeletonRenderer.ts
View File

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

195
spine-ts/widget/example/assets/spineboy.atlas Normal file
View File

@ -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
spine-ts/widget/example/assets/spineboy.json Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
spine-ts/widget/example/assets/spineboy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 KiB

38
spine-ts/widget/example/index.html
View File

@ -3,28 +3,30 @@
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<body> <body>
<center> <center>
<div id="spine-widget" style="margin-bottom: 20px"></div> <!-- You can programmatically initialize a widget -->
<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 id="spine-widget" style="margin-bottom: 20px; width: 640px; height: 480px;"></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 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> </center>
</body> </body>
<script> <script>
new spine.SpineWidget("spine-widget", { new spine.SpineWidget("spine-widget", {
json: "assets/raptor.json", json: "assets/spineboy.json",
atlas: "assets/raptor.atlas", atlas: "assets/spineboy.atlas",
animation: "walk", animation: "run",
scale: 0.4, backgroundColor: "#000000",
backgroundColor: "#000000", success: function (widget) {
success: function (widget) { var animIndex = 0;
var animIndex = 0; widget.canvas.onclick = function () {
widget.canvas.onclick = function () { animIndex++;
animIndex++; let animations = widget.skeleton.data.animations;
let animations = widget.skeleton.data.animations; if (animIndex >= animations.length) animIndex = 0;
if (animIndex >= animations.length) animIndex = 0; widget.setAnimation(animations[animIndex].name);
widget.setAnimation(animations[animIndex].name);
}
} }
}); }
});
</script> </script>
</body> </body>
</html> </html>

150
spine-ts/widget/src/Widget.ts
View File

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