mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[ts] Formatting
This commit is contained in:
parent
9e4ee3d2af
commit
babe296157
@ -40,36 +40,36 @@ export class AssetManagerBase implements Disposable {
|
|||||||
private toLoad = 0;
|
private toLoad = 0;
|
||||||
private loaded = 0;
|
private loaded = 0;
|
||||||
|
|
||||||
constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture, pathPrefix: string = "", downloader: Downloader = null) {
|
constructor (textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture, pathPrefix: string = "", downloader: Downloader = null) {
|
||||||
this.textureLoader = textureLoader;
|
this.textureLoader = textureLoader;
|
||||||
this.pathPrefix = pathPrefix;
|
this.pathPrefix = pathPrefix;
|
||||||
this.downloader = downloader || new Downloader();
|
this.downloader = downloader || new Downloader();
|
||||||
}
|
}
|
||||||
|
|
||||||
private start(path: string): string {
|
private start (path: string): string {
|
||||||
this.toLoad++;
|
this.toLoad++;
|
||||||
return this.pathPrefix + path;
|
return this.pathPrefix + path;
|
||||||
}
|
}
|
||||||
|
|
||||||
private success(callback: (path: string, data: any) => void, path: string, asset: any) {
|
private success (callback: (path: string, data: any) => void, path: string, asset: any) {
|
||||||
this.toLoad--;
|
this.toLoad--;
|
||||||
this.loaded++;
|
this.loaded++;
|
||||||
this.assets[path] = asset;
|
this.assets[path] = asset;
|
||||||
if (callback) callback(path, asset);
|
if (callback) callback(path, asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
private error(callback: (path: string, message: string) => void, path: string, message: string) {
|
private error (callback: (path: string, message: string) => void, path: string, message: string) {
|
||||||
this.toLoad--;
|
this.toLoad--;
|
||||||
this.loaded++;
|
this.loaded++;
|
||||||
this.errors[path] = message;
|
this.errors[path] = message;
|
||||||
if (callback) callback(path, message);
|
if (callback) callback(path, message);
|
||||||
}
|
}
|
||||||
|
|
||||||
setRawDataURI(path: string, data: string) {
|
setRawDataURI (path: string, data: string) {
|
||||||
this.downloader.rawDataUris[this.pathPrefix + path] = data;
|
this.downloader.rawDataUris[this.pathPrefix + path] = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
loadBinary(path: string,
|
loadBinary (path: string,
|
||||||
success: (path: string, binary: Uint8Array) => void = null,
|
success: (path: string, binary: Uint8Array) => void = null,
|
||||||
error: (path: string, message: string) => void = null) {
|
error: (path: string, message: string) => void = null) {
|
||||||
path = this.start(path);
|
path = this.start(path);
|
||||||
@ -81,7 +81,7 @@ export class AssetManagerBase implements Disposable {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
loadText(path: string,
|
loadText (path: string,
|
||||||
success: (path: string, text: string) => void = null,
|
success: (path: string, text: string) => void = null,
|
||||||
error: (path: string, message: string) => void = null) {
|
error: (path: string, message: string) => void = null) {
|
||||||
path = this.start(path);
|
path = this.start(path);
|
||||||
@ -93,7 +93,7 @@ export class AssetManagerBase implements Disposable {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
loadJson(path: string,
|
loadJson (path: string,
|
||||||
success: (path: string, object: object) => void = null,
|
success: (path: string, object: object) => void = null,
|
||||||
error: (path: string, message: string) => void = null) {
|
error: (path: string, message: string) => void = null) {
|
||||||
path = this.start(path);
|
path = this.start(path);
|
||||||
@ -105,7 +105,7 @@ export class AssetManagerBase implements Disposable {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
loadTexture(path: string,
|
loadTexture (path: string,
|
||||||
success: (path: string, texture: Texture) => void = null,
|
success: (path: string, texture: Texture) => void = null,
|
||||||
error: (path: string, message: string) => void = null) {
|
error: (path: string, message: string) => void = null) {
|
||||||
path = this.start(path);
|
path = this.start(path);
|
||||||
@ -136,7 +136,7 @@ export class AssetManagerBase implements Disposable {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
loadTextureAtlas(path: string,
|
loadTextureAtlas (path: string,
|
||||||
success: (path: string, atlas: TextureAtlas) => void = null,
|
success: (path: string, atlas: TextureAtlas) => void = null,
|
||||||
error: (path: string, message: string) => void = null
|
error: (path: string, message: string) => void = null
|
||||||
) {
|
) {
|
||||||
@ -170,11 +170,11 @@ export class AssetManagerBase implements Disposable {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
get(path: string) {
|
get (path: string) {
|
||||||
return this.assets[this.pathPrefix + path];
|
return this.assets[this.pathPrefix + path];
|
||||||
}
|
}
|
||||||
|
|
||||||
require(path: string) {
|
require (path: string) {
|
||||||
path = this.pathPrefix + path;
|
path = this.pathPrefix + path;
|
||||||
let asset = this.assets[path];
|
let asset = this.assets[path];
|
||||||
if (asset) return asset;
|
if (asset) return asset;
|
||||||
@ -182,7 +182,7 @@ export class AssetManagerBase implements Disposable {
|
|||||||
throw Error("Asset not found: " + path + (error ? "\n" + error : ""));
|
throw Error("Asset not found: " + path + (error ? "\n" + error : ""));
|
||||||
}
|
}
|
||||||
|
|
||||||
remove(path: string) {
|
remove (path: string) {
|
||||||
path = this.pathPrefix + path;
|
path = this.pathPrefix + path;
|
||||||
let asset = this.assets[path];
|
let asset = this.assets[path];
|
||||||
if ((<any>asset).dispose) (<any>asset).dispose();
|
if ((<any>asset).dispose) (<any>asset).dispose();
|
||||||
@ -190,7 +190,7 @@ export class AssetManagerBase implements Disposable {
|
|||||||
return asset;
|
return asset;
|
||||||
}
|
}
|
||||||
|
|
||||||
removeAll() {
|
removeAll () {
|
||||||
for (let key in this.assets) {
|
for (let key in this.assets) {
|
||||||
let asset = this.assets[key];
|
let asset = this.assets[key];
|
||||||
if ((<any>asset).dispose) (<any>asset).dispose();
|
if ((<any>asset).dispose) (<any>asset).dispose();
|
||||||
@ -198,27 +198,27 @@ export class AssetManagerBase implements Disposable {
|
|||||||
this.assets = {};
|
this.assets = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
isLoadingComplete(): boolean {
|
isLoadingComplete (): boolean {
|
||||||
return this.toLoad == 0;
|
return this.toLoad == 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
getToLoad(): number {
|
getToLoad (): number {
|
||||||
return this.toLoad;
|
return this.toLoad;
|
||||||
}
|
}
|
||||||
|
|
||||||
getLoaded(): number {
|
getLoaded (): number {
|
||||||
return this.loaded;
|
return this.loaded;
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
this.removeAll();
|
this.removeAll();
|
||||||
}
|
}
|
||||||
|
|
||||||
hasErrors() {
|
hasErrors () {
|
||||||
return Object.keys(this.errors).length > 0;
|
return Object.keys(this.errors).length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
getErrors() {
|
getErrors () {
|
||||||
return this.errors;
|
return this.errors;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -227,7 +227,7 @@ export class Downloader {
|
|||||||
private callbacks: StringMap<Array<Function>> = {};
|
private callbacks: StringMap<Array<Function>> = {};
|
||||||
rawDataUris: StringMap<string> = {};
|
rawDataUris: StringMap<string> = {};
|
||||||
|
|
||||||
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void) {
|
downloadText (url: string, success: (data: string) => void, error: (status: number, responseText: string) => void) {
|
||||||
if (this.rawDataUris[url]) url = this.rawDataUris[url];
|
if (this.rawDataUris[url]) url = this.rawDataUris[url];
|
||||||
if (this.start(url, success, error)) return;
|
if (this.start(url, success, error)) return;
|
||||||
let request = new XMLHttpRequest();
|
let request = new XMLHttpRequest();
|
||||||
@ -241,13 +241,13 @@ export class Downloader {
|
|||||||
request.send();
|
request.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void) {
|
downloadJson (url: string, success: (data: object) => void, error: (status: number, responseText: string) => void) {
|
||||||
this.downloadText(url, (data: string): void => {
|
this.downloadText(url, (data: string): void => {
|
||||||
success(JSON.parse(data));
|
success(JSON.parse(data));
|
||||||
}, error);
|
}, error);
|
||||||
}
|
}
|
||||||
|
|
||||||
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void) {
|
downloadBinary (url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void) {
|
||||||
if (this.rawDataUris[url]) url = this.rawDataUris[url];
|
if (this.rawDataUris[url]) url = this.rawDataUris[url];
|
||||||
if (this.start(url, success, error)) return;
|
if (this.start(url, success, error)) return;
|
||||||
let request = new XMLHttpRequest();
|
let request = new XMLHttpRequest();
|
||||||
@ -266,7 +266,7 @@ export class Downloader {
|
|||||||
request.send();
|
request.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
private start(url: string, success: any, error: any) {
|
private start (url: string, success: any, error: any) {
|
||||||
let callbacks = this.callbacks[url];
|
let callbacks = this.callbacks[url];
|
||||||
try {
|
try {
|
||||||
if (callbacks) return true;
|
if (callbacks) return true;
|
||||||
@ -276,7 +276,7 @@ export class Downloader {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private finish(url: string, status: number, data: any) {
|
private finish (url: string, status: number, data: any) {
|
||||||
let callbacks = this.callbacks[url];
|
let callbacks = this.callbacks[url];
|
||||||
delete this.callbacks[url];
|
delete this.callbacks[url];
|
||||||
let args = status == 200 ? [data] : [status, data];
|
let args = status == 200 ? [data] : [status, data];
|
||||||
|
|||||||
@ -40,87 +40,87 @@ import { TimeKeeper, AssetManager, ManagedWebGLRenderingContext, SceneRenderer,
|
|||||||
* The `error()` method is called in case the assets could not be loaded.
|
* The `error()` method is called in case the assets could not be loaded.
|
||||||
*/
|
*/
|
||||||
export interface SpineCanvasApp {
|
export interface SpineCanvasApp {
|
||||||
loadAssets?(canvas: SpineCanvas): void;
|
loadAssets?(canvas: SpineCanvas): void;
|
||||||
initialize?(canvas: SpineCanvas): void;
|
initialize?(canvas: SpineCanvas): void;
|
||||||
update?(canvas: SpineCanvas, delta: number): void;
|
update?(canvas: SpineCanvas, delta: number): void;
|
||||||
render?(canvas: SpineCanvas): void;
|
render?(canvas: SpineCanvas): void;
|
||||||
error?(canvas: SpineCanvas, errors: StringMap<string>): void;
|
error?(canvas: SpineCanvas, errors: StringMap<string>): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Configuration passed to the {@link SpineCanvas} constructor */
|
/** Configuration passed to the {@link SpineCanvas} constructor */
|
||||||
export interface SpineCanvasConfig {
|
export interface SpineCanvasConfig {
|
||||||
/* The {@link SpineCanvasApp} to be run in the canvas. */
|
/* The {@link SpineCanvasApp} to be run in the canvas. */
|
||||||
app: SpineCanvasApp;
|
app: SpineCanvasApp;
|
||||||
/* The path prefix to be used by the {@link AssetManager}. */
|
/* The path prefix to be used by the {@link AssetManager}. */
|
||||||
pathPrefix?: string;
|
pathPrefix?: string;
|
||||||
/* The WebGL context configuration */
|
/* The WebGL context configuration */
|
||||||
webglConfig?: any;
|
webglConfig?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Manages the life-cycle and WebGL context of a {@link SpineCanvasApp}. The app loads
|
/** Manages the life-cycle and WebGL context of a {@link SpineCanvasApp}. The app loads
|
||||||
* assets and initializes itself, then updates and renders its state at the screen refresh rate. */
|
* assets and initializes itself, then updates and renders its state at the screen refresh rate. */
|
||||||
export class SpineCanvas {
|
export class SpineCanvas {
|
||||||
readonly context: ManagedWebGLRenderingContext;
|
readonly context: ManagedWebGLRenderingContext;
|
||||||
|
|
||||||
/** Tracks the current time, delta, and other time related statistics. */
|
/** Tracks the current time, delta, and other time related statistics. */
|
||||||
readonly time = new TimeKeeper();
|
readonly time = new TimeKeeper();
|
||||||
/** The HTML canvas to render to. */
|
/** The HTML canvas to render to. */
|
||||||
readonly htmlCanvas: HTMLCanvasElement;
|
readonly htmlCanvas: HTMLCanvasElement;
|
||||||
/** The WebGL rendering context. */
|
/** The WebGL rendering context. */
|
||||||
readonly gl: WebGLRenderingContext;
|
readonly gl: WebGLRenderingContext;
|
||||||
/** The scene renderer for easy drawing of skeletons, shapes, and images. */
|
/** The scene renderer for easy drawing of skeletons, shapes, and images. */
|
||||||
readonly renderer: SceneRenderer;
|
readonly renderer: SceneRenderer;
|
||||||
/** The asset manager to load assets with. */
|
/** The asset manager to load assets with. */
|
||||||
readonly assetManager: AssetManager;
|
readonly assetManager: AssetManager;
|
||||||
/** The input processor used to listen to mouse, touch, and keyboard events. */
|
/** The input processor used to listen to mouse, touch, and keyboard events. */
|
||||||
readonly input: Input;
|
readonly input: Input;
|
||||||
|
|
||||||
/** Constructs a new spine canvas, rendering to the provided HTML canvas. */
|
/** Constructs a new spine canvas, rendering to the provided HTML canvas. */
|
||||||
constructor(canvas: HTMLCanvasElement, config: SpineCanvasConfig) {
|
constructor (canvas: HTMLCanvasElement, config: SpineCanvasConfig) {
|
||||||
if (config.pathPrefix === undefined) config.pathPrefix = "";
|
if (config.pathPrefix === undefined) config.pathPrefix = "";
|
||||||
if (config.app === undefined) config.app = {
|
if (config.app === undefined) config.app = {
|
||||||
loadAssets: () => { },
|
loadAssets: () => { },
|
||||||
initialize: () => { },
|
initialize: () => { },
|
||||||
update: () => { },
|
update: () => { },
|
||||||
render: () => { },
|
render: () => { },
|
||||||
error: () => { },
|
error: () => { },
|
||||||
}
|
}
|
||||||
if (config.webglConfig === undefined) config.webglConfig = { alpha: true };
|
if (config.webglConfig === undefined) config.webglConfig = { alpha: true };
|
||||||
|
|
||||||
this.htmlCanvas = canvas;
|
this.htmlCanvas = canvas;
|
||||||
this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig);
|
this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig);
|
||||||
this.renderer = new SceneRenderer(canvas, this.context);
|
this.renderer = new SceneRenderer(canvas, this.context);
|
||||||
this.gl = this.context.gl;
|
this.gl = this.context.gl;
|
||||||
this.assetManager = new AssetManager(this.context, config.pathPrefix);
|
this.assetManager = new AssetManager(this.context, config.pathPrefix);
|
||||||
this.input = new Input(canvas);
|
this.input = new Input(canvas);
|
||||||
|
|
||||||
config.app.loadAssets?.(this);
|
config.app.loadAssets?.(this);
|
||||||
|
|
||||||
let loop = () => {
|
let loop = () => {
|
||||||
requestAnimationFrame(loop);
|
requestAnimationFrame(loop);
|
||||||
this.time.update();
|
this.time.update();
|
||||||
config.app.update?.(this, this.time.delta);
|
config.app.update?.(this, this.time.delta);
|
||||||
config.app.render?.(this);
|
config.app.render?.(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
let waitForAssets = () => {
|
let waitForAssets = () => {
|
||||||
if (this.assetManager.isLoadingComplete()) {
|
if (this.assetManager.isLoadingComplete()) {
|
||||||
if (this.assetManager.hasErrors()) {
|
if (this.assetManager.hasErrors()) {
|
||||||
config.app.error?.(this, this.assetManager.getErrors());
|
config.app.error?.(this, this.assetManager.getErrors());
|
||||||
} else {
|
} else {
|
||||||
config.app.initialize?.(this);
|
config.app.initialize?.(this);
|
||||||
loop();
|
loop();
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
requestAnimationFrame(waitForAssets);
|
requestAnimationFrame(waitForAssets);
|
||||||
}
|
}
|
||||||
requestAnimationFrame(waitForAssets);
|
requestAnimationFrame(waitForAssets);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Clears the canvas with the given color. The color values are given in the range [0,1]. */
|
/** Clears the canvas with the given color. The color values are given in the range [0,1]. */
|
||||||
clear(r: number, g: number, b: number, a: number) {
|
clear (r: number, g: number, b: number, a: number) {
|
||||||
this.gl.clearColor(r, g, b, a);
|
this.gl.clearColor(r, g, b, a);
|
||||||
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
|
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -34,7 +34,7 @@ export class ManagedWebGLRenderingContext {
|
|||||||
public gl: WebGLRenderingContext;
|
public gl: WebGLRenderingContext;
|
||||||
private restorables = new Array<Restorable>();
|
private restorables = new Array<Restorable>();
|
||||||
|
|
||||||
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) {
|
constructor (canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) {
|
||||||
if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
|
if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
|
||||||
this.setupCanvas(canvasOrContext, contextConfig);
|
this.setupCanvas(canvasOrContext, contextConfig);
|
||||||
else {
|
else {
|
||||||
@ -43,7 +43,7 @@ export class ManagedWebGLRenderingContext {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private setupCanvas(canvas: any, contextConfig: any) {
|
private setupCanvas (canvas: any, contextConfig: any) {
|
||||||
this.gl = <WebGLRenderingContext>(canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
|
this.gl = <WebGLRenderingContext>(canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
canvas.addEventListener("webglcontextlost", (e: any) => {
|
canvas.addEventListener("webglcontextlost", (e: any) => {
|
||||||
@ -57,11 +57,11 @@ export class ManagedWebGLRenderingContext {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
addRestorable(restorable: Restorable) {
|
addRestorable (restorable: Restorable) {
|
||||||
this.restorables.push(restorable);
|
this.restorables.push(restorable);
|
||||||
}
|
}
|
||||||
|
|
||||||
removeRestorable(restorable: Restorable) {
|
removeRestorable (restorable: Restorable) {
|
||||||
let index = this.restorables.indexOf(restorable);
|
let index = this.restorables.indexOf(restorable);
|
||||||
if (index > -1) this.restorables.splice(index, 1);
|
if (index > -1) this.restorables.splice(index, 1);
|
||||||
}
|
}
|
||||||
@ -75,7 +75,7 @@ const ONE_MINUS_DST_ALPHA = 0x0305;
|
|||||||
const DST_COLOR = 0x0306;
|
const DST_COLOR = 0x0306;
|
||||||
|
|
||||||
export class WebGLBlendModeConverter {
|
export class WebGLBlendModeConverter {
|
||||||
static getDestGLBlendMode(blendMode: BlendMode) {
|
static getDestGLBlendMode (blendMode: BlendMode) {
|
||||||
switch (blendMode) {
|
switch (blendMode) {
|
||||||
case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA;
|
case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA;
|
||||||
case BlendMode.Additive: return ONE;
|
case BlendMode.Additive: return ONE;
|
||||||
@ -85,7 +85,7 @@ export class WebGLBlendModeConverter {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static getSourceColorGLBlendMode(blendMode: BlendMode, premultipliedAlpha: boolean = false) {
|
static getSourceColorGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) {
|
||||||
switch (blendMode) {
|
switch (blendMode) {
|
||||||
case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA;
|
case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA;
|
||||||
case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA;
|
case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA;
|
||||||
@ -95,7 +95,7 @@ export class WebGLBlendModeConverter {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static getSourceAlphaGLBlendMode(blendMode: BlendMode) {
|
static getSourceAlphaGLBlendMode (blendMode: BlendMode) {
|
||||||
switch (blendMode) {
|
switch (blendMode) {
|
||||||
case BlendMode.Normal: return ONE;
|
case BlendMode.Normal: return ONE;
|
||||||
case BlendMode.Additive: return ONE;
|
case BlendMode.Additive: return ONE;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user