[ts] Minor demo updates.

- Loading screen is never shown if demo loads completely while offscreen.
- HTML charset specified.
- Tabs, not spaces, you filthy animals. Each unminified JS reduced by ~80kb.
- Clean up.
This commit is contained in:
NathanSweet 2016-09-13 23:18:49 +02:00
parent 008bceef0a
commit b597aac9b9
26 changed files with 35270 additions and 35255 deletions

View File

@ -6,3 +6,4 @@ tsc -p tsconfig.webgl.json
tsc -p tsconfig.canvas.json
tsc -p tsconfig.threejs.json
tsc -p tsconfig.widget.json
ls build/*.js build/*.ts | awk '{print "unexpand -t 4 ", $0, " > /tmp/e; mv /tmp/e ", $0}' | sh

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>IK Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Frame-by-frame - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Meshes - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Skins - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Spine vs Sprite Sheets - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Strechyman - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Tank - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Transform Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Transitions - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -7,12 +7,12 @@ var spineDemos = {
demos: [],
loopRunning: false
};
(function() {
(function () {
var timeKeeper = new spine.TimeKeeper();
function loop () {
timeKeeper.update();
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
spineDemos.requestAnimationFrame(loop);
requestAnimationFrame(loop);
var demos = spineDemos.demos;
for (var i = 0; i < demos.length; i++) {
var demo = demos[i];
@ -25,28 +25,7 @@ var spineDemos = {
}
}
function setupLoop () {
if (!spineDemos.loopRunning) {
loop();
spineDemos.loopRunning = true;
}
}
spineDemos.setupRendering = function (canvas, renderFunc) {
var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
$(window).on('DOMContentLoaded load resize scroll', function() {
spineDemos.checkElementVisible(demo);
});
spineDemos.checkElementVisible(demo);
setupLoop();
spineDemos.demos.push(demo);
};
spineDemos.requestAnimationFrame = function(func) {
requestAnimationFrame(func);
};
spineDemos.checkElementVisible = function (demo) {
function checkElementVisible (demo) {
var rect = demo.canvas.getBoundingClientRect();
var x = 0, y = 0;
var width = (window.innerHeight || document.documentElement.clientHeight);
@ -54,13 +33,17 @@ var spineDemos = {
demo.visible = rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;
};
spineDemos.setupWebGLContext = function (canvas) {
config = {
alpha: false,
depth: false,
stencil: false
spineDemos.setupRendering = function (canvas, renderFunc) {
var demo = {canvas: canvas, renderFunc: renderFunc, visible: false};
$(window).on('DOMContentLoaded load resize scroll', function() {
checkElementVisible(demo);
});
checkElementVisible(demo);
if (!spineDemos.loopRunning) {
loop();
spineDemos.loopRunning = true;
}
return gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
spineDemos.demos.push(demo);
};
spineDemos.loadSliders = function () {

View File

@ -1,4 +1,5 @@
<html>
<meta charset="UTF-8">
<title>Path Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script>

View File

@ -23,6 +23,8 @@ module spine.webgl {
constructor (renderer: SceneRenderer) {
this.renderer = renderer;
this.timeKeeper.maxDelta = 9;
if (LoadingScreen.logoImg === null) {
// thank you Apple Inc.
let isSafari = navigator.userAgent.indexOf("Safari") > -1;
@ -66,7 +68,11 @@ module spine.webgl {
this.tempColor.a = 1;
} else {
this.fadeOut += this.timeKeeper.delta * (this.timeKeeper.totalTime < 1 ? 2 : 1);
a = Math.max(0, 1 - this.fadeOut / LoadingScreen.FADE_SECONDS);
if (this.fadeOut > LoadingScreen.FADE_SECONDS) {
renderer.camera.position.set(oldX, oldY, 0);
return;
}
a = 1 - this.fadeOut / LoadingScreen.FADE_SECONDS;
this.tempColor.setFromColor(this.backgroundColor);
this.tempColor.a = 1 - (a - 1) * (a - 1);
renderer.begin();