mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 17:56:04 +08:00
[ts] reworked example/tests
This commit is contained in:
badlogic
parent
ed24d3b33f
commit
de3acaf084
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-monokai",t.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,96 +0,0 @@
|
||||
<html>
|
||||
<script src="../../build/spine-webgl.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<style>
|
||||
/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */
|
||||
|
||||
.row .row { margin: 0 -1.5em; }
|
||||
.col { padding: 0 1.5em; }
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media only screen { .col {
|
||||
float: left;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}}
|
||||
|
||||
@media only screen and (min-width: 30em) {
|
||||
.content { width: 50%; height: 100%; padding: 0 }
|
||||
.sidebar { width: 50%; height: 100%; padding: 0 }
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border:none;
|
||||
}
|
||||
.panel {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
top: 5; left: 5;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="buttons">
|
||||
<button id="playButton">Run</button>
|
||||
<button id="stopButton">Stop</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col content">
|
||||
<iframe id="iframe"></iframe>
|
||||
</div>
|
||||
<div class="col sidebar">
|
||||
<div id="codeJs" class="panel"></div>
|
||||
<div id="codeHtml" class="panel"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script id="initialJs" type="text/plain">
|
||||
var canvas = document.getElementById("canvas");
|
||||
var config = { alpha: false };
|
||||
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, config);
|
||||
var gl = context.gl;
|
||||
|
||||
function render() {
|
||||
gl.clearColor(0.2, 0.2, 0.2, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
requestAnimationFrame(render);
|
||||
</script>
|
||||
|
||||
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var editorJs = ace.edit("codeJs");
|
||||
editorJs.setTheme("ace/theme/monokai");
|
||||
editorJs.getSession().setMode("ace/mode/javascript");
|
||||
editorJs.setValue(document.getElementById("initialJs").innerHTML);
|
||||
|
||||
var editorHtml = ace.edit("codeHtml");
|
||||
editorHtml.setTheme("ace/theme/monokai");
|
||||
editorHtml.getSession().setMode("ace/mode/html");
|
||||
editorHtml.setValue('<script src="../../build/spine-webgl.js"><\/script>\n<canvas id="canvas" style="width: 100%; height: 98vh;"></canvas>');
|
||||
|
||||
$("#playButton").click(function() {
|
||||
var iframe = document.getElementById("iframe");
|
||||
var source = "<html><body>" + editorHtml.getValue() + "<script>" + editorJs.getValue() + "<\/script></body></html>";
|
||||
iframe.srcdoc = source;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
149
spine-ts/webgl/tests/test-pma-tintblack.html
Normal file
149
spine-ts/webgl/tests/test-pma-tintblack.html
Normal file
@ -0,0 +1,149 @@
|
||||
<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>
|
||||
135
spine-ts/webgl/tests/test.html
Normal file
135
spine-ts/webgl/tests/test.html
Normal file
@ -0,0 +1,135 @@
|
||||
<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>
|
||||
70
spine-ts/webgl/tests/test2.html
Normal file
70
spine-ts/webgl/tests/test2.html
Normal file
@ -0,0 +1,70 @@
|
||||
<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