[ts] Demos, a never ending story

This commit is contained in:
badlogic 2016-09-03 00:00:06 +02:00
parent 4995371c41
commit 8faba2cdec
10 changed files with 40 additions and 10 deletions

View File

@ -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;

View File

@ -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

View File

@ -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 () {

View File

@ -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 () {

View File

@ -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 () {

View File

@ -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>

View File

@ -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();
}

View File

@ -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 () {

View File

@ -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);