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

Added additive blending demo.

Browse Source
This commit is contained in:
badlogic 2019-04-29 14:28:46 +02:00
parent 8356401360
commit 923c6c19f2
2 changed files with 179 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
spine-ts/webgl/demos/additiveblending.html Normal file
View File

@ -0,0 +1,21 @@
<html>
<meta charset="UTF-8">
<title>IK Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script>
<script src="additiveblending.js"></script>
<body>
<center>
<div class="aspect standalone"></div>
</center>
<script>
spineDemos.init();
spineDemos.addDemo(additiveBlendingDemo, document.getElementsByClassName("aspect")[0]);
</script>
</body>
</html>

158
spine-ts/webgl/demos/additiveblending.js Normal file
View File

@ -0,0 +1,158 @@
var additiveBlendingDemo = function(canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var HANDLE_SIZE = 0.10;
var gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var target = null;
var dragging = false;
var handle = new spine.Vector2();
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
var isPlaying = true;
var left, right, up, down;
var DEMO_NAME = "AdditiveBlendingDemo";
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get(DEMO_NAME, "demos.json")["owl"]);
skeleton = new spine.Skeleton(skeletonData);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true);
left = state.setAnimation(1, "blink", true);
left = state.setAnimation(2, "left", true);
right = state.setAnimation(3, "right", true);
up = state.setAnimation(4, "up", true);
down = state.setAnimation(5, "down", true);
left.mixBlend = spine.MixBlend.add;
left.alpha = 0;
right.mixBlend = spine.MixBlend.add;
right.alpha = 0;
up.mixBlend = spine.MixBlend.add;
up.alpha = 0;
down.mixBlend = spine.MixBlend.add;
down.alpha = 0;
state.apply(skeleton);
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupInput();
}
function calculateBlend (x, y, isPageCoords) {
if (isPageCoords) {
var canvasBounds = canvas.getBoundingClientRect();
x = Math.max(0, Math.min(canvasBounds.width, x - canvasBounds.x));
y = Math.max(0, Math.min(canvasBounds.height, y - canvasBounds.y));
}
x = x / canvas.width;
y = y / canvas.height;
left.alpha = (Math.max(x, 0.5) - 0.5) * 2;
right.alpha = (0.5 - Math.min(x, 0.5)) * 2;
up.alpha = (0.5 - Math.min(y, 0.5)) * 2;
down.alpha = (Math.max(y, 0.5) - 0.5) * 2;
}
function setupInput () {
if (!isMobileDevice()) {
document.addEventListener("mousemove", function (event) {
calculateBlend(event.clientX, event.clientY, true);
}, false);
} else {
var input = new spine.webgl.Input(canvas);
input.addListener({
down: function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
dragging = true;
}
},
up: function(x, y) {
dragging = false;
},
dragged: function(x, y) {
if (dragging) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
handle.x = coords.x;
handle.y = coords.y;
calculateBlend(x, y, false);
}
}
});
}
}
function render () {
timeKeeper.update();
var delta = timeKeeper.delta;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.4;
renderer.camera.viewportHeight = bounds.y * 1.4;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
if (isMobileDevice()) {
gl.lineWidth(2);
renderer.circle(true, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_INNER);
renderer.circle(false, handle.x, handle.y, canvas.width * HANDLE_SIZE, COLOR_OUTER);
gl.lineWidth(1);
}
renderer.end();
}
additiveBlendingDemo.loadingComplete = loadingComplete;
additiveBlendingDemo.render = render;
additiveBlendingDemo.DEMO_NAME = DEMO_NAME;
init();
};