Add option 'wasm' to compile to WebAssembly in web export
WebAssembly is still experimental, so disabled by default. The HTML shell file now uses $GODOT_BASE, a placeholder for the base filename, instead of $GODOT_JS, $GODOT_MEM and $GODOT_FS.
This commit is contained in:
eska
357
platform/javascript/godot_shell.html
Normal file
357
platform/javascript/godot_shell.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!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: black;
|
||||
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: #111;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
/* 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
#container: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[type="checkbox"] {
|
||||
/* override user agent style */
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
label > input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#display-output { display: none; }
|
||||
|
||||
|
||||
/* Debug output
|
||||
* ============ */
|
||||
|
||||
#output {
|
||||
display: none;
|
||||
margin: 6px auto;
|
||||
border: 2px groove grey;
|
||||
padding: 4px;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
font-size: small;
|
||||
color: #eee;
|
||||
background-color: black;
|
||||
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';">Loading page...</span>
|
||||
</div>
|
||||
<div id="controls" class="godot">
|
||||
<label id="display-output"><input id="output-toggle" type="checkbox" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />display output</label>
|
||||
<!-- hidden until implemented
|
||||
<label><input id="lock-cursor" type="checkbox" autocomplete="off" />lock cursor</label>
|
||||
<label><input id="resize-canvas" type="checkbox" autocomplete="off" />resize canvas</label>
|
||||
-->
|
||||
<button id="fullscreen" class="godot" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.goFullscreen();">fullscreen</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Firefox adds extra space to textarea, but shouldn't matter too much https://bugzilla.mozilla.org/show_bug.cgi?id=33654 -->
|
||||
<textarea id="output" rows="10" cols="100" readonly="readonly" style="resize:none"></textarea>
|
||||
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
var Presentation = (function() {
|
||||
var statusElement = document.getElementById("status");
|
||||
var outputElement = document.getElementById("output");
|
||||
var doneLoading = false;
|
||||
|
||||
function onLoaded() {
|
||||
doneLoading = true;
|
||||
var fullscreenButtonElement = document.getElementById("fullscreen");
|
||||
fullscreenButtonElement.disabled = false;
|
||||
}
|
||||
|
||||
var presentation = {
|
||||
statusElement: statusElement,
|
||||
outputElement: outputElement,
|
||||
setOutputVisible: function setOutputVisible(visible) {
|
||||
outputElement.style.display = (visible?"block":"none");
|
||||
},
|
||||
setStatusVisible: function setStatusVisible(visible) {
|
||||
statusElement.style.visibility = (visible?"visible":"hidden");
|
||||
},
|
||||
setStatus: function setStatus(text) {
|
||||
if (!text || text.length === 0) {
|
||||
Presentation.setStatusVisible(false);
|
||||
onLoaded();
|
||||
} else {
|
||||
Presentation.setStatusVisible(true);
|
||||
statusElement.innerHTML = text;
|
||||
}
|
||||
},
|
||||
goFullscreen: function goFullscreen() {
|
||||
if (doneLoading) Module.requestFullScreen(false, false);
|
||||
}
|
||||
};
|
||||
|
||||
if ($GODOT_CONTROLS_ENABLED) { // controls enabled
|
||||
(function() {
|
||||
var controlsElement = document.getElementById("controls");
|
||||
controlsElement.style.visibility="visible";
|
||||
})();
|
||||
}
|
||||
|
||||
if ($GODOT_DEBUG_ENABLED) { // debugging enabled
|
||||
(function() {
|
||||
var outputToggleLabel = document.getElementById("display-output");
|
||||
var outputToggle = document.getElementById("output-toggle");
|
||||
|
||||
outputElement.value = ""; // clear browser cache
|
||||
outputElement.style.display = "block";
|
||||
outputToggle.checked = true;
|
||||
outputToggleLabel.style.display = "inline";
|
||||
|
||||
presentation.print = function print(text) {
|
||||
if (outputElement.value.length !== 0)
|
||||
outputElement.value += "\n";
|
||||
outputElement.value += text;
|
||||
outputElement.scrollTop = outputElement.scrollHeight; // focus on bottom
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
return presentation;
|
||||
})();
|
||||
|
||||
// Emscripten interface
|
||||
var Module = (function() {
|
||||
var print = (function() {
|
||||
if (typeof Presentation.print === "function") {
|
||||
return function print(text) {
|
||||
if (arguments.length > 1)
|
||||
text = Array.prototype.slice.call(arguments).join(" ");
|
||||
console.log(text);
|
||||
Presentation.print(text);
|
||||
};
|
||||
} else {
|
||||
return function print(text) {
|
||||
if (arguments.length > 1)
|
||||
text = Array.prototype.slice.call(arguments).join(" ");
|
||||
console.log(text);
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
var canvas = (function() {
|
||||
var canvasElement = 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
|
||||
canvasElement.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
|
||||
|
||||
return canvasElement;
|
||||
})();
|
||||
|
||||
var setStatus = (function() {
|
||||
if (typeof Presentation.setStatus === "function")
|
||||
return function setStatus(text) {
|
||||
if (!Module.setStatus.last)
|
||||
Module.setStatus.last = { time: Date.now(), text: "" };
|
||||
if (text === Module.setStatus.text)
|
||||
return;
|
||||
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];
|
||||
}
|
||||
Presentation.setStatus(text);
|
||||
};
|
||||
else
|
||||
return function setStatus(text) {
|
||||
if (!Module.setStatus.last)
|
||||
Module.setStatus.last = { time: Date.now(), text: "" };
|
||||
if (text === Module.setStatus.text)
|
||||
return;
|
||||
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];
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
return {
|
||||
TOTAL_MEMORY: 268435456,
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: print,
|
||||
printErr: function printErr(text) {
|
||||
if (arguments.length > 1)
|
||||
text = Array.prototype.slice.call(arguments).join(" ");
|
||||
if (0) { // XXX disabled for safety `if (typeof dump == "function")`
|
||||
dump(text + "\n"); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: canvas,
|
||||
setStatus: setStatus,
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function monitorRunDependencies(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? "Preparing... (" + (this.totalDependencies-left) + "/" + this.totalDependencies + ")" : "All downloads complete.");
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
Presentation.setStatus("Downloading...");
|
||||
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus("Exception thrown, see JavaScript console");
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr("[post-exception status] " + text);
|
||||
};
|
||||
};
|
||||
//]]></script>
|
||||
<script type="text/javascript" src="$GODOT_BASEfs.js"></script>
|
||||
{{{ SCRIPT }}}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user