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

Merge branch '3.8' into 4.0-beta

Browse Source 
# Conflicts:
#	spine-libgdx/spine-libgdx/pom.xml
#	spine-libgdx/spine-skeletonviewer/src/com/esotericsoftware/spine/SkeletonViewer.java
#	spine-ts/build/spine-all.js.map
#	spine-ts/build/spine-canvas.js.map
#	spine-ts/build/spine-core.js.map
#	spine-ts/build/spine-player.js.map
#	spine-ts/build/spine-threejs.js.map
#	spine-ts/build/spine-webgl.js.map
This commit is contained in:
badlogic 2021-06-10 15:10:00 +02:00
commit cf24f5d678
22 changed files with 197 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
spine-libgdx/spine-libgdx/pom.xml
View File

@ -51,7 +51,7 @@
<properties> <properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<gdx.version>1.9.11</gdx.version> <gdx.version>1.10.0</gdx.version>
</properties> </properties>
<build> <build>
@ -93,7 +93,7 @@
<plugin> <plugin>
<groupId>org.apache.maven.plugins</groupId> <groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-release-plugin</artifactId> <artifactId>maven-release-plugin</artifactId>
<version>2.5.3</version> <version>3.0.0-M4</version>
<executions> <executions>
<execution> <execution>
<id>default</id> <id>default</id>
@ -106,6 +106,11 @@
</execution> </execution>
</executions> </executions>
</plugin> </plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-gpg-plugin</artifactId>
<version>3.0.1</version>
</plugin>
</plugins> </plugins>
</build> </build>

16
spine-ts/build/spine-all.d.ts vendored
View File

@ -877,6 +877,10 @@ declare module spine {
name: string; name: string;
x: number; x: number;
y: number; y: number;
offsetX: number;
offsetY: number;
originalWidth: number;
originalHeight: number;
index: number; index: number;
degrees: number; degrees: number;
texture: Texture; texture: Texture;
@ -1327,7 +1331,7 @@ declare module spine.webgl {
static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean; static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void; setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear; static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear;
setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void; setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
update(useMipMaps: boolean): void; update(useMipMaps: boolean): void;
restore(): void; restore(): void;
@ -1872,13 +1876,13 @@ declare module spine {
private context; private context;
private loadingScreen; private loadingScreen;
private assetManager; private assetManager;
private loaded; loaded: boolean;
private skeleton; skeleton: Skeleton;
private animationState; animationState: AnimationState;
private time;
private paused; private paused;
private playTime; private playTime;
private speed; private speed;
private time;
private animationViewports; private animationViewports;
private currentViewport; private currentViewport;
private previousViewport; private previousViewport;
@ -1902,7 +1906,7 @@ declare module spine {
setupInput(): void; setupInput(): void;
private play; private play;
private pause; private pause;
setAnimation(animation: string): void; setAnimation(animation: string, loop?: boolean): void;
private percentageToWorldUnit; private percentageToWorldUnit;
private calculateAnimationViewport; private calculateAnimationViewport;
stopRendering(): void; stopRendering(): void;

92
spine-ts/build/spine-all.js
View File

@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -8957,6 +8959,7 @@ var spine;
return _this; return _this;
} }
RegionAttachment.prototype.updateOffset = function () { RegionAttachment.prototype.updateOffset = function () {
var region = this.region;
var regionScaleX = this.width / this.region.originalWidth * this.scaleX; var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
var regionScaleY = this.height / this.region.originalHeight * this.scaleY; var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX; var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
@ -8966,13 +8969,14 @@ var spine;
var radians = this.rotation * Math.PI / 180; var radians = this.rotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
var localXCos = localX * cos + this.x; var x = this.x, y = this.y;
var localXCos = localX * cos + x;
var localXSin = localX * sin; var localXSin = localX * sin;
var localYCos = localY * cos + this.y; var localYCos = localY * cos + y;
var localYSin = localY * sin; var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x; var localX2Cos = localX2 * cos + x;
var localX2Sin = localX2 * sin; var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y; var localY2Cos = localY2 * cos + y;
var localY2Sin = localY2 * sin; var localY2Sin = localY2 * sin;
var offset = this.offset; var offset = this.offset;
offset[0] = localXCos - localYSin; offset[0] = localXCos - localYSin;
@ -9195,42 +9199,31 @@ var spine;
}; };
SkeletonRenderer.prototype.drawImages = function (skeleton) { SkeletonRenderer.prototype.drawImages = function (skeleton) {
var ctx = this.ctx; var ctx = this.ctx;
var color = this.tempColor;
var skeletonColor = skeleton.color;
var drawOrder = skeleton.drawOrder; var drawOrder = skeleton.drawOrder;
if (this.debugRendering) if (this.debugRendering)
ctx.strokeStyle = "green"; ctx.strokeStyle = "green";
ctx.save();
for (var i = 0, n = drawOrder.length; i < n; i++) { for (var i = 0, n = drawOrder.length; i < n; i++) {
var slot = drawOrder[i]; var slot = drawOrder[i];
if (!slot.bone.active) var bone = slot.bone;
if (!bone.active)
continue; continue;
var attachment = slot.getAttachment(); var attachment = slot.getAttachment();
var regionAttachment = null; if (!(attachment instanceof spine.RegionAttachment))
var region = null;
var image = null;
if (attachment instanceof spine.RegionAttachment) {
regionAttachment = attachment;
region = regionAttachment.region;
image = region.texture.getImage();
}
else
continue; continue;
var skeleton_1 = slot.bone.skeleton; var region = attachment.region;
var skeletonColor = skeleton_1.color; var image = region.texture.getImage();
var slotColor = slot.color; var slotColor = slot.color;
var regionColor = regionAttachment.color; var regionColor = attachment.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a; color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, skeletonColor.a * slotColor.a * regionColor.a);
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, alpha);
var att = attachment;
var bone = slot.bone;
var w = region.width;
var h = region.height;
ctx.save(); ctx.save();
ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY); ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
ctx.translate(attachment.offset[0], attachment.offset[1]); ctx.translate(attachment.offset[0], attachment.offset[1]);
ctx.rotate(attachment.rotation * Math.PI / 180); ctx.rotate(attachment.rotation * Math.PI / 180);
var atlasScale = att.width / w; var atlasScale = attachment.width / region.originalWidth;
ctx.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY); ctx.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
var w = region.width, h = region.height;
ctx.translate(w / 2, h / 2); ctx.translate(w / 2, h / 2);
if (attachment.region.degrees == 90) { if (attachment.region.degrees == 90) {
var t = w; var t = w;
@ -9248,18 +9241,20 @@ var spine;
ctx.strokeRect(0, 0, w, h); ctx.strokeRect(0, 0, w, h);
ctx.restore(); ctx.restore();
} }
ctx.restore();
}; };
SkeletonRenderer.prototype.drawTriangles = function (skeleton) { SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
var ctx = this.ctx;
var color = this.tempColor;
var skeletonColor = skeleton.color;
var drawOrder = skeleton.drawOrder;
var blendMode = null; var blendMode = null;
var vertices = this.vertices; var vertices = this.vertices;
var triangles = null; var triangles = null;
var drawOrder = skeleton.drawOrder;
for (var i = 0, n = drawOrder.length; i < n; i++) { for (var i = 0, n = drawOrder.length; i < n; i++) {
var slot = drawOrder[i]; var slot = drawOrder[i];
var attachment = slot.getAttachment(); var attachment = slot.getAttachment();
var texture = null; var texture = void 0;
var region = null; var region = void 0;
if (attachment instanceof spine.RegionAttachment) { if (attachment instanceof spine.RegionAttachment) {
var regionAttachment = attachment; var regionAttachment = attachment;
vertices = this.computeRegionVertices(slot, regionAttachment, false); vertices = this.computeRegionVertices(slot, regionAttachment, false);
@ -9276,18 +9271,11 @@ var spine;
else else
continue; continue;
if (texture) { if (texture) {
var slotBlendMode = slot.data.blendMode; if (slot.data.blendMode != blendMode)
if (slotBlendMode != blendMode) { blendMode = slot.data.blendMode;
blendMode = slotBlendMode;
}
var skeleton_2 = slot.bone.skeleton;
var skeletonColor = skeleton_2.color;
var slotColor = slot.color; var slotColor = slot.color;
var attachmentColor = attachment.color; var attachmentColor = attachment.color;
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a; color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, skeletonColor.a * slotColor.a * attachmentColor.a);
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
var ctx = this.ctx;
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) { if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a; ctx.globalAlpha = color.a;
} }
@ -9340,8 +9328,7 @@ var spine;
ctx.restore(); ctx.restore();
}; };
SkeletonRenderer.prototype.computeRegionVertices = function (slot, region, pma) { SkeletonRenderer.prototype.computeRegionVertices = function (slot, region, pma) {
var skeleton = slot.bone.skeleton; var skeletonColor = slot.bone.skeleton.color;
var skeletonColor = skeleton.color;
var slotColor = slot.color; var slotColor = slot.color;
var regionColor = region.color; var regionColor = region.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a; var alpha = skeletonColor.a * slotColor.a * regionColor.a;
@ -9378,22 +9365,20 @@ var spine;
return vertices; return vertices;
}; };
SkeletonRenderer.prototype.computeMeshVertices = function (slot, mesh, pma) { SkeletonRenderer.prototype.computeMeshVertices = function (slot, mesh, pma) {
var skeleton = slot.bone.skeleton; var skeletonColor = slot.bone.skeleton.color;
var skeletonColor = skeleton.color;
var slotColor = slot.color; var slotColor = slot.color;
var regionColor = mesh.color; var regionColor = mesh.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a; var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var multiplier = pma ? alpha : 1; var multiplier = pma ? alpha : 1;
var color = this.tempColor; var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha); color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
var numVertices = mesh.worldVerticesLength / 2; var vertexCount = mesh.worldVerticesLength / 2;
if (this.vertices.length < mesh.worldVerticesLength) {
this.vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
}
var vertices = this.vertices; var vertices = this.vertices;
if (vertices.length < mesh.worldVerticesLength)
this.vertices = vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonRenderer.VERTEX_SIZE); mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonRenderer.VERTEX_SIZE);
var uvs = mesh.uvs; var uvs = mesh.uvs;
for (var i = 0, n = numVertices, u = 0, v = 2; i < n; i++) { for (var i = 0, u = 0, v = 2; i < vertexCount; i++) {
vertices[v++] = color.r; vertices[v++] = color.r;
vertices[v++] = color.g; vertices[v++] = color.g;
vertices[v++] = color.b; vertices[v++] = color.b;
@ -11970,7 +11955,7 @@ var spine;
function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) { function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
if (contextConfig === void 0) { contextConfig = { alpha: "true" }; } if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
this.restorables = new Array(); this.restorables = new Array();
if (canvasOrContext instanceof HTMLCanvasElement || canvasOrContext instanceof EventTarget) { if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
} }
else { else {
@ -12596,10 +12581,10 @@ var spine;
var SpinePlayer = (function () { var SpinePlayer = (function () {
function SpinePlayer(parent, config) { function SpinePlayer(parent, config) {
this.config = config; this.config = config;
this.time = new spine.TimeKeeper();
this.paused = true; this.paused = true;
this.playTime = 0; this.playTime = 0;
this.speed = 1; this.speed = 1;
this.time = new spine.TimeKeeper();
this.animationViewports = {}; this.animationViewports = {};
this.currentViewport = null; this.currentViewport = null;
this.previousViewport = null; this.previousViewport = null;
@ -13307,7 +13292,8 @@ var spine;
this.playButton.classList.remove("spine-player-button-icon-pause"); this.playButton.classList.remove("spine-player-button-icon-pause");
this.playButton.classList.add("spine-player-button-icon-play"); this.playButton.classList.add("spine-player-button-icon-play");
}; };
SpinePlayer.prototype.setAnimation = function (animation) { SpinePlayer.prototype.setAnimation = function (animation, loop) {
if (loop === void 0) { loop = true; }
this.previousViewport = this.currentViewport; this.previousViewport = this.currentViewport;
var animViewport = this.calculateAnimationViewport(animation); var animViewport = this.calculateAnimationViewport(animation);
var viewport = { var viewport = {
@ -13360,7 +13346,7 @@ var spine;
this.viewportTransitionStart = performance.now(); this.viewportTransitionStart = performance.now();
this.animationState.clearTracks(); this.animationState.clearTracks();
this.skeleton.setToSetupPose(); this.skeleton.setToSetupPose();
this.animationState.setAnimation(0, animation, true); this.animationState.setAnimation(0, animation, loop);
}; };
SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) { SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) {
if (typeof percentageOrAbsolute === "string") { if (typeof percentageOrAbsolute === "string") {

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

File diff suppressed because one or more lines are too long

4
spine-ts/build/spine-canvas.d.ts vendored
View File

@ -877,6 +877,10 @@ declare module spine {
name: string; name: string;
x: number; x: number;
y: number; y: number;
offsetX: number;
offsetY: number;
originalWidth: number;
originalHeight: number;
index: number; index: number;
degrees: number; degrees: number;
texture: Texture; texture: Texture;

83
spine-ts/build/spine-canvas.js
View File

@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -8957,6 +8959,7 @@ var spine;
return _this; return _this;
} }
RegionAttachment.prototype.updateOffset = function () { RegionAttachment.prototype.updateOffset = function () {
var region = this.region;
var regionScaleX = this.width / this.region.originalWidth * this.scaleX; var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
var regionScaleY = this.height / this.region.originalHeight * this.scaleY; var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX; var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
@ -8966,13 +8969,14 @@ var spine;
var radians = this.rotation * Math.PI / 180; var radians = this.rotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
var localXCos = localX * cos + this.x; var x = this.x, y = this.y;
var localXCos = localX * cos + x;
var localXSin = localX * sin; var localXSin = localX * sin;
var localYCos = localY * cos + this.y; var localYCos = localY * cos + y;
var localYSin = localY * sin; var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x; var localX2Cos = localX2 * cos + x;
var localX2Sin = localX2 * sin; var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y; var localY2Cos = localY2 * cos + y;
var localY2Sin = localY2 * sin; var localY2Sin = localY2 * sin;
var offset = this.offset; var offset = this.offset;
offset[0] = localXCos - localYSin; offset[0] = localXCos - localYSin;
@ -9195,42 +9199,31 @@ var spine;
}; };
SkeletonRenderer.prototype.drawImages = function (skeleton) { SkeletonRenderer.prototype.drawImages = function (skeleton) {
var ctx = this.ctx; var ctx = this.ctx;
var color = this.tempColor;
var skeletonColor = skeleton.color;
var drawOrder = skeleton.drawOrder; var drawOrder = skeleton.drawOrder;
if (this.debugRendering) if (this.debugRendering)
ctx.strokeStyle = "green"; ctx.strokeStyle = "green";
ctx.save();
for (var i = 0, n = drawOrder.length; i < n; i++) { for (var i = 0, n = drawOrder.length; i < n; i++) {
var slot = drawOrder[i]; var slot = drawOrder[i];
if (!slot.bone.active) var bone = slot.bone;
if (!bone.active)
continue; continue;
var attachment = slot.getAttachment(); var attachment = slot.getAttachment();
var regionAttachment = null; if (!(attachment instanceof spine.RegionAttachment))
var region = null;
var image = null;
if (attachment instanceof spine.RegionAttachment) {
regionAttachment = attachment;
region = regionAttachment.region;
image = region.texture.getImage();
}
else
continue; continue;
var skeleton_1 = slot.bone.skeleton; var region = attachment.region;
var skeletonColor = skeleton_1.color; var image = region.texture.getImage();
var slotColor = slot.color; var slotColor = slot.color;
var regionColor = regionAttachment.color; var regionColor = attachment.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a; color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, skeletonColor.a * slotColor.a * regionColor.a);
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, alpha);
var att = attachment;
var bone = slot.bone;
var w = region.width;
var h = region.height;
ctx.save(); ctx.save();
ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY); ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
ctx.translate(attachment.offset[0], attachment.offset[1]); ctx.translate(attachment.offset[0], attachment.offset[1]);
ctx.rotate(attachment.rotation * Math.PI / 180); ctx.rotate(attachment.rotation * Math.PI / 180);
var atlasScale = att.width / w; var atlasScale = attachment.width / region.originalWidth;
ctx.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY); ctx.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
var w = region.width, h = region.height;
ctx.translate(w / 2, h / 2); ctx.translate(w / 2, h / 2);
if (attachment.region.degrees == 90) { if (attachment.region.degrees == 90) {
var t = w; var t = w;
@ -9248,18 +9241,20 @@ var spine;
ctx.strokeRect(0, 0, w, h); ctx.strokeRect(0, 0, w, h);
ctx.restore(); ctx.restore();
} }
ctx.restore();
}; };
SkeletonRenderer.prototype.drawTriangles = function (skeleton) { SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
var ctx = this.ctx;
var color = this.tempColor;
var skeletonColor = skeleton.color;
var drawOrder = skeleton.drawOrder;
var blendMode = null; var blendMode = null;
var vertices = this.vertices; var vertices = this.vertices;
var triangles = null; var triangles = null;
var drawOrder = skeleton.drawOrder;
for (var i = 0, n = drawOrder.length; i < n; i++) { for (var i = 0, n = drawOrder.length; i < n; i++) {
var slot = drawOrder[i]; var slot = drawOrder[i];
var attachment = slot.getAttachment(); var attachment = slot.getAttachment();
var texture = null; var texture = void 0;
var region = null; var region = void 0;
if (attachment instanceof spine.RegionAttachment) { if (attachment instanceof spine.RegionAttachment) {
var regionAttachment = attachment; var regionAttachment = attachment;
vertices = this.computeRegionVertices(slot, regionAttachment, false); vertices = this.computeRegionVertices(slot, regionAttachment, false);
@ -9276,18 +9271,11 @@ var spine;
else else
continue; continue;
if (texture) { if (texture) {
var slotBlendMode = slot.data.blendMode; if (slot.data.blendMode != blendMode)
if (slotBlendMode != blendMode) { blendMode = slot.data.blendMode;
blendMode = slotBlendMode;
}
var skeleton_2 = slot.bone.skeleton;
var skeletonColor = skeleton_2.color;
var slotColor = slot.color; var slotColor = slot.color;
var attachmentColor = attachment.color; var attachmentColor = attachment.color;
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a; color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, skeletonColor.a * slotColor.a * attachmentColor.a);
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
var ctx = this.ctx;
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) { if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
ctx.globalAlpha = color.a; ctx.globalAlpha = color.a;
} }
@ -9340,8 +9328,7 @@ var spine;
ctx.restore(); ctx.restore();
}; };
SkeletonRenderer.prototype.computeRegionVertices = function (slot, region, pma) { SkeletonRenderer.prototype.computeRegionVertices = function (slot, region, pma) {
var skeleton = slot.bone.skeleton; var skeletonColor = slot.bone.skeleton.color;
var skeletonColor = skeleton.color;
var slotColor = slot.color; var slotColor = slot.color;
var regionColor = region.color; var regionColor = region.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a; var alpha = skeletonColor.a * slotColor.a * regionColor.a;
@ -9378,22 +9365,20 @@ var spine;
return vertices; return vertices;
}; };
SkeletonRenderer.prototype.computeMeshVertices = function (slot, mesh, pma) { SkeletonRenderer.prototype.computeMeshVertices = function (slot, mesh, pma) {
var skeleton = slot.bone.skeleton; var skeletonColor = slot.bone.skeleton.color;
var skeletonColor = skeleton.color;
var slotColor = slot.color; var slotColor = slot.color;
var regionColor = mesh.color; var regionColor = mesh.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a; var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var multiplier = pma ? alpha : 1; var multiplier = pma ? alpha : 1;
var color = this.tempColor; var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha); color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
var numVertices = mesh.worldVerticesLength / 2; var vertexCount = mesh.worldVerticesLength / 2;
if (this.vertices.length < mesh.worldVerticesLength) {
this.vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
}
var vertices = this.vertices; var vertices = this.vertices;
if (vertices.length < mesh.worldVerticesLength)
this.vertices = vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonRenderer.VERTEX_SIZE); mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonRenderer.VERTEX_SIZE);
var uvs = mesh.uvs; var uvs = mesh.uvs;
for (var i = 0, n = numVertices, u = 0, v = 2; i < n; i++) { for (var i = 0, u = 0, v = 2; i < vertexCount; i++) {
vertices[v++] = color.r; vertices[v++] = color.r;
vertices[v++] = color.g; vertices[v++] = color.g;
vertices[v++] = color.b; vertices[v++] = color.b;

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

File diff suppressed because one or more lines are too long

4
spine-ts/build/spine-core.d.ts vendored
View File

@ -877,6 +877,10 @@ declare module spine {
name: string; name: string;
x: number; x: number;
y: number; y: number;
offsetX: number;
offsetY: number;
originalWidth: number;
originalHeight: number;
index: number; index: number;
degrees: number; degrees: number;
texture: Texture; texture: Texture;

12
spine-ts/build/spine-core.js
View File

@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -8957,6 +8959,7 @@ var spine;
return _this; return _this;
} }
RegionAttachment.prototype.updateOffset = function () { RegionAttachment.prototype.updateOffset = function () {
var region = this.region;
var regionScaleX = this.width / this.region.originalWidth * this.scaleX; var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
var regionScaleY = this.height / this.region.originalHeight * this.scaleY; var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX; var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
@ -8966,13 +8969,14 @@ var spine;
var radians = this.rotation * Math.PI / 180; var radians = this.rotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
var localXCos = localX * cos + this.x; var x = this.x, y = this.y;
var localXCos = localX * cos + x;
var localXSin = localX * sin; var localXSin = localX * sin;
var localYCos = localY * cos + this.y; var localYCos = localY * cos + y;
var localYSin = localY * sin; var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x; var localX2Cos = localX2 * cos + x;
var localX2Sin = localX2 * sin; var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y; var localY2Cos = localY2 * cos + y;
var localY2Sin = localY2 * sin; var localY2Sin = localY2 * sin;
var offset = this.offset; var offset = this.offset;
offset[0] = localXCos - localYSin; offset[0] = localXCos - localYSin;

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

File diff suppressed because one or more lines are too long

16
spine-ts/build/spine-player.d.ts vendored
View File

@ -877,6 +877,10 @@ declare module spine {
name: string; name: string;
x: number; x: number;
y: number; y: number;
offsetX: number;
offsetY: number;
originalWidth: number;
originalHeight: number;
index: number; index: number;
degrees: number; degrees: number;
texture: Texture; texture: Texture;
@ -1296,7 +1300,7 @@ declare module spine.webgl {
static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean; static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void; setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear; static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear;
setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void; setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
update(useMipMaps: boolean): void; update(useMipMaps: boolean): void;
restore(): void; restore(): void;
@ -1776,13 +1780,13 @@ declare module spine {
private context; private context;
private loadingScreen; private loadingScreen;
private assetManager; private assetManager;
private loaded; loaded: boolean;
private skeleton; skeleton: Skeleton;
private animationState; animationState: AnimationState;
private time;
private paused; private paused;
private playTime; private playTime;
private speed; private speed;
private time;
private animationViewports; private animationViewports;
private currentViewport; private currentViewport;
private previousViewport; private previousViewport;
@ -1806,7 +1810,7 @@ declare module spine {
setupInput(): void; setupInput(): void;
private play; private play;
private pause; private pause;
setAnimation(animation: string): void; setAnimation(animation: string, loop?: boolean): void;
private percentageToWorldUnit; private percentageToWorldUnit;
private calculateAnimationViewport; private calculateAnimationViewport;
stopRendering(): void; stopRendering(): void;

21
spine-ts/build/spine-player.js
View File

@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -8957,6 +8959,7 @@ var spine;
return _this; return _this;
} }
RegionAttachment.prototype.updateOffset = function () { RegionAttachment.prototype.updateOffset = function () {
var region = this.region;
var regionScaleX = this.width / this.region.originalWidth * this.scaleX; var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
var regionScaleY = this.height / this.region.originalHeight * this.scaleY; var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX; var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
@ -8966,13 +8969,14 @@ var spine;
var radians = this.rotation * Math.PI / 180; var radians = this.rotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
var localXCos = localX * cos + this.x; var x = this.x, y = this.y;
var localXCos = localX * cos + x;
var localXSin = localX * sin; var localXSin = localX * sin;
var localYCos = localY * cos + this.y; var localYCos = localY * cos + y;
var localYSin = localY * sin; var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x; var localX2Cos = localX2 * cos + x;
var localX2Sin = localX2 * sin; var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y; var localY2Cos = localY2 * cos + y;
var localY2Sin = localY2 * sin; var localY2Sin = localY2 * sin;
var offset = this.offset; var offset = this.offset;
offset[0] = localXCos - localYSin; offset[0] = localXCos - localYSin;
@ -11702,7 +11706,7 @@ var spine;
function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) { function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
if (contextConfig === void 0) { contextConfig = { alpha: "true" }; } if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
this.restorables = new Array(); this.restorables = new Array();
if (canvasOrContext instanceof HTMLCanvasElement || canvasOrContext instanceof EventTarget) { if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
} }
else { else {
@ -11908,10 +11912,10 @@ var spine;
var SpinePlayer = (function () { var SpinePlayer = (function () {
function SpinePlayer(parent, config) { function SpinePlayer(parent, config) {
this.config = config; this.config = config;
this.time = new spine.TimeKeeper();
this.paused = true; this.paused = true;
this.playTime = 0; this.playTime = 0;
this.speed = 1; this.speed = 1;
this.time = new spine.TimeKeeper();
this.animationViewports = {}; this.animationViewports = {};
this.currentViewport = null; this.currentViewport = null;
this.previousViewport = null; this.previousViewport = null;
@ -12619,7 +12623,8 @@ var spine;
this.playButton.classList.remove("spine-player-button-icon-pause"); this.playButton.classList.remove("spine-player-button-icon-pause");
this.playButton.classList.add("spine-player-button-icon-play"); this.playButton.classList.add("spine-player-button-icon-play");
}; };
SpinePlayer.prototype.setAnimation = function (animation) { SpinePlayer.prototype.setAnimation = function (animation, loop) {
if (loop === void 0) { loop = true; }
this.previousViewport = this.currentViewport; this.previousViewport = this.currentViewport;
var animViewport = this.calculateAnimationViewport(animation); var animViewport = this.calculateAnimationViewport(animation);
var viewport = { var viewport = {
@ -12672,7 +12677,7 @@ var spine;
this.viewportTransitionStart = performance.now(); this.viewportTransitionStart = performance.now();
this.animationState.clearTracks(); this.animationState.clearTracks();
this.skeleton.setToSetupPose(); this.skeleton.setToSetupPose();
this.animationState.setAnimation(0, animation, true); this.animationState.setAnimation(0, animation, loop);
}; };
SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) { SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) {
if (typeof percentageOrAbsolute === "string") { if (typeof percentageOrAbsolute === "string") {

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

File diff suppressed because one or more lines are too long

4
spine-ts/build/spine-threejs.d.ts vendored
View File

@ -877,6 +877,10 @@ declare module spine {
name: string; name: string;
x: number; x: number;
y: number; y: number;
offsetX: number;
offsetY: number;
originalWidth: number;
originalHeight: number;
index: number; index: number;
degrees: number; degrees: number;
texture: Texture; texture: Texture;

12
spine-ts/build/spine-threejs.js
View File

@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -8957,6 +8959,7 @@ var spine;
return _this; return _this;
} }
RegionAttachment.prototype.updateOffset = function () { RegionAttachment.prototype.updateOffset = function () {
var region = this.region;
var regionScaleX = this.width / this.region.originalWidth * this.scaleX; var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
var regionScaleY = this.height / this.region.originalHeight * this.scaleY; var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX; var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
@ -8966,13 +8969,14 @@ var spine;
var radians = this.rotation * Math.PI / 180; var radians = this.rotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
var localXCos = localX * cos + this.x; var x = this.x, y = this.y;
var localXCos = localX * cos + x;
var localXSin = localX * sin; var localXSin = localX * sin;
var localYCos = localY * cos + this.y; var localYCos = localY * cos + y;
var localYSin = localY * sin; var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x; var localX2Cos = localX2 * cos + x;
var localX2Sin = localX2 * sin; var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y; var localY2Cos = localY2 * cos + y;
var localY2Sin = localY2 * sin; var localY2Sin = localY2 * sin;
var offset = this.offset; var offset = this.offset;
offset[0] = localXCos - localYSin; offset[0] = localXCos - localYSin;

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

File diff suppressed because one or more lines are too long

6
spine-ts/build/spine-webgl.d.ts vendored
View File

@ -877,6 +877,10 @@ declare module spine {
name: string; name: string;
x: number; x: number;
y: number; y: number;
offsetX: number;
offsetY: number;
originalWidth: number;
originalHeight: number;
index: number; index: number;
degrees: number; degrees: number;
texture: Texture; texture: Texture;
@ -1296,7 +1300,7 @@ declare module spine.webgl {
static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean; static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean); constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void; setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear; static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear;
setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void; setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
update(useMipMaps: boolean): void; update(useMipMaps: boolean): void;
restore(): void; restore(): void;

14
spine-ts/build/spine-webgl.js
View File

@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { this.constructor = d; } function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -8957,6 +8959,7 @@ var spine;
return _this; return _this;
} }
RegionAttachment.prototype.updateOffset = function () { RegionAttachment.prototype.updateOffset = function () {
var region = this.region;
var regionScaleX = this.width / this.region.originalWidth * this.scaleX; var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
var regionScaleY = this.height / this.region.originalHeight * this.scaleY; var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX; var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
@ -8966,13 +8969,14 @@ var spine;
var radians = this.rotation * Math.PI / 180; var radians = this.rotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
var localXCos = localX * cos + this.x; var x = this.x, y = this.y;
var localXCos = localX * cos + x;
var localXSin = localX * sin; var localXSin = localX * sin;
var localYCos = localY * cos + this.y; var localYCos = localY * cos + y;
var localYSin = localY * sin; var localYSin = localY * sin;
var localX2Cos = localX2 * cos + this.x; var localX2Cos = localX2 * cos + x;
var localX2Sin = localX2 * sin; var localX2Sin = localX2 * sin;
var localY2Cos = localY2 * cos + this.y; var localY2Cos = localY2 * cos + y;
var localY2Sin = localY2 * sin; var localY2Sin = localY2 * sin;
var offset = this.offset; var offset = this.offset;
offset[0] = localXCos - localYSin; offset[0] = localXCos - localYSin;
@ -11702,7 +11706,7 @@ var spine;
function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) { function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
if (contextConfig === void 0) { contextConfig = { alpha: "true" }; } if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
this.restorables = new Array(); this.restorables = new Array();
if (canvasOrContext instanceof HTMLCanvasElement || canvasOrContext instanceof EventTarget) { if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
} }
else { else {

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

File diff suppressed because one or more lines are too long

28
spine-ts/player/example/index.html
View File

@ -17,6 +17,11 @@ body {
<body> <body>
<div id="container" style="width: 640px; height: 380px;"></div> <div id="container" style="width: 640px; height: 380px;"></div>
<div id="container-raptor" style="width: 640px; height: 380px;"></div> <div id="container-raptor" style="width: 640px; height: 380px;"></div>
<div>
<button id="walk">Walk</button>
<button id="jump">Jump</button>
<button id="roar">Roar</button>
</div>
</body> </body>
<script> <script>
// Creates a new spine player. The debugRender option enables // Creates a new spine player. The debugRender option enables
@ -30,19 +35,36 @@ body {
viewport: { viewport: {
debugRender: true, debugRender: true,
}, },
showControls: false, showControls: true,
}); });
// Creates a new spine player with a transparent background, // Creates a new spine player with a transparent background,
// so content from the website shines through. Hides the controls. // so content from the website shines through. Hides the controls.
new spine.SpinePlayer("container-raptor", { // Instead, the user can control the animation via buttons.
var jsControlledPlayer = new spine.SpinePlayer("container-raptor", {
jsonUrl: "assets/raptor-pro.json", jsonUrl: "assets/raptor-pro.json",
atlasUrl: "assets/raptor-pma.atlas", atlasUrl: "assets/raptor-pma.atlas",
animation: "walk", animation: "walk",
showControls: false, showControls: false,
premultipliedAlpha: true, premultipliedAlpha: true,
backgroundColor: "#00000000", backgroundColor: "#00000000",
alpha: true alpha: true,
defaultMix: 1,
success: (player) => {
// Register button click event handlers once the
// skeleton has been loaded successfully
document.getElementById("walk").addEventListener("click", event => {
jsControlledPlayer.setAnimation("walk", false); // set the walk animation to play once
});
document.getElementById("jump").addEventListener("click", event => {
jsControlledPlayer.setAnimation("jump", false); // set the jump animation to play once
});
document.getElementById("roar").addEventListener("click", event => {
jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop
});
}
}); });
</script> </script>
</body> </body>

17
spine-ts/player/src/Player.ts
View File

@ -304,14 +304,17 @@ module spine {
private loadingScreen: spine.webgl.LoadingScreen; private loadingScreen: spine.webgl.LoadingScreen;
private assetManager: spine.webgl.AssetManager; private assetManager: spine.webgl.AssetManager;
private loaded: boolean; // Whether the skeleton was loaded
private skeleton: Skeleton; public loaded: boolean;
private animationState: AnimationState; // The loaded skeleton
private time = new TimeKeeper(); public skeleton: Skeleton;
// The animation state controlling the skeleton
public animationState: AnimationState;
private paused = true; private paused = true;
private playTime = 0; private playTime = 0;
private speed = 1; private speed = 1;
private time = new TimeKeeper();
private animationViewports: Map<Viewport> = {} private animationViewports: Map<Viewport> = {}
private currentViewport: Viewport = null; private currentViewport: Viewport = null;
private previousViewport: Viewport = null; private previousViewport: Viewport = null;
@ -1127,7 +1130,7 @@ module spine {
this.playButton.classList.add("spine-player-button-icon-play"); this.playButton.classList.add("spine-player-button-icon-play");
} }
public setAnimation (animation: string) { public setAnimation (animation: string, loop: boolean = true) {
// Determine viewport // Determine viewport
this.previousViewport = this.currentViewport; this.previousViewport = this.currentViewport;
let animViewport = this.calculateAnimationViewport(animation); let animViewport = this.calculateAnimationViewport(animation);
@ -1184,7 +1187,7 @@ module spine {
this.animationState.clearTracks(); this.animationState.clearTracks();
this.skeleton.setToSetupPose(); this.skeleton.setToSetupPose();
this.animationState.setAnimation(0, animation, true); this.animationState.setAnimation(0, animation, loop);
} }
private percentageToWorldUnit(size: number, percentageOrAbsolute: string | number): number { private percentageToWorldUnit(size: number, percentageOrAbsolute: string | number): number {

2
spine-ts/webgl/src/WebGL.ts
View File

@ -34,7 +34,7 @@ module spine.webgl {
private restorables = new Array<Restorable>(); private restorables = new Array<Restorable>();
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig: any = { alpha: "true" }) { constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig: any = { alpha: "true" }) {
if (canvasOrContext instanceof HTMLCanvasElement || canvasOrContext instanceof EventTarget) { if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
} else { } else {
this.gl = canvasOrContext; this.gl = canvasOrContext;