UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Style changes for new player.

Browse Source
This commit is contained in:
badlogic 2018-11-06 18:40:38 +01:00
parent 42e5222cbf
commit d937d432d8
5 changed files with 88 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
spine-ts/build/spine-widget.d.ts vendored
View File

@ -16,11 +16,11 @@ declare module spine {
setup = 0, setup = 0,
first = 1, first = 1,
replace = 2, replace = 2,
add = 3, add = 3
} }
enum MixDirection { enum MixDirection {
in = 0, in = 0,
out = 1, out = 1
} }
enum TimelineType { enum TimelineType {
rotate = 0, rotate = 0,
@ -37,7 +37,7 @@ declare module spine {
pathConstraintPosition = 11, pathConstraintPosition = 11,
pathConstraintSpacing = 12, pathConstraintSpacing = 12,
pathConstraintMix = 13, pathConstraintMix = 13,
twoColor = 14, twoColor = 14
} }
abstract class CurveTimeline implements Timeline { abstract class CurveTimeline implements Timeline {
static LINEAR: number; static LINEAR: number;
@ -341,7 +341,7 @@ declare module spine {
end = 2, end = 2,
dispose = 3, dispose = 3,
complete = 4, complete = 4,
event = 5, event = 5
} }
interface AnimationStateListener2 { interface AnimationStateListener2 {
start(entry: TrackEntry): void; start(entry: TrackEntry): void;
@ -380,8 +380,8 @@ declare module spine {
private toLoad; private toLoad;
private loaded; private loaded;
constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string); constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
private static downloadText(url, success, error); private static downloadText;
private static downloadBinary(url, success, error); private static downloadBinary;
loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void; 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; 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; 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, Normal = 0,
Additive = 1, Additive = 1,
Multiply = 2, Multiply = 2,
Screen = 3, Screen = 3
} }
} }
declare module spine { declare module spine {
@ -483,7 +483,7 @@ declare module spine {
OnlyTranslation = 1, OnlyTranslation = 1,
NoRotationOrReflection = 2, NoRotationOrReflection = 2,
NoScale = 3, NoScale = 3,
NoScaleOrReflection = 4, NoScaleOrReflection = 4
} }
} }
declare module spine { declare module spine {
@ -593,17 +593,17 @@ declare module spine {
} }
enum PositionMode { enum PositionMode {
Fixed = 0, Fixed = 0,
Percent = 1, Percent = 1
} }
enum SpacingMode { enum SpacingMode {
Length = 0, Length = 0,
Fixed = 1, Fixed = 1,
Percent = 2, Percent = 2
} }
enum RotateMode { enum RotateMode {
Tangent = 0, Tangent = 0,
Chain = 1, Chain = 1,
ChainScale = 2, ChainScale = 2
} }
} }
declare module spine { declare module spine {
@ -614,12 +614,12 @@ declare module spine {
private rawAssets; private rawAssets;
private errors; private errors;
constructor(pathPrefix?: string); constructor(pathPrefix?: string);
private queueAsset(clientId, textureLoader, path); private queueAsset;
loadText(clientId: string, path: string): void; loadText(clientId: string, path: string): void;
loadJson(clientId: string, path: string): void; loadJson(clientId: string, path: string): void;
loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void; loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
get(clientId: string, path: string): any; get(clientId: string, path: string): any;
private updateClientAssets(clientAssets); private updateClientAssets;
isLoadingComplete(clientId: string): boolean; isLoadingComplete(clientId: string): boolean;
dispose(): void; dispose(): void;
hasErrors(): boolean; hasErrors(): boolean;
@ -823,12 +823,12 @@ declare module spine {
MipMapNearestNearest = 9984, MipMapNearestNearest = 9984,
MipMapLinearNearest = 9985, MipMapLinearNearest = 9985,
MipMapNearestLinear = 9986, MipMapNearestLinear = 9986,
MipMapLinearLinear = 9987, MipMapLinearLinear = 9987
} }
enum TextureWrap { enum TextureWrap {
MirroredRepeat = 33648, MirroredRepeat = 33648,
ClampToEdge = 33071, ClampToEdge = 33071,
Repeat = 10497, Repeat = 10497
} }
class TextureRegion { class TextureRegion {
renderObject: any; renderObject: any;
@ -855,7 +855,7 @@ declare module spine {
pages: TextureAtlasPage[]; pages: TextureAtlasPage[];
regions: TextureAtlasRegion[]; regions: TextureAtlasRegion[];
constructor(atlasText: string, textureLoader: (path: string) => any); constructor(atlasText: string, textureLoader: (path: string) => any);
private load(atlasText, textureLoader); private load;
findRegion(name: string): TextureAtlasRegion; findRegion(name: string): TextureAtlasRegion;
dispose(): void; dispose(): void;
} }
@ -931,9 +931,9 @@ declare module spine {
private polygonIndicesPool; private polygonIndicesPool;
triangulate(verticesArray: ArrayLike<number>): Array<number>; triangulate(verticesArray: ArrayLike<number>): Array<number>;
decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>; decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
private static isConcave(index, vertexCount, vertices, indices); private static isConcave;
private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y); private static positiveArea;
private static winding(p1x, p1y, p2x, p2y, p3x, p3y); private static winding;
} }
} }
declare module spine { declare module spine {
@ -1105,7 +1105,7 @@ declare module spine {
Mesh = 2, Mesh = 2,
LinkedMesh = 3, LinkedMesh = 3,
Path = 4, Path = 4,
Point = 5, Point = 5
} }
} }
declare module spine { declare module spine {
@ -1299,7 +1299,7 @@ declare module spine.webgl {
touchesPool: Pool<Touch>; touchesPool: Pool<Touch>;
private listeners; private listeners;
constructor(element: HTMLElement); constructor(element: HTMLElement);
private setupCallbacks(element); private setupCallbacks;
addListener(listener: InputListener): void; addListener(listener: InputListener): void;
removeListener(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; drawWithOffset(shader: Shader, primitiveType: number, offset: number, count: number): void;
bind(shader: Shader): void; bind(shader: Shader): void;
unbind(shader: Shader): void; unbind(shader: Shader): void;
private update(); private update;
restore(): void; restore(): void;
dispose(): void; dispose(): void;
} }
@ -1434,7 +1434,7 @@ declare module spine.webgl {
constructor(); constructor();
} }
enum VertexAttributeType { enum VertexAttributeType {
Float = 0, Float = 0
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1453,7 +1453,7 @@ declare module spine.webgl {
begin(shader: Shader): void; begin(shader: Shader): void;
setBlendMode(srcBlend: number, dstBlend: number): void; setBlendMode(srcBlend: number, dstBlend: number): void;
draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void; draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
private flush(); private flush;
end(): void; end(): void;
getDrawCalls(): number; getDrawCalls(): number;
dispose(): void; 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; curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
end(): void; end(): void;
resize(resizeMode: ResizeMode): void; resize(resizeMode: ResizeMode): void;
private enableRenderer(renderer); private enableRenderer;
dispose(): void; dispose(): void;
} }
enum ResizeMode { enum ResizeMode {
Stretch = 0, Stretch = 0,
Expand = 1, Expand = 1,
Fit = 2, Fit = 2
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1527,9 +1527,9 @@ declare module spine.webgl {
getVertexShaderSource(): string; getVertexShaderSource(): string;
getFragmentSource(): string; getFragmentSource(): string;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
private compile(); private compile;
private compileShader(type, source); private compileShader;
private compileProgram(vs, fs); private compileProgram;
restore(): void; restore(): void;
bind(): void; bind(): void;
unbind(): void; unbind(): void;
@ -1576,16 +1576,16 @@ declare module spine.webgl {
polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void; 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; 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; 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; end(): void;
private flush(); private flush;
private check(shapeType, numVertices); private check;
dispose(): void; dispose(): void;
} }
enum ShapeType { enum ShapeType {
Point = 0, Point = 0,
Line = 1, Line = 1,
Filled = 4, Filled = 4
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1732,9 +1732,9 @@ declare module spine {
drawFrame(requestNextFrame?: boolean): void; drawFrame(requestNextFrame?: boolean): void;
scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2; scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
loadSkeleton(): void; loadSkeleton(): void;
private play(); private play;
private pause(); private pause;
private resize(); private resize;
} }
} }
declare module spine { declare module spine {
@ -1758,10 +1758,10 @@ declare module spine {
private loaded; private loaded;
private bounds; private bounds;
constructor(element: HTMLElement | string, config: SpineWidgetConfig); constructor(element: HTMLElement | string, config: SpineWidgetConfig);
private validateConfig(config); private validateConfig;
private load(); private load;
private render(); private render;
private resize(); private resize;
pause(): void; pause(): void;
play(): void; play(): void;
isPlaying(): boolean; isPlaying(): boolean;
@ -1769,7 +1769,7 @@ declare module spine {
static loadWidgets(): void; static loadWidgets(): void;
static loadWidget(widget: HTMLElement): void; static loadWidget(widget: HTMLElement): void;
static pageLoaded: boolean; static pageLoaded: boolean;
private static ready(); private static ready;
static setupDOMListener(): void; static setupDOMListener(): void;
} }
class SpineWidgetConfig { class SpineWidgetConfig {

19
spine-ts/build/spine-widget.js
View File

@ -1,7 +1,10 @@
var __extends = (this && this.__extends) || (function () { var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf || var extendStatics = function (d, b) {
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || extendStatics = Object.setPrototypeOf ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; ({ __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) { return function (d, b) {
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
@ -9556,10 +9559,10 @@ var spine;
if (!_this.skeleton || _this.skeleton.data.animations.length == 0) if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
return; return;
dropdown.classList.remove("spine-player-hidden"); dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = "\n\t\t\t\t\t<div>Animations</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t"; dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-dropdown-title\">Animations</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t\t</ul>\n\t\t\t\t";
var rows = findWithClass(dropdown, "spine-player-list")[0]; var rows = findWithClass(dropdown, "spine-player-list")[0];
_this.skeleton.data.animations.forEach(function (animation) { _this.skeleton.data.animations.forEach(function (animation) {
var row = document.createElement("div"); var row = document.createElement("li");
row.classList.add("spine-player-list-item"); row.classList.add("spine-player-list-item");
if (animation.name == _this.config.animation) if (animation.name == _this.config.animation)
row.classList.add("spine-player-list-item-selected"); row.classList.add("spine-player-list-item-selected");
@ -9580,10 +9583,10 @@ var spine;
if (!_this.skeleton || _this.skeleton.data.animations.length == 0) if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
return; return;
dropdown.classList.remove("spine-player-hidden"); dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = "\n\t\t\t\t\t<div>Skins</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t"; dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-dropdown-title\">Skins</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t\t</ul>\n\t\t\t\t";
var rows = findWithClass(dropdown, "spine-player-list")[0]; var rows = findWithClass(dropdown, "spine-player-list")[0];
_this.skeleton.data.skins.forEach(function (skin) { _this.skeleton.data.skins.forEach(function (skin) {
var row = document.createElement("div"); var row = document.createElement("li");
row.classList.add("spine-player-list-item"); row.classList.add("spine-player-list-item");
if (skin.name == _this.config.skin) if (skin.name == _this.config.skin)
row.classList.add("spine-player-list-item-selected"); row.classList.add("spine-player-list-item-selected");
@ -9604,7 +9607,7 @@ var spine;
if (!_this.skeleton || _this.skeleton.data.animations.length == 0) if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
return; return;
dropdown.classList.remove("spine-player-hidden"); dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = "\n\t\t\t\t\t<div>Debug</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t"; dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-dropdown-title\">Debug</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
var rows = findWithClass(dropdown, "spine-player-list")[0]; var rows = findWithClass(dropdown, "spine-player-list")[0];
var makeItem = function (name) { var makeItem = function (name) {
var row = document.createElement("div"); var row = document.createElement("div");

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

34
spine-ts/widget/example/player-test.html
View File

@ -30,14 +30,18 @@ body {
display: inline-block; display: inline-block;
} }
.spine-player .spine-player-dropdown-title {
text-align: center;
}
.spine-player .spine-player-dropdown-content { .spine-player .spine-player-dropdown-content {
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.75);
z-index: 1; z-index: 1;
right: 2px; right: 2px;
bottom: 42px; bottom: 42px;
padding: 16px; padding: 4px 0px;
border-radius: 8px; border-radius: 4px;
} }
.spine-player canvas { .spine-player canvas {
@ -64,7 +68,7 @@ body {
width: 100%; width: 100%;
background: green; background: green;
position: relative; position: relative;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.75);
cursor: pointer; cursor: pointer;
} }
@ -78,7 +82,7 @@ body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.75);
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
padding: 0 8px; padding: 0 8px;
@ -166,17 +170,31 @@ body {
flex-direction: row; flex-direction: row;
} }
.spine-player-list {
list-style: none;
padding: 0;
margin: 0;
}
.spine-player-list-item { .spine-player-list-item {
padding: 0 4px; padding: 0 4px;
cursor: pointer; cursor: pointer;
} }
.spine-player-list-item-selected { .spine-player-list-item-selected:before {
background: rgba(101, 176, 238, 0.605); content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
display: inline-block;
position: relative;
top: -1px; /* vertical position of dot*/
margin-right: 5px;
} }
.spine-player-list-item:hover { .spine-player-list-item:hover {
background: #62B0EE; background: #979696b9;
} }
.spine-player-speed-slider { .spine-player-speed-slider {

18
spine-ts/widget/src/Player.ts
View File

@ -258,15 +258,15 @@
if (!this.skeleton || this.skeleton.data.animations.length == 0) return; if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
dropdown.classList.remove("spine-player-hidden"); dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/` dropdown.innerHTML = /*html*/`
<div>Animations</div> <div class="spine-player-dropdown-title">Animations</div>
<hr> <hr>
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;"> <ul class="spine-player-list">
</div> </ul>
`; `;
let rows = findWithClass(dropdown, "spine-player-list")[0]; let rows = findWithClass(dropdown, "spine-player-list")[0];
this.skeleton.data.animations.forEach((animation) => { this.skeleton.data.animations.forEach((animation) => {
let row = document.createElement("div"); let row = document.createElement("li");
row.classList.add("spine-player-list-item"); row.classList.add("spine-player-list-item");
if (animation.name == this.config.animation) row.classList.add("spine-player-list-item-selected"); if (animation.name == this.config.animation) row.classList.add("spine-player-list-item-selected");
row.innerText = animation.name; row.innerText = animation.name;
@ -288,15 +288,15 @@
if (!this.skeleton || this.skeleton.data.animations.length == 0) return; if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
dropdown.classList.remove("spine-player-hidden"); dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/` dropdown.innerHTML = /*html*/`
<div>Skins</div> <div class="spine-player-dropdown-title">Skins</div>
<hr> <hr>
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;"> <ul class="spine-player-list">
</div> </ul>
`; `;
let rows = findWithClass(dropdown, "spine-player-list")[0]; let rows = findWithClass(dropdown, "spine-player-list")[0];
this.skeleton.data.skins.forEach((skin) => { this.skeleton.data.skins.forEach((skin) => {
let row = document.createElement("div"); let row = document.createElement("li");
row.classList.add("spine-player-list-item"); row.classList.add("spine-player-list-item");
if (skin.name == this.config.skin) row.classList.add("spine-player-list-item-selected"); if (skin.name == this.config.skin) row.classList.add("spine-player-list-item-selected");
row.innerText = skin.name; row.innerText = skin.name;
@ -318,7 +318,7 @@
if (!this.skeleton || this.skeleton.data.animations.length == 0) return; if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
dropdown.classList.remove("spine-player-hidden"); dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/` dropdown.innerHTML = /*html*/`
<div>Debug</div> <div class="spine-player-dropdown-title">Debug</div>
<hr> <hr>
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;"> <div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
</div> </div>