mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 17:26:01 +08:00
[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:
parent
008bceef0a
commit
b597aac9b9
@ -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
|
||||||
|
|||||||
2628
spine-ts/build/spine-all.d.ts
vendored
2628
spine-ts/build/spine-all.d.ts
vendored
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
1702
spine-ts/build/spine-core.d.ts
vendored
1702
spine-ts/build/spine-core.d.ts
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1774
spine-ts/build/spine-threejs.d.ts
vendored
1774
spine-ts/build/spine-threejs.d.ts
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
2414
spine-ts/build/spine-webgl.d.ts
vendored
2414
spine-ts/build/spine-webgl.d.ts
vendored
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
2516
spine-ts/build/spine-widget.d.ts
vendored
2516
spine-ts/build/spine-widget.d.ts
vendored
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
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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 () {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user