UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/3.6' into 3.6

Browse Source
This commit is contained in:
NathanSweet 2017-06-21 15:46:38 +02:00
commit 5138d703f3
14 changed files with 10587 additions and 10108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -156,6 +156,7 @@
* Fixed renderer to work with 3.6 changes
* Added support for two color tinting. Use the new `TwoColorPolygonBatch` together with `SkeletonRenderer`
* Added support for clipping. See `SkeletonClipper`. Used automatically by `SkeletonRenderer`. Does not work when using a `SpriteBatch` with `SkeletonRenderer`. Use `PolygonSpriteBatch` or `TwoColorPolygonBatch` instead.
* Added `VertexEffect` interface, instances of which can be set on `SkeletonRenderer`. Allows to modify vertices before submitting them to GPU. See `SwirlEffect`, `JitterEffect` and `VertexEffectTest`.
## Lua
* **Breaking changes**

2
spine-libgdx/spine-libgdx-tests/src/com/esotericsoftware/spine/VertexEffectTest.java
View File

@ -80,7 +80,7 @@ public class VertexEffectTest extends ApplicationAdapter {
swirl = new SwirlEffect(400);
swirl.setCenter(0, 200);
renderer.setVertexEffect(swirl);
renderer.setVertexEffect(new JitterEffect(10, 10));
// renderer.setVertexEffect(new JitterEffect(10, 10));
}
public void render () {

121
spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/SkeletonRenderer.java
View File

@ -55,6 +55,11 @@ public class SkeletonRenderer {
private final SkeletonClipping clipper = new SkeletonClipping();
private VertexEffect vertexEffect;
private final Vector2 temp = new Vector2();
private final Vector2 temp2 = new Vector2();
private final Color temp3 = new Color();
private final Color temp4 = new Color();
private final Color temp5 = new Color();
private final Color temp6 = new Color();
public void draw (Batch batch, Skeleton skeleton) {
VertexEffect vertexEffect = this.vertexEffect;
@ -84,7 +89,7 @@ public class SkeletonRenderer {
vertices[v + 2] = uvs[u + 1];
}
if (vertexEffect != null) applyVertexEffect(vertices, 20, 5);
if (vertexEffect != null) applyVertexEffect(vertices, 20, 5, c, 0);
BlendMode blendMode = slot.data.getBlendMode();
batch.setBlendFunction(blendMode.getSource(premultipliedAlpha), blendMode.getDest());
@ -132,7 +137,12 @@ public class SkeletonRenderer {
@SuppressWarnings("null")
public void draw (PolygonSpriteBatch batch, Skeleton skeleton) {
Vector2 temp = this.temp;
Vector2 tempPos = this.temp;
Vector2 tempUv = this.temp2;
Color tempLight = this.temp3;
Color tempDark = this.temp4;
Color temp5 = this.temp5;
Color temp6 = this.temp6;
VertexEffect vertexEffect = this.vertexEffect;
if (vertexEffect != null) vertexEffect.begin(skeleton);
@ -219,20 +229,26 @@ public class SkeletonRenderer {
clipper.clipTriangles(vertices, verticesLength, triangles, triangles.length, uvs, c, 0, false);
FloatArray clippedVertices = clipper.getClippedVertices();
ShortArray clippedTriangles = clipper.getClippedTriangles();
if (vertexEffect != null) applyVertexEffect(clippedVertices.items, clippedVertices.size, 5);
if (vertexEffect != null) applyVertexEffect(clippedVertices.items, clippedVertices.size, 5, c, 0);
batch.draw(texture, clippedVertices.items, 0, clippedVertices.size, clippedTriangles.items, 0,
clippedTriangles.size);
} else {
if (vertexEffect != null) {
temp5.set(NumberUtils.floatToIntColor(c));
temp6.set(0);
for (int v = 0, u = 0; v < verticesLength; v += 5, u += 2) {
temp.x = vertices[v];
temp.y = vertices[v + 1];
vertexEffect.transform(temp);
vertices[v] = temp.x;
vertices[v + 1] = temp.y;
vertices[v + 2] = c;
vertices[v + 3] = uvs[u];
vertices[v + 4] = uvs[u + 1];
tempPos.x = vertices[v];
tempPos.y = vertices[v + 1];
tempLight.set(temp5);
tempDark.set(temp6);
tempUv.x = uvs[u];
tempUv.y = uvs[u + 1];
vertexEffect.transform(tempPos, tempUv, tempLight, tempDark);
vertices[v] = tempPos.x;
vertices[v + 1] = tempPos.y;
vertices[v + 2] = tempLight.toFloatBits();
vertices[v + 3] = tempUv.x;
vertices[v + 4] = tempUv.y;
}
} else {
for (int v = 2, u = 0; v < verticesLength; v += 5, u += 2) {
@ -253,7 +269,12 @@ public class SkeletonRenderer {
@SuppressWarnings("null")
public void draw (TwoColorPolygonBatch batch, Skeleton skeleton) {
Vector2 temp = this.temp;
Vector2 tempPos = this.temp;
Vector2 tempUv = this.temp2;
Color tempLight = this.temp3;
Color tempDark = this.temp4;
Color temp5 = this.temp5;
Color temp6 = this.temp6;
VertexEffect vertexEffect = this.vertexEffect;
if (vertexEffect != null) vertexEffect.begin(skeleton);
@ -344,21 +365,27 @@ public class SkeletonRenderer {
clipper.clipTriangles(vertices, verticesLength, triangles, triangles.length, uvs, light, dark, true);
FloatArray clippedVertices = clipper.getClippedVertices();
ShortArray clippedTriangles = clipper.getClippedTriangles();
if (vertexEffect != null) applyVertexEffect(clippedVertices.items, clippedVertices.size, 6);
if (vertexEffect != null) applyVertexEffect(clippedVertices.items, clippedVertices.size, 6, light, dark);
batch.draw(texture, clippedVertices.items, 0, clippedVertices.size, clippedTriangles.items, 0,
clippedTriangles.size);
} else {
if (vertexEffect != null) {
temp5.set(NumberUtils.floatToIntColor(light));
temp6.set(NumberUtils.floatToIntColor(dark));
for (int v = 0, u = 0; v < verticesLength; v += 6, u += 2) {
temp.x = vertices[v];
temp.y = vertices[v + 1];
vertexEffect.transform(temp);
vertices[v] = temp.x;
vertices[v + 1] = temp.y;
vertices[v + 2] = light;
vertices[v + 3] = dark;
vertices[v + 4] = uvs[u];
vertices[v + 5] = uvs[u + 1];
tempPos.x = vertices[v];
tempPos.y = vertices[v + 1];
tempLight.set(temp5);
tempDark.set(temp6);
tempUv.x = uvs[u];
tempUv.y = uvs[u + 1];
vertexEffect.transform(tempPos, tempUv, tempLight, tempDark);
vertices[v] = tempPos.x;
vertices[v + 1] = tempPos.y;
vertices[v + 2] = tempLight.toFloatBits();
vertices[v + 3] = tempDark.toFloatBits();
vertices[v + 4] = tempUv.x;
vertices[v + 5] = tempUv.y;
}
} else {
for (int v = 2, u = 0; v < verticesLength; v += 6, u += 2) {
@ -378,15 +405,47 @@ public class SkeletonRenderer {
if (vertexEffect != null) vertexEffect.end();
}
private void applyVertexEffect (float[] vertices, int verticesLength, int stride) {
private void applyVertexEffect (float[] vertices, int verticesLength, int stride, float light, float dark) {
Vector2 tempPos = this.temp;
Vector2 tempUv = this.temp2;
Color tempLight = this.temp3;
Color tempDark = this.temp4;
Color temp5 = this.temp5;
Color temp6 = this.temp6;
VertexEffect vertexEffect = this.vertexEffect;
Vector2 temp = this.temp;
for (int v = 0; v < verticesLength; v += stride) {
temp.x = vertices[v];
temp.y = vertices[v + 1];
vertexEffect.transform(temp);
vertices[v] = temp.x;
vertices[v + 1] = temp.y;
temp5.set(NumberUtils.floatToIntColor(light));
temp6.set(NumberUtils.floatToIntColor(dark));
if (stride == 5) {
for (int v = 0; v < verticesLength; v += stride) {
tempPos.x = vertices[v];
tempPos.y = vertices[v + 1];
tempUv.x = vertices[v + 3];
tempUv.y = vertices[v + 4];
tempLight.set(temp5);
tempDark.set(temp6);
vertexEffect.transform(tempPos, tempUv, tempLight, tempDark);
vertices[v] = tempPos.x;
vertices[v + 1] = tempPos.y;
vertices[v + 2] = tempLight.toFloatBits();
vertices[v + 3] = tempUv.x;
vertices[v + 4] = tempUv.y;
}
} else {
for (int v = 0; v < verticesLength; v += stride) {
tempPos.x = vertices[v];
tempPos.y = vertices[v + 1];
tempUv.x = vertices[v + 4];
tempUv.y = vertices[v + 5];
tempLight.set(temp5);
tempDark.set(temp6);
vertexEffect.transform(tempPos, tempUv, tempLight, tempDark);
vertices[v] = tempPos.x;
vertices[v + 1] = tempPos.y;
vertices[v + 2] = tempLight.toFloatBits();
vertices[v + 3] = tempDark.toFloatBits();
vertices[v + 4] = tempUv.x;
vertices[v + 5] = tempUv.y;
}
}
}
@ -409,7 +468,7 @@ public class SkeletonRenderer {
static public interface VertexEffect {
public void begin (Skeleton skeleton);
public void transform (Vector2 vertex);
public void transform (Vector2 position, Vector2 uv, Color color, Color darkColor);
public void end ();
}

7
spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/vertexeffects/JitterEffect.java
View File

@ -1,6 +1,7 @@
package com.esotericsoftware.spine.vertexeffects;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.esotericsoftware.spine.Skeleton;
@ -17,9 +18,9 @@ public class JitterEffect implements VertexEffect {
public void begin (Skeleton skeleton) {
}
public void transform (Vector2 vertex) {
vertex.x += MathUtils.randomTriangular(-x, y);
vertex.y += MathUtils.randomTriangular(-x, y);
public void transform (Vector2 position, Vector2 uv, Color light, Color dark) {
position.x += MathUtils.randomTriangular(-x, y);
position.y += MathUtils.randomTriangular(-x, y);
}
public void end () {

11
spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/vertexeffects/SwirlEffect.java
View File

@ -1,6 +1,7 @@
package com.esotericsoftware.spine.vertexeffects;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.math.Interpolation;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
@ -22,15 +23,15 @@ public class SwirlEffect implements VertexEffect {
worldY = skeleton.getY() + centerY;
}
public void transform (Vector2 vertex) {
float x = vertex.x - worldX;
float y = vertex.y - worldY;
public void transform (Vector2 position, Vector2 uv, Color light, Color dark) {
float x = position.x - worldX;
float y = position.y - worldY;
float dist = (float)Math.sqrt(x * x + y * y);
if (dist < radius) {
float theta = interpolation.apply(0, angle, (radius - dist) / radius);
float cos = SpineUtils.cos(theta), sin = SpineUtils.sin(theta);
vertex.x = cos * x - sin * y + worldX;
vertex.y = sin * x + cos * y + worldY;
position.x = cos * x - sin * y + worldX;
position.y = sin * x + cos * y + worldY;
}
}

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

11
spine-ts/core/src/Utils.ts
View File

@ -158,6 +158,17 @@ module spine {
var y = Math.pow(Math.abs(x), 1/3);
return x < 0 ? -y : y;
}
static randomTriangular (min: number, max: number): number {
return MathUtils.randomTriangularWith(min, max, (min + max) * 0.5);
}
static randomTriangularWith (min: number, max: number, mode: number): number {
let u = Math.random();
let d = max - min;
if (u <= (mode - min) / d) return min + Math.sqrt(u * d * (mode - min));
return max - Math.sqrt((1 - u) * d * (max - mode));
}
}
export class Utils {

37
spine-ts/core/src/VertexEffect.ts Normal file
View File

@ -0,0 +1,37 @@
/******************************************************************************
* Spine Runtimes Software License v2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine {
export interface VertexEffect {
begin(skeleton: Skeleton): void;
transform(position: Vector2, uv: Vector2, light: Color, dark: Color): void;
end(): void;
}
}

52
spine-ts/core/src/vertexeffects/JitterEffect.ts Normal file
View File

@ -0,0 +1,52 @@
/******************************************************************************
* Spine Runtimes Software License v2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine {
export class JitterEffect implements VertexEffect {
jitterX = 0;
jitterY = 0;
constructor (jitterX: number, jitterY: number) {
this.jitterX = jitterX;
this.jitterY = jitterY;
}
begin(skeleton: Skeleton): void {
}
transform(position: Vector2, uv: Vector2, light: Color, dark: Color): void {
position.x += MathUtils.randomTriangular(-this.jitterX, this.jitterY);
position.y += MathUtils.randomTriangular(-this.jitterX, this.jitterY);
}
end(): void {
}
}
}

67
spine-ts/core/src/vertexeffects/SwirlEffect.ts Normal file
View File

@ -0,0 +1,67 @@
/******************************************************************************
* Spine Runtimes Software License v2.5
*
* Copyright (c) 2013-2016, Esoteric Software
* All rights reserved.
*
* You are granted a perpetual, non-exclusive, non-sublicensable, and
* non-transferable license to use, install, execute, and perform the Spine
* Runtimes software and derivative works solely for personal or internal
* use. Without the written permission of Esoteric Software (see Section 2 of
* the Spine Software License Agreement), you may not (a) modify, translate,
* adapt, or develop new applications using the Spine Runtimes or otherwise
* create derivative works or improvements of the Spine Runtimes or (b) remove,
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
* or other intellectual property or proprietary rights notices on or in the
* Software, including any copy thereof. Redistributions in binary or source
* form must include this license and terms.
*
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
module spine {
export class SwirlEffect implements VertexEffect {
centerX = 0;
centerY = 0;
radius = 0;
angle = 0;
private worldX = 0;
private worldY = 0;
constructor (radius: number) {
this.radius = radius;
}
begin(skeleton: Skeleton): void {
this.worldX = skeleton.x + this.centerX;
this.worldY = skeleton.y + this.centerY;
}
transform(position: Vector2, uv: Vector2, light: Color, dark: Color): void {
let radAngle = this.angle * MathUtils.degreesToRadians;
let x = position.x - this.worldX;
let y = position.y - this.worldY;
let dist = Math.sqrt(x * x + y * y);
if (dist < this.radius) {
let theta = radAngle * (Math.pow(((this.radius - dist) / this.radius) - 1, 2) * (2 % 2 == 0 ? -1 : 1) + 1);
let cos = Math.cos(theta);
let sin = Math.sin(theta);
position.x = cos * x - sin * y + this.worldX;
position.y = sin * x + cos * y + this.worldY;
}
}
end(): void {
}
}
}

51
spine-ts/webgl/example/index.html
View File

@ -13,6 +13,8 @@
<span>Skeleton:</span><select id="skeletonList"></select>
<span>Animation:</span><select id="animationList"></select>
<span>Skin:</span><select id="skinList"></select>
<span>Vertex Effect:</span><select id="effectList"></select>
<span>Debug:</span><input type="checkbox" id="debug">
<div>
</center>
</body>
@ -29,7 +31,10 @@ var skeletonRenderer;
var debugRenderer;
var shapes;
var skeletons = {};
var activeSkeleton = "vine";
var activeSkeleton = "spineboy";
var swirlEffect = new spine.SwirlEffect(0);
var jitterEffect = new spine.JitterEffect(20, 20);
var swirlTime = 0;
function init () {
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
@ -177,6 +182,14 @@ function setupUI () {
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
skeletonList.append(option);
}
var effectList = $("#effectList");
var effects = ["None", "Swirl", "Jitter"];
for (var effect in effects) {
var effectName = effects[effect];
var option = $("<option></option>");
option.attr("value", effectName).text(effectName);
effectList.append(option);
}
var setupAnimationUI = function() {
var animationList = $("#animationList");
animationList.empty();
@ -244,6 +257,7 @@ function render () {
// Apply the animation state based on the delta time.
var state = skeletons[activeSkeleton].state;
var skeleton = skeletons[activeSkeleton].skeleton;
var bounds = skeletons[activeSkeleton].bounds;
var premultipliedAlpha = skeletons[activeSkeleton].premultipliedAlpha;
state.update(delta);
state.apply(skeleton);
@ -256,6 +270,24 @@ function render () {
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
batcher.begin(shader);
var effect = $("#effectList option:selected").text();
if (effect == "None") {
skeletonRenderer.vertexEffect = null;
} else if (effect == "Swirl") {
swirlTime += delta;
var percent = swirlTime % 2;
if (percent > 1) percent = 1 - (percent -1 );
// swirlEffect.angle = -60 + 120 * (perecent < 0.5 ? Math.pow(percent * 2, 2) / 2 : Math.pow((percent - 1) * 2, 2) / -2 + 1);
swirlEffect.angle = 360 * percent;
swirlEffect.centerX = 200; //bounds.offset.x + bounds.size.x / 2
swirlEffect.centerY = 200; //bounds.offset.y + bounds.size.y / 2
swirlEffect.radius = Math.sqrt(bounds.size.x * bounds.size.x + bounds.size.y * bounds.size.y);
skeletonRenderer.vertexEffect = swirlEffect;
} else if (effect == "Jitter") {
skeletonRenderer.vertexEffect = jitterEffect;
}
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
skeletonRenderer.draw(batcher, skeleton);
batcher.end();
@ -263,13 +295,16 @@ function render () {
shader.unbind();
// draw debug information
debugShader.bind();
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
debugRenderer.premultipliedAlpha = premultipliedAlpha;
shapes.begin(debugShader);
debugRenderer.draw(shapes, skeleton);
shapes.end();
debugShader.unbind();
var debug = $('#debug').is(':checked');
if (debug) {
debugShader.bind();
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
debugRenderer.premultipliedAlpha = premultipliedAlpha;
shapes.begin(debugShader);
debugRenderer.draw(shapes, skeleton);
shapes.end();
debugShader.unbind();
}
requestAnimationFrame(render);
}

93
spine-ts/webgl/src/SkeletonRenderer.ts
View File

@ -37,6 +37,7 @@ module spine.webgl {
static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
premultipliedAlpha = false;
vertexEffect: VertexEffect = null;
private tempColor = new Color();
private tempColor2 = new Color();
private vertices:ArrayLike<number>;
@ -44,6 +45,10 @@ module spine.webgl {
private twoColorTint = false;
private renderable: Renderable = new Renderable(null, 0, 0);
private clipper: SkeletonClipping = new SkeletonClipping();
private temp = new Vector2();
private temp2 = new Vector2();
private temp3 = new Color();
private temp4 = new Color();
constructor (context: ManagedWebGLRenderingContext, twoColorTint: boolean = true) {
this.twoColorTint = twoColorTint;
@ -58,6 +63,11 @@ module spine.webgl {
let twoColorTint = this.twoColorTint;
let blendMode: BlendMode = null;
let tempPos = this.temp;
let tempUv = this.temp2;
let tempLight = this.temp3;
let tempDark = this.temp4;
let renderable: Renderable = this.renderable;
let uvs: ArrayLike<number> = null;
let triangles: Array<number> = null;
@ -128,27 +138,72 @@ module spine.webgl {
batcher.draw(texture, clippedVertices, clippedTriangles);
} else {
let verts = renderable.vertices;
if (!twoColorTint) {
for (let v = 2, u = 0, n = renderable.numFloats; v < n; v += vertexSize, u += 2) {
verts[v] = finalColor.r;
verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b;
verts[v + 3] = finalColor.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
if (this.vertexEffect != null) {
let vertexEffect = this.vertexEffect;
if (!twoColorTint) {
for (let v = 0, u = 0, n = renderable.numFloats; v < n; v += vertexSize, u += 2) {
tempPos.x = verts[v];
tempPos.y = verts[v + 1];
tempUv.x = uvs[u];
tempUv.y = uvs[u + 1]
tempLight.setFromColor(finalColor);
tempDark.set(0, 0, 0, 0);
vertexEffect.transform(tempPos, tempUv, tempLight, tempDark);
verts[v] = tempPos.x;
verts[v + 1] = tempPos.y;
verts[v + 2] = tempLight.r;
verts[v + 3] = tempLight.g;
verts[v + 4] = tempLight.b;
verts[v + 5] = tempLight.a;
verts[v + 6] = tempUv.x;
verts[v + 7] = tempUv.y
}
} else {
for (let v = 0, u = 0, n = renderable.numFloats; v < n; v += vertexSize, u += 2) {
tempPos.x = verts[v];
tempPos.y = verts[v + 1];
tempUv.x = uvs[u];
tempUv.y = uvs[u + 1]
tempLight.setFromColor(finalColor);
tempDark.setFromColor(darkColor);
vertexEffect.transform(tempPos, tempUv, tempLight, tempDark);
verts[v] = tempPos.x;
verts[v + 1] = tempPos.y;
verts[v + 2] = tempLight.r;
verts[v + 3] = tempLight.g;
verts[v + 4] = tempLight.b;
verts[v + 5] = tempLight.a;
verts[v + 6] = tempUv.x;
verts[v + 7] = tempUv.y
verts[v + 8] = tempDark.r;
verts[v + 9] = tempDark.g;
verts[v + 10] = tempDark.b;
verts[v + 11] = tempDark.a;
}
}
} else {
for (let v = 2, u = 0, n = renderable.numFloats; v < n; v += vertexSize, u += 2) {
verts[v] = finalColor.r;
verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b;
verts[v + 3] = finalColor.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
verts[v + 6] = darkColor.r;
verts[v + 7] = darkColor.g;
verts[v + 8] = darkColor.b;
verts[v + 9] = darkColor.a;
if (!twoColorTint) {
for (let v = 2, u = 0, n = renderable.numFloats; v < n; v += vertexSize, u += 2) {
verts[v] = finalColor.r;
verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b;
verts[v + 3] = finalColor.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
}
} else {
for (let v = 2, u = 0, n = renderable.numFloats; v < n; v += vertexSize, u += 2) {
verts[v] = finalColor.r;
verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b;
verts[v + 3] = finalColor.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
verts[v + 6] = darkColor.r;
verts[v + 7] = darkColor.g;
verts[v + 8] = darkColor.b;
verts[v + 9] = darkColor.a;
}
}
}
let view = (renderable.vertices as Float32Array).subarray(0, renderable.numFloats);