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

[ts] Improvements for player, webgl.

Browse Source 
* Rendering, added support for separate color/alpha src blend funcs.
* LoadingScreen, set camera zoom to fade out and black flash, use PMA to fix ringing artifacts when scaled, fade in to help hide dropped frames as page loads, use separate color/alpha src blend funcs to properly blend quad when loading screen fades out, oxipng PNGs.
* Moved some private constants out of their class to avoid class name prefix.
* Player, clean up full pass OCD town, showError throws when possible so stacktrace isn't lost, added showLoading to config, don't create UI when !showControls, removed findWithId (id is unique for entire document), use built-in for findWithClass/contains, var->let, don't clear screen twice during loading, other minor stuff.
This commit is contained in:
Nathan Sweet 2021-06-20 01:20:31 -04:00
parent 2911f9da5e
commit 78a730a6d7
30 changed files with 2718 additions and 3241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -362,7 +362,7 @@ declare module spine {
loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void; loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): any;
removeAll(): void; removeAll(): void;
isLoadingComplete(): boolean; isLoadingComplete(): boolean;
getToLoad(): number; getToLoad(): number;
@ -1360,21 +1360,15 @@ declare module spine.webgl {
} }
declare module spine.webgl { declare module spine.webgl {
class LoadingScreen { class LoadingScreen {
static FADE_SECONDS: number;
private static loaded;
private static spinnerImg;
private static logoImg;
private renderer; private renderer;
private logo; private logo;
private spinner; private spinner;
private angle; private angle;
private fadeOut; private fadeOut;
private fadeIn;
private timeKeeper; private timeKeeper;
backgroundColor: Color; backgroundColor: Color;
private tempColor; private tempColor;
private firstDraw;
private static SPINNER_DATA;
private static SPINE_LOGO_DATA;
constructor(renderer: SceneRenderer); constructor(renderer: SceneRenderer);
draw(complete?: boolean): void; draw(complete?: boolean): void;
} }
@ -1489,11 +1483,12 @@ declare module spine.webgl {
private lastTexture; private lastTexture;
private verticesLength; private verticesLength;
private indicesLength; private indicesLength;
private srcBlend; private srcColorBlend;
private srcAlphaBlend;
private dstBlend; private dstBlend;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number): void;
draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void; draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
private flush; private flush;
end(): void; end(): void;
@ -1514,17 +1509,14 @@ declare module spine.webgl {
private activeRenderer; private activeRenderer;
skeletonRenderer: SkeletonRenderer; skeletonRenderer: SkeletonRenderer;
skeletonDebugRenderer: SkeletonDebugRenderer; skeletonDebugRenderer: SkeletonDebugRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean); constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean);
begin(): void; begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean, slotRangeStart?: number, slotRangeEnd?: number): void; drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean, slotRangeStart?: number, slotRangeEnd?: number): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void; drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void; drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color?: Color): void; drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color?: Color): void;
drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color?: Color, premultipliedAlpha?: boolean): void; drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color?: Color): void;
drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color, premultipliedAlpha?: boolean): void; drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void; line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void; triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void; quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
@ -1601,11 +1593,12 @@ declare module spine.webgl {
private shader; private shader;
private vertexIndex; private vertexIndex;
private tmp; private tmp;
private srcBlend; private srcColorBlend;
private srcAlphaBlend;
private dstBlend; private dstBlend;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number): void;
setColor(color: Color): void; setColor(color: Color): void;
setColorWith(r: number, g: number, b: number, a: number): void; setColorWith(r: number, g: number, b: number, a: number): void;
point(x: number, y: number, color?: Color): void; point(x: number, y: number, color?: Color): void;
@ -1712,17 +1705,9 @@ declare module spine.webgl {
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
} }
class WebGLBlendModeConverter { class WebGLBlendModeConverter {
static ZERO: number; static getDestGLBlendMode(blendMode: BlendMode): 1 | 771;
static ONE: number; static getSourceColorGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): 1 | 770 | 774;
static SRC_COLOR: number; static getSourceAlphaGLBlendMode(blendMode: BlendMode): 1 | 771 | 769;
static ONE_MINUS_SRC_COLOR: number;
static SRC_ALPHA: number;
static ONE_MINUS_SRC_ALPHA: number;
static DST_ALPHA: number;
static ONE_MINUS_DST_ALPHA: number;
static DST_COLOR: number;
static getDestGLBlendMode(blendMode: BlendMode): number;
static getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
} }
} }
declare module spine.threejs { declare module spine.threejs {
@ -1791,16 +1776,6 @@ declare module spine.threejs {
} }
} }
declare module spine { declare module spine {
interface Viewport {
x: number;
y: number;
width: number;
height: number;
padLeft: string | number;
padRight: string | number;
padTop: string | number;
padBottom: string | number;
}
interface SpinePlayerConfig { interface SpinePlayerConfig {
jsonUrl: string; jsonUrl: string;
jsonField: string; jsonField: string;
@ -1814,6 +1789,7 @@ declare module spine {
skins: string[]; skins: string[];
premultipliedAlpha: boolean; premultipliedAlpha: boolean;
showControls: boolean; showControls: boolean;
showLoading: boolean;
debug: { debug: {
bones: boolean; bones: boolean;
regions: boolean; regions: boolean;
@ -1839,6 +1815,7 @@ declare module spine {
}; };
alpha: boolean; alpha: boolean;
backgroundColor: string; backgroundColor: string;
fullScreenBackgroundColor: string;
backgroundImage: { backgroundImage: {
url: string; url: string;
x: number; x: number;
@ -1846,58 +1823,63 @@ declare module spine {
width: number; width: number;
height: number; height: number;
}; };
fullScreenBackgroundColor: string;
controlBones: string[]; controlBones: string[];
success: (widget: SpinePlayer) => void; success: (widget: SpinePlayer) => void;
error: (widget: SpinePlayer, msg: string) => void; error: (widget: SpinePlayer, msg: string) => void;
downloader: spine.Downloader; downloader: spine.Downloader;
} }
interface Viewport {
x: number;
y: number;
width: number;
height: number;
padLeft: string | number;
padRight: string | number;
padTop: string | number;
padBottom: string | number;
}
class SpinePlayer { class SpinePlayer {
private config; private config;
static HOVER_COLOR_INNER: Color; private parent;
static HOVER_COLOR_OUTER: Color;
static NON_HOVER_COLOR_INNER: Color;
static NON_HOVER_COLOR_OUTER: Color;
private sceneRenderer;
private dom; private dom;
private playerControls;
private canvas; private canvas;
private context;
private sceneRenderer;
private loadingScreen;
private assetManager;
private bg;
private bgFullscreen;
private playerControls;
private timelineSlider; private timelineSlider;
private playButton; private playButton;
private skinButton; private skinButton;
private animationButton; private animationButton;
private context; private selectedBones;
private loadingScreen; private cancelId;
private assetManager; private lastPopup;
error: boolean; error: boolean;
loaded: boolean;
skeleton: Skeleton; skeleton: Skeleton;
animationState: AnimationState; animationState: AnimationState;
private paused; private paused;
private playTime; private playTime;
private speed; private speed;
private time; private time;
private animationViewports; private stopRequestAnimationFrame;
private currentViewport; private currentViewport;
private previousViewport; private previousViewport;
private viewportTransitionStart; private viewportTransitionStart;
private selectedBones;
private parent;
private stopRequestAnimationFrame;
constructor(parent: HTMLElement | string, config: SpinePlayerConfig); constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; private validateConfig;
showError(error: string): void; private showError;
render(): HTMLElement; private render;
private lastPopup; private showSpeedDialog;
showSpeedDialog(speedButton: HTMLElement): void; private showAnimationsDialog;
showAnimationsDialog(animationsButton: HTMLElement): void; private showSkinsDialog;
showSkinsDialog(skinButton: HTMLElement): void; private showSettingsDialog;
showSettingsDialog(settingsButton: HTMLElement): void; private drawFrame;
drawFrame(requestNextFrame?: boolean): void; private scale;
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2; private loadSkeleton;
loadSkeleton(): void; private setupInput;
private cancelId;
setupInput(): void;
private play; private play;
private pause; private pause;
setAnimation(animation: string, loop?: boolean): void; setAnimation(animation: string, loop?: boolean): void;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-canvas.d.ts vendored
View File

@ -362,7 +362,7 @@ declare module spine {
loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void; loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): any;
removeAll(): void; removeAll(): void;
isLoadingComplete(): boolean; isLoadingComplete(): boolean;
getToLoad(): number; getToLoad(): number;

15
spine-ts/build/spine-canvas.js
View File

@ -2918,6 +2918,7 @@ var spine;
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
delete this.assets[path]; delete this.assets[path];
return asset;
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -8101,8 +8102,7 @@ var spine;
this.g = g; this.g = g;
this.b = b; this.b = b;
this.a = a; this.a = a;
this.clamp(); return this.clamp();
return this;
}; };
Color.prototype.setFromColor = function (c) { Color.prototype.setFromColor = function (c) {
this.r = c.r; this.r = c.r;
@ -8113,10 +8113,10 @@ var spine;
}; };
Color.prototype.setFromString = function (hex) { Color.prototype.setFromString = function (hex) {
hex = hex.charAt(0) == '#' ? hex.substr(1) : hex; hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
this.r = parseInt(hex.substr(0, 2), 16) / 255.0; this.r = parseInt(hex.substr(0, 2), 16) / 255;
this.g = parseInt(hex.substr(2, 2), 16) / 255.0; this.g = parseInt(hex.substr(2, 2), 16) / 255;
this.b = parseInt(hex.substr(4, 2), 16) / 255.0; this.b = parseInt(hex.substr(4, 2), 16) / 255;
this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0; this.a = (hex.length != 8 ? 1 : parseInt(hex.substr(6, 2), 16) / 255);
return this; return this;
}; };
Color.prototype.add = function (r, g, b, a) { Color.prototype.add = function (r, g, b, a) {
@ -8124,8 +8124,7 @@ var spine;
this.g += g; this.g += g;
this.b += b; this.b += b;
this.a += a; this.a += a;
this.clamp(); return this.clamp();
return this;
}; };
Color.prototype.clamp = function () { Color.prototype.clamp = function () {
if (this.r < 0) if (this.r < 0)

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

File diff suppressed because one or more lines are too long

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

@ -362,7 +362,7 @@ declare module spine {
loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void; loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): any;
removeAll(): void; removeAll(): void;
isLoadingComplete(): boolean; isLoadingComplete(): boolean;
getToLoad(): number; getToLoad(): number;

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

@ -2918,6 +2918,7 @@ var spine;
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
delete this.assets[path]; delete this.assets[path];
return asset;
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -8101,8 +8102,7 @@ var spine;
this.g = g; this.g = g;
this.b = b; this.b = b;
this.a = a; this.a = a;
this.clamp(); return this.clamp();
return this;
}; };
Color.prototype.setFromColor = function (c) { Color.prototype.setFromColor = function (c) {
this.r = c.r; this.r = c.r;
@ -8113,10 +8113,10 @@ var spine;
}; };
Color.prototype.setFromString = function (hex) { Color.prototype.setFromString = function (hex) {
hex = hex.charAt(0) == '#' ? hex.substr(1) : hex; hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
this.r = parseInt(hex.substr(0, 2), 16) / 255.0; this.r = parseInt(hex.substr(0, 2), 16) / 255;
this.g = parseInt(hex.substr(2, 2), 16) / 255.0; this.g = parseInt(hex.substr(2, 2), 16) / 255;
this.b = parseInt(hex.substr(4, 2), 16) / 255.0; this.b = parseInt(hex.substr(4, 2), 16) / 255;
this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0; this.a = (hex.length != 8 ? 1 : parseInt(hex.substr(6, 2), 16) / 255);
return this; return this;
}; };
Color.prototype.add = function (r, g, b, a) { Color.prototype.add = function (r, g, b, a) {
@ -8124,8 +8124,7 @@ var spine;
this.g += g; this.g += g;
this.b += b; this.b += b;
this.a += a; this.a += a;
this.clamp(); return this.clamp();
return this;
}; };
Color.prototype.clamp = function () { Color.prototype.clamp = function () {
if (this.r < 0) if (this.r < 0)

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

File diff suppressed because one or more lines are too long

114
spine-ts/build/spine-player.d.ts vendored
View File

@ -362,7 +362,7 @@ declare module spine {
loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void; loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): any;
removeAll(): void; removeAll(): void;
isLoadingComplete(): boolean; isLoadingComplete(): boolean;
getToLoad(): number; getToLoad(): number;
@ -1329,21 +1329,15 @@ declare module spine.webgl {
} }
declare module spine.webgl { declare module spine.webgl {
class LoadingScreen { class LoadingScreen {
static FADE_SECONDS: number;
private static loaded;
private static spinnerImg;
private static logoImg;
private renderer; private renderer;
private logo; private logo;
private spinner; private spinner;
private angle; private angle;
private fadeOut; private fadeOut;
private fadeIn;
private timeKeeper; private timeKeeper;
backgroundColor: Color; backgroundColor: Color;
private tempColor; private tempColor;
private firstDraw;
private static SPINNER_DATA;
private static SPINE_LOGO_DATA;
constructor(renderer: SceneRenderer); constructor(renderer: SceneRenderer);
draw(complete?: boolean): void; draw(complete?: boolean): void;
} }
@ -1458,11 +1452,12 @@ declare module spine.webgl {
private lastTexture; private lastTexture;
private verticesLength; private verticesLength;
private indicesLength; private indicesLength;
private srcBlend; private srcColorBlend;
private srcAlphaBlend;
private dstBlend; private dstBlend;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number): void;
draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void; draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
private flush; private flush;
end(): void; end(): void;
@ -1483,17 +1478,14 @@ declare module spine.webgl {
private activeRenderer; private activeRenderer;
skeletonRenderer: SkeletonRenderer; skeletonRenderer: SkeletonRenderer;
skeletonDebugRenderer: SkeletonDebugRenderer; skeletonDebugRenderer: SkeletonDebugRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean); constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean);
begin(): void; begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean, slotRangeStart?: number, slotRangeEnd?: number): void; drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean, slotRangeStart?: number, slotRangeEnd?: number): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void; drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void; drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color?: Color): void; drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color?: Color): void;
drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color?: Color, premultipliedAlpha?: boolean): void; drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color?: Color): void;
drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color, premultipliedAlpha?: boolean): void; drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void; line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void; triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void; quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
@ -1570,11 +1562,12 @@ declare module spine.webgl {
private shader; private shader;
private vertexIndex; private vertexIndex;
private tmp; private tmp;
private srcBlend; private srcColorBlend;
private srcAlphaBlend;
private dstBlend; private dstBlend;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number): void;
setColor(color: Color): void; setColor(color: Color): void;
setColorWith(r: number, g: number, b: number, a: number): void; setColorWith(r: number, g: number, b: number, a: number): void;
point(x: number, y: number, color?: Color): void; point(x: number, y: number, color?: Color): void;
@ -1681,30 +1674,12 @@ declare module spine.webgl {
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
} }
class WebGLBlendModeConverter { class WebGLBlendModeConverter {
static ZERO: number; static getDestGLBlendMode(blendMode: BlendMode): 1 | 771;
static ONE: number; static getSourceColorGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): 1 | 770 | 774;
static SRC_COLOR: number; static getSourceAlphaGLBlendMode(blendMode: BlendMode): 1 | 771 | 769;
static ONE_MINUS_SRC_COLOR: number;
static SRC_ALPHA: number;
static ONE_MINUS_SRC_ALPHA: number;
static DST_ALPHA: number;
static ONE_MINUS_DST_ALPHA: number;
static DST_COLOR: number;
static getDestGLBlendMode(blendMode: BlendMode): number;
static getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
} }
} }
declare module spine { declare module spine {
interface Viewport {
x: number;
y: number;
width: number;
height: number;
padLeft: string | number;
padRight: string | number;
padTop: string | number;
padBottom: string | number;
}
interface SpinePlayerConfig { interface SpinePlayerConfig {
jsonUrl: string; jsonUrl: string;
jsonField: string; jsonField: string;
@ -1718,6 +1693,7 @@ declare module spine {
skins: string[]; skins: string[];
premultipliedAlpha: boolean; premultipliedAlpha: boolean;
showControls: boolean; showControls: boolean;
showLoading: boolean;
debug: { debug: {
bones: boolean; bones: boolean;
regions: boolean; regions: boolean;
@ -1743,6 +1719,7 @@ declare module spine {
}; };
alpha: boolean; alpha: boolean;
backgroundColor: string; backgroundColor: string;
fullScreenBackgroundColor: string;
backgroundImage: { backgroundImage: {
url: string; url: string;
x: number; x: number;
@ -1750,58 +1727,63 @@ declare module spine {
width: number; width: number;
height: number; height: number;
}; };
fullScreenBackgroundColor: string;
controlBones: string[]; controlBones: string[];
success: (widget: SpinePlayer) => void; success: (widget: SpinePlayer) => void;
error: (widget: SpinePlayer, msg: string) => void; error: (widget: SpinePlayer, msg: string) => void;
downloader: spine.Downloader; downloader: spine.Downloader;
} }
interface Viewport {
x: number;
y: number;
width: number;
height: number;
padLeft: string | number;
padRight: string | number;
padTop: string | number;
padBottom: string | number;
}
class SpinePlayer { class SpinePlayer {
private config; private config;
static HOVER_COLOR_INNER: Color; private parent;
static HOVER_COLOR_OUTER: Color;
static NON_HOVER_COLOR_INNER: Color;
static NON_HOVER_COLOR_OUTER: Color;
private sceneRenderer;
private dom; private dom;
private playerControls;
private canvas; private canvas;
private context;
private sceneRenderer;
private loadingScreen;
private assetManager;
private bg;
private bgFullscreen;
private playerControls;
private timelineSlider; private timelineSlider;
private playButton; private playButton;
private skinButton; private skinButton;
private animationButton; private animationButton;
private context; private selectedBones;
private loadingScreen; private cancelId;
private assetManager; private lastPopup;
error: boolean; error: boolean;
loaded: boolean;
skeleton: Skeleton; skeleton: Skeleton;
animationState: AnimationState; animationState: AnimationState;
private paused; private paused;
private playTime; private playTime;
private speed; private speed;
private time; private time;
private animationViewports; private stopRequestAnimationFrame;
private currentViewport; private currentViewport;
private previousViewport; private previousViewport;
private viewportTransitionStart; private viewportTransitionStart;
private selectedBones;
private parent;
private stopRequestAnimationFrame;
constructor(parent: HTMLElement | string, config: SpinePlayerConfig); constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; private validateConfig;
showError(error: string): void; private showError;
render(): HTMLElement; private render;
private lastPopup; private showSpeedDialog;
showSpeedDialog(speedButton: HTMLElement): void; private showAnimationsDialog;
showAnimationsDialog(animationsButton: HTMLElement): void; private showSkinsDialog;
showSkinsDialog(skinButton: HTMLElement): void; private showSettingsDialog;
showSettingsDialog(settingsButton: HTMLElement): void; private drawFrame;
drawFrame(requestNextFrame?: boolean): void; private scale;
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2; private loadSkeleton;
loadSkeleton(): void; private setupInput;
private cancelId;
setupInput(): void;
private play; private play;
private pause; private pause;
setAnimation(animation: string, loop?: boolean): void; setAnimation(animation: string, loop?: boolean): void;

1955
spine-ts/build/spine-player.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -362,7 +362,7 @@ declare module spine {
loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void; loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): any;
removeAll(): void; removeAll(): void;
isLoadingComplete(): boolean; isLoadingComplete(): boolean;
getToLoad(): number; getToLoad(): number;

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

@ -2918,6 +2918,7 @@ var spine;
if (asset.dispose) if (asset.dispose)
asset.dispose(); asset.dispose();
delete this.assets[path]; delete this.assets[path];
return asset;
}; };
AssetManager.prototype.removeAll = function () { AssetManager.prototype.removeAll = function () {
for (var key in this.assets) { for (var key in this.assets) {
@ -8101,8 +8102,7 @@ var spine;
this.g = g; this.g = g;
this.b = b; this.b = b;
this.a = a; this.a = a;
this.clamp(); return this.clamp();
return this;
}; };
Color.prototype.setFromColor = function (c) { Color.prototype.setFromColor = function (c) {
this.r = c.r; this.r = c.r;
@ -8113,10 +8113,10 @@ var spine;
}; };
Color.prototype.setFromString = function (hex) { Color.prototype.setFromString = function (hex) {
hex = hex.charAt(0) == '#' ? hex.substr(1) : hex; hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
this.r = parseInt(hex.substr(0, 2), 16) / 255.0; this.r = parseInt(hex.substr(0, 2), 16) / 255;
this.g = parseInt(hex.substr(2, 2), 16) / 255.0; this.g = parseInt(hex.substr(2, 2), 16) / 255;
this.b = parseInt(hex.substr(4, 2), 16) / 255.0; this.b = parseInt(hex.substr(4, 2), 16) / 255;
this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0; this.a = (hex.length != 8 ? 1 : parseInt(hex.substr(6, 2), 16) / 255);
return this; return this;
}; };
Color.prototype.add = function (r, g, b, a) { Color.prototype.add = function (r, g, b, a) {
@ -8124,8 +8124,7 @@ var spine;
this.g += g; this.g += g;
this.b += b; this.b += b;
this.a += a; this.a += a;
this.clamp(); return this.clamp();
return this;
}; };
Color.prototype.clamp = function () { Color.prototype.clamp = function () {
if (this.r < 0) if (this.r < 0)

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

File diff suppressed because one or more lines are too long

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

@ -362,7 +362,7 @@ declare module spine {
loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void; loadTexture(path: string, success?: (path: string, image: HTMLImageElement | ImageBitmap) => void, error?: (path: string, message: string) => void): void;
loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void; loadTextureAtlas(path: string, success?: (path: string, atlas: TextureAtlas) => void, error?: (path: string, message: string) => void): void;
get(path: string): any; get(path: string): any;
remove(path: string): void; remove(path: string): any;
removeAll(): void; removeAll(): void;
isLoadingComplete(): boolean; isLoadingComplete(): boolean;
getToLoad(): number; getToLoad(): number;
@ -1329,21 +1329,15 @@ declare module spine.webgl {
} }
declare module spine.webgl { declare module spine.webgl {
class LoadingScreen { class LoadingScreen {
static FADE_SECONDS: number;
private static loaded;
private static spinnerImg;
private static logoImg;
private renderer; private renderer;
private logo; private logo;
private spinner; private spinner;
private angle; private angle;
private fadeOut; private fadeOut;
private fadeIn;
private timeKeeper; private timeKeeper;
backgroundColor: Color; backgroundColor: Color;
private tempColor; private tempColor;
private firstDraw;
private static SPINNER_DATA;
private static SPINE_LOGO_DATA;
constructor(renderer: SceneRenderer); constructor(renderer: SceneRenderer);
draw(complete?: boolean): void; draw(complete?: boolean): void;
} }
@ -1458,11 +1452,12 @@ declare module spine.webgl {
private lastTexture; private lastTexture;
private verticesLength; private verticesLength;
private indicesLength; private indicesLength;
private srcBlend; private srcColorBlend;
private srcAlphaBlend;
private dstBlend; private dstBlend;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number): void;
draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void; draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
private flush; private flush;
end(): void; end(): void;
@ -1483,17 +1478,14 @@ declare module spine.webgl {
private activeRenderer; private activeRenderer;
skeletonRenderer: SkeletonRenderer; skeletonRenderer: SkeletonRenderer;
skeletonDebugRenderer: SkeletonDebugRenderer; skeletonDebugRenderer: SkeletonDebugRenderer;
private QUAD;
private QUAD_TRIANGLES;
private WHITE;
constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean); constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean);
begin(): void; begin(): void;
drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean, slotRangeStart?: number, slotRangeEnd?: number): void; drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean, slotRangeStart?: number, slotRangeEnd?: number): void;
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void; drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void; drawTexture(texture: GLTexture, x: number, y: number, width: number, height: number, color?: Color): void;
drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color?: Color): void; drawTextureUV(texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color?: Color): void;
drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color?: Color, premultipliedAlpha?: boolean): void; drawTextureRotated(texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color?: Color): void;
drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color, premultipliedAlpha?: boolean): void; drawRegion(region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color?: Color): void;
line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void; line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void; triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void; quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
@ -1570,11 +1562,12 @@ declare module spine.webgl {
private shader; private shader;
private vertexIndex; private vertexIndex;
private tmp; private tmp;
private srcBlend; private srcColorBlend;
private srcAlphaBlend;
private dstBlend; private dstBlend;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number);
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcColorBlend: number, srcAlphaBlend: number, dstBlend: number): void;
setColor(color: Color): void; setColor(color: Color): void;
setColorWith(r: number, g: number, b: number, a: number): void; setColorWith(r: number, g: number, b: number, a: number): void;
point(x: number, y: number, color?: Color): void; point(x: number, y: number, color?: Color): void;
@ -1681,16 +1674,8 @@ declare module spine.webgl {
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
} }
class WebGLBlendModeConverter { class WebGLBlendModeConverter {
static ZERO: number; static getDestGLBlendMode(blendMode: BlendMode): 1 | 771;
static ONE: number; static getSourceColorGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): 1 | 770 | 774;
static SRC_COLOR: number; static getSourceAlphaGLBlendMode(blendMode: BlendMode): 1 | 771 | 769;
static ONE_MINUS_SRC_COLOR: number;
static SRC_ALPHA: number;
static ONE_MINUS_SRC_ALPHA: number;
static DST_ALPHA: number;
static ONE_MINUS_DST_ALPHA: number;
static DST_COLOR: number;
static getDestGLBlendMode(blendMode: BlendMode): number;
static getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
} }
} }

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -191,6 +191,7 @@ module spine {
let asset = this.assets[path]; let asset = this.assets[path];
if ((<any>asset).dispose) (<any>asset).dispose(); if ((<any>asset).dispose) (<any>asset).dispose();
delete this.assets[path]; delete this.assets[path];
return asset;
} }
removeAll () { removeAll () {

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

@ -108,8 +108,7 @@ module spine {
this.g = g; this.g = g;
this.b = b; this.b = b;
this.a = a; this.a = a;
this.clamp(); return this.clamp();
return this;
} }
setFromColor (c: Color) { setFromColor (c: Color) {
@ -122,10 +121,10 @@ module spine {
setFromString (hex: string) { setFromString (hex: string) {
hex = hex.charAt(0) == '#' ? hex.substr(1) : hex; hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
this.r = parseInt(hex.substr(0, 2), 16) / 255.0; this.r = parseInt(hex.substr(0, 2), 16) / 255;
this.g = parseInt(hex.substr(2, 2), 16) / 255.0; this.g = parseInt(hex.substr(2, 2), 16) / 255;
this.b = parseInt(hex.substr(4, 2), 16) / 255.0; this.b = parseInt(hex.substr(4, 2), 16) / 255;
this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0; this.a = (hex.length != 8 ? 1 : parseInt(hex.substr(6, 2), 16) / 255);
return this; return this;
} }
@ -134,8 +133,7 @@ module spine {
this.g += g; this.g += g;
this.b += b; this.b += b;
this.a += a; this.a += a;
this.clamp(); return this.clamp();
return this;
} }
clamp () { clamp () {

5
spine-ts/player/example/index.html
View File

@ -15,8 +15,8 @@ body {
</style> </style>
<body> <body>
<div id="container" style="width: 640px; height: 380px;"></div> <div id="container" style="width:640px; height:380px; background:#cccccc"></div>
<div id="container-raptor" style="width: 640px; height: 380px;"></div> <div id="container-raptor" style="width:640px; height:380px;"></div>
<div> <div>
<button id="walk">Walk</button> <button id="walk">Walk</button>
<button id="jump">Jump</button> <button id="jump">Jump</button>
@ -50,6 +50,7 @@ body {
backgroundColor: "#00000000", backgroundColor: "#00000000",
alpha: true, alpha: true,
defaultMix: 1, defaultMix: 1,
controlBones: ["root"],
success: (player) => { success: (player) => {
// Register button click event handlers once the // Register button click event handlers once the
// skeleton has been loaded successfully // skeleton has been loaded successfully

1122
spine-ts/player/src/Player.ts
View File

File diff suppressed because one or more lines are too long

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

@ -52,7 +52,7 @@ module spine.webgl {
} }
static validateMagFilter (magFilter: TextureFilter) { static validateMagFilter (magFilter: TextureFilter) {
switch(magFilter) { switch (magFilter) {
case TextureFilter.MipMap: case TextureFilter.MipMap:
case TextureFilter.MipMapLinearLinear: case TextureFilter.MipMapLinearLinear:
case TextureFilter.MipMapLinearNearest: case TextureFilter.MipMapLinearNearest:
@ -73,9 +73,7 @@ module spine.webgl {
update (useMipMaps: boolean) { update (useMipMaps: boolean) {
let gl = this.context.gl; let gl = this.context.gl;
if (!this.texture) { if (!this.texture) this.texture = this.context.gl.createTexture();
this.texture = this.context.gl.createTexture();
}
this.bind(); this.bind();
if (GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); if (GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);

117
spine-ts/webgl/src/LoadingScreen.ts
View File

File diff suppressed because one or more lines are too long

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

@ -37,7 +37,8 @@ module spine.webgl {
private lastTexture: GLTexture = null; private lastTexture: GLTexture = null;
private verticesLength = 0; private verticesLength = 0;
private indicesLength = 0; private indicesLength = 0;
private srcBlend: number; private srcColorBlend: number;
private srcAlphaBlend: number;
private dstBlend: number; private dstBlend: number;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) { constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) {
@ -47,29 +48,32 @@ module spine.webgl {
[new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute(), new Color2Attribute()] : [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute(), new Color2Attribute()] :
[new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()]; [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()];
this.mesh = new Mesh(context, attributes, maxVertices, maxVertices * 3); this.mesh = new Mesh(context, attributes, maxVertices, maxVertices * 3);
this.srcBlend = this.context.gl.SRC_ALPHA; let gl = this.context.gl;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA; this.srcColorBlend = gl.SRC_ALPHA;
this.srcAlphaBlend = gl.ONE;
this.dstBlend = gl.ONE_MINUS_SRC_ALPHA;
} }
begin (shader: Shader) { begin (shader: Shader) {
let gl = this.context.gl;
if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()"); if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
this.drawCalls = 0; this.drawCalls = 0;
this.shader = shader; this.shader = shader;
this.lastTexture = null; this.lastTexture = null;
this.isDrawing = true; this.isDrawing = true;
let gl = this.context.gl;
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend); gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend);
} }
setBlendMode (srcBlend: number, dstBlend: number) { setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) {
let gl = this.context.gl; this.srcColorBlend = srcColorBlend;
this.srcBlend = srcBlend; this.srcAlphaBlend = srcAlphaBlend;
this.dstBlend = dstBlend; this.dstBlend = dstBlend;
if (this.isDrawing) { if (this.isDrawing) {
this.flush(); this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend); let gl = this.context.gl;
gl.blendFuncSeparate(srcColorBlend, dstBlend, srcAlphaBlend, dstBlend);
} }
} }
@ -95,11 +99,10 @@ module spine.webgl {
} }
private flush () { private flush () {
let gl = this.context.gl;
if (this.verticesLength == 0) return; if (this.verticesLength == 0) return;
this.lastTexture.bind(); this.lastTexture.bind();
this.mesh.draw(this.shader, gl.TRIANGLES); this.mesh.draw(this.shader, this.context.gl.TRIANGLES);
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
@ -109,17 +112,19 @@ module spine.webgl {
} }
end () { end () {
let gl = this.context.gl;
if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()"); if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
if (this.verticesLength > 0 || this.indicesLength > 0) this.flush(); if (this.verticesLength > 0 || this.indicesLength > 0) this.flush();
this.shader = null; this.shader = null;
this.lastTexture = null; this.lastTexture = null;
this.isDrawing = false; this.isDrawing = false;
let gl = this.context.gl;
gl.disable(gl.BLEND); gl.disable(gl.BLEND);
} }
getDrawCalls () { return this.drawCalls; } getDrawCalls () {
return this.drawCalls;
}
dispose () { dispose () {
this.mesh.dispose(); this.mesh.dispose();

52
spine-ts/webgl/src/SceneRenderer.ts
View File

@ -28,6 +28,15 @@
*****************************************************************************/ *****************************************************************************/
module spine.webgl { module spine.webgl {
const quad = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
const QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
const WHITE = new Color(1, 1, 1, 1);
export class SceneRenderer implements Disposable { export class SceneRenderer implements Disposable {
context: ManagedWebGLRenderingContext; context: ManagedWebGLRenderingContext;
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
@ -37,17 +46,9 @@ module spine.webgl {
private batcherShader: Shader; private batcherShader: Shader;
private shapes: ShapeRenderer; private shapes: ShapeRenderer;
private shapesShader: Shader; private shapesShader: Shader;
private activeRenderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer = null; private activeRenderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer;
skeletonRenderer: SkeletonRenderer; skeletonRenderer: SkeletonRenderer;
skeletonDebugRenderer: SkeletonDebugRenderer; skeletonDebugRenderer: SkeletonDebugRenderer;
private QUAD = [
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
0, 0, 1, 1, 1, 1, 0, 0,
];
private QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
private WHITE = new Color(1, 1, 1, 1);
constructor (canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true) { constructor (canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true) {
this.canvas = canvas; this.canvas = canvas;
@ -73,7 +74,7 @@ module spine.webgl {
this.skeletonRenderer.draw(this.batcher, skeleton, slotRangeStart, slotRangeEnd); this.skeletonRenderer.draw(this.batcher, skeleton, slotRangeStart, slotRangeEnd);
} }
drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha = false, ignoredBones: Array<string> = null) { drawSkeletonDebug (skeleton: Skeleton, premultipliedAlpha = false, ignoredBones: Array<string> = null) {
this.enableRenderer(this.shapes); this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha; this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones); this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
@ -81,8 +82,7 @@ module spine.webgl {
drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) { drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE; if (color === null) color = WHITE;
let quad = this.QUAD;
var i = 0; var i = 0;
quad[i++] = x; quad[i++] = x;
quad[i++] = y; quad[i++] = y;
@ -140,13 +140,12 @@ module spine.webgl {
quad[i++] = 0; quad[i++] = 0;
quad[i] = 0; quad[i] = 0;
} }
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, QUAD_TRIANGLES);
} }
drawTextureUV (texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color: Color = null) { drawTextureUV (texture: GLTexture, x: number, y: number, width: number, height: number, u: number, v: number, u2: number, v2: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE; if (color === null) color = WHITE;
let quad = this.QUAD;
var i = 0; var i = 0;
quad[i++] = x; quad[i++] = x;
quad[i++] = y; quad[i++] = y;
@ -204,13 +203,12 @@ module spine.webgl {
quad[i++] = 0; quad[i++] = 0;
quad[i] = 0; quad[i] = 0;
} }
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, QUAD_TRIANGLES);
} }
drawTextureRotated (texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color: Color = null, premultipliedAlpha: boolean = false) { drawTextureRotated (texture: GLTexture, x: number, y: number, width: number, height: number, pivotX: number, pivotY: number, angle: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE; if (color === null) color = WHITE;
let quad = this.QUAD;
// bottom left and top right corner points relative to origin // bottom left and top right corner points relative to origin
let worldOriginX = x + pivotX; let worldOriginX = x + pivotX;
@ -335,13 +333,12 @@ module spine.webgl {
quad[i++] = 0; quad[i++] = 0;
quad[i] = 0; quad[i] = 0;
} }
this.batcher.draw(texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(texture, quad, QUAD_TRIANGLES);
} }
drawRegion (region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color: Color = null, premultipliedAlpha: boolean = false) { drawRegion (region: TextureAtlasRegion, x: number, y: number, width: number, height: number, color: Color = null) {
this.enableRenderer(this.batcher); this.enableRenderer(this.batcher);
if (color === null) color = this.WHITE; if (color === null) color = WHITE;
let quad = this.QUAD;
var i = 0; var i = 0;
quad[i++] = x; quad[i++] = x;
quad[i++] = y; quad[i++] = y;
@ -399,7 +396,7 @@ module spine.webgl {
quad[i++] = 0; quad[i++] = 0;
quad[i] = 0; quad[i] = 0;
} }
this.batcher.draw(<GLTexture>region.texture, quad, this.QUAD_TRIANGLES); this.batcher.draw(<GLTexture>region.texture, quad, QUAD_TRIANGLES);
} }
line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) { line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {
@ -458,11 +455,10 @@ module spine.webgl {
} }
this.context.gl.viewport(0, 0, canvas.width, canvas.height); this.context.gl.viewport(0, 0, canvas.width, canvas.height);
if (resizeMode === ResizeMode.Stretch) { // Nothing to do for stretch, we simply apply the viewport size of the camera.
// nothing to do, we simply apply the viewport size of the camera if (resizeMode === ResizeMode.Expand)
} else if (resizeMode === ResizeMode.Expand) {
this.camera.setViewport(w, h); this.camera.setViewport(w, h);
} else if (resizeMode === ResizeMode.Fit) { else if (resizeMode === ResizeMode.Fit) {
let sourceWidth = canvas.width, sourceHeight = canvas.height; let sourceWidth = canvas.width, sourceHeight = canvas.height;
let targetWidth = this.camera.viewportWidth, targetHeight = this.camera.viewportHeight; let targetWidth = this.camera.viewportWidth, targetHeight = this.camera.viewportHeight;
let targetRatio = targetHeight / targetWidth; let targetRatio = targetHeight / targetWidth;

23
spine-ts/webgl/src/ShapeRenderer.ts
View File

@ -37,15 +37,18 @@ module spine.webgl {
private shader: Shader; private shader: Shader;
private vertexIndex = 0; private vertexIndex = 0;
private tmp = new Vector2(); private tmp = new Vector2();
private srcBlend: number; private srcColorBlend: number;
private srcAlphaBlend: number;
private dstBlend: number; private dstBlend: number;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) { constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0); this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
this.srcBlend = this.context.gl.SRC_ALPHA; let gl = this.context.gl;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA; this.srcColorBlend = gl.SRC_ALPHA;
this.srcAlphaBlend = gl.ONE;
this.dstBlend = gl.ONE_MINUS_SRC_ALPHA;
} }
begin (shader: Shader) { begin (shader: Shader) {
@ -56,16 +59,17 @@ module spine.webgl {
let gl = this.context.gl; let gl = this.context.gl;
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.blendFunc(this.srcBlend, this.dstBlend); gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend);
} }
setBlendMode (srcBlend: number, dstBlend: number) { setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) {
let gl = this.context.gl; this.srcColorBlend = srcColorBlend;
this.srcBlend = srcBlend; this.srcAlphaBlend = srcAlphaBlend;
this.dstBlend = dstBlend; this.dstBlend = dstBlend;
if (this.isDrawing) { if (this.isDrawing) {
this.flush(); this.flush();
gl.blendFunc(this.srcBlend, this.dstBlend); let gl = this.context.gl;
gl.blendFuncSeparate(srcColorBlend, dstBlend, srcAlphaBlend, dstBlend);
} }
} }
@ -309,7 +313,8 @@ module spine.webgl {
end () { end () {
if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called"); if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
this.flush(); this.flush();
this.context.gl.disable(this.context.gl.BLEND); let gl = this.context.gl;
gl.disable(gl.BLEND);
this.isDrawing = false; this.isDrawing = false;
} }

2
spine-ts/webgl/src/SkeletonDebugRenderer.ts
View File

@ -64,7 +64,7 @@ module spine.webgl {
let skeletonY = skeleton.y; let skeletonY = skeleton.y;
let gl = this.context.gl; let gl = this.context.gl;
let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA; let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
shapes.setBlendMode(srcFunc, gl.ONE_MINUS_SRC_ALPHA); shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
let bones = skeleton.bones; let bones = skeleton.bones;
if (this.drawBones) { if (this.drawBones) {

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

@ -160,7 +160,10 @@ module spine.webgl {
let slotBlendMode = slot.data.blendMode; let slotBlendMode = slot.data.blendMode;
if (slotBlendMode != blendMode) { if (slotBlendMode != blendMode) {
blendMode = slotBlendMode; blendMode = slotBlendMode;
batcher.setBlendMode(WebGLBlendModeConverter.getSourceGLBlendMode(blendMode, premultipliedAlpha), WebGLBlendModeConverter.getDestGLBlendMode(blendMode)); batcher.setBlendMode(
WebGLBlendModeConverter.getSourceColorGLBlendMode(blendMode, premultipliedAlpha),
WebGLBlendModeConverter.getSourceAlphaGLBlendMode(blendMode),
WebGLBlendModeConverter.getDestGLBlendMode(blendMode));
} }
if (clipper.isClipping()) { if (clipper.isClipping()) {

64
spine-ts/webgl/src/WebGL.ts
View File

@ -34,9 +34,9 @@ module spine.webgl {
private restorables = new Array<Restorable>(); private restorables = new Array<Restorable>();
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig: any = { alpha: "true" }) { constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig: any = { alpha: "true" }) {
if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) { if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
} else { else {
this.gl = canvasOrContext; this.gl = canvasOrContext;
this.canvas = this.gl.canvas; this.canvas = this.gl.canvas;
} }
@ -47,15 +47,12 @@ module spine.webgl {
this.canvas = canvas; this.canvas = canvas;
canvas.addEventListener("webglcontextlost", (e: any) => { canvas.addEventListener("webglcontextlost", (e: any) => {
let event = <WebGLContextEvent>e; let event = <WebGLContextEvent>e;
if (e) { if (e) e.preventDefault();
e.preventDefault();
}
}); });
canvas.addEventListener("webglcontextrestored", (e: any) => { canvas.addEventListener("webglcontextrestored", (e: any) => {
for (let i = 0, n = this.restorables.length; i < n; i++) { for (let i = 0, n = this.restorables.length; i < n; i++)
this.restorables[i].restore(); this.restorables[i].restore();
}
}); });
} }
@ -69,34 +66,41 @@ module spine.webgl {
} }
} }
export class WebGLBlendModeConverter { const ONE = 1;
static ZERO = 0; const ONE_MINUS_SRC_COLOR = 0x0301;
static ONE = 1; const SRC_ALPHA = 0x0302;
static SRC_COLOR = 0x0300; const ONE_MINUS_SRC_ALPHA = 0x0303;
static ONE_MINUS_SRC_COLOR = 0x0301; const ONE_MINUS_DST_ALPHA = 0x0305;
static SRC_ALPHA = 0x0302; const DST_COLOR = 0x0306;
static ONE_MINUS_SRC_ALPHA = 0x0303;
static DST_ALPHA = 0x0304;
static ONE_MINUS_DST_ALPHA = 0x0305;
static DST_COLOR = 0x0306
export class WebGLBlendModeConverter {
static getDestGLBlendMode (blendMode: BlendMode) { static getDestGLBlendMode (blendMode: BlendMode) {
switch(blendMode) { switch (blendMode) {
case BlendMode.Normal: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA; case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA;
case BlendMode.Additive: return WebGLBlendModeConverter.ONE; case BlendMode.Additive: return ONE;
case BlendMode.Multiply: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA; case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA;
case BlendMode.Screen: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA; case BlendMode.Screen: return ONE_MINUS_SRC_ALPHA;
default: throw new Error("Unknown blend mode: " + blendMode); default: throw new Error("Unknown blend mode: " + blendMode);
} }
} }
static getSourceGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { static getSourceColorGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) {
switch(blendMode) { switch (blendMode) {
case BlendMode.Normal: return premultipliedAlpha? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA; case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA;
case BlendMode.Additive: return premultipliedAlpha? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA; case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA;
case BlendMode.Multiply: return WebGLBlendModeConverter.DST_COLOR; case BlendMode.Multiply: return DST_COLOR;
case BlendMode.Screen: return WebGLBlendModeConverter.ONE; case BlendMode.Screen: return ONE;
default: throw new Error("Unknown blend mode: " + blendMode); default: throw new Error("Unknown blend mode: " + blendMode);
}
}
static getSourceAlphaGLBlendMode (blendMode: BlendMode) {
switch (blendMode) {
case BlendMode.Normal: return ONE;
case BlendMode.Additive: return ONE;
case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA;
case BlendMode.Screen: return ONE_MINUS_SRC_COLOR;
default: throw new Error("Unknown blend mode: " + blendMode);
} }
} }
} }