UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 15:24:55 +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,
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 {
@ -1732,9 +1732,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();
private play;
private pause;
private resize;
}
}
declare module spine {
@ -1758,10 +1758,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;
@ -1769,7 +1769,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 {

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

@ -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; }
@ -9556,10 +9559,10 @@ var spine;
if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
return;
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];
_this.skeleton.data.animations.forEach(function (animation) {
var row = document.createElement("div");
var row = document.createElement("li");
row.classList.add("spine-player-list-item");
if (animation.name == _this.config.animation)
row.classList.add("spine-player-list-item-selected");
@ -9580,10 +9583,10 @@ var spine;
if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
return;
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];
_this.skeleton.data.skins.forEach(function (skin) {
var row = document.createElement("div");
var row = document.createElement("li");
row.classList.add("spine-player-list-item");
if (skin.name == _this.config.skin)
row.classList.add("spine-player-list-item-selected");
@ -9604,7 +9607,7 @@ var spine;
if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
return;
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 makeItem = function (name) {
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;
}
.spine-player .spine-player-dropdown-title {
text-align: center;
}
.spine-player .spine-player-dropdown-content {
position: absolute;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.75);
z-index: 1;
right: 2px;
bottom: 42px;
padding: 16px;
border-radius: 8px;
padding: 4px 0px;
border-radius: 4px;
}
.spine-player canvas {
@ -64,7 +68,7 @@ body {
width: 100%;
background: green;
position: relative;
background: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.75);
cursor: pointer;
}
@ -78,7 +82,7 @@ body {
display: flex;
flex-direction: row;
width: 100%;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.75);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 0 8px;
@ -166,17 +170,31 @@ body {
flex-direction: row;
}
.spine-player-list {
list-style: none;
padding: 0;
margin: 0;
}
.spine-player-list-item {
padding: 0 4px;
cursor: pointer;
}
.spine-player-list-item-selected {
background: rgba(101, 176, 238, 0.605);
.spine-player-list-item-selected:before {
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 {
background: #62B0EE;
background: #979696b9;
}
.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;
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/`
<div>Animations</div>
<div class="spine-player-dropdown-title">Animations</div>
<hr>
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
</div>
<ul class="spine-player-list">
</ul>
`;
let rows = findWithClass(dropdown, "spine-player-list")[0];
this.skeleton.data.animations.forEach((animation) => {
let row = document.createElement("div");
let row = document.createElement("li");
row.classList.add("spine-player-list-item");
if (animation.name == this.config.animation) row.classList.add("spine-player-list-item-selected");
row.innerText = animation.name;
@ -288,15 +288,15 @@
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/`
<div>Skins</div>
<div class="spine-player-dropdown-title">Skins</div>
<hr>
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
</div>
<ul class="spine-player-list">
</ul>
`;
let rows = findWithClass(dropdown, "spine-player-list")[0];
this.skeleton.data.skins.forEach((skin) => {
let row = document.createElement("div");
let row = document.createElement("li");
row.classList.add("spine-player-list-item");
if (skin.name == this.config.skin) row.classList.add("spine-player-list-item-selected");
row.innerText = skin.name;
@ -318,7 +318,7 @@
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
dropdown.classList.remove("spine-player-hidden");
dropdown.innerHTML = /*html*/`
<div>Debug</div>
<div class="spine-player-dropdown-title">Debug</div>
<hr>
<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
</div>