UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 09:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Owl demo updated: use window rather than canvas size, wait for first mouse move.

Browse Source
This commit is contained in:
NathanSweet 2019-08-30 16:49:06 +02:00
parent f6dcf94115
commit 28d85e12b8
1 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
spine-ts/webgl/demos/additiveblending.js
View File

@ -17,7 +17,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var left, right, up, down; var left, right, up, down;
var cursor; var cursor;
var clientMouseX = 0, clientMouseY = 0; var clientMouseX = 0, clientMouseY = 0, mouseMoved;
var DEMO_NAME = "AdditiveBlendingDemo"; var DEMO_NAME = "AdditiveBlendingDemo";
@ -53,21 +53,18 @@ var additiveBlendingDemo = function(canvas, bgColor) {
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true); state.setAnimation(0, "idle", true);
left = state.setAnimation(1, "blink", true); state.setAnimation(1, "blink", true);
left = state.setAnimation(2, "left", true); left = state.setAnimation(2, "left", true);
right = state.setAnimation(3, "right", true); right = state.setAnimation(3, "right", true);
up = state.setAnimation(4, "up", true); up = state.setAnimation(4, "up", true);
down = state.setAnimation(5, "down", true); down = state.setAnimation(5, "down", true);
left.mixBlend = spine.MixBlend.add; left.mixBlend = spine.MixBlend.add;
left.alpha = 0;
right.mixBlend = spine.MixBlend.add; right.mixBlend = spine.MixBlend.add;
right.alpha = 0;
up.mixBlend = spine.MixBlend.add; up.mixBlend = spine.MixBlend.add;
up.alpha = 0;
down.mixBlend = spine.MixBlend.add; down.mixBlend = spine.MixBlend.add;
left.alpha = 0;
right.alpha = 0;
up.alpha = 0;
down.alpha = 0; down.alpha = 0;
state.apply(skeleton); state.apply(skeleton);
@ -86,21 +83,13 @@ var additiveBlendingDemo = function(canvas, bgColor) {
} }
function calculateBlend (x, y, isPageCoords) { function calculateBlend (x, y, isPageCoords) {
if (isPageCoords) {
var canvasBounds = canvas.getBoundingClientRect(); var canvasBounds = canvas.getBoundingClientRect();
x = Math.max(0, Math.min(canvasBounds.width, x - canvasBounds.x)); var centerX = canvasBounds.x + canvasBounds.width / 2;
y = Math.max(0, Math.min(canvasBounds.height, y - canvasBounds.y)); var centerY = canvasBounds.y + canvasBounds.height / 2;
} right.alpha = x < centerX ? 1 - x / centerX : 0;
x = x / canvas.width; left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX): 0;
y = y / canvas.height; up.alpha = y < centerY ? 1 - y / centerY : 0;
if (x > 1) x = 1; down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY): 0;
if (x < 0) x = 0;
if (y > 1) y = 1;
if (y < 0) y = 0;
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 () { function setupInput () {
@ -108,6 +97,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
document.addEventListener("mousemove", function (event) { document.addEventListener("mousemove", function (event) {
clientMouseX = event.clientX; clientMouseX = event.clientX;
clientMouseY = event.clientY; clientMouseY = event.clientY;
mouseMoved = true;
}, false); }, false);
} else { } else {
var input = new spine.webgl.Input(canvas); var input = new spine.webgl.Input(canvas);
@ -134,9 +124,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
} }
function render () { function render () {
if (!isMobileDevice()) { if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true);
calculateBlend(clientMouseX, clientMouseY, true);
}
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;