mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 23:34:53 +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 ||
|
||||
({ __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]; };
|
||||
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");
|
||||
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);
|
||||
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 ||
|
||||
({ __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]; };
|
||||
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 ||
|
||||
({ __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]; };
|
||||
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 ||
|
||||
({ __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]; };
|
||||
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 ||
|
||||
({ __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]; };
|
||||
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
3394
spine-ts/build/spine-widget.d.ts
vendored
3394
spine-ts/build/spine-widget.d.ts
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
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>
|
||||
`)
|
||||
|
||||
// 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);
|
||||
try {
|
||||
// Validate the configuration
|
||||
this.config = this.validateConfig(config);
|
||||
} catch (e) {
|
||||
this.showError(e);
|
||||
return dom
|
||||
}
|
||||
|
||||
// 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);
|
||||
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