[ts][player] Renamed build output.

This commit is contained in:
badlogic 2018-12-17 15:44:24 +01:00
parent 075d4a1be5
commit c21b366d03
7 changed files with 3 additions and 1836 deletions

View File

@ -1772,168 +1772,3 @@ declare module spine.threejs {
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

View File

@ -1789,61 +1789,3 @@ declare module spine {
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;
}
}

View File

@ -10373,336 +10373,4 @@ var spine;
.replace(/'/g, "&#39;");
}
})(spine || (spine = {}));
var spine;
(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
//# sourceMappingURL=spine-player.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long