godotengine
/
godot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
godot/misc/dist/html/fixed-size.html

392 lines
10 KiB
HTML
Raw Normal View History

HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color: #222226;
font-family: 'Noto Sans', Arial, sans-serif;
}
/* Godot Engine default theme style
* ================================ */
.godot {
color: #e0e0e0;
background-color: #3b3943;
background-image: linear-gradient(to bottom, #403e48, #35333c);
border: 1px solid #45434e;
box-shadow: 0 0 1px 1px #2f2d35;
}
button.godot {
font-family: 'Droid Sans', Arial, sans-serif; /* override user agent style */
padding: 1px 5px;
background-color: #37353f;
background-image: linear-gradient(to bottom, #413e49, #3a3842);
border: 1px solid #514f5d;
border-radius: 1px;
box-shadow: 0 0 1px 1px #2a2930;
}
button.godot:hover {
color: #f0f0f0;
background-color: #44414e;
background-image: linear-gradient(to bottom, #494652, #423f4c);
border: 1px solid #5a5667;
box-shadow: 0 0 1px 1px #26252b;
}
button.godot:active {
color: #fff;
background-color: #3e3b46;
background-image: linear-gradient(to bottom, #36343d, #413e49);
border: 1px solid #4f4c59;
box-shadow: 0 0 1px 1px #26252b;
}
button.godot:disabled {
color: rgba(230, 230, 230, 0.2);
background-color: #3d3d3d;
background-image: linear-gradient(to bottom, #434343, #393939);
border: 1px solid #474747;
box-shadow: 0 0 1px 1px #2d2b33;
}
/* Canvas / wrapper
* ================ */
#container {
display: inline-block; /* scale with canvas */
vertical-align: top; /* prevent extra height */
position: relative; /* root for absolutely positioned overlay */
margin: 0;
border: 0 none;
padding: 0;
background-color: #0c0c0c;
}
#canvas {
display: block;
margin: 0 auto;
color: white;
}
#canvas:focus {
outline: none;
}
/* Status display
* ============== */
#status {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
/* don't consume click events - make children visible explicitly */
visibility: hidden;
}
#status-progress {
width: 244px;
height: 7px;
background-color: #38363A;
border: 1px solid #444246;
padding: 1px;
box-shadow: 0 0 2px 1px #1B1C22;
border-radius: 2px;
visibility: visible;
}
#status-progress-inner {
height: 100%;
width: 0;
box-sizing: border-box;
transition: width 0.5s linear;
background-color: #202020;
border: 1px solid #222223;
box-shadow: 0 0 1px 1px #27282E;
border-radius: 3px;
}
#status-indeterminate {
visibility: visible;
position: relative;
}
#status-indeterminate > div {
width: 3px;
height: 0;
border-style: solid;
border-width: 6px 2px 0 2px;
border-color: #2b2b2b transparent transparent transparent;
transform-origin: center 14px;
position: absolute;
}
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
#status-notice {
margin: 0 100px;
line-height: 1.3;
visibility: visible;
padding: 4px 6px;
visibility: visible;
}
/* Debug output
* ============ */
#output-panel {
display: none;
max-width: 700px;
font-size: small;
margin: 6px auto 0;
padding: 0 4px 4px;
text-align: left;
line-height: 2.2;
}
#output-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#output-container {
padding: 6px;
background-color: #2c2a32;
box-shadow: inset 0 0 1px 1px #232127;
color: #bbb;
}
#output-scroll {
line-height: 1;
height: 12em;
overflow-y: scroll;
white-space: pre-wrap;
font-size: small;
font-family: "Lucida Console", Monaco, monospace;
}
</style>
$GODOT_HEAD_INCLUDE
</head>
<body>
<div id="container">
Fix keyboard focus lock-out with HTML5 canvas in iframe
2018-05-09 13:57:10 +00:00
<canvas id="canvas" width="640" height="480">
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser.
</canvas>
<div id="status">
<div id='status-progress' style='display: none;' oncontextmenu="event.preventDefault();"><div id ='status-progress-inner'></div></div>
<div id='status-indeterminate' style='display: none;' oncontextmenu="event.preventDefault();">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="status-notice" class="godot" style='display: none;'></div>
</div>
</div>
<div id="output-panel" class="godot">
<div id="output-header">
Output:
<button id='output-clear' class='godot' type='button' autocomplete='off'>Clear</button>
</div>
<div id="output-container"><div id="output-scroll"></div></div>
</div>
<script type="text/javascript" src="$GODOT_BASENAME.js"></script>
<script type="text/javascript">//<![CDATA[
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
var engine = new Engine;
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
(function() {
Accept non-default main packs in engine.js startGame() Allows using startGame() with main packs exported as .zip, but also any other custom extension, for example if a web game host does not allow the .pck filename extension.
2018-05-10 11:43:58 +00:00
const MAIN_PACK = '$GODOT_BASENAME.pck';
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
const DEBUG_ENABLED = $GODOT_DEBUG_ENABLED;
const INDETERMINATE_STATUS_STEP_MS = 100;
var container = document.getElementById('container');
var canvas = document.getElementById('canvas');
var statusProgress = document.getElementById('status-progress');
var statusProgressInner = document.getElementById('status-progress-inner');
var statusIndeterminate = document.getElementById('status-indeterminate');
var statusNotice = document.getElementById('status-notice');
var initializing = true;
var statusMode = 'hidden';
var indeterminiateStatusAnimationId = 0;
function setStatusMode(mode) {
if (statusMode === mode || !initializing)
return;
[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
elem.style.display = 'none';
});
if (indeterminiateStatusAnimationId !== 0) {
cancelAnimationFrame(indeterminiateStatusAnimationId);
indeterminiateStatusAnimationId = 0;
}
switch (mode) {
case 'progress':
statusProgress.style.display = 'block';
break;
case 'indeterminate':
statusIndeterminate.style.display = 'block';
indeterminiateStatusAnimationId = requestAnimationFrame(animateStatusIndeterminate);
break;
case 'notice':
statusNotice.style.display = 'block';
break;
case 'hidden':
break;
default:
throw new Error("Invalid status mode");
}
statusMode = mode;
}
function animateStatusIndeterminate(ms) {
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
if (statusIndeterminate.children[i].style.borderTopColor == '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
child.style.borderTopColor = '';
});
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
}
requestAnimationFrame(animateStatusIndeterminate);
}
function setStatusNotice(text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
var lines = text.split('\n');
lines.forEach((line, index) => {
statusNotice.appendChild(document.createTextNode(line));
statusNotice.appendChild(document.createElement('br'));
});
};
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
engine.setProgressFunc((current, total) => {
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
if (total > 0) {
statusProgressInner.style.width = current/total * 100 + '%';
setStatusMode('progress');
if (current === total) {
// wait for progress bar animation
setTimeout(() => {
setStatusMode('indeterminate');
}, 500);
}
} else {
setStatusMode('indeterminate');
}
});
if (DEBUG_ENABLED) {
var outputRoot = document.getElementById("output-panel");
var outputScroll = document.getElementById("output-scroll");
var OUTPUT_MSG_COUNT_MAX = 400;
document.getElementById('output-clear').addEventListener('click', () => {
while (outputScroll.firstChild) {
outputScroll.firstChild.remove();
}
});
outputRoot.style.display = 'block';
function print(text) {
while (outputScroll.childElementCount >= OUTPUT_MSG_COUNT_MAX) {
outputScroll.firstChild.remove();
}
var msg = document.createElement("div");
if (String.prototype.trim.call(text).startsWith("**ERROR**")) {
msg.style.color = "#d44";
} else if (String.prototype.trim.call(text).startsWith("**WARNING**")) {
msg.style.color = "#ccc000";
} else if (String.prototype.trim.call(text).startsWith("**SCRIPT ERROR**")) {
msg.style.color = "#c6d";
}
msg.textContent = text;
var scrollToBottom = outputScroll.scrollHeight - (outputScroll.clientHeight + outputScroll.scrollTop) < 10;
outputScroll.appendChild(msg);
if (scrollToBottom) {
outputScroll.scrollTop = outputScroll.scrollHeight;
}
};
function printError(text) {
Fix internal Emscripten JS API calls Emscripten 1.37.24 no longer exports these by default
2018-01-06 14:53:04 +00:00
if (!String.prototype.trim.call(text).startsWith('**ERROR**: ')) {
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
text = '**ERROR**: ' + text;
}
print(text);
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
}
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
engine.setStdoutFunc(text => {
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
print(text);
console.log(text);
});
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
engine.setStderrFunc(text => {
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
printError(text);
console.warn(text);
});
}
Check only for WebGL 1.0, move test to HTML file Whether to use WebGL 1.0 or 2.0 can only be determined at runtime after reading project settings, so check for the lower version. The test is now in the HTML file, so if desired WebGL 2.0 can be checked early by changing the behaviour there.
2018-03-15 03:00:32 +00:00
function displayFailureNotice(err) {
var msg = err.message || err;
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
if (DEBUG_ENABLED) {
Check only for WebGL 1.0, move test to HTML file Whether to use WebGL 1.0 or 2.0 can only be determined at runtime after reading project settings, so check for the lower version. The test is now in the HTML file, so if desired WebGL 2.0 can be checked early by changing the behaviour there.
2018-03-15 03:00:32 +00:00
printError(msg);
Change HTML5 start-up API Rename engine.start() to startGame(), new start() takes string arguments handed directly to main(). Rename Engine.loadEngine() to load(). Add setLocale(), setResizeCanvasOnStart(), setExecutableName() and preloadFile().
2017-11-19 14:30:09 +00:00
}
Check only for WebGL 1.0, move test to HTML file Whether to use WebGL 1.0 or 2.0 can only be determined at runtime after reading project settings, so check for the lower version. The test is now in the HTML file, so if desired WebGL 2.0 can be checked early by changing the behaviour there.
2018-03-15 03:00:32 +00:00
console.error(msg);
setStatusNotice(msg);
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
setStatusMode('notice');
initializing = false;
Check only for WebGL 1.0, move test to HTML file Whether to use WebGL 1.0 or 2.0 can only be determined at runtime after reading project settings, so check for the lower version. The test is now in the HTML file, so if desired WebGL 2.0 can be checked early by changing the behaviour there.
2018-03-15 03:00:32 +00:00
};
if (!Engine.isWebGLAvailable()) {
displayFailureNotice("WebGL not available");
} else {
setStatusMode('indeterminate');
engine.setCanvas(canvas);
Accept non-default main packs in engine.js startGame() Allows using startGame() with main packs exported as .zip, but also any other custom extension, for example if a web game host does not allow the .pck filename extension.
2018-05-10 11:43:58 +00:00
engine.startGame(MAIN_PACK).then(() => {
Check only for WebGL 1.0, move test to HTML file Whether to use WebGL 1.0 or 2.0 can only be determined at runtime after reading project settings, so check for the lower version. The test is now in the HTML file, so if desired WebGL 2.0 can be checked early by changing the behaviour there.
2018-03-15 03:00:32 +00:00
setStatusMode('hidden');
initializing = false;
}, displayFailureNotice);
}
HTML5 start-up overhaul - Implement promise-based JS interface for custom HTML page integration - Add download progress callback - Add progress bar and indeterminate spinner to default HTML page - Try downloading files multiple times when failing - Get rid of godotfs.js - Separate steps for engine initialization, game initialization and game start - Allow multiple games on one HTML page - Substitution placeholders only used in .html file - Placeholders renamed: $GODOT_BASE => $GODOT_BASENAME, $GODOT_TMEM -> $GODOT_TOTAL_MEMORY - Emscripten Module is now Engine.RuntimeEnvironment (no longer a global)
2017-08-13 11:10:04 +00:00
})();
//]]></script>
</body>
</html>