mirror of
https://github.com/godotengine/godot.git
synced 2024-11-27 09:16:35 +08:00
427 lines
12 KiB
HTML
427 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>$GODOT_HEAD_TITLE</title>
|
|
$GODOT_HEAD_INCLUDE
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
border: 0 none;
|
|
padding: 0;
|
|
text-align: center;
|
|
background-color: #222226;
|
|
font-family: $GODOT_STYLE_FONT_FAMILY;
|
|
}
|
|
|
|
|
|
/* 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: $GODOT_STYLE_FONT_FAMILY; /* 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;
|
|
/* canvas must have border and padding set to zero to
|
|
* calculate cursor coordinates correctly */
|
|
border: 0 none;
|
|
padding: 0;
|
|
color: white;
|
|
}
|
|
|
|
|
|
/* Status display
|
|
* ============== */
|
|
|
|
#status-container {
|
|
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 {
|
|
line-height: 1.3;
|
|
cursor: pointer;
|
|
visibility: visible;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
|
|
/* On-hover controls
|
|
* ================= */
|
|
|
|
#controls {
|
|
visibility: hidden;
|
|
opacity: 0.0;
|
|
transition: opacity 500ms ease-in-out 200ms;
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 16px;
|
|
padding: 3px 5px;
|
|
font-size: small;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
:hover > #controls {
|
|
opacity: 1.0;
|
|
transition: opacity 60ms ease-in-out;
|
|
}
|
|
|
|
#controls > button,
|
|
#controls > label {
|
|
vertical-align: middle;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
#controls > label > input {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#controls > label > input[type="checkbox"] {
|
|
/* override user agent style */
|
|
margin-left: 0;
|
|
}
|
|
|
|
#output-toggle { display: none; }
|
|
|
|
|
|
/* Debug output
|
|
* ============ */
|
|
|
|
#output-panel {
|
|
display: none;
|
|
max-width: $GODOT_CANVAS_WIDTHpx;
|
|
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;
|
|
}
|
|
|
|
|
|
/* Export style include
|
|
* ==================== */
|
|
|
|
$GODOT_STYLE_INCLUDE
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<canvas id="canvas" width="$GODOT_CANVAS_WIDTH" height="$GODOT_CANVAS_HEIGHT" onclick="canvas.ownerDocument.defaultView.focus();" oncontextmenu="event.preventDefault();">
|
|
HTML5 canvas appears to be unsupported in the current browser.<br />
|
|
Please try updating or use a different browser.
|
|
</canvas>
|
|
<div id="status-container">
|
|
<span id="status" class="godot" onclick="this.style.visibility='hidden';">Downloading page...</span>
|
|
</div>
|
|
<div id="controls" class="godot">
|
|
<label id="output-toggle"><input type="checkbox" checked="checked" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />Display Output</label>
|
|
<!-- hidden until implemented
|
|
<label><input class="postRun-enable" type="checkbox" disabled="disabled" autocomplete="off" />lock cursor</label>
|
|
<label><input class="postRun-enable" type="checkbox" disabled="disabled" autocomplete="off" onchange="Presentation.setCanvasMaximized(this.checked);" />maximize</label>
|
|
-->
|
|
<button id="fullscreen" class="godot postRun-enable" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.requestFullscreen();">Fullscreen</button>
|
|
</div>
|
|
</div>
|
|
<div id="output-panel" class="godot">
|
|
<div id="output-header">
|
|
Output:
|
|
<button class="godot" type="button" autocomplete="off" onclick="Presentation.clearOutput();">Clear</button>
|
|
</div>
|
|
<div id="output-container"><div id="output-scroll"></div></div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script type="text/javascript">//<![CDATA[
|
|
var Presentation = (function() {
|
|
var statusElement = document.getElementById("status");
|
|
var canvasElement = document.getElementById("canvas");
|
|
|
|
var presentation = {
|
|
postRun: [
|
|
function() {
|
|
var elements = document.getElementsByClassName("postRun-enable");
|
|
Array.prototype.slice.call(elements).forEach(function(element) {
|
|
element.disabled = false;
|
|
});
|
|
}
|
|
],
|
|
requestFullscreen: function requestFullscreen() {
|
|
if (typeof Module !== "undefined" && Module.requestFullscreen) {
|
|
Module.requestFullscreen(false, false);
|
|
}
|
|
},
|
|
/*
|
|
requestPointerlock: function requestPointerlock() {
|
|
if (typeof Module !== "undefined" && Module.requestPointerlock) {
|
|
Module.requestPointerlock(false, false);
|
|
}
|
|
},
|
|
setCanvasMaximized: function setCanvasMaximized(enabled) {
|
|
if (typeof Module !== "undefined" && Module.setCanvasMaximized) {
|
|
Module.setCanvasMaximized(enabled);
|
|
}
|
|
},
|
|
*/
|
|
setStatusVisible: function setStatusVisible(visible) {
|
|
statusElement.style.visibility = (visible?"visible":"hidden");
|
|
},
|
|
setStatus: function setStatus(text) {
|
|
if (text.length === 0) {
|
|
// emscripten sets empty string as status after "Running..."
|
|
// per timeout, but another status may have been set by then
|
|
if (Presentation.setStatus.lastText === "Running...")
|
|
Presentation.setStatusVisible(false);
|
|
return;
|
|
}
|
|
Presentation.setStatus.lastText = text;
|
|
while (statusElement.lastChild) {
|
|
statusElement.removeChild(statusElement.lastChild);
|
|
}
|
|
var lines = text.split("\n");
|
|
lines.forEach(function(line, index) {
|
|
statusElement.appendChild(document.createTextNode(line));
|
|
statusElement.appendChild(document.createElement("br"));
|
|
});
|
|
var closeNote = document.createElement("span");
|
|
closeNote.style.fontSize = "small";
|
|
closeNote.textContent = "click to close";
|
|
statusElement.appendChild(closeNote);
|
|
Presentation.setStatusVisible(true);
|
|
},
|
|
isWebGL2Available: function isWebGL2Available() {
|
|
var context;
|
|
try {
|
|
context = canvasElement.getContext("webgl2") || canvasElement.getContext("experimental-webgl2");
|
|
} catch (e) {}
|
|
return !!context;
|
|
},
|
|
};
|
|
|
|
window.onerror = function(event) { presentation.setStatus("Failure during start-up\nSee JavaScript console") };
|
|
|
|
if ($GODOT_CONTROLS_ENABLED) { // controls enabled
|
|
document.getElementById("controls").style.visibility="visible";
|
|
}
|
|
|
|
if ($GODOT_DEBUG_ENABLED) { // debugging enabled
|
|
var outputRoot = document.getElementById("output-panel");
|
|
var outputElement = document.getElementById("output-scroll");
|
|
var outputToggle = document.getElementById("output-toggle");
|
|
const maxOutputMessages = 400;
|
|
|
|
presentation.setOutputVisible = function setOutputVisible(visible) {
|
|
outputRoot.style.display = (visible?"block":"none");
|
|
};
|
|
presentation.clearOutput = function clearOutput() {
|
|
while (outputElement.firstChild) {
|
|
outputElement.firstChild.remove();
|
|
}
|
|
};
|
|
|
|
presentation.setOutputVisible(true);
|
|
outputToggle.style.display = "inline";
|
|
|
|
presentation.print = function print(text) {
|
|
if (arguments.length > 1) {
|
|
text = Array.prototype.slice.call(arguments).join(" ");
|
|
}
|
|
if (text.length <= 0) return;
|
|
while (outputElement.childElementCount >= maxOutputMessages) {
|
|
outputElement.firstChild.remove();
|
|
}
|
|
var msg = document.createElement("div");
|
|
if (String.prototype.trim.call(text).startsWith("**ERROR**")
|
|
|| String.prototype.trim.call(text).startsWith("**EXCEPTION**")) {
|
|
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 = outputElement.scrollHeight - (outputElement.clientHeight + outputElement.scrollTop) < 10;
|
|
outputElement.appendChild(msg);
|
|
if (scrollToBottom) {
|
|
outputElement.scrollTop = outputElement.scrollHeight;
|
|
}
|
|
};
|
|
|
|
presentation.postRun.push(function() {
|
|
window.onerror = function(event) { presentation.print("**EXCEPTION**:", event) };
|
|
});
|
|
|
|
} else {
|
|
presentation.postRun.push(function() { window.onerror = null; });
|
|
}
|
|
|
|
return presentation;
|
|
})();
|
|
|
|
// Emscripten interface
|
|
var Module = {
|
|
TOTAL_MEMORY: $GODOT_TMEM,
|
|
postRun: (function() {
|
|
if (typeof Presentation !== "undefined" && Presentation.postRun instanceof Array) {
|
|
return Presentation.postRun;
|
|
}
|
|
})(),
|
|
print: function print(text) {
|
|
if (arguments.length > 1) {
|
|
text = Array.prototype.slice.call(arguments).join(" ");
|
|
}
|
|
console.log(text);
|
|
if (typeof Presentation !== "undefined" && typeof Presentation.print === "function") {
|
|
Presentation.print(text);
|
|
}
|
|
},
|
|
printErr: function printErr(text) {
|
|
if (arguments.length > 1) {
|
|
text = Array.prototype.slice.call(arguments).join(" ");
|
|
}
|
|
console.error(text);
|
|
if (typeof Presentation !== "undefined" && typeof Presentation.print === "function") {
|
|
Presentation.print("**ERROR**:", text)
|
|
}
|
|
},
|
|
canvas: (function() {
|
|
var canvas = document.getElementById("canvas");
|
|
// As a default initial behavior, pop up an alert when WebGL context is lost. To make your
|
|
// application robust, you may want to override this behavior before shipping!
|
|
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
|
canvas.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
|
|
return canvas;
|
|
|
|
})(),
|
|
setStatus: function setStatus(text) {
|
|
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
|
var now = Date.now();
|
|
if (m) {
|
|
if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
|
|
return;
|
|
text = m[1];
|
|
}
|
|
if (typeof Presentation !== "undefined" && typeof Presentation.setStatus == "function") {
|
|
Presentation.setStatus(text);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (!Presentation.isWebGL2Available()) {
|
|
Presentation.setStatus("WebGL2 appears to be unsupported in the current browser.\nPlease try updating or use a different browser.");
|
|
Presentation.preventLoading = true;
|
|
} else {
|
|
Presentation.setStatus("Downloading...");
|
|
}
|
|
|
|
if (Presentation.preventLoading) {
|
|
// prevent *fs.js and Emscripten's SCRIPT placeholder from loading any files
|
|
Presentation._XHR_send = XMLHttpRequest.prototype.send;
|
|
XMLHttpRequest.prototype.send = function() {};
|
|
Presentation._Node_appendChild = Node.prototype.appendChild;
|
|
Node.prototype.appendChild = function(node) {
|
|
if (!(node instanceof HTMLScriptElement)) {
|
|
return Presentation._Node_appendChild.call(this, node);
|
|
}
|
|
}
|
|
}
|
|
//]]></script>
|
|
<script type="text/javascript" src="$GODOT_BASEfs.js"></script>
|
|
{{{ SCRIPT }}}
|
|
<script type="text/javascript">
|
|
if (Presentation.preventLoading) {
|
|
XMLHttpRequest.prototype.send = Presentation._XHR_send;
|
|
Node.prototype.appendChild = Presentation._Node_appendChild;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|