mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[ts][player] Cleaned up and documented config object. Added separate .css file for player styles.
This commit is contained in:
badlogic
parent
49ba1d2bd9
commit
bf29fcee11
108
spine-ts/build/spine-all.d.ts
vendored
108
spine-ts/build/spine-all.d.ts
vendored
@ -16,11 +16,11 @@ declare module spine {
|
||||
setup = 0,
|
||||
first = 1,
|
||||
replace = 2,
|
||||
add = 3,
|
||||
add = 3
|
||||
}
|
||||
enum MixDirection {
|
||||
in = 0,
|
||||
out = 1,
|
||||
out = 1
|
||||
}
|
||||
enum TimelineType {
|
||||
rotate = 0,
|
||||
@ -37,7 +37,7 @@ declare module spine {
|
||||
pathConstraintPosition = 11,
|
||||
pathConstraintSpacing = 12,
|
||||
pathConstraintMix = 13,
|
||||
twoColor = 14,
|
||||
twoColor = 14
|
||||
}
|
||||
abstract class CurveTimeline implements Timeline {
|
||||
static LINEAR: number;
|
||||
@ -341,7 +341,7 @@ declare module spine {
|
||||
end = 2,
|
||||
dispose = 3,
|
||||
complete = 4,
|
||||
event = 5,
|
||||
event = 5
|
||||
}
|
||||
interface AnimationStateListener2 {
|
||||
start(entry: TrackEntry): void;
|
||||
@ -380,8 +380,8 @@ declare module spine {
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
private static downloadText(url, success, error);
|
||||
private static downloadBinary(url, success, error);
|
||||
private static downloadText;
|
||||
private static downloadBinary;
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
@ -414,7 +414,7 @@ declare module spine {
|
||||
Normal = 0,
|
||||
Additive = 1,
|
||||
Multiply = 2,
|
||||
Screen = 3,
|
||||
Screen = 3
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -483,7 +483,7 @@ declare module spine {
|
||||
OnlyTranslation = 1,
|
||||
NoRotationOrReflection = 2,
|
||||
NoScale = 3,
|
||||
NoScaleOrReflection = 4,
|
||||
NoScaleOrReflection = 4
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -593,17 +593,17 @@ declare module spine {
|
||||
}
|
||||
enum PositionMode {
|
||||
Fixed = 0,
|
||||
Percent = 1,
|
||||
Percent = 1
|
||||
}
|
||||
enum SpacingMode {
|
||||
Length = 0,
|
||||
Fixed = 1,
|
||||
Percent = 2,
|
||||
Percent = 2
|
||||
}
|
||||
enum RotateMode {
|
||||
Tangent = 0,
|
||||
Chain = 1,
|
||||
ChainScale = 2,
|
||||
ChainScale = 2
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -614,12 +614,12 @@ declare module spine {
|
||||
private rawAssets;
|
||||
private errors;
|
||||
constructor(pathPrefix?: string);
|
||||
private queueAsset(clientId, textureLoader, path);
|
||||
private queueAsset;
|
||||
loadText(clientId: string, path: string): void;
|
||||
loadJson(clientId: string, path: string): void;
|
||||
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
|
||||
get(clientId: string, path: string): any;
|
||||
private updateClientAssets(clientAssets);
|
||||
private updateClientAssets;
|
||||
isLoadingComplete(clientId: string): boolean;
|
||||
dispose(): void;
|
||||
hasErrors(): boolean;
|
||||
@ -823,12 +823,12 @@ declare module spine {
|
||||
MipMapNearestNearest = 9984,
|
||||
MipMapLinearNearest = 9985,
|
||||
MipMapNearestLinear = 9986,
|
||||
MipMapLinearLinear = 9987,
|
||||
MipMapLinearLinear = 9987
|
||||
}
|
||||
enum TextureWrap {
|
||||
MirroredRepeat = 33648,
|
||||
ClampToEdge = 33071,
|
||||
Repeat = 10497,
|
||||
Repeat = 10497
|
||||
}
|
||||
class TextureRegion {
|
||||
renderObject: any;
|
||||
@ -855,7 +855,7 @@ declare module spine {
|
||||
pages: TextureAtlasPage[];
|
||||
regions: TextureAtlasRegion[];
|
||||
constructor(atlasText: string, textureLoader: (path: string) => any);
|
||||
private load(atlasText, textureLoader);
|
||||
private load;
|
||||
findRegion(name: string): TextureAtlasRegion;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -931,9 +931,9 @@ declare module spine {
|
||||
private polygonIndicesPool;
|
||||
triangulate(verticesArray: ArrayLike<number>): Array<number>;
|
||||
decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
|
||||
private static isConcave(index, vertexCount, vertices, indices);
|
||||
private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static winding(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static isConcave;
|
||||
private static positiveArea;
|
||||
private static winding;
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1105,7 +1105,7 @@ declare module spine {
|
||||
Mesh = 2,
|
||||
LinkedMesh = 3,
|
||||
Path = 4,
|
||||
Point = 5,
|
||||
Point = 5
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1271,11 +1271,11 @@ declare module spine.canvas {
|
||||
private tempColor;
|
||||
constructor(context: CanvasRenderingContext2D);
|
||||
draw(skeleton: Skeleton): void;
|
||||
private drawImages(skeleton);
|
||||
private drawTriangles(skeleton);
|
||||
private drawTriangle(img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
|
||||
private computeRegionVertices(slot, region, pma);
|
||||
private computeMeshVertices(slot, mesh, pma);
|
||||
private drawImages;
|
||||
private drawTriangles;
|
||||
private drawTriangle;
|
||||
private computeRegionVertices;
|
||||
private computeMeshVertices;
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
@ -1330,7 +1330,7 @@ declare module spine.webgl {
|
||||
touchesPool: Pool<Touch>;
|
||||
private listeners;
|
||||
constructor(element: HTMLElement);
|
||||
private setupCallbacks(element);
|
||||
private setupCallbacks;
|
||||
addListener(listener: InputListener): void;
|
||||
removeListener(listener: InputListener): void;
|
||||
}
|
||||
@ -1439,7 +1439,7 @@ declare module spine.webgl {
|
||||
drawWithOffset(shader: Shader, primitiveType: number, offset: number, count: number): void;
|
||||
bind(shader: Shader): void;
|
||||
unbind(shader: Shader): void;
|
||||
private update();
|
||||
private update;
|
||||
restore(): void;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -1465,7 +1465,7 @@ declare module spine.webgl {
|
||||
constructor();
|
||||
}
|
||||
enum VertexAttributeType {
|
||||
Float = 0,
|
||||
Float = 0
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
@ -1484,7 +1484,7 @@ declare module spine.webgl {
|
||||
begin(shader: Shader): void;
|
||||
setBlendMode(srcBlend: number, dstBlend: number): void;
|
||||
draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
|
||||
private flush();
|
||||
private flush;
|
||||
end(): void;
|
||||
getDrawCalls(): number;
|
||||
dispose(): void;
|
||||
@ -1524,13 +1524,13 @@ declare module spine.webgl {
|
||||
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
|
||||
end(): void;
|
||||
resize(resizeMode: ResizeMode): void;
|
||||
private enableRenderer(renderer);
|
||||
private enableRenderer;
|
||||
dispose(): void;
|
||||
}
|
||||
enum ResizeMode {
|
||||
Stretch = 0,
|
||||
Expand = 1,
|
||||
Fit = 2,
|
||||
Fit = 2
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
@ -1558,9 +1558,9 @@ declare module spine.webgl {
|
||||
getVertexShaderSource(): string;
|
||||
getFragmentSource(): string;
|
||||
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
|
||||
private compile();
|
||||
private compileShader(type, source);
|
||||
private compileProgram(vs, fs);
|
||||
private compile;
|
||||
private compileShader;
|
||||
private compileProgram;
|
||||
restore(): void;
|
||||
bind(): void;
|
||||
unbind(): void;
|
||||
@ -1607,16 +1607,16 @@ declare module spine.webgl {
|
||||
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
|
||||
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
|
||||
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
|
||||
private vertex(x, y, color);
|
||||
private vertex;
|
||||
end(): void;
|
||||
private flush();
|
||||
private check(shapeType, numVertices);
|
||||
private flush;
|
||||
private check;
|
||||
dispose(): void;
|
||||
}
|
||||
enum ShapeType {
|
||||
Point = 0,
|
||||
Line = 1,
|
||||
Filled = 4,
|
||||
Filled = 4
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
@ -1756,9 +1756,9 @@ declare module spine.threejs {
|
||||
private tempColor;
|
||||
constructor(skeletonData: SkeletonData);
|
||||
update(deltaTime: number): void;
|
||||
private clearBatches();
|
||||
private nextBatch();
|
||||
private updateGeometry();
|
||||
private clearBatches;
|
||||
private nextBatch;
|
||||
private updateGeometry;
|
||||
}
|
||||
}
|
||||
declare module spine.threejs {
|
||||
@ -1780,6 +1780,9 @@ declare module spine {
|
||||
animations: string[];
|
||||
skin: string;
|
||||
skins: string[];
|
||||
controlBones: string[];
|
||||
premultipliedAlpha: boolean;
|
||||
showControls: boolean;
|
||||
debug: {
|
||||
bones: boolean;
|
||||
regions: boolean;
|
||||
@ -1805,12 +1808,15 @@ declare module spine {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
premultipliedAlpha: boolean;
|
||||
success: (widget: SpineWidget) => void;
|
||||
error: (widget: SpineWidget, 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;
|
||||
@ -1827,8 +1833,10 @@ declare module spine {
|
||||
private paused;
|
||||
private playTime;
|
||||
private speed;
|
||||
private selectedBones;
|
||||
constructor(parent: HTMLElement, config: SpinePlayerConfig);
|
||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
|
||||
showError(error: string): void;
|
||||
render(): HTMLElement;
|
||||
showSpeedDialog(): void;
|
||||
showAnimationsDialog(): void;
|
||||
@ -1837,9 +1845,9 @@ declare module spine {
|
||||
drawFrame(requestNextFrame?: boolean): void;
|
||||
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
|
||||
loadSkeleton(): void;
|
||||
private play();
|
||||
private pause();
|
||||
private resize();
|
||||
setupInput(): void;
|
||||
private play;
|
||||
private pause;
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1863,10 +1871,10 @@ declare module spine {
|
||||
private loaded;
|
||||
private bounds;
|
||||
constructor(element: HTMLElement | string, config: SpineWidgetConfig);
|
||||
private validateConfig(config);
|
||||
private load();
|
||||
private render();
|
||||
private resize();
|
||||
private validateConfig;
|
||||
private load;
|
||||
private render;
|
||||
private resize;
|
||||
pause(): void;
|
||||
play(): void;
|
||||
isPlaying(): boolean;
|
||||
@ -1874,7 +1882,7 @@ declare module spine {
|
||||
static loadWidgets(): void;
|
||||
static loadWidget(widget: HTMLElement): void;
|
||||
static pageLoaded: boolean;
|
||||
private static ready();
|
||||
private static ready;
|
||||
static setupDOMListener(): void;
|
||||
}
|
||||
class SpineWidgetConfig {
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = Object.setPrototypeOf ||
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
@ -10169,7 +10172,6 @@ var spine;
|
||||
this.paused = true;
|
||||
this.playTime = 0;
|
||||
this.speed = 1;
|
||||
this.config = this.validateConfig(config);
|
||||
parent.appendChild(this.render());
|
||||
}
|
||||
SpinePlayer.prototype.validateConfig = function (config) {
|
||||
@ -10218,23 +10220,45 @@ var spine;
|
||||
config.debug.meshes = false;
|
||||
if (config.animations && config.animation) {
|
||||
if (config.animations.indexOf(config.animation) < 0)
|
||||
throw new Error("Default animation " + config.animation + " is not contained in the list of selectable animations.");
|
||||
throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations " + escapeHtml(JSON.stringify(this.config.animations)) + ".");
|
||||
}
|
||||
if (config.skins && config.skin) {
|
||||
if (config.skins.indexOf(config.skin) < 0)
|
||||
throw new Error("Default skin " + config.skin + " is not contained in the list of selectable skins.");
|
||||
throw new Error("Default skin '" + config.skin + "' is not contained in the list of selectable skins " + escapeHtml(JSON.stringify(this.config.skins)) + ".");
|
||||
}
|
||||
if (!config.controlBones)
|
||||
config.controlBones = [];
|
||||
if (!config.showControls)
|
||||
config.showControls = true;
|
||||
return config;
|
||||
};
|
||||
SpinePlayer.prototype.showError = function (error) {
|
||||
var errorDom = findWithClass(this.dom, "spine-player-error")[0];
|
||||
errorDom.classList.remove("spine-player-hidden");
|
||||
errorDom.innerHTML = "<p style=\"text-align: center; align-self: center;\">" + error + "</p>";
|
||||
};
|
||||
SpinePlayer.prototype.render = function () {
|
||||
var _this = this;
|
||||
var config = this.config;
|
||||
var dom = this.dom = createElement("\n\t\t\t\t<div class=\"spine-player\">\n\t\t\t\t\t<canvas class=\"spine-player-canvas\"></canvas>\n\t\t\t\t\t<div class=\"spine-player-controls spine-player-popup-parent\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"spine-player-buttons\">\n\t\t\t\t\t\t\t<button id=\"spine-player-button-play-pause\" class=\"spine-player-button spine-player-button-icon-pause\"></button>\n\t\t\t\t\t\t\t<div class=\"spine-player-button-spacer\"></div>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-speed\" class=\"spine-player-button spine-player-button-icon-speed\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button spine-player-button-icon-animations\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button spine-player-button-icon-skins\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button spine-player-button-icon-settings\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button spine-player-button-icon-fullscreen\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
|
||||
var dom = this.dom = createElement("\n\t\t\t\t<div class=\"spine-player\">\n\t\t\t\t\t<canvas class=\"spine-player-canvas\"></canvas>\n\t\t\t\t\t<div class=\"spine-player-error spine-player-hidden\"></div>\n\t\t\t\t\t<div class=\"spine-player-controls spine-player-popup-parent\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"spine-player-buttons\">\n\t\t\t\t\t\t\t<button id=\"spine-player-button-play-pause\" class=\"spine-player-button spine-player-button-icon-pause\"></button>\n\t\t\t\t\t\t\t<div class=\"spine-player-button-spacer\"></div>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-speed\" class=\"spine-player-button spine-player-button-icon-speed\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button spine-player-button-icon-animations\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button spine-player-button-icon-skins\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button spine-player-button-icon-settings\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button spine-player-button-icon-fullscreen\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
|
||||
try {
|
||||
this.config = this.validateConfig(config);
|
||||
}
|
||||
catch (e) {
|
||||
this.showError(e);
|
||||
return dom;
|
||||
}
|
||||
try {
|
||||
this.canvas = findWithClass(dom, "spine-player-canvas")[0];
|
||||
var webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
|
||||
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
|
||||
}
|
||||
catch (e) {
|
||||
this.showError("Sorry, your browser does not support WebGL.<br><br>Please use the latest version of Firefox, Chrome, Edge, or Safari.");
|
||||
return dom;
|
||||
}
|
||||
this.assetManager = new spine.webgl.AssetManager(this.context);
|
||||
this.assetManager.loadText(config.jsonUrl);
|
||||
this.assetManager.loadTextureAtlas(config.atlasUrl);
|
||||
@ -10296,6 +10320,8 @@ var spine;
|
||||
window.onresize = function () {
|
||||
_this.drawFrame(false);
|
||||
};
|
||||
if (!config.showControls)
|
||||
findWithClass(dom, "spine-player-controls ")[0].classList.add("spine-player-hidden");
|
||||
return dom;
|
||||
};
|
||||
SpinePlayer.prototype.showSpeedDialog = function () {
|
||||
@ -10406,7 +10432,7 @@ var spine;
|
||||
var delta = this.time.delta * this.speed;
|
||||
var animationDuration = this.animationState.getCurrent(0).animation.duration;
|
||||
this.playTime += delta;
|
||||
while (this.playTime >= animationDuration) {
|
||||
while (this.playTime >= animationDuration && animationDuration != 0) {
|
||||
this.playTime -= animationDuration;
|
||||
}
|
||||
this.playTime = Math.max(0, Math.min(this.playTime, animationDuration));
|
||||
@ -10438,6 +10464,20 @@ var spine;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions;
|
||||
this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.meshes;
|
||||
this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha);
|
||||
var controlBones = this.config.controlBones;
|
||||
var selectedBones = this.selectedBones;
|
||||
var skeleton = this.skeleton;
|
||||
gl.lineWidth(2);
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
if (!bone)
|
||||
continue;
|
||||
var colorInner = selectedBones[i] !== null ? SpinePlayer.HOVER_COLOR_INNER : SpinePlayer.NON_HOVER_COLOR_INNER;
|
||||
var colorOuter = selectedBones[i] !== null ? SpinePlayer.HOVER_COLOR_OUTER : SpinePlayer.NON_HOVER_COLOR_OUTER;
|
||||
this.sceneRenderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
|
||||
this.sceneRenderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
|
||||
}
|
||||
gl.lineWidth(1);
|
||||
this.sceneRenderer.end();
|
||||
this.sceneRenderer.camera.zoom = 0;
|
||||
}
|
||||
@ -10455,20 +10495,50 @@ var spine;
|
||||
var _this = this;
|
||||
if (this.loaded)
|
||||
return;
|
||||
if (this.assetManager.hasErrors()) {
|
||||
this.showError("Error: assets could not be loaded.<br><br>" + escapeHtml(JSON.stringify(this.assetManager.getErrors())));
|
||||
return;
|
||||
}
|
||||
var atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
var jsonText = this.assetManager.get(this.config.jsonUrl);
|
||||
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
|
||||
var skeletonData = json.readSkeletonData(jsonText);
|
||||
var skeletonData;
|
||||
try {
|
||||
skeletonData = json.readSkeletonData(jsonText);
|
||||
}
|
||||
catch (e) {
|
||||
this.showError("Error: could not load skeleton .json.<br><br>" + escapeHtml(JSON.stringify(e)));
|
||||
return;
|
||||
}
|
||||
this.skeleton = new spine.Skeleton(skeletonData);
|
||||
var stateData = new spine.AnimationStateData(skeletonData);
|
||||
stateData.defaultMix = 0.2;
|
||||
this.animationState = new spine.AnimationState(stateData);
|
||||
if (this.config.controlBones) {
|
||||
this.config.controlBones.forEach(function (bone) {
|
||||
if (!skeletonData.findBone(bone)) {
|
||||
_this.showError("Error: control bone '" + bone + "' does not exist in skeleton.");
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!this.config.skin) {
|
||||
if (skeletonData.skins.length > 0) {
|
||||
this.config.skin = skeletonData.skins[0].name;
|
||||
}
|
||||
}
|
||||
if (this.config.skins && this.config.skin.length > 0) {
|
||||
this.config.skins.forEach(function (skin) {
|
||||
if (!_this.skeleton.data.findSkin(skin)) {
|
||||
_this.showError("Error: skin '" + skin + "' in selectable skin list does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.config.skin) {
|
||||
if (!this.skeleton.data.findSkin(this.config.skin)) {
|
||||
this.showError("Error: skin '" + this.config.skin + "' does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
this.skeleton.setSkinByName(this.config.skin);
|
||||
this.skeleton.setSlotsToSetupPose();
|
||||
}
|
||||
@ -10493,7 +10563,19 @@ var spine;
|
||||
this.config.animation = skeletonData.animations[0].name;
|
||||
}
|
||||
}
|
||||
if (this.config.animations && this.config.animations.length > 0) {
|
||||
this.config.animations.forEach(function (animation) {
|
||||
if (!_this.skeleton.data.findAnimation(animation)) {
|
||||
_this.showError("Error: animation '" + animation + "' in selectable animation list does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.config.animation) {
|
||||
if (!skeletonData.findAnimation(this.config.animation)) {
|
||||
this.showError("Error: animation '" + this.config.animation + "' does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
this.play();
|
||||
this.timelineSlider.change = function (percentage) {
|
||||
_this.pause();
|
||||
@ -10505,8 +10587,65 @@ var spine;
|
||||
_this.playTime = time;
|
||||
};
|
||||
}
|
||||
this.setupInput();
|
||||
this.loaded = true;
|
||||
};
|
||||
SpinePlayer.prototype.setupInput = function () {
|
||||
var controlBones = this.config.controlBones;
|
||||
var selectedBones = this.selectedBones = new Array(this.config.controlBones.length);
|
||||
var canvas = this.canvas;
|
||||
var input = new spine.webgl.Input(canvas);
|
||||
var target = null;
|
||||
var coords = new spine.webgl.Vector3();
|
||||
var temp = new spine.webgl.Vector3();
|
||||
var temp2 = new spine.Vector2();
|
||||
var skeleton = this.skeleton;
|
||||
var renderer = this.sceneRenderer;
|
||||
input.addListener({
|
||||
down: function (x, y) {
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
if (!bone)
|
||||
continue;
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
|
||||
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
|
||||
target = bone;
|
||||
}
|
||||
}
|
||||
},
|
||||
up: function (x, y) {
|
||||
target = null;
|
||||
},
|
||||
dragged: function (x, y) {
|
||||
if (target != null) {
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
|
||||
if (target.parent !== null) {
|
||||
target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
|
||||
target.x = temp2.x;
|
||||
target.y = temp2.y;
|
||||
}
|
||||
else {
|
||||
target.x = coords.x - skeleton.x;
|
||||
target.y = coords.y - skeleton.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
moved: function (x, y) {
|
||||
for (var i = 0; i < controlBones.length; i++) {
|
||||
var bone = skeleton.findBone(controlBones[i]);
|
||||
if (!bone)
|
||||
continue;
|
||||
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
|
||||
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
|
||||
selectedBones[i] = bone;
|
||||
}
|
||||
else {
|
||||
selectedBones[i] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
SpinePlayer.prototype.play = function () {
|
||||
this.paused = false;
|
||||
this.playButton.classList.remove("spine-player-button-icon-play");
|
||||
@ -10522,18 +10661,10 @@ var spine;
|
||||
this.playButton.classList.remove("spine-player-button-icon-pause");
|
||||
this.playButton.classList.add("spine-player-button-icon-play");
|
||||
};
|
||||
SpinePlayer.prototype.resize = function () {
|
||||
var canvas = this.canvas;
|
||||
var w = canvas.clientWidth;
|
||||
var h = canvas.clientHeight;
|
||||
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);
|
||||
}
|
||||
this.context.gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
this.sceneRenderer.camera.setViewport(canvas.width, canvas.height);
|
||||
};
|
||||
SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
|
||||
SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);
|
||||
SpinePlayer.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5);
|
||||
SpinePlayer.NON_HOVER_COLOR_OUTER = new spine.Color(1, 0, 0, 0.8);
|
||||
return SpinePlayer;
|
||||
}());
|
||||
spine.SpinePlayer = SpinePlayer;
|
||||
@ -10588,6 +10719,16 @@ var spine;
|
||||
elements[i].classList.remove(clazz);
|
||||
}
|
||||
}
|
||||
function escapeHtml(str) {
|
||||
if (!str)
|
||||
return "";
|
||||
return str
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
50
spine-ts/build/spine-canvas.d.ts
vendored
50
spine-ts/build/spine-canvas.d.ts
vendored
@ -16,11 +16,11 @@ declare module spine {
|
||||
setup = 0,
|
||||
first = 1,
|
||||
replace = 2,
|
||||
add = 3,
|
||||
add = 3
|
||||
}
|
||||
enum MixDirection {
|
||||
in = 0,
|
||||
out = 1,
|
||||
out = 1
|
||||
}
|
||||
enum TimelineType {
|
||||
rotate = 0,
|
||||
@ -37,7 +37,7 @@ declare module spine {
|
||||
pathConstraintPosition = 11,
|
||||
pathConstraintSpacing = 12,
|
||||
pathConstraintMix = 13,
|
||||
twoColor = 14,
|
||||
twoColor = 14
|
||||
}
|
||||
abstract class CurveTimeline implements Timeline {
|
||||
static LINEAR: number;
|
||||
@ -341,7 +341,7 @@ declare module spine {
|
||||
end = 2,
|
||||
dispose = 3,
|
||||
complete = 4,
|
||||
event = 5,
|
||||
event = 5
|
||||
}
|
||||
interface AnimationStateListener2 {
|
||||
start(entry: TrackEntry): void;
|
||||
@ -380,8 +380,8 @@ declare module spine {
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
private static downloadText(url, success, error);
|
||||
private static downloadBinary(url, success, error);
|
||||
private static downloadText;
|
||||
private static downloadBinary;
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
@ -414,7 +414,7 @@ declare module spine {
|
||||
Normal = 0,
|
||||
Additive = 1,
|
||||
Multiply = 2,
|
||||
Screen = 3,
|
||||
Screen = 3
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -483,7 +483,7 @@ declare module spine {
|
||||
OnlyTranslation = 1,
|
||||
NoRotationOrReflection = 2,
|
||||
NoScale = 3,
|
||||
NoScaleOrReflection = 4,
|
||||
NoScaleOrReflection = 4
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -593,17 +593,17 @@ declare module spine {
|
||||
}
|
||||
enum PositionMode {
|
||||
Fixed = 0,
|
||||
Percent = 1,
|
||||
Percent = 1
|
||||
}
|
||||
enum SpacingMode {
|
||||
Length = 0,
|
||||
Fixed = 1,
|
||||
Percent = 2,
|
||||
Percent = 2
|
||||
}
|
||||
enum RotateMode {
|
||||
Tangent = 0,
|
||||
Chain = 1,
|
||||
ChainScale = 2,
|
||||
ChainScale = 2
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -614,12 +614,12 @@ declare module spine {
|
||||
private rawAssets;
|
||||
private errors;
|
||||
constructor(pathPrefix?: string);
|
||||
private queueAsset(clientId, textureLoader, path);
|
||||
private queueAsset;
|
||||
loadText(clientId: string, path: string): void;
|
||||
loadJson(clientId: string, path: string): void;
|
||||
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
|
||||
get(clientId: string, path: string): any;
|
||||
private updateClientAssets(clientAssets);
|
||||
private updateClientAssets;
|
||||
isLoadingComplete(clientId: string): boolean;
|
||||
dispose(): void;
|
||||
hasErrors(): boolean;
|
||||
@ -823,12 +823,12 @@ declare module spine {
|
||||
MipMapNearestNearest = 9984,
|
||||
MipMapLinearNearest = 9985,
|
||||
MipMapNearestLinear = 9986,
|
||||
MipMapLinearLinear = 9987,
|
||||
MipMapLinearLinear = 9987
|
||||
}
|
||||
enum TextureWrap {
|
||||
MirroredRepeat = 33648,
|
||||
ClampToEdge = 33071,
|
||||
Repeat = 10497,
|
||||
Repeat = 10497
|
||||
}
|
||||
class TextureRegion {
|
||||
renderObject: any;
|
||||
@ -855,7 +855,7 @@ declare module spine {
|
||||
pages: TextureAtlasPage[];
|
||||
regions: TextureAtlasRegion[];
|
||||
constructor(atlasText: string, textureLoader: (path: string) => any);
|
||||
private load(atlasText, textureLoader);
|
||||
private load;
|
||||
findRegion(name: string): TextureAtlasRegion;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -931,9 +931,9 @@ declare module spine {
|
||||
private polygonIndicesPool;
|
||||
triangulate(verticesArray: ArrayLike<number>): Array<number>;
|
||||
decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
|
||||
private static isConcave(index, vertexCount, vertices, indices);
|
||||
private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static winding(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static isConcave;
|
||||
private static positiveArea;
|
||||
private static winding;
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1105,7 +1105,7 @@ declare module spine {
|
||||
Mesh = 2,
|
||||
LinkedMesh = 3,
|
||||
Path = 4,
|
||||
Point = 5,
|
||||
Point = 5
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1271,10 +1271,10 @@ declare module spine.canvas {
|
||||
private tempColor;
|
||||
constructor(context: CanvasRenderingContext2D);
|
||||
draw(skeleton: Skeleton): void;
|
||||
private drawImages(skeleton);
|
||||
private drawTriangles(skeleton);
|
||||
private drawTriangle(img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
|
||||
private computeRegionVertices(slot, region, pma);
|
||||
private computeMeshVertices(slot, mesh, pma);
|
||||
private drawImages;
|
||||
private drawTriangles;
|
||||
private drawTriangle;
|
||||
private computeRegionVertices;
|
||||
private computeMeshVertices;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = Object.setPrototypeOf ||
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
40
spine-ts/build/spine-core.d.ts
vendored
40
spine-ts/build/spine-core.d.ts
vendored
@ -16,11 +16,11 @@ declare module spine {
|
||||
setup = 0,
|
||||
first = 1,
|
||||
replace = 2,
|
||||
add = 3,
|
||||
add = 3
|
||||
}
|
||||
enum MixDirection {
|
||||
in = 0,
|
||||
out = 1,
|
||||
out = 1
|
||||
}
|
||||
enum TimelineType {
|
||||
rotate = 0,
|
||||
@ -37,7 +37,7 @@ declare module spine {
|
||||
pathConstraintPosition = 11,
|
||||
pathConstraintSpacing = 12,
|
||||
pathConstraintMix = 13,
|
||||
twoColor = 14,
|
||||
twoColor = 14
|
||||
}
|
||||
abstract class CurveTimeline implements Timeline {
|
||||
static LINEAR: number;
|
||||
@ -341,7 +341,7 @@ declare module spine {
|
||||
end = 2,
|
||||
dispose = 3,
|
||||
complete = 4,
|
||||
event = 5,
|
||||
event = 5
|
||||
}
|
||||
interface AnimationStateListener2 {
|
||||
start(entry: TrackEntry): void;
|
||||
@ -380,8 +380,8 @@ declare module spine {
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
private static downloadText(url, success, error);
|
||||
private static downloadBinary(url, success, error);
|
||||
private static downloadText;
|
||||
private static downloadBinary;
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
@ -414,7 +414,7 @@ declare module spine {
|
||||
Normal = 0,
|
||||
Additive = 1,
|
||||
Multiply = 2,
|
||||
Screen = 3,
|
||||
Screen = 3
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -483,7 +483,7 @@ declare module spine {
|
||||
OnlyTranslation = 1,
|
||||
NoRotationOrReflection = 2,
|
||||
NoScale = 3,
|
||||
NoScaleOrReflection = 4,
|
||||
NoScaleOrReflection = 4
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -593,17 +593,17 @@ declare module spine {
|
||||
}
|
||||
enum PositionMode {
|
||||
Fixed = 0,
|
||||
Percent = 1,
|
||||
Percent = 1
|
||||
}
|
||||
enum SpacingMode {
|
||||
Length = 0,
|
||||
Fixed = 1,
|
||||
Percent = 2,
|
||||
Percent = 2
|
||||
}
|
||||
enum RotateMode {
|
||||
Tangent = 0,
|
||||
Chain = 1,
|
||||
ChainScale = 2,
|
||||
ChainScale = 2
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -614,12 +614,12 @@ declare module spine {
|
||||
private rawAssets;
|
||||
private errors;
|
||||
constructor(pathPrefix?: string);
|
||||
private queueAsset(clientId, textureLoader, path);
|
||||
private queueAsset;
|
||||
loadText(clientId: string, path: string): void;
|
||||
loadJson(clientId: string, path: string): void;
|
||||
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
|
||||
get(clientId: string, path: string): any;
|
||||
private updateClientAssets(clientAssets);
|
||||
private updateClientAssets;
|
||||
isLoadingComplete(clientId: string): boolean;
|
||||
dispose(): void;
|
||||
hasErrors(): boolean;
|
||||
@ -823,12 +823,12 @@ declare module spine {
|
||||
MipMapNearestNearest = 9984,
|
||||
MipMapLinearNearest = 9985,
|
||||
MipMapNearestLinear = 9986,
|
||||
MipMapLinearLinear = 9987,
|
||||
MipMapLinearLinear = 9987
|
||||
}
|
||||
enum TextureWrap {
|
||||
MirroredRepeat = 33648,
|
||||
ClampToEdge = 33071,
|
||||
Repeat = 10497,
|
||||
Repeat = 10497
|
||||
}
|
||||
class TextureRegion {
|
||||
renderObject: any;
|
||||
@ -855,7 +855,7 @@ declare module spine {
|
||||
pages: TextureAtlasPage[];
|
||||
regions: TextureAtlasRegion[];
|
||||
constructor(atlasText: string, textureLoader: (path: string) => any);
|
||||
private load(atlasText, textureLoader);
|
||||
private load;
|
||||
findRegion(name: string): TextureAtlasRegion;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -931,9 +931,9 @@ declare module spine {
|
||||
private polygonIndicesPool;
|
||||
triangulate(verticesArray: ArrayLike<number>): Array<number>;
|
||||
decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
|
||||
private static isConcave(index, vertexCount, vertices, indices);
|
||||
private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static winding(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static isConcave;
|
||||
private static positiveArea;
|
||||
private static winding;
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1105,7 +1105,7 @@ declare module spine {
|
||||
Mesh = 2,
|
||||
LinkedMesh = 3,
|
||||
Path = 4,
|
||||
Point = 5,
|
||||
Point = 5
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = Object.setPrototypeOf ||
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
46
spine-ts/build/spine-threejs.d.ts
vendored
46
spine-ts/build/spine-threejs.d.ts
vendored
@ -16,11 +16,11 @@ declare module spine {
|
||||
setup = 0,
|
||||
first = 1,
|
||||
replace = 2,
|
||||
add = 3,
|
||||
add = 3
|
||||
}
|
||||
enum MixDirection {
|
||||
in = 0,
|
||||
out = 1,
|
||||
out = 1
|
||||
}
|
||||
enum TimelineType {
|
||||
rotate = 0,
|
||||
@ -37,7 +37,7 @@ declare module spine {
|
||||
pathConstraintPosition = 11,
|
||||
pathConstraintSpacing = 12,
|
||||
pathConstraintMix = 13,
|
||||
twoColor = 14,
|
||||
twoColor = 14
|
||||
}
|
||||
abstract class CurveTimeline implements Timeline {
|
||||
static LINEAR: number;
|
||||
@ -341,7 +341,7 @@ declare module spine {
|
||||
end = 2,
|
||||
dispose = 3,
|
||||
complete = 4,
|
||||
event = 5,
|
||||
event = 5
|
||||
}
|
||||
interface AnimationStateListener2 {
|
||||
start(entry: TrackEntry): void;
|
||||
@ -380,8 +380,8 @@ declare module spine {
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
private static downloadText(url, success, error);
|
||||
private static downloadBinary(url, success, error);
|
||||
private static downloadText;
|
||||
private static downloadBinary;
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
@ -414,7 +414,7 @@ declare module spine {
|
||||
Normal = 0,
|
||||
Additive = 1,
|
||||
Multiply = 2,
|
||||
Screen = 3,
|
||||
Screen = 3
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -483,7 +483,7 @@ declare module spine {
|
||||
OnlyTranslation = 1,
|
||||
NoRotationOrReflection = 2,
|
||||
NoScale = 3,
|
||||
NoScaleOrReflection = 4,
|
||||
NoScaleOrReflection = 4
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -593,17 +593,17 @@ declare module spine {
|
||||
}
|
||||
enum PositionMode {
|
||||
Fixed = 0,
|
||||
Percent = 1,
|
||||
Percent = 1
|
||||
}
|
||||
enum SpacingMode {
|
||||
Length = 0,
|
||||
Fixed = 1,
|
||||
Percent = 2,
|
||||
Percent = 2
|
||||
}
|
||||
enum RotateMode {
|
||||
Tangent = 0,
|
||||
Chain = 1,
|
||||
ChainScale = 2,
|
||||
ChainScale = 2
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -614,12 +614,12 @@ declare module spine {
|
||||
private rawAssets;
|
||||
private errors;
|
||||
constructor(pathPrefix?: string);
|
||||
private queueAsset(clientId, textureLoader, path);
|
||||
private queueAsset;
|
||||
loadText(clientId: string, path: string): void;
|
||||
loadJson(clientId: string, path: string): void;
|
||||
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
|
||||
get(clientId: string, path: string): any;
|
||||
private updateClientAssets(clientAssets);
|
||||
private updateClientAssets;
|
||||
isLoadingComplete(clientId: string): boolean;
|
||||
dispose(): void;
|
||||
hasErrors(): boolean;
|
||||
@ -823,12 +823,12 @@ declare module spine {
|
||||
MipMapNearestNearest = 9984,
|
||||
MipMapLinearNearest = 9985,
|
||||
MipMapNearestLinear = 9986,
|
||||
MipMapLinearLinear = 9987,
|
||||
MipMapLinearLinear = 9987
|
||||
}
|
||||
enum TextureWrap {
|
||||
MirroredRepeat = 33648,
|
||||
ClampToEdge = 33071,
|
||||
Repeat = 10497,
|
||||
Repeat = 10497
|
||||
}
|
||||
class TextureRegion {
|
||||
renderObject: any;
|
||||
@ -855,7 +855,7 @@ declare module spine {
|
||||
pages: TextureAtlasPage[];
|
||||
regions: TextureAtlasRegion[];
|
||||
constructor(atlasText: string, textureLoader: (path: string) => any);
|
||||
private load(atlasText, textureLoader);
|
||||
private load;
|
||||
findRegion(name: string): TextureAtlasRegion;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -931,9 +931,9 @@ declare module spine {
|
||||
private polygonIndicesPool;
|
||||
triangulate(verticesArray: ArrayLike<number>): Array<number>;
|
||||
decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
|
||||
private static isConcave(index, vertexCount, vertices, indices);
|
||||
private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static winding(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static isConcave;
|
||||
private static positiveArea;
|
||||
private static winding;
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1105,7 +1105,7 @@ declare module spine {
|
||||
Mesh = 2,
|
||||
LinkedMesh = 3,
|
||||
Path = 4,
|
||||
Point = 5,
|
||||
Point = 5
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1290,9 +1290,9 @@ declare module spine.threejs {
|
||||
private tempColor;
|
||||
constructor(skeletonData: SkeletonData);
|
||||
update(deltaTime: number): void;
|
||||
private clearBatches();
|
||||
private nextBatch();
|
||||
private updateGeometry();
|
||||
private clearBatches;
|
||||
private nextBatch;
|
||||
private updateGeometry;
|
||||
}
|
||||
}
|
||||
declare module spine.threejs {
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = Object.setPrototypeOf ||
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
66
spine-ts/build/spine-webgl.d.ts
vendored
66
spine-ts/build/spine-webgl.d.ts
vendored
@ -16,11 +16,11 @@ declare module spine {
|
||||
setup = 0,
|
||||
first = 1,
|
||||
replace = 2,
|
||||
add = 3,
|
||||
add = 3
|
||||
}
|
||||
enum MixDirection {
|
||||
in = 0,
|
||||
out = 1,
|
||||
out = 1
|
||||
}
|
||||
enum TimelineType {
|
||||
rotate = 0,
|
||||
@ -37,7 +37,7 @@ declare module spine {
|
||||
pathConstraintPosition = 11,
|
||||
pathConstraintSpacing = 12,
|
||||
pathConstraintMix = 13,
|
||||
twoColor = 14,
|
||||
twoColor = 14
|
||||
}
|
||||
abstract class CurveTimeline implements Timeline {
|
||||
static LINEAR: number;
|
||||
@ -341,7 +341,7 @@ declare module spine {
|
||||
end = 2,
|
||||
dispose = 3,
|
||||
complete = 4,
|
||||
event = 5,
|
||||
event = 5
|
||||
}
|
||||
interface AnimationStateListener2 {
|
||||
start(entry: TrackEntry): void;
|
||||
@ -380,8 +380,8 @@ declare module spine {
|
||||
private toLoad;
|
||||
private loaded;
|
||||
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
|
||||
private static downloadText(url, success, error);
|
||||
private static downloadBinary(url, success, error);
|
||||
private static downloadText;
|
||||
private static downloadBinary;
|
||||
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
|
||||
@ -414,7 +414,7 @@ declare module spine {
|
||||
Normal = 0,
|
||||
Additive = 1,
|
||||
Multiply = 2,
|
||||
Screen = 3,
|
||||
Screen = 3
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -483,7 +483,7 @@ declare module spine {
|
||||
OnlyTranslation = 1,
|
||||
NoRotationOrReflection = 2,
|
||||
NoScale = 3,
|
||||
NoScaleOrReflection = 4,
|
||||
NoScaleOrReflection = 4
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -593,17 +593,17 @@ declare module spine {
|
||||
}
|
||||
enum PositionMode {
|
||||
Fixed = 0,
|
||||
Percent = 1,
|
||||
Percent = 1
|
||||
}
|
||||
enum SpacingMode {
|
||||
Length = 0,
|
||||
Fixed = 1,
|
||||
Percent = 2,
|
||||
Percent = 2
|
||||
}
|
||||
enum RotateMode {
|
||||
Tangent = 0,
|
||||
Chain = 1,
|
||||
ChainScale = 2,
|
||||
ChainScale = 2
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -614,12 +614,12 @@ declare module spine {
|
||||
private rawAssets;
|
||||
private errors;
|
||||
constructor(pathPrefix?: string);
|
||||
private queueAsset(clientId, textureLoader, path);
|
||||
private queueAsset;
|
||||
loadText(clientId: string, path: string): void;
|
||||
loadJson(clientId: string, path: string): void;
|
||||
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
|
||||
get(clientId: string, path: string): any;
|
||||
private updateClientAssets(clientAssets);
|
||||
private updateClientAssets;
|
||||
isLoadingComplete(clientId: string): boolean;
|
||||
dispose(): void;
|
||||
hasErrors(): boolean;
|
||||
@ -823,12 +823,12 @@ declare module spine {
|
||||
MipMapNearestNearest = 9984,
|
||||
MipMapLinearNearest = 9985,
|
||||
MipMapNearestLinear = 9986,
|
||||
MipMapLinearLinear = 9987,
|
||||
MipMapLinearLinear = 9987
|
||||
}
|
||||
enum TextureWrap {
|
||||
MirroredRepeat = 33648,
|
||||
ClampToEdge = 33071,
|
||||
Repeat = 10497,
|
||||
Repeat = 10497
|
||||
}
|
||||
class TextureRegion {
|
||||
renderObject: any;
|
||||
@ -855,7 +855,7 @@ declare module spine {
|
||||
pages: TextureAtlasPage[];
|
||||
regions: TextureAtlasRegion[];
|
||||
constructor(atlasText: string, textureLoader: (path: string) => any);
|
||||
private load(atlasText, textureLoader);
|
||||
private load;
|
||||
findRegion(name: string): TextureAtlasRegion;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -931,9 +931,9 @@ declare module spine {
|
||||
private polygonIndicesPool;
|
||||
triangulate(verticesArray: ArrayLike<number>): Array<number>;
|
||||
decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
|
||||
private static isConcave(index, vertexCount, vertices, indices);
|
||||
private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static winding(p1x, p1y, p2x, p2y, p3x, p3y);
|
||||
private static isConcave;
|
||||
private static positiveArea;
|
||||
private static winding;
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1105,7 +1105,7 @@ declare module spine {
|
||||
Mesh = 2,
|
||||
LinkedMesh = 3,
|
||||
Path = 4,
|
||||
Point = 5,
|
||||
Point = 5
|
||||
}
|
||||
}
|
||||
declare module spine {
|
||||
@ -1299,7 +1299,7 @@ declare module spine.webgl {
|
||||
touchesPool: Pool<Touch>;
|
||||
private listeners;
|
||||
constructor(element: HTMLElement);
|
||||
private setupCallbacks(element);
|
||||
private setupCallbacks;
|
||||
addListener(listener: InputListener): void;
|
||||
removeListener(listener: InputListener): void;
|
||||
}
|
||||
@ -1408,7 +1408,7 @@ declare module spine.webgl {
|
||||
drawWithOffset(shader: Shader, primitiveType: number, offset: number, count: number): void;
|
||||
bind(shader: Shader): void;
|
||||
unbind(shader: Shader): void;
|
||||
private update();
|
||||
private update;
|
||||
restore(): void;
|
||||
dispose(): void;
|
||||
}
|
||||
@ -1434,7 +1434,7 @@ declare module spine.webgl {
|
||||
constructor();
|
||||
}
|
||||
enum VertexAttributeType {
|
||||
Float = 0,
|
||||
Float = 0
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
@ -1453,7 +1453,7 @@ declare module spine.webgl {
|
||||
begin(shader: Shader): void;
|
||||
setBlendMode(srcBlend: number, dstBlend: number): void;
|
||||
draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
|
||||
private flush();
|
||||
private flush;
|
||||
end(): void;
|
||||
getDrawCalls(): number;
|
||||
dispose(): void;
|
||||
@ -1493,13 +1493,13 @@ declare module spine.webgl {
|
||||
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
|
||||
end(): void;
|
||||
resize(resizeMode: ResizeMode): void;
|
||||
private enableRenderer(renderer);
|
||||
private enableRenderer;
|
||||
dispose(): void;
|
||||
}
|
||||
enum ResizeMode {
|
||||
Stretch = 0,
|
||||
Expand = 1,
|
||||
Fit = 2,
|
||||
Fit = 2
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
@ -1527,9 +1527,9 @@ declare module spine.webgl {
|
||||
getVertexShaderSource(): string;
|
||||
getFragmentSource(): string;
|
||||
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
|
||||
private compile();
|
||||
private compileShader(type, source);
|
||||
private compileProgram(vs, fs);
|
||||
private compile;
|
||||
private compileShader;
|
||||
private compileProgram;
|
||||
restore(): void;
|
||||
bind(): void;
|
||||
unbind(): void;
|
||||
@ -1576,16 +1576,16 @@ declare module spine.webgl {
|
||||
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
|
||||
circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
|
||||
curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
|
||||
private vertex(x, y, color);
|
||||
private vertex;
|
||||
end(): void;
|
||||
private flush();
|
||||
private check(shapeType, numVertices);
|
||||
private flush;
|
||||
private check;
|
||||
dispose(): void;
|
||||
}
|
||||
enum ShapeType {
|
||||
Point = 0,
|
||||
Line = 1,
|
||||
Filled = 4,
|
||||
Filled = 4
|
||||
}
|
||||
}
|
||||
declare module spine.webgl {
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = Object.setPrototypeOf ||
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
6
spine-ts/build/spine-widget.d.ts
vendored
6
spine-ts/build/spine-widget.d.ts
vendored
@ -1690,6 +1690,9 @@ declare module spine {
|
||||
animations: string[];
|
||||
skin: string;
|
||||
skins: string[];
|
||||
controlBones: string[];
|
||||
premultipliedAlpha: boolean;
|
||||
showControls: boolean;
|
||||
debug: {
|
||||
bones: boolean;
|
||||
regions: boolean;
|
||||
@ -1715,8 +1718,6 @@ declare module spine {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
premultipliedAlpha: boolean;
|
||||
controlBones: string[];
|
||||
success: (widget: SpineWidget) => void;
|
||||
error: (widget: SpineWidget, msg: string) => void;
|
||||
}
|
||||
@ -1745,6 +1746,7 @@ declare module spine {
|
||||
private selectedBones;
|
||||
constructor(parent: HTMLElement, config: SpinePlayerConfig);
|
||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
|
||||
showError(error: string): void;
|
||||
render(): HTMLElement;
|
||||
showSpeedDialog(): void;
|
||||
showAnimationsDialog(): void;
|
||||
|
||||
@ -9509,7 +9509,6 @@ var spine;
|
||||
this.paused = true;
|
||||
this.playTime = 0;
|
||||
this.speed = 1;
|
||||
this.config = this.validateConfig(config);
|
||||
parent.appendChild(this.render());
|
||||
}
|
||||
SpinePlayer.prototype.validateConfig = function (config) {
|
||||
@ -9558,25 +9557,45 @@ var spine;
|
||||
config.debug.meshes = false;
|
||||
if (config.animations && config.animation) {
|
||||
if (config.animations.indexOf(config.animation) < 0)
|
||||
throw new Error("Default animation " + config.animation + " is not contained in the list of selectable animations.");
|
||||
throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations " + escapeHtml(JSON.stringify(this.config.animations)) + ".");
|
||||
}
|
||||
if (config.skins && config.skin) {
|
||||
if (config.skins.indexOf(config.skin) < 0)
|
||||
throw new Error("Default skin " + config.skin + " is not contained in the list of selectable skins.");
|
||||
throw new Error("Default skin '" + config.skin + "' is not contained in the list of selectable skins " + escapeHtml(JSON.stringify(this.config.skins)) + ".");
|
||||
}
|
||||
if (!config.controlBones)
|
||||
config.controlBones = [];
|
||||
if (!config.showControls)
|
||||
config.showControls = true;
|
||||
return config;
|
||||
};
|
||||
SpinePlayer.prototype.showError = function (error) {
|
||||
var errorDom = findWithClass(this.dom, "spine-player-error")[0];
|
||||
errorDom.classList.remove("spine-player-hidden");
|
||||
errorDom.innerHTML = "<p style=\"text-align: center; align-self: center;\">" + error + "</p>";
|
||||
};
|
||||
SpinePlayer.prototype.render = function () {
|
||||
var _this = this;
|
||||
var config = this.config;
|
||||
var dom = this.dom = createElement("\n\t\t\t\t<div class=\"spine-player\">\n\t\t\t\t\t<canvas class=\"spine-player-canvas\"></canvas>\n\t\t\t\t\t<div class=\"spine-player-controls spine-player-popup-parent\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"spine-player-buttons\">\n\t\t\t\t\t\t\t<button id=\"spine-player-button-play-pause\" class=\"spine-player-button spine-player-button-icon-pause\"></button>\n\t\t\t\t\t\t\t<div class=\"spine-player-button-spacer\"></div>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-speed\" class=\"spine-player-button spine-player-button-icon-speed\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button spine-player-button-icon-animations\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button spine-player-button-icon-skins\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button spine-player-button-icon-settings\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button spine-player-button-icon-fullscreen\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
|
||||
var dom = this.dom = createElement("\n\t\t\t\t<div class=\"spine-player\">\n\t\t\t\t\t<canvas class=\"spine-player-canvas\"></canvas>\n\t\t\t\t\t<div class=\"spine-player-error spine-player-hidden\"></div>\n\t\t\t\t\t<div class=\"spine-player-controls spine-player-popup-parent\">\n\t\t\t\t\t\t<div class=\"spine-player-timeline\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"spine-player-buttons\">\n\t\t\t\t\t\t\t<button id=\"spine-player-button-play-pause\" class=\"spine-player-button spine-player-button-icon-pause\"></button>\n\t\t\t\t\t\t\t<div class=\"spine-player-button-spacer\"></div>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-speed\" class=\"spine-player-button spine-player-button-icon-speed\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-animation\" class=\"spine-player-button spine-player-button-icon-animations\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-skin\" class=\"spine-player-button spine-player-button-icon-skins\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-settings\" class=\"spine-player-button spine-player-button-icon-settings\"></button>\n\t\t\t\t\t\t\t<button id=\"spine-player-button-fullscreen\" class=\"spine-player-button spine-player-button-icon-fullscreen\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
|
||||
try {
|
||||
this.config = this.validateConfig(config);
|
||||
}
|
||||
catch (e) {
|
||||
this.showError(e);
|
||||
return dom;
|
||||
}
|
||||
try {
|
||||
this.canvas = findWithClass(dom, "spine-player-canvas")[0];
|
||||
var webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
|
||||
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
|
||||
}
|
||||
catch (e) {
|
||||
this.showError("Sorry, your browser does not support WebGL.<br><br>Please use the latest version of Firefox, Chrome, Edge, or Safari.");
|
||||
return dom;
|
||||
}
|
||||
this.assetManager = new spine.webgl.AssetManager(this.context);
|
||||
this.assetManager.loadText(config.jsonUrl);
|
||||
this.assetManager.loadTextureAtlas(config.atlasUrl);
|
||||
@ -9638,6 +9657,8 @@ var spine;
|
||||
window.onresize = function () {
|
||||
_this.drawFrame(false);
|
||||
};
|
||||
if (!config.showControls)
|
||||
findWithClass(dom, "spine-player-controls ")[0].classList.add("spine-player-hidden");
|
||||
return dom;
|
||||
};
|
||||
SpinePlayer.prototype.showSpeedDialog = function () {
|
||||
@ -9811,20 +9832,50 @@ var spine;
|
||||
var _this = this;
|
||||
if (this.loaded)
|
||||
return;
|
||||
if (this.assetManager.hasErrors()) {
|
||||
this.showError("Error: assets could not be loaded.<br><br>" + escapeHtml(JSON.stringify(this.assetManager.getErrors())));
|
||||
return;
|
||||
}
|
||||
var atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
var jsonText = this.assetManager.get(this.config.jsonUrl);
|
||||
var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
|
||||
var skeletonData = json.readSkeletonData(jsonText);
|
||||
var skeletonData;
|
||||
try {
|
||||
skeletonData = json.readSkeletonData(jsonText);
|
||||
}
|
||||
catch (e) {
|
||||
this.showError("Error: could not load skeleton .json.<br><br>" + escapeHtml(JSON.stringify(e)));
|
||||
return;
|
||||
}
|
||||
this.skeleton = new spine.Skeleton(skeletonData);
|
||||
var stateData = new spine.AnimationStateData(skeletonData);
|
||||
stateData.defaultMix = 0.2;
|
||||
this.animationState = new spine.AnimationState(stateData);
|
||||
if (this.config.controlBones) {
|
||||
this.config.controlBones.forEach(function (bone) {
|
||||
if (!skeletonData.findBone(bone)) {
|
||||
_this.showError("Error: control bone '" + bone + "' does not exist in skeleton.");
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!this.config.skin) {
|
||||
if (skeletonData.skins.length > 0) {
|
||||
this.config.skin = skeletonData.skins[0].name;
|
||||
}
|
||||
}
|
||||
if (this.config.skins && this.config.skin.length > 0) {
|
||||
this.config.skins.forEach(function (skin) {
|
||||
if (!_this.skeleton.data.findSkin(skin)) {
|
||||
_this.showError("Error: skin '" + skin + "' in selectable skin list does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.config.skin) {
|
||||
if (!this.skeleton.data.findSkin(this.config.skin)) {
|
||||
this.showError("Error: skin '" + this.config.skin + "' does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
this.skeleton.setSkinByName(this.config.skin);
|
||||
this.skeleton.setSlotsToSetupPose();
|
||||
}
|
||||
@ -9849,7 +9900,19 @@ var spine;
|
||||
this.config.animation = skeletonData.animations[0].name;
|
||||
}
|
||||
}
|
||||
if (this.config.animations && this.config.animations.length > 0) {
|
||||
this.config.animations.forEach(function (animation) {
|
||||
if (!_this.skeleton.data.findAnimation(animation)) {
|
||||
_this.showError("Error: animation '" + animation + "' in selectable animation list does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.config.animation) {
|
||||
if (!skeletonData.findAnimation(this.config.animation)) {
|
||||
this.showError("Error: animation '" + this.config.animation + "' does not exist in skeleton.");
|
||||
return;
|
||||
}
|
||||
this.play();
|
||||
this.timelineSlider.change = function (percentage) {
|
||||
_this.pause();
|
||||
@ -9993,6 +10056,16 @@ var spine;
|
||||
elements[i].classList.remove(clazz);
|
||||
}
|
||||
}
|
||||
function escapeHtml(str) {
|
||||
if (!str)
|
||||
return "";
|
||||
return str
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
278
spine-ts/widget/css/spine-player.css
Normal file
278
spine-ts/widget/css/spine-player.css
Normal file
@ -0,0 +1,278 @@
|
||||
/** Player **/
|
||||
.spine-player {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spine-player * {
|
||||
box-sizing: border-box;
|
||||
font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.spine-player-error {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
z-index: 10;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.spine-player-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Slider **/
|
||||
.spine-player-slider {
|
||||
width: 100%;
|
||||
background: green;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player-slider-value {
|
||||
height: 8px;
|
||||
background: #62B0EE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** Column and row layout elements **/
|
||||
.spine-player-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spine-player-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/** List **/
|
||||
.spine-player-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spine-player-list li {
|
||||
cursor: pointer;
|
||||
margin: 8px 8px;
|
||||
}
|
||||
|
||||
.spine-player-list .selectable {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 4px 10px 4px 0;
|
||||
}
|
||||
|
||||
.spine-player-list li.selectable:hover {
|
||||
background: #6e6e6e;
|
||||
}
|
||||
|
||||
.spine-player-list li.selectable .selectable-circle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
align-self: center;
|
||||
opacity: 0;
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.spine-player-list li.selectable.selected .selectable-circle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/** Switch **/
|
||||
.spine-player-switch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.spine-player-switch-text {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.spine-player-switch-knob-area {
|
||||
width: 30px; /* width of the switch */
|
||||
height: 10px;
|
||||
display: block;
|
||||
border-radius: 5px; /* must be half of height */
|
||||
background: #6e6e6e;
|
||||
position: relative;
|
||||
align-self: center;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.spine-player-switch.active .spine-player-switch-knob-area {
|
||||
background: #5EAFF1;
|
||||
}
|
||||
|
||||
.spine-player-switch-knob {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #6e6e6e;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -2px;
|
||||
filter: drop-shadow(0 0 1px #333);
|
||||
transition: left 0.2s; /* animates switch changing */
|
||||
}
|
||||
.spine-player-switch.active .spine-player-switch-knob {
|
||||
background: #fff;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
/** Popup **/
|
||||
.spine-player-popup-parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spine-player-popup {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1;
|
||||
right: 2px;
|
||||
bottom: 42px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.spine-player-popup-title {
|
||||
margin: 4px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spine-player-popup hr {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #cccccc70;
|
||||
}
|
||||
|
||||
/** Canvas **/
|
||||
.spine-player canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/** Player controls **/
|
||||
.spine-player-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.spine-player:hover .spine-player-controls {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
/** Player buttons **/
|
||||
.spine-player-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.spine-player-button {
|
||||
background: none;
|
||||
outline: 0;
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player-button-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spine-player-button-icon-play {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-play:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-pause {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-pause:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-speed {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-speed:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-animations {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
||||
}
|
||||
|
||||
.spine-player-button-icon-animations:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
||||
}
|
||||
|
||||
.spine-player-button-icon-skins {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-skins:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-settings {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-settings:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-fullscreen {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-fullscreen:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
/** Speed slider **/
|
||||
.spine-player-speed-slider {
|
||||
width: 150px;
|
||||
}
|
||||
@ -1,275 +1,11 @@
|
||||
<html>
|
||||
<script src="../../build/spine-widget.js"></script>
|
||||
<link rel="stylesheet" href="../css/spine-player.css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
/** Player **/
|
||||
.spine-player {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spine-player * {
|
||||
box-sizing: border-box;
|
||||
font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.spine-player-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Slider **/
|
||||
.spine-player-slider {
|
||||
width: 100%;
|
||||
background: green;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player-slider-value {
|
||||
height: 8px;
|
||||
background: #62B0EE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** Column and row layout elements **/
|
||||
.spine-player-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spine-player-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/** List **/
|
||||
.spine-player-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spine-player-list li {
|
||||
cursor: pointer;
|
||||
margin: 8px 8px;
|
||||
}
|
||||
|
||||
.spine-player-list .selectable {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 4px 10px 4px 0;
|
||||
}
|
||||
|
||||
.spine-player-list li.selectable:hover {
|
||||
background: #6e6e6e;
|
||||
}
|
||||
|
||||
.spine-player-list li.selectable .selectable-circle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
align-self: center;
|
||||
opacity: 0;
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.spine-player-list li.selectable.selected .selectable-circle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/** Switch **/
|
||||
.spine-player-switch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.spine-player-switch-text {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.spine-player-switch-knob-area {
|
||||
width: 30px; /* width of the switch */
|
||||
height: 10px;
|
||||
display: block;
|
||||
border-radius: 5px; /* must be half of height */
|
||||
background: #6e6e6e;
|
||||
position: relative;
|
||||
align-self: center;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.spine-player-switch.active .spine-player-switch-knob-area {
|
||||
background: #5EAFF1;
|
||||
}
|
||||
|
||||
.spine-player-switch-knob {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #6e6e6e;
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: -2px;
|
||||
filter: drop-shadow(0 0 1px #333);
|
||||
transition: left 0.2s; /* animates switch changing */
|
||||
}
|
||||
.spine-player-switch.active .spine-player-switch-knob {
|
||||
background: #fff;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/** Popup **/
|
||||
.spine-player-popup-parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spine-player-popup {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1;
|
||||
right: 2px;
|
||||
bottom: 42px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.spine-player-popup-title {
|
||||
margin: 4px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spine-player-popup hr {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #cccccc70;
|
||||
}
|
||||
|
||||
/** Canvas **/
|
||||
.spine-player canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/** Player controls **/
|
||||
.spine-player-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spine-player:hover .spine-player-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/** Player buttons **/
|
||||
.spine-player-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.spine-player-button {
|
||||
background: none;
|
||||
outline: 0;
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player-button-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spine-player-button-icon-play {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-play:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplay%3C%2Ftitle%3E%3Cg%20id%3D%22play%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2243%2023.3%204%2047%204%201%2043%2023.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-pause {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-pause:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Epause%3C%2Ftitle%3E%3Cg%20id%3D%22pause%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%2228%22%20y%3D%221%22%20width%3D%2213%22%20height%3D%2246%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-speed {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-speed:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-animations {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
||||
}
|
||||
|
||||
.spine-player-button-icon-animations:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
||||
}
|
||||
|
||||
.spine-player-button-icon-skins {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-skins:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-settings {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-settings:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-fullscreen {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.spine-player-button-icon-fullscreen:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2362B0EE%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eexpand%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2230.14%208%2040%208%2040%2017.86%2044.5%2017.86%2044.5%203.5%2030.14%203.5%2030.14%208%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%228%2017.86%208%208%2017.86%208%2017.86%203.5%203.5%203.5%203.5%2017.86%208%2017.86%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2240%2030.14%2040%2040%2030.14%2040%2030.14%2044.5%2044.5%2044.5%2044.5%2030.14%2040%2030.14%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2217.86%2040%208%2040%208%2030.14%203.5%2030.14%203.5%2044.5%2017.86%2044.5%2017.86%2040%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
/** Speed slider **/
|
||||
.spine-player-speed-slider {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
@ -277,8 +13,9 @@ body {
|
||||
</body>
|
||||
<script>
|
||||
new spine.SpinePlayer(document.getElementById("container"), {
|
||||
jsonUrl: "assets/spineboy-pro.json",
|
||||
jsonUrl: "assets/spineboy-ess.json",
|
||||
atlasUrl: "assets/spineboy.atlas",
|
||||
animations: ["walk", "jump"],
|
||||
controlBones: ["root"],
|
||||
backgroundColor: "#cccccc"
|
||||
});
|
||||
|
||||
@ -30,12 +30,34 @@
|
||||
|
||||
module spine {
|
||||
export interface SpinePlayerConfig {
|
||||
/* the URL of the skeleton .json file */
|
||||
jsonUrl: string
|
||||
|
||||
/* the URL of the skeleton .atlas file. Atlas page images are automatically resolved. */
|
||||
atlasUrl: string
|
||||
|
||||
/* Optional: the name of the animation to be played. Default: first animation in the skeleton. */
|
||||
animation: string
|
||||
|
||||
/* Optional: list of animation names from which the user can choose. */
|
||||
animations: string[]
|
||||
|
||||
/* Optional: the name of the skin to be set. Default: the default skin. */
|
||||
skin: string
|
||||
|
||||
/* Optional: list of skin names from which the user can choose. */
|
||||
skins: string[]
|
||||
|
||||
/* Optional: list of bone names that the user can control by dragging. */
|
||||
controlBones: string[]
|
||||
|
||||
/* Optional: whether the skeleton uses premultiplied alpha. Default: false. */
|
||||
premultipliedAlpha: boolean
|
||||
|
||||
/* Optional: whether to show the player controls. Default: true. */
|
||||
showControls: boolean
|
||||
|
||||
/* Optional: which debugging visualizations should be one. Default: none. */
|
||||
debug: {
|
||||
bones: boolean
|
||||
regions: boolean
|
||||
@ -46,24 +68,37 @@
|
||||
points: boolean
|
||||
hulls: boolean;
|
||||
},
|
||||
|
||||
/* Optional: the position and size of the viewport in world coordinates of the skeleton. Default: the setup pose bounding box. */
|
||||
viewport: {
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
/* Optional: whether the canvas should be transparent. Default: false. */
|
||||
alpha: boolean
|
||||
|
||||
/* Optional: the background color. Must be given in the format #rrggbbaa. Default: #000000ff. */
|
||||
backgroundColor: string
|
||||
|
||||
/* Optional: the background image. Default: none. */
|
||||
backgroundImage: {
|
||||
/* The URL of the background image */
|
||||
url: string
|
||||
|
||||
/* Optional: the position and size of the background image in world coordinates. Default: viewport. */
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
premultipliedAlpha: boolean
|
||||
controlBones: string[]
|
||||
|
||||
/* Optional: callback when the widget and its assets have been successfully loaded. */
|
||||
success: (widget: SpineWidget) => void
|
||||
|
||||
/* Optional: callbacl when the widget could not be loaded. */
|
||||
error: (widget: SpineWidget, msg: string) => void
|
||||
}
|
||||
|
||||
@ -209,7 +244,6 @@
|
||||
private selectedBones: Bone[];
|
||||
|
||||
constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
|
||||
this.config = this.validateConfig(config);
|
||||
parent.appendChild(this.render());
|
||||
}
|
||||
|
||||
@ -242,22 +276,32 @@
|
||||
if (!config.debug.meshes) config.debug.meshes = false;
|
||||
|
||||
if (config.animations && config.animation) {
|
||||
if (config.animations.indexOf(config.animation) < 0) throw new Error("Default animation " + config.animation + " is not contained in the list of selectable animations.");
|
||||
if (config.animations.indexOf(config.animation) < 0) throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations " + escapeHtml(JSON.stringify(this.config.animations)) + ".");
|
||||
}
|
||||
|
||||
if (config.skins && config.skin) {
|
||||
if (config.skins.indexOf(config.skin) < 0) throw new Error("Default skin " + config.skin + " is not contained in the list of selectable skins.");
|
||||
if (config.skins.indexOf(config.skin) < 0) throw new Error("Default skin '" + config.skin + "' is not contained in the list of selectable skins " + escapeHtml(JSON.stringify(this.config.skins)) + ".");
|
||||
}
|
||||
|
||||
if (!config.controlBones) config.controlBones = [];
|
||||
|
||||
if (!config.showControls) config.showControls = true;
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
showError(error: string) {
|
||||
let errorDom = findWithClass(this.dom, "spine-player-error")[0];
|
||||
errorDom.classList.remove("spine-player-hidden");
|
||||
errorDom.innerHTML = `<p style="text-align: center; align-self: center;">${error}</p>`;
|
||||
}
|
||||
|
||||
render(): HTMLElement {
|
||||
let config = this.config;
|
||||
let dom = this.dom = createElement(/*html*/`
|
||||
<div class="spine-player">
|
||||
<canvas class="spine-player-canvas"></canvas>
|
||||
<div class="spine-player-error spine-player-hidden"></div>
|
||||
<div class="spine-player-controls spine-player-popup-parent">
|
||||
<div class="spine-player-timeline">
|
||||
</div>
|
||||
@ -274,14 +318,26 @@
|
||||
</div>
|
||||
`)
|
||||
|
||||
try {
|
||||
// Validate the configuration
|
||||
this.config = this.validateConfig(config);
|
||||
} catch (e) {
|
||||
this.showError(e);
|
||||
return dom
|
||||
}
|
||||
|
||||
try {
|
||||
// Setup the scene renderer and OpenGL context
|
||||
this.canvas = findWithClass(dom, "spine-player-canvas")[0] as HTMLCanvasElement;
|
||||
var webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
|
||||
// Setup the scene renderer and loading screen
|
||||
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
|
||||
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
|
||||
} catch (e) {
|
||||
this.showError("Sorry, your browser does not support WebGL.<br><br>Please use the latest version of Firefox, Chrome, Edge, or Safari.");
|
||||
return dom;
|
||||
}
|
||||
|
||||
// Load the assets
|
||||
this.assetManager = new spine.webgl.AssetManager(this.context);
|
||||
@ -347,7 +403,7 @@
|
||||
this.drawFrame(false);
|
||||
}
|
||||
|
||||
// Setup input handler for control bones and pan/zoom
|
||||
if (!config.showControls) findWithClass(dom, "spine-player-controls ")[0].classList.add("spine-player-hidden");
|
||||
|
||||
return dom;
|
||||
}
|
||||
@ -425,7 +481,7 @@
|
||||
|
||||
let rows = findWithClass(popup.dom, "spine-player-list")[0];
|
||||
this.skeleton.data.skins.forEach((skin) => {
|
||||
// skip animations not whitelisted if a whitelist is given
|
||||
// skip skins not whitelisted if a whitelist is given
|
||||
if (this.config.skins && this.config.skins.indexOf(skin.name) < 0) {
|
||||
return;
|
||||
}
|
||||
@ -589,27 +645,61 @@
|
||||
loadSkeleton () {
|
||||
if (this.loaded) return;
|
||||
|
||||
if (this.assetManager.hasErrors()) {
|
||||
this.showError("Error: assets could not be loaded.<br><br>" + escapeHtml(JSON.stringify(this.assetManager.getErrors())));
|
||||
return;
|
||||
}
|
||||
|
||||
let atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
let jsonText = this.assetManager.get(this.config.jsonUrl);
|
||||
let json = new SkeletonJson(new AtlasAttachmentLoader(atlas));
|
||||
let skeletonData = json.readSkeletonData(jsonText);
|
||||
let skeletonData: SkeletonData;
|
||||
try {
|
||||
skeletonData = json.readSkeletonData(jsonText);
|
||||
} catch (e) {
|
||||
this.showError("Error: could not load skeleton .json.<br><br>" + escapeHtml(JSON.stringify(e)));
|
||||
return;
|
||||
}
|
||||
this.skeleton = new Skeleton(skeletonData);
|
||||
let stateData = new AnimationStateData(skeletonData);
|
||||
stateData.defaultMix = 0.2;
|
||||
this.animationState = new AnimationState(stateData);
|
||||
|
||||
// Check if all controllable bones are in the skeleton
|
||||
if (this.config.controlBones) {
|
||||
this.config.controlBones.forEach(bone => {
|
||||
if (!skeletonData.findBone(bone)) {
|
||||
this.showError(`Error: control bone '${bone}' does not exist in skeleton.`);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Setup skin
|
||||
if (!this.config.skin) {
|
||||
if (skeletonData.skins.length > 0) {
|
||||
this.config.skin = skeletonData.skins[0].name;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.config.skins && this.config.skin.length > 0) {
|
||||
this.config.skins.forEach(skin => {
|
||||
if (!this.skeleton.data.findSkin(skin)) {
|
||||
this.showError(`Error: skin '${skin}' in selectable skin list does not exist in skeleton.`);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (this.config.skin) {
|
||||
if (!this.skeleton.data.findSkin(this.config.skin)) {
|
||||
this.showError(`Error: skin '${this.config.skin}' does not exist in skeleton.`);
|
||||
return;
|
||||
}
|
||||
this.skeleton.setSkinByName(this.config.skin);
|
||||
this.skeleton.setSlotsToSetupPose();
|
||||
}
|
||||
|
||||
// Setup viewport
|
||||
// Setup viewport after skin is set
|
||||
if (!this.config.viewport || !this.config.viewport.x || !this.config.viewport.y || !this.config.viewport.width || !this.config.viewport.height) {
|
||||
this.config.viewport = {
|
||||
x: 0,
|
||||
@ -628,14 +718,27 @@
|
||||
this.config.viewport.height = size.y * 1.2;
|
||||
}
|
||||
|
||||
// Setup the first animation
|
||||
// Setup the animations after viewport, so default bounds don't get messed up.
|
||||
if (!this.config.animation) {
|
||||
if (skeletonData.animations.length > 0) {
|
||||
this.config.animation = skeletonData.animations[0].name;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.config.animations && this.config.animations.length > 0) {
|
||||
this.config.animations.forEach(animation => {
|
||||
if (!this.skeleton.data.findAnimation(animation)) {
|
||||
this.showError(`Error: animation '${animation}' in selectable animation list does not exist in skeleton.`);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(this.config.animation) {
|
||||
if (!skeletonData.findAnimation(this.config.animation)) {
|
||||
this.showError(`Error: animation '${this.config.animation}' does not exist in skeleton.`);
|
||||
return;
|
||||
}
|
||||
this.play()
|
||||
this.timelineSlider.change = (percentage) => {
|
||||
this.pause();
|
||||
@ -776,4 +879,14 @@
|
||||
elements[i].classList.remove(clazz);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(str: string) {
|
||||
if (!str) return "";
|
||||
return str
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user