UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed additive blending demo, calculations take scrolling into account.

Browse Source
This commit is contained in:
badlogic 2019-04-29 15:07:13 +02:00
parent 923c6c19f2
commit 5994c347ea
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
spine-ts/webgl/demos/additiveblending.html
View File

@ -6,11 +6,9 @@
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="utils.js"></script> <script src="utils.js"></script>
<script src="additiveblending.js"></script> <script src="additiveblending.js"></script>
<body> <body style="margin: 0; padding: 0;">
<center> <div style="margin: 0 auto;" class="aspect standalone"></div>
<div class="aspect standalone"></div>
</center>
<script> <script>
spineDemos.init(); spineDemos.init();

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

@ -15,6 +15,9 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var isPlaying = true; var isPlaying = true;
var left, right, up, down; var left, right, up, down;
var cursor;
var clientMouseX = 0, clientMouseY = 0;
var DEMO_NAME = "AdditiveBlendingDemo"; var DEMO_NAME = "AdditiveBlendingDemo";
@ -35,6 +38,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
assetManager.loadText(DEMO_NAME, "atlas2.atlas"); assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json"); assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
cursor = document.getElementById("cursor");
} }
function loadingComplete () { function loadingComplete () {
@ -83,6 +88,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
function calculateBlend (x, y, isPageCoords) { function calculateBlend (x, y, isPageCoords) {
if (isPageCoords) { if (isPageCoords) {
var canvasBounds = canvas.getBoundingClientRect(); var canvasBounds = canvas.getBoundingClientRect();
console.log(canvasBounds.x + ", " + canvasBounds.y + ", " + x + ", " + y);
x = Math.max(0, Math.min(canvasBounds.width, x - canvasBounds.x)); x = Math.max(0, Math.min(canvasBounds.width, x - canvasBounds.x));
y = Math.max(0, Math.min(canvasBounds.height, y - canvasBounds.y)); y = Math.max(0, Math.min(canvasBounds.height, y - canvasBounds.y));
} }
@ -97,7 +103,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
function setupInput () { function setupInput () {
if (!isMobileDevice()) { if (!isMobileDevice()) {
document.addEventListener("mousemove", function (event) { document.addEventListener("mousemove", function (event) {
calculateBlend(event.clientX, event.clientY, true); clientMouseX = event.clientX;
clientMouseY = event.clientY;
}, false); }, false);
} else { } else {
var input = new spine.webgl.Input(canvas); var input = new spine.webgl.Input(canvas);
@ -124,6 +131,10 @@ var additiveBlendingDemo = function(canvas, bgColor) {
} }
function render () { function render () {
if (!isMobileDevice()) {
calculateBlend(clientMouseX, clientMouseY, true);
}
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;