mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 07:14:55 +08:00
[ts] Demos, a never ending story
This commit is contained in:
parent
4995371c41
commit
8faba2cdec
9
spine-ts/build/spine-webgl.d.ts
vendored
9
spine-ts/build/spine-webgl.d.ts
vendored
@ -731,10 +731,10 @@ declare module spine {
|
||||
static BLUE: Color;
|
||||
static MAGENTA: Color;
|
||||
constructor(r?: number, g?: number, b?: number, a?: number);
|
||||
set(r: number, g: number, b: number, a: number): void;
|
||||
setFromColor(c: Color): void;
|
||||
setFromString(hex: string): void;
|
||||
add(r: number, g: number, b: number, a: number): void;
|
||||
set(r: number, g: number, b: number, a: number): this;
|
||||
setFromColor(c: Color): this;
|
||||
setFromString(hex: string): this;
|
||||
add(r: number, g: number, b: number, a: number): this;
|
||||
clamp(): this;
|
||||
}
|
||||
class MathUtils {
|
||||
@ -1249,6 +1249,7 @@ declare module spine.webgl {
|
||||
boneOriginColor: Color;
|
||||
attachmentLineColor: Color;
|
||||
triangleLineColor: Color;
|
||||
pathColor: Color;
|
||||
aabbColor: Color;
|
||||
drawBones: boolean;
|
||||
drawRegionAttachments: boolean;
|
||||
|
||||
@ -3941,12 +3941,14 @@ var spine;
|
||||
this.b = b;
|
||||
this.a = a;
|
||||
this.clamp();
|
||||
return this;
|
||||
};
|
||||
Color.prototype.setFromColor = function (c) {
|
||||
this.r = c.r;
|
||||
this.g = c.g;
|
||||
this.b = c.b;
|
||||
this.a = c.a;
|
||||
return this;
|
||||
};
|
||||
Color.prototype.setFromString = function (hex) {
|
||||
hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
|
||||
@ -3954,6 +3956,7 @@ var spine;
|
||||
this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
|
||||
this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
|
||||
this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
|
||||
return this;
|
||||
};
|
||||
Color.prototype.add = function (r, g, b, a) {
|
||||
this.r += r;
|
||||
@ -3961,6 +3964,7 @@ var spine;
|
||||
this.b += b;
|
||||
this.a += a;
|
||||
this.clamp();
|
||||
return this;
|
||||
};
|
||||
Color.prototype.clamp = function () {
|
||||
if (this.r < 0)
|
||||
@ -6322,6 +6326,7 @@ var spine;
|
||||
this.boneOriginColor = new spine.Color(0, 1, 0, 1);
|
||||
this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
|
||||
this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
|
||||
this.pathColor = new spine.Color().setFromString("FF7F00");
|
||||
this.aabbColor = new spine.Color(0, 1, 0, 0.5);
|
||||
this.drawBones = true;
|
||||
this.drawRegionAttachments = true;
|
||||
@ -6432,7 +6437,7 @@ var spine;
|
||||
var nn = path.worldVerticesLength;
|
||||
var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
|
||||
path.computeWorldVertices(slot, world);
|
||||
var color = path.color;
|
||||
var color = this.pathColor;
|
||||
var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
|
||||
if (path.closed) {
|
||||
shapes.setColor(color);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -54,6 +54,7 @@ module spine {
|
||||
this.b = b;
|
||||
this.a = a;
|
||||
this.clamp();
|
||||
return this;
|
||||
}
|
||||
|
||||
setFromColor (c: Color) {
|
||||
@ -61,6 +62,7 @@ module spine {
|
||||
this.g = c.g;
|
||||
this.b = c.b;
|
||||
this.a = c.a;
|
||||
return this;
|
||||
}
|
||||
|
||||
setFromString (hex: string) {
|
||||
@ -69,6 +71,7 @@ module spine {
|
||||
this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
|
||||
this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
|
||||
this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
|
||||
return this;
|
||||
}
|
||||
|
||||
add (r: number, g: number, b: number, a: number) {
|
||||
@ -77,6 +80,7 @@ module spine {
|
||||
this.b += b;
|
||||
this.a += a;
|
||||
this.clamp();
|
||||
return this;
|
||||
}
|
||||
|
||||
clamp () {
|
||||
|
||||
@ -55,6 +55,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#imagesequencesdemo-timeline");
|
||||
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
|
||||
|
||||
@ -55,6 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#meshesdemo-timeline");
|
||||
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
<canvas id="tankdemo-canvas"></canvas>
|
||||
<center>
|
||||
<div style="position: fixed; top: 0; width: 100%">
|
||||
<br>
|
||||
<div>Display Bones</div><input id="tankdemo-drawbones" type="checkbox"></input>
|
||||
</br>
|
||||
<input id="tankdemo-playbutton" type="button" value="Pause"></input>
|
||||
<div id="tankdemo-timeline" class="slider"></input>
|
||||
</div>
|
||||
|
||||
@ -42,6 +42,11 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
offset = new spine.Vector2();
|
||||
bounds = new spine.Vector2();
|
||||
skeleton.getBounds(offset, bounds);
|
||||
|
||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
||||
|
||||
setupUI();
|
||||
loadingComplete(canvas, render);
|
||||
} else {
|
||||
@ -63,6 +68,7 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#tankdemo-timeline");
|
||||
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
|
||||
@ -76,7 +82,15 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
skeleton.updateWorldTransform();
|
||||
playTime = time;
|
||||
}
|
||||
}});
|
||||
}});
|
||||
|
||||
var checkbox = $("#tankdemo-drawbones");
|
||||
renderer.skeletonDebugRenderer.drawPaths = false;
|
||||
renderer.skeletonDebugRenderer.drawBones = false;
|
||||
checkbox.change(function() {
|
||||
renderer.skeletonDebugRenderer.drawPaths = this.checked;
|
||||
renderer.skeletonDebugRenderer.drawBones = this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
function render () {
|
||||
@ -109,7 +123,8 @@ var tankDemo = function(loadingComplete, bgColor) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeleton(skeleton, true);
|
||||
renderer.drawSkeletonDebug(skeleton, true);
|
||||
renderer.end();
|
||||
}
|
||||
|
||||
|
||||
@ -84,6 +84,7 @@ var vineDemo = function(loadingComplete, bgColor) {
|
||||
}
|
||||
}
|
||||
playButton.click(playButtonUpdate);
|
||||
playButton.addClass("pause");
|
||||
|
||||
timeLine = $("#vinedemo-timeline");
|
||||
timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
|
||||
|
||||
@ -35,6 +35,7 @@ module spine.webgl {
|
||||
boneOriginColor = new Color(0, 1, 0, 1);
|
||||
attachmentLineColor = new Color(0, 0, 1, 0.5);
|
||||
triangleLineColor = new Color(1, 0.64, 0, 0.5);
|
||||
pathColor = new Color().setFromString("FF7F00");
|
||||
aabbColor = new Color(0, 1, 0, 0.5);
|
||||
drawBones = true;
|
||||
drawRegionAttachments = true;
|
||||
@ -154,7 +155,7 @@ module spine.webgl {
|
||||
let nn = path.worldVerticesLength;
|
||||
let world = this.temp = Utils.setArraySize(this.temp, nn, 0);
|
||||
path.computeWorldVertices(slot, world);
|
||||
let color = path.color;
|
||||
let color = this.pathColor;
|
||||
let x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
|
||||
if (path.closed) {
|
||||
shapes.setColor(color);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user