mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[ts][player] Renamed build output.
This commit is contained in:
badlogic
parent
075d4a1be5
commit
c21b366d03
165
spine-ts/build/spine-all.d.ts
vendored
165
spine-ts/build/spine-all.d.ts
vendored
@ -1772,168 +1772,3 @@ declare module spine.threejs {
|
|||||||
static toThreeJsTextureWrap(wrap: TextureWrap): THREE.Wrapping;
|
static toThreeJsTextureWrap(wrap: TextureWrap): THREE.Wrapping;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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 {
|
|
||||||
jsonUrl: string;
|
|
||||||
atlasUrl: string;
|
|
||||||
animation: string;
|
|
||||||
animations: string[];
|
|
||||||
defaultMix: number;
|
|
||||||
skin: string;
|
|
||||||
skins: string[];
|
|
||||||
controlBones: string[];
|
|
||||||
premultipliedAlpha: boolean;
|
|
||||||
showControls: boolean;
|
|
||||||
debug: {
|
|
||||||
bones: boolean;
|
|
||||||
regions: boolean;
|
|
||||||
meshes: boolean;
|
|
||||||
bounds: boolean;
|
|
||||||
paths: boolean;
|
|
||||||
clipping: boolean;
|
|
||||||
points: boolean;
|
|
||||||
hulls: boolean;
|
|
||||||
};
|
|
||||||
viewport: {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
padLeft: string | number;
|
|
||||||
padRight: string | number;
|
|
||||||
padTop: string | number;
|
|
||||||
padBottom: string | number;
|
|
||||||
animations: Map<Viewport>;
|
|
||||||
debugRender: boolean;
|
|
||||||
transitionTime: number;
|
|
||||||
};
|
|
||||||
alpha: boolean;
|
|
||||||
backgroundColor: string;
|
|
||||||
backgroundImage: {
|
|
||||||
url: string;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
};
|
|
||||||
fullScreenBackgroundColor: string;
|
|
||||||
success: (widget: SpinePlayer) => void;
|
|
||||||
error: (widget: SpinePlayer, msg: string) => void;
|
|
||||||
}
|
|
||||||
class SpinePlayer {
|
|
||||||
private config;
|
|
||||||
static HOVER_COLOR_INNER: Color;
|
|
||||||
static HOVER_COLOR_OUTER: Color;
|
|
||||||
static NON_HOVER_COLOR_INNER: Color;
|
|
||||||
static NON_HOVER_COLOR_OUTER: Color;
|
|
||||||
private sceneRenderer;
|
|
||||||
private dom;
|
|
||||||
private playerControls;
|
|
||||||
private canvas;
|
|
||||||
private timelineSlider;
|
|
||||||
private playButton;
|
|
||||||
private skinButton;
|
|
||||||
private animationButton;
|
|
||||||
private context;
|
|
||||||
private loadingScreen;
|
|
||||||
private assetManager;
|
|
||||||
private loaded;
|
|
||||||
private skeleton;
|
|
||||||
private animationState;
|
|
||||||
private time;
|
|
||||||
private paused;
|
|
||||||
private playTime;
|
|
||||||
private speed;
|
|
||||||
private animationViewports;
|
|
||||||
private currentViewport;
|
|
||||||
private previousViewport;
|
|
||||||
private viewportTransitionStart;
|
|
||||||
private selectedBones;
|
|
||||||
constructor(parent: HTMLElement, config: SpinePlayerConfig);
|
|
||||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
|
|
||||||
showError(error: string): void;
|
|
||||||
render(): HTMLElement;
|
|
||||||
private lastPopup;
|
|
||||||
showSpeedDialog(speedButton: HTMLElement): void;
|
|
||||||
showAnimationsDialog(animationsButton: HTMLElement): void;
|
|
||||||
showSkinsDialog(skinButton: HTMLElement): void;
|
|
||||||
showSettingsDialog(settingsButton: HTMLElement): void;
|
|
||||||
drawFrame(requestNextFrame?: boolean): void;
|
|
||||||
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
|
|
||||||
loadSkeleton(): void;
|
|
||||||
setupInput(): void;
|
|
||||||
private play();
|
|
||||||
private pause();
|
|
||||||
private setAnimation(animation);
|
|
||||||
private percentageToWorldUnit(size, percentageOrAbsolute);
|
|
||||||
private calculateAnimationViewport(animationName);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
declare module spine {
|
|
||||||
class SpineWidget {
|
|
||||||
skeleton: Skeleton;
|
|
||||||
state: AnimationState;
|
|
||||||
context: spine.webgl.ManagedWebGLRenderingContext;
|
|
||||||
canvas: HTMLCanvasElement;
|
|
||||||
debugRenderer: spine.webgl.SkeletonDebugRenderer;
|
|
||||||
private config;
|
|
||||||
private assetManager;
|
|
||||||
private shader;
|
|
||||||
private batcher;
|
|
||||||
private shapes;
|
|
||||||
private debugShader;
|
|
||||||
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, animationStateListener?: AnimationStateListener2): void;
|
|
||||||
static loadWidgets(): void;
|
|
||||||
static loadWidget(widget: HTMLElement): void;
|
|
||||||
static pageLoaded: boolean;
|
|
||||||
private static ready();
|
|
||||||
static setupDOMListener(): void;
|
|
||||||
}
|
|
||||||
class SpineWidgetConfig {
|
|
||||||
json: string;
|
|
||||||
jsonContent: any;
|
|
||||||
atlas: string;
|
|
||||||
atlasContent: string;
|
|
||||||
animation: string;
|
|
||||||
imagesPath: string;
|
|
||||||
atlasPages: string[];
|
|
||||||
atlasPagesContent: string[];
|
|
||||||
skin: string;
|
|
||||||
loop: boolean;
|
|
||||||
scale: number;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
alpha: boolean;
|
|
||||||
fitToCanvas: boolean;
|
|
||||||
backgroundColor: string;
|
|
||||||
premultipliedAlpha: boolean;
|
|
||||||
debug: boolean;
|
|
||||||
success: (widget: SpineWidget) => void;
|
|
||||||
error: (widget: SpineWidget, msg: string) => void;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1789,61 +1789,3 @@ declare module spine {
|
|||||||
private calculateAnimationViewport(animationName);
|
private calculateAnimationViewport(animationName);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
declare module spine {
|
|
||||||
class SpineWidget {
|
|
||||||
skeleton: Skeleton;
|
|
||||||
state: AnimationState;
|
|
||||||
context: spine.webgl.ManagedWebGLRenderingContext;
|
|
||||||
canvas: HTMLCanvasElement;
|
|
||||||
debugRenderer: spine.webgl.SkeletonDebugRenderer;
|
|
||||||
private config;
|
|
||||||
private assetManager;
|
|
||||||
private shader;
|
|
||||||
private batcher;
|
|
||||||
private shapes;
|
|
||||||
private debugShader;
|
|
||||||
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, animationStateListener?: AnimationStateListener2): void;
|
|
||||||
static loadWidgets(): void;
|
|
||||||
static loadWidget(widget: HTMLElement): void;
|
|
||||||
static pageLoaded: boolean;
|
|
||||||
private static ready();
|
|
||||||
static setupDOMListener(): void;
|
|
||||||
}
|
|
||||||
class SpineWidgetConfig {
|
|
||||||
json: string;
|
|
||||||
jsonContent: any;
|
|
||||||
atlas: string;
|
|
||||||
atlasContent: string;
|
|
||||||
animation: string;
|
|
||||||
imagesPath: string;
|
|
||||||
atlasPages: string[];
|
|
||||||
atlasPagesContent: string[];
|
|
||||||
skin: string;
|
|
||||||
loop: boolean;
|
|
||||||
scale: number;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
alpha: boolean;
|
|
||||||
fitToCanvas: boolean;
|
|
||||||
backgroundColor: string;
|
|
||||||
premultipliedAlpha: boolean;
|
|
||||||
debug: boolean;
|
|
||||||
success: (widget: SpineWidget) => void;
|
|
||||||
error: (widget: SpineWidget, msg: string) => void;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -10373,336 +10373,4 @@ var spine;
|
|||||||
.replace(/'/g, "'");
|
.replace(/'/g, "'");
|
||||||
}
|
}
|
||||||
})(spine || (spine = {}));
|
})(spine || (spine = {}));
|
||||||
var spine;
|
//# sourceMappingURL=spine-player.js.map
|
||||||
(function (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.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)
|
|
||||||
throw new Error("Please provide a configuration, specifying at least the json file, atlas file and animation name");
|
|
||||||
var elementId = element;
|
|
||||||
if (typeof (element) === "string")
|
|
||||||
element = document.getElementById(element);
|
|
||||||
if (element == null)
|
|
||||||
throw new Error("Element " + elementId + " does not exist");
|
|
||||||
this.validateConfig(config);
|
|
||||||
var existingCanvas = element.children[0];
|
|
||||||
var canvas = this.canvas = existingCanvas || document.createElement("canvas");
|
|
||||||
canvas.style.width = "100%";
|
|
||||||
canvas.style.height = "100%";
|
|
||||||
if (!existingCanvas) {
|
|
||||||
element.appendChild(canvas);
|
|
||||||
}
|
|
||||||
canvas.width = element.clientWidth;
|
|
||||||
canvas.height = element.clientHeight;
|
|
||||||
var webglConfig = { alpha: config.alpha };
|
|
||||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, webglConfig);
|
|
||||||
this.shader = spine.webgl.Shader.newTwoColoredTextured(this.context);
|
|
||||||
this.batcher = new spine.webgl.PolygonBatcher(this.context);
|
|
||||||
this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
|
|
||||||
this.skeletonRenderer = new spine.webgl.SkeletonRenderer(this.context);
|
|
||||||
this.debugShader = spine.webgl.Shader.newColored(this.context);
|
|
||||||
this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(this.context);
|
|
||||||
this.shapes = new spine.webgl.ShapeRenderer(this.context);
|
|
||||||
var assets = this.assetManager = new spine.webgl.AssetManager(this.context, config.imagesPath ? config.imagesPath : "");
|
|
||||||
if (!config.atlasContent) {
|
|
||||||
assets.loadText(config.atlas);
|
|
||||||
}
|
|
||||||
if (!config.jsonContent) {
|
|
||||||
assets.loadText(config.json);
|
|
||||||
}
|
|
||||||
if (config.atlasPages == null) {
|
|
||||||
if (config.atlas) {
|
|
||||||
var atlasPage = config.atlas.replace(".atlas", ".png");
|
|
||||||
if (atlasPage.lastIndexOf(config.imagesPath) == 0) {
|
|
||||||
atlasPage = atlasPage.substr(config.imagesPath.length);
|
|
||||||
}
|
|
||||||
assets.loadTexture(atlasPage);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var firstLine = config.atlasContent.trim().split("\n")[0];
|
|
||||||
assets.loadTexture(firstLine);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
for (var i = 0; i < config.atlasPages.length; i++) {
|
|
||||||
if (config.atlasPagesContent && config.atlasPagesContent[i]) {
|
|
||||||
assets.loadTextureData(config.atlasPages[i], config.atlasPagesContent[i]);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
assets.loadTexture(config.atlasPages[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
requestAnimationFrame(function () { _this.load(); });
|
|
||||||
}
|
|
||||||
SpineWidget.prototype.validateConfig = function (config) {
|
|
||||||
if (!config.atlas && !config.atlasContent)
|
|
||||||
throw new Error("Please specify config.atlas or config.atlasContent");
|
|
||||||
if (!config.json && !config.jsonContent)
|
|
||||||
throw new Error("Please specify config.json or config.jsonContent");
|
|
||||||
if (!config.animation)
|
|
||||||
throw new Error("Please specify config.animationName");
|
|
||||||
if (!config.scale)
|
|
||||||
config.scale = 1.0;
|
|
||||||
if (!config.skin)
|
|
||||||
config.skin = "default";
|
|
||||||
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) {
|
|
||||||
if (config.atlas) {
|
|
||||||
var index = config.atlas.lastIndexOf("/");
|
|
||||||
if (index != -1) {
|
|
||||||
config.imagesPath = config.atlas.substr(0, index) + "/";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
config.imagesPath = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
config.imagesPath = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (config.json && config.json.lastIndexOf(config.imagesPath) == 0) {
|
|
||||||
config.json = config.json.substr(config.imagesPath.length);
|
|
||||||
}
|
|
||||||
if (config.atlas && config.atlas.lastIndexOf(config.imagesPath) == 0) {
|
|
||||||
config.atlas = config.atlas.substr(config.imagesPath.length);
|
|
||||||
}
|
|
||||||
if (!config.premultipliedAlpha === undefined)
|
|
||||||
config.premultipliedAlpha = false;
|
|
||||||
if (!config.debug === undefined)
|
|
||||||
config.debug = false;
|
|
||||||
if (!config.alpha === undefined)
|
|
||||||
config.alpha = true;
|
|
||||||
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;
|
|
||||||
if (assetManager.isLoadingComplete()) {
|
|
||||||
if (assetManager.hasErrors()) {
|
|
||||||
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()));
|
|
||||||
}
|
|
||||||
var atlasContent = config.atlasContent === undefined ? this.assetManager.get(this.config.atlas) : config.atlasContent;
|
|
||||||
var atlas = new spine.TextureAtlas(atlasContent, function (path) {
|
|
||||||
var texture = assetManager.get(path);
|
|
||||||
return texture;
|
|
||||||
});
|
|
||||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
|
||||||
skeletonJson.scale = config.scale;
|
|
||||||
var jsonContent = config.jsonContent === undefined ? assetManager.get(config.json) : config.jsonContent;
|
|
||||||
var skeletonData = skeletonJson.readSkeletonData(jsonContent);
|
|
||||||
var skeleton = this.skeleton = new spine.Skeleton(skeletonData);
|
|
||||||
var bounds = this.bounds;
|
|
||||||
skeleton.setSkinByName(config.skin);
|
|
||||||
skeleton.setToSetupPose();
|
|
||||||
skeleton.updateWorldTransform();
|
|
||||||
skeleton.getBounds(bounds.offset, bounds.size, []);
|
|
||||||
if (!config.fitToCanvas) {
|
|
||||||
skeleton.x = config.x;
|
|
||||||
skeleton.y = config.y;
|
|
||||||
}
|
|
||||||
var animationState = this.state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
|
|
||||||
animationState.setAnimation(0, config.animation, config.loop);
|
|
||||||
this.loaded = true;
|
|
||||||
if (config.success)
|
|
||||||
config.success(this);
|
|
||||||
requestAnimationFrame(function () { _this.render(); });
|
|
||||||
}
|
|
||||||
else
|
|
||||||
requestAnimationFrame(function () { _this.load(); });
|
|
||||||
};
|
|
||||||
SpineWidget.prototype.render = function () {
|
|
||||||
var _this = this;
|
|
||||||
var now = Date.now() / 1000;
|
|
||||||
var delta = now - this.lastFrameTime;
|
|
||||||
if (delta > 0.1)
|
|
||||||
delta = 0;
|
|
||||||
this.lastFrameTime = now;
|
|
||||||
var gl = this.context.gl;
|
|
||||||
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;
|
|
||||||
state.update(delta);
|
|
||||||
state.apply(skeleton);
|
|
||||||
skeleton.updateWorldTransform();
|
|
||||||
var shader = this.shader;
|
|
||||||
var batcher = this.batcher;
|
|
||||||
var skeletonRenderer = this.skeletonRenderer;
|
|
||||||
shader.bind();
|
|
||||||
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
|
|
||||||
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
|
|
||||||
batcher.begin(shader);
|
|
||||||
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
|
|
||||||
skeletonRenderer.draw(batcher, skeleton);
|
|
||||||
batcher.end();
|
|
||||||
shader.unbind();
|
|
||||||
if (this.config.debug) {
|
|
||||||
var shader_1 = this.debugShader;
|
|
||||||
var shapes = this.shapes;
|
|
||||||
var renderer = this.debugRenderer;
|
|
||||||
shader_1.bind();
|
|
||||||
shader_1.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
|
|
||||||
renderer.premultipliedAlpha = premultipliedAlpha;
|
|
||||||
shapes.begin(shader_1);
|
|
||||||
renderer.draw(shapes, skeleton);
|
|
||||||
shapes.end();
|
|
||||||
shader_1.unbind();
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
var devicePixelRatio = window.devicePixelRatio || 1;
|
|
||||||
if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
|
|
||||||
canvas.width = Math.floor(w * devicePixelRatio);
|
|
||||||
canvas.height = Math.floor(h * devicePixelRatio);
|
|
||||||
}
|
|
||||||
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 / w;
|
|
||||||
var scaleY = bounds.size.y / h;
|
|
||||||
var scale = Math.max(scaleX, scaleY) * 1.2;
|
|
||||||
if (scale < 1)
|
|
||||||
scale = 1;
|
|
||||||
var width = w * scale;
|
|
||||||
var height = h * 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, w - 1, h - 1);
|
|
||||||
}
|
|
||||||
this.context.gl.viewport(0, 0, canvas.width, canvas.height);
|
|
||||||
};
|
|
||||||
SpineWidget.prototype.pause = function () {
|
|
||||||
this.paused = true;
|
|
||||||
};
|
|
||||||
SpineWidget.prototype.play = function () {
|
|
||||||
var _this = this;
|
|
||||||
this.paused = false;
|
|
||||||
requestAnimationFrame(function () { _this.render(); });
|
|
||||||
};
|
|
||||||
SpineWidget.prototype.isPlaying = function () {
|
|
||||||
return !this.paused;
|
|
||||||
};
|
|
||||||
SpineWidget.prototype.setAnimation = function (animationName, animationStateListener) {
|
|
||||||
if (animationStateListener === void 0) { animationStateListener = null; }
|
|
||||||
if (!this.loaded)
|
|
||||||
throw new Error("Widget isn't loaded yet");
|
|
||||||
this.skeleton.setToSetupPose();
|
|
||||||
var entry = this.state.setAnimation(0, animationName, this.config.loop);
|
|
||||||
entry.listener = animationStateListener;
|
|
||||||
};
|
|
||||||
SpineWidget.loadWidgets = function () {
|
|
||||||
var widgets = document.getElementsByClassName("spine-widget");
|
|
||||||
for (var i = 0; i < widgets.length; i++) {
|
|
||||||
SpineWidget.loadWidget(widgets[i]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
SpineWidget.loadWidget = function (widget) {
|
|
||||||
var config = new SpineWidgetConfig();
|
|
||||||
config.atlas = widget.getAttribute("data-atlas");
|
|
||||||
config.json = widget.getAttribute("data-json");
|
|
||||||
config.animation = widget.getAttribute("data-animation");
|
|
||||||
if (widget.getAttribute("data-images-path"))
|
|
||||||
config.imagesPath = widget.getAttribute("data-images-path");
|
|
||||||
if (widget.getAttribute("data-atlas-pages"))
|
|
||||||
config.atlasPages = widget.getAttribute("data-atlas-pages").split(",");
|
|
||||||
if (widget.getAttribute("data-skin"))
|
|
||||||
config.skin = widget.getAttribute("data-skin");
|
|
||||||
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.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";
|
|
||||||
if (widget.getAttribute("data-debug"))
|
|
||||||
config.debug = widget.getAttribute("data-debug") === "true";
|
|
||||||
if (widget.getAttribute("data-alpha"))
|
|
||||||
config.alpha = widget.getAttribute("data-alpha") === "true";
|
|
||||||
new spine.SpineWidget(widget, config);
|
|
||||||
};
|
|
||||||
SpineWidget.ready = function () {
|
|
||||||
if (SpineWidget.pageLoaded)
|
|
||||||
return;
|
|
||||||
SpineWidget.pageLoaded = true;
|
|
||||||
SpineWidget.loadWidgets();
|
|
||||||
};
|
|
||||||
SpineWidget.setupDOMListener = function () {
|
|
||||||
if (document.addEventListener) {
|
|
||||||
document.addEventListener("DOMContentLoaded", SpineWidget.ready, false);
|
|
||||||
window.addEventListener("load", SpineWidget.ready, false);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
document.attachEvent("onreadystatechange", function readyStateChange() {
|
|
||||||
if (document.readyState === "complete")
|
|
||||||
SpineWidget.ready();
|
|
||||||
});
|
|
||||||
window.attachEvent("onload", SpineWidget.ready);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
SpineWidget.pageLoaded = false;
|
|
||||||
return SpineWidget;
|
|
||||||
}());
|
|
||||||
spine.SpineWidget = SpineWidget;
|
|
||||||
var SpineWidgetConfig = (function () {
|
|
||||||
function SpineWidgetConfig() {
|
|
||||||
this.skin = "default";
|
|
||||||
this.loop = true;
|
|
||||||
this.scale = 1.0;
|
|
||||||
this.x = 0;
|
|
||||||
this.y = 0;
|
|
||||||
this.alpha = true;
|
|
||||||
this.fitToCanvas = true;
|
|
||||||
this.backgroundColor = "#555555";
|
|
||||||
this.premultipliedAlpha = false;
|
|
||||||
this.debug = false;
|
|
||||||
}
|
|
||||||
return SpineWidgetConfig;
|
|
||||||
}());
|
|
||||||
spine.SpineWidgetConfig = SpineWidgetConfig;
|
|
||||||
})(spine || (spine = {}));
|
|
||||||
spine.SpineWidget.setupDOMListener();
|
|
||||||
//# sourceMappingURL=spine-widget.js.map
|
|
||||||
1
spine-ts/build/spine-player.js.map
Normal file
1
spine-ts/build/spine-player.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user