mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-06 10:46:53 +08:00
Merge branch '3.6' into 3.7-beta
This commit is contained in:
badlogic
commit
38756e22e2
@ -1,149 +0,0 @@
|
|||||||
<html>
|
|
||||||
<script src="../../build/spine-webgl.js"></script>
|
|
||||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; }
|
|
||||||
body, html { height: 100% }
|
|
||||||
canvas { width: 640px ;height: 640px; }
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
<canvas id="canvas" style="background: #ff00ff;"></canvas>
|
|
||||||
<div>
|
|
||||||
<div><label>Light: </label><input type="text" value="ffffffff" id="light"></div>
|
|
||||||
<div><label>Dark: </label><input type="text" value="000000" id="dark"></div>
|
|
||||||
<div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div>
|
|
||||||
<div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$("#light").change(function() {
|
|
||||||
setColors();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#dark").change(function() {
|
|
||||||
setColors();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#pmaBlend").change(function() {
|
|
||||||
setColors();
|
|
||||||
});
|
|
||||||
|
|
||||||
function setColors() {
|
|
||||||
var light = $("#light").val();
|
|
||||||
var r = parseInt(light.substr(0,2),16) / 255;
|
|
||||||
var g = parseInt(light.substr(2,2),16) / 255;
|
|
||||||
var b = parseInt(light.substr(4,2),16) / 255;
|
|
||||||
var a = parseInt(light.substr(6,2),16) / 255;
|
|
||||||
|
|
||||||
var dark = $("#dark").val();
|
|
||||||
var dr = parseInt(dark.substr(0,2),16) / 255;
|
|
||||||
var dg = parseInt(dark.substr(2,2),16) / 255;
|
|
||||||
var db = parseInt(dark.substr(4,2),16) / 255;
|
|
||||||
|
|
||||||
var pma = $("#pmaBlend").prop("checked");
|
|
||||||
if (pma) {
|
|
||||||
r *= a;
|
|
||||||
g *= a;
|
|
||||||
b *= a;
|
|
||||||
|
|
||||||
dr *= a;
|
|
||||||
dg *= a;
|
|
||||||
db *= a;
|
|
||||||
da = 1;
|
|
||||||
} else {
|
|
||||||
da = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0, j = 2, k = 8; i < 4; i++, j+=12, k+=12) {
|
|
||||||
vertices[j] = r;
|
|
||||||
vertices[j+1] = g;
|
|
||||||
vertices[j+2] = b;
|
|
||||||
vertices[j+3] = a;
|
|
||||||
|
|
||||||
vertices[k] = dr;
|
|
||||||
vertices[k+1] = dg;
|
|
||||||
vertices[k+2] = db;
|
|
||||||
vertices[k+3] = da;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var canvas = document.getElementById("canvas");
|
|
||||||
canvas.width = canvas.clientWidth;
|
|
||||||
canvas.height = canvas.clientHeight;
|
|
||||||
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
|
||||||
var gl = context.gl;
|
|
||||||
|
|
||||||
var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
|
|
||||||
1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
|
|
||||||
1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
|
|
||||||
-1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
|
|
||||||
var indices = [ 0, 1, 2, 2, 3, 0 ];
|
|
||||||
|
|
||||||
var shader = spine.webgl.Shader.newTwoColoredTextured(context);
|
|
||||||
var ivanShader = loadIvanShader(context, shader);
|
|
||||||
|
|
||||||
var assetManager = new spine.webgl.AssetManager(context);
|
|
||||||
assetManager.loadTexture("assets/spineboy.png");
|
|
||||||
assetManager.loadTexture("assets/spineboy-pma.png");
|
|
||||||
|
|
||||||
var camMatrix = new spine.webgl.Matrix4();
|
|
||||||
|
|
||||||
var batcher = new spine.webgl.PolygonBatcher(context, true);
|
|
||||||
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
|
|
||||||
function load () {
|
|
||||||
if (assetManager.isLoadingComplete()) {
|
|
||||||
texture = assetManager.get("assets/spineboy.png");
|
|
||||||
texturePma = assetManager.get("assets/spineboy-pma.png");
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
} else requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
gl.clearColor(1, 0, 1, 1);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
var pma = $("#pmaBlend").prop("checked");
|
|
||||||
var ivan = $("#ivan").prop("checked")
|
|
||||||
var s = ivan ? ivanShader : shader;
|
|
||||||
|
|
||||||
s.bind();
|
|
||||||
s.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
|
|
||||||
s.setUniformi("u_texture", 0);
|
|
||||||
if (texture != null) {
|
|
||||||
batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
|
|
||||||
batcher.begin(s);
|
|
||||||
batcher.draw(pma ? texturePma : texture, vertices, indices);
|
|
||||||
batcher.end();
|
|
||||||
}
|
|
||||||
s.unbind();
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadIvanShader (context, shader) {
|
|
||||||
var vs = shader.getVertexShaderSource();
|
|
||||||
|
|
||||||
let fs = `
|
|
||||||
#ifdef GL_ES
|
|
||||||
#define LOWP lowp
|
|
||||||
precision mediump float;
|
|
||||||
#else
|
|
||||||
#define LOWP
|
|
||||||
#endif
|
|
||||||
varying LOWP vec4 v_light;
|
|
||||||
varying LOWP vec4 v_dark;
|
|
||||||
varying vec2 v_texCoords;
|
|
||||||
uniform sampler2D u_texture;
|
|
||||||
void main () {
|
|
||||||
vec4 texColor = texture2D(u_texture, v_texCoords);
|
|
||||||
gl_FragColor.a = texColor.a * v_light.a;
|
|
||||||
gl_FragColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
return new spine.webgl.Shader(context, vs, fs);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
<html>
|
|
||||||
<script src="../../build/spine-webgl.js"></script>
|
|
||||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; }
|
|
||||||
body, html { height: 100% }
|
|
||||||
canvas { position: absolute; width: 100% ;height: 100%; }
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
|
|
||||||
<canvas id="canvas" style="background: red;"></canvas>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var FILE = "coin-pro";
|
|
||||||
var ANIMATION = "rotate";
|
|
||||||
var NUM_SKELETONS = 1;
|
|
||||||
var SCALE = 0.5;
|
|
||||||
|
|
||||||
var canvas, context, gl, renderer, input, assetManager;
|
|
||||||
var skeletons = [];
|
|
||||||
var timeKeeper;
|
|
||||||
var label = document.getElementById("label");
|
|
||||||
var updateMean = new spine.WindowedMean();
|
|
||||||
var renderMean = new spine.WindowedMean();
|
|
||||||
var swirlEffect = new spine.SwirlEffect();
|
|
||||||
var swirlTime = 0;
|
|
||||||
var interpolation = new spine.Pow(2);
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
canvas = document.getElementById("canvas");
|
|
||||||
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
|
|
||||||
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
|
||||||
gl = context.gl;
|
|
||||||
|
|
||||||
renderer = new spine.webgl.SceneRenderer(canvas, context);
|
|
||||||
renderer.skeletonDebugRenderer.drawBones = false;
|
|
||||||
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
|
|
||||||
renderer.skeletonDebugRenderer.drawMeshHull = false;
|
|
||||||
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
|
|
||||||
renderer.skeletonDebugRenderer.drawBoundingBoxes = false;
|
|
||||||
renderer.skeletonRenderer.vertexEffect = swirlEffect;
|
|
||||||
|
|
||||||
swirlEffect.centerX = 0;
|
|
||||||
swirlEffect.centerY = 200;
|
|
||||||
swirlEffect.radius = 500;
|
|
||||||
|
|
||||||
assetManager = new spine.webgl.AssetManager(context, "assets/");
|
|
||||||
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
|
|
||||||
input = new spine.webgl.Input(canvas);
|
|
||||||
|
|
||||||
assetManager.loadTexture(FILE.replace("-pro", "").replace("-oss", "") + ".png");
|
|
||||||
assetManager.loadText(FILE.replace("-pro", "").replace("-oss", "") + ".atlas");
|
|
||||||
assetManager.loadText(FILE + ".json");
|
|
||||||
|
|
||||||
timeKeeper = new spine.TimeKeeper();
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
|
|
||||||
function load() {
|
|
||||||
timeKeeper.update();
|
|
||||||
if (assetManager.isLoadingComplete()) {
|
|
||||||
var atlas = new spine.TextureAtlas(assetManager.get(FILE.replace("-pro", "").replace("-oss", "") + ".atlas"), function(path) {
|
|
||||||
return assetManager.get(path);
|
|
||||||
});
|
|
||||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
|
||||||
var skeletonJson = new spine.SkeletonJson(atlasLoader);
|
|
||||||
skeletonJson.scale = SCALE;
|
|
||||||
var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get(FILE + ".json")));
|
|
||||||
|
|
||||||
for (var i = 0; i < NUM_SKELETONS; i++) {
|
|
||||||
skeleton = new spine.Skeleton(skeletonData);
|
|
||||||
var stateData = new spine.AnimationStateData(skeleton.data);
|
|
||||||
state = new spine.AnimationState(stateData);
|
|
||||||
|
|
||||||
var mixDuration = 0.8;
|
|
||||||
var stableDuration = 2;
|
|
||||||
stateData.defaultMix = mixDuration;
|
|
||||||
|
|
||||||
state.multipleMixing = false;
|
|
||||||
state.setAnimation(0, ANIMATION, true);
|
|
||||||
skeleton.x = 0;
|
|
||||||
skeleton.y = 0;
|
|
||||||
skeleton.updateWorldTransform();
|
|
||||||
skeletons.push({ skeleton: skeleton, state: state });
|
|
||||||
}
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
} else {
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
var start = Date.now()
|
|
||||||
timeKeeper.update();
|
|
||||||
var delta = timeKeeper.delta;
|
|
||||||
delta = 0.016;
|
|
||||||
|
|
||||||
swirlTime += delta;
|
|
||||||
var percent = swirlTime % 2;
|
|
||||||
if (percent > 1) percent = 1 - (percent - 1);
|
|
||||||
swirlEffect.angle = interpolation.apply(-60, 60, percent);
|
|
||||||
|
|
||||||
for (var i = 0; i < skeletons.length; i++) {
|
|
||||||
var state = skeletons[i].state;
|
|
||||||
var skeleton = skeletons[i].skeleton;
|
|
||||||
state.update(delta);
|
|
||||||
state.apply(skeleton);
|
|
||||||
skeleton.updateWorldTransform();
|
|
||||||
}
|
|
||||||
updateMean.addValue(Date.now() - start);
|
|
||||||
start = Date.now();
|
|
||||||
|
|
||||||
gl.clearColor(0.2, 0.2, 0.2, 1);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
renderer.resize(spine.webgl.ResizeMode.Fit);
|
|
||||||
renderer.begin();
|
|
||||||
for (var i = 0; i < skeletons.length; i++) {
|
|
||||||
var skeleton = skeletons[i].skeleton;
|
|
||||||
renderer.drawSkeleton(skeleton, false);
|
|
||||||
renderer.drawSkeletonDebug(skeleton);
|
|
||||||
}
|
|
||||||
renderer.end();
|
|
||||||
|
|
||||||
requestAnimationFrame(render)
|
|
||||||
renderMean.addValue(Date.now() - start);
|
|
||||||
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
|
|
||||||
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
init();
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
<html>
|
|
||||||
<script src="../../build/spine-webgl.js"></script>
|
|
||||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; }
|
|
||||||
body, html { height: 100% }
|
|
||||||
canvas { position: absolute; width: 100% ;height: 100%; }
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
|
|
||||||
<canvas id="canvas" style="background: #ff00ff;"></canvas>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var canvas = document.getElementById("canvas");
|
|
||||||
canvas.width = canvas.clientWidth;
|
|
||||||
canvas.height = canvas.clientHeight;
|
|
||||||
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
|
||||||
var gl = context.gl;
|
|
||||||
|
|
||||||
var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
|
|
||||||
1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
|
|
||||||
0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0];
|
|
||||||
var indices = [ 0, 1, 2 ];
|
|
||||||
var mesh = new spine.webgl.Mesh(context,
|
|
||||||
[new spine.webgl.Position2Attribute(), new spine.webgl.ColorAttribute(), new spine.webgl.TexCoordAttribute()],
|
|
||||||
10920, 10920 * 3);
|
|
||||||
mesh.setVertices(vertices);
|
|
||||||
mesh.setIndices(indices);
|
|
||||||
|
|
||||||
var shader = spine.webgl.Shader.newTwoColoredTextured(context);
|
|
||||||
|
|
||||||
var assetManager = new spine.webgl.AssetManager(context);
|
|
||||||
assetManager.loadTexture("assets/spineboy.png");
|
|
||||||
|
|
||||||
var camMatrix = new spine.webgl.Matrix4();
|
|
||||||
|
|
||||||
var batcher = new spine.webgl.PolygonBatcher(context, true);
|
|
||||||
|
|
||||||
requestAnimationFrame(load);
|
|
||||||
|
|
||||||
function load () {
|
|
||||||
if (assetManager.isLoadingComplete()) {
|
|
||||||
texture = assetManager.get("assets/spineboy.png");
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
} else requestAnimationFrame(load);
|
|
||||||
}
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
gl.clearColor(1, 0, 0, 1);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
shader.bind();
|
|
||||||
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
|
|
||||||
shader.setUniformi("u_texture", 0);
|
|
||||||
if (texture != null) {
|
|
||||||
/*gl.enable(gl.BLEND);
|
|
||||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
||||||
mesh.setVertices(vertices);
|
|
||||||
mesh.setIndices(indices);
|
|
||||||
mesh.draw(shader, gl.TRIANGLES);*/
|
|
||||||
|
|
||||||
batcher.begin(shader);
|
|
||||||
batcher.draw(texture, vertices, indices);
|
|
||||||
batcher.end();
|
|
||||||
}
|
|
||||||
shader.unbind();
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user