[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.canvas.json
tsc -p tsconfig.threejs.json tsc -p tsconfig.threejs.json
tsc -p tsconfig.widget.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> <html>
<meta charset="UTF-8">
<title>IK Constraints - Spine Demo</title> <title>IK Constraints - Spine Demo</title>
<link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="demos.css">
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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