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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 };
}
function calculateBounds(skeleton) {
var data = skeleton.data;
function calculateBounds(skeleton) {
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();

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

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

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

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

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

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

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

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

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];
premultipliedAlpha = false;
private _gl: WebGLRenderingContext;
private gl: WebGLRenderingContext;
constructor (gl: WebGLRenderingContext) {
this._gl = gl;
this.gl = gl;
}
draw (batcher: PolygonBatcher, skeleton: Skeleton) {
@ -68,7 +68,7 @@ module spine.webgl {
let slotBlendMode = slot.data.blendMode;
if (slotBlendMode != blendMode) {
blendMode = slotBlendMode;
batcher.setBlendMode(getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this._gl, blendMode));
batcher.setBlendMode(getSourceGLBlendMode(this.gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this.gl, blendMode));
}
batcher.draw(texture, vertices, triangles);
}

195
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>
<body>
<center>
<div id="spine-widget" style="margin-bottom: 20px"></div>
<div style="margin-bottom: 20px" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="Jump" data-scale="0.25" data-x="40"></div>
<div style="margin-bottom: 20px" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="walk" data-scale="0.2" data-width="320" data-height="240" data-background-color="#cc0000"></div>
<!-- You can programmatically initialize a widget -->
<div id="spine-widget" style="margin-bottom: 20px; width: 640px; height: 480px;"></div>
<!-- You can also specify your own x/y and scale for the skeleton -->
<div style="margin-bottom: 20px; width: 100%; height: 150px;" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="Jump" data-fit-to-canvas="false" data-scale="0.1" data-x="200" data-y="10"></div>
<!-- Or make things real small -->
<div style="margin-bottom: 20px; width: 320px; height: 240px;" class="spine-widget" data-json="assets/raptor.json" data-atlas="assets/raptor.atlas" data-animation="walk" data-background-color="#cc0000"></div>
</center>
</body>
<script>
new spine.SpineWidget("spine-widget", {
json: "assets/raptor.json",
atlas: "assets/raptor.atlas",
animation: "walk",
scale: 0.4,
backgroundColor: "#000000",
success: function (widget) {
var animIndex = 0;
widget.canvas.onclick = function () {
animIndex++;
let animations = widget.skeleton.data.animations;
if (animIndex >= animations.length) animIndex = 0;
widget.setAnimation(animations[animIndex].name);
}
new spine.SpineWidget("spine-widget", {
json: "assets/spineboy.json",
atlas: "assets/spineboy.atlas",
animation: "run",
backgroundColor: "#000000",
success: function (widget) {
var animIndex = 0;
widget.canvas.onclick = function () {
animIndex++;
let animations = widget.skeleton.data.animations;
if (animIndex >= animations.length) animIndex = 0;
widget.setAnimation(animations[animIndex].name);
}
});
}
});
</script>
</body>
</html>

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

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