summaryrefslogtreecommitdiff
path: root/misc/dist/html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/dist/html')
-rw-r--r--misc/dist/html/editor.html189
-rw-r--r--misc/dist/html/full-size.html75
-rw-r--r--misc/dist/html/manifest.json18
-rw-r--r--misc/dist/html/offline.html42
-rw-r--r--misc/dist/html/service-worker.js84
5 files changed, 287 insertions, 121 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index c2cfd96da5..99ac2379ce 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -2,11 +2,20 @@
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
<meta charset='utf-8' />
- <meta name='viewport' content='width=device-width, user-scalable=no' />
+ <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no' />
+ <meta name="mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="application-name" content="Godot" />
+ <meta name="apple-mobile-web-app-title" content="Godot" />
+ <meta name="theme-color" content="#478cbf" />
+ <meta name="msapplication-navbutton-color" content="#478cbf" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+ <meta name="msapplication-starturl" content="/latest" />
<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
- <title>Godot Engine Web Editor ($GODOT_VERSION)</title>
- <style type='text/css'>
-
+ <link rel="apple-touch-icon" type="image/png" href="favicon.png" />
+ <link rel="manifest" href="manifest.json" />
+ <title>Godot Engine Web Editor (@GODOT_VERSION@)</title>
+ <style>
*:focus {
/* More visible outline for better keyboard navigation. */
outline: 0.125rem solid hsl(220, 100%, 62.5%);
@@ -40,13 +49,30 @@
filter: brightness(82.5%);
}
+ #tabs-buttons {
+ /* Match the default background color of the editor window for a seamless appearance. */
+ background-color: #202531;
+ }
+
+ #tab-game {
+ /* Use a pure black background to better distinguish the running project */
+ /* from the editor window, and to use a more neutral background color (no tint). */
+ background-color: black;
+ /* Make the background span the entire page height. */
+ min-height: 100vh;
+ }
+
#canvas, #gameCanvas {
display: block;
margin: 0;
color: white;
}
- #canvas:focus, #gameCanvas:focus {
+ /* Don't show distracting focus outlines for the main tabs' contents. */
+ #tab-editor canvas:focus,
+ #tab-game canvas:focus,
+ #canvas:focus,
+ #gameCanvas:focus {
outline: none;
}
@@ -189,7 +215,7 @@
<br />
<img src="logo.svg" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
<br />
- $GODOT_VERSION
+ @GODOT_VERSION@
<br />
<a href="releases/">Need an old version?</a>
<br />
@@ -200,9 +226,11 @@
<a href="demo.zip">(Try this for example)</a>
<br />
<br />
- <button id="startButton" class="btn" style="margin-bottom: 4rem">Start Godot editor</button>
+ <button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
+ <br />
+ <button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
<br />
- <button class="btn" onclick="clearPersistence()">Clear persistent data</button>
+ <a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div>
</div>
<div id='tab-editor' style="display: none;">
@@ -232,11 +260,17 @@
<div id='status-notice' class='godot' style='display: none;'></div>
</div>
</div>
+ <script>
+ window.addEventListener("load", () => {
+ if ("serviceWorker" in navigator) {
+ navigator.serviceWorker.register("service.worker.js");
+ }
+ });
+ </script>
+ <script src='godot.tools.js'></script>
+ <script>//<![CDATA[
- <script type='text/javascript' src='godot.tools.js'></script>
- <script type='text/javascript'>//<![CDATA[
-
- var engine = new Engine;
+ var editor = null;
var game = null;
var setStatusMode;
var setStatusNotice;
@@ -258,7 +292,7 @@
});
}
- if (!window.confirm("Are you sure you want to delete all the locally stored files?")) {
+ if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) {
return;
}
Promise.all([
@@ -321,8 +355,8 @@
function closeEditor() {
closeGame();
- if (engine) {
- engine.requestQuit();
+ if (editor) {
+ editor.requestQuit();
}
}
@@ -336,6 +370,7 @@
var statusProgressInner = document.getElementById('status-progress-inner');
var statusIndeterminate = document.getElementById('status-indeterminate');
var statusNotice = document.getElementById('status-notice');
+ var headerDiv = document.getElementById('tabs-buttons');
var initializing = true;
var statusMode = 'hidden';
@@ -349,16 +384,23 @@
}
requestAnimationFrame(animate);
+ var lastScale = 0;
+ var lastWidth = 0;
+ var lastHeight = 0;
function adjustCanvasDimensions() {
var scale = window.devicePixelRatio || 1;
- var header = document.getElementById('tabs-buttons');
- var headerHeight = header.offsetHeight + 1;
+ var headerHeight = headerDiv.offsetHeight + 1;
var width = window.innerWidth;
var height = window.innerHeight - headerHeight;
- editorCanvas.width = width * scale;
- editorCanvas.height = height * scale;
- editorCanvas.style.width = width + "px";
- editorCanvas.style.height = height + "px";
+ if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
+ editorCanvas.width = width * scale;
+ editorCanvas.height = height * scale;
+ editorCanvas.style.width = width + "px";
+ editorCanvas.style.height = height + "px";
+ lastScale = scale;
+ lastWidth = width;
+ lastHeight = height;
+ }
}
animationCallbacks.push(adjustCanvasDimensions);
adjustCanvasDimensions();
@@ -412,24 +454,23 @@
});
};
- engine.setProgressFunc((current, total) => {
- if (total > 0) {
- statusProgressInner.style.width = current/total * 100 + '%';
- setStatusMode('progress');
- if (current === total) {
- // wait for progress bar animation
- setTimeout(() => {
- setStatusMode('indeterminate');
- }, 100);
- }
- } else {
- setStatusMode('indeterminate');
- }
- });
-
- engine.setPersistentPaths(persistentPaths);
+ const gameConfig = {
+ 'persistentPaths': persistentPaths,
+ 'unloadAfterInit': false,
+ 'canvas': gameCanvas,
+ 'canvasResizePolicy': 1,
+ 'onExit': function () {
+ setGameTabEnabled(false);
+ showTab('editor');
+ game = null;
+ },
+ };
- engine.setOnExecute(function(args) {
+ var OnEditorExit = function () {
+ showTab('loader');
+ setLoaderEnabled(true);
+ };
+ function Execute(args) {
const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
const is_game = !is_editor && !is_project_manager;
@@ -442,42 +483,60 @@
return;
}
setGameTabEnabled(true);
- game = new Engine();
- game.setPersistentPaths(persistentPaths);
- game.setUnloadAfterInit(false);
- game.setOnExecute(engine.onExecute);
- game.setCanvas(gameCanvas);
- game.setCanvasResizedOnStart(true);
- game.setOnExit(function() {
- setGameTabEnabled(false);
- showTab('editor');
- game = null;
- });
+ game = new Engine(gameConfig);
showTab('game');
game.init().then(function() {
requestAnimationFrame(function() {
- game.start.apply(game, args).then(function() {
+ game.start({'args': args}).then(function() {
gameCanvas.focus();
});
});
});
} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
- engine.setOnExit(function(code) {
+ OnEditorExit = function(code) {
setLoaderEnabled(true);
setTimeout(function() {
- engine.init().then(function() {
+ editor.init().then(function() {
setLoaderEnabled(false);
- engine.setOnExit(function() {
+ OnEditorExit = function() {
showTab('loader');
setLoaderEnabled(true);
- });
- engine.start.apply(engine, args);
+ };
+ editor.start({'args': args, 'persistentDrops': is_project_manager});
});
}, 0);
- engine.setOnExit(null);
- });
+ OnEditorExit = null;
+ };
}
- });
+ }
+
+ const editorConfig = {
+ 'unloadAfterInit': false,
+ 'onProgress': function progressFunction (current, total) {
+ if (total > 0) {
+ statusProgressInner.style.width = current/total * 100 + '%';
+ setStatusMode('progress');
+ if (current === total) {
+ // wait for progress bar animation
+ setTimeout(() => {
+ setStatusMode('indeterminate');
+ }, 100);
+ }
+ } else {
+ setStatusMode('indeterminate');
+ }
+ },
+ 'canvas': editorCanvas,
+ 'canvasResizePolicy': 0,
+ 'onExit': function() {
+ if (OnEditorExit) {
+ OnEditorExit();
+ }
+ },
+ 'onExecute': Execute,
+ 'persistentPaths': persistentPaths,
+ };
+ editor = new Engine(editorConfig);
function displayFailureNotice(err) {
var msg = err.message || err;
@@ -491,26 +550,20 @@
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
- engine.setCanvas(editorCanvas);
- engine.setUnloadAfterInit(false); // Don't want to reload when starting game.
- engine.init('godot.tools').then(function() {
+ editor.init('godot.tools').then(function() {
if (zip) {
- engine.copyToFS("/tmp/preload.zip", zip);
+ editor.copyToFS("/tmp/preload.zip", zip);
}
try {
// Avoid user creating project in the persistent root folder.
- engine.copyToFS("/home/web_user/keep", new Uint8Array());
+ editor.copyToFS("/home/web_user/keep", new Uint8Array());
} catch(e) {
// File exists
}
//selectVideoMode();
showTab('editor');
setLoaderEnabled(false);
- engine.setOnExit(function() {
- showTab('loader');
- setLoaderEnabled(true);
- });
- engine.start('--video-driver', video_driver).then(function() {
+ editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() {
setStatusMode('hidden');
initializing = false;
});
diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index 85c5305b85..abc0479739 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -134,22 +134,14 @@ $GODOT_HEAD_INCLUDE
<div id='status-notice' class='godot' style='display: none;'></div>
</div>
- <script type='text/javascript' src='$GODOT_BASENAME.js'></script>
+ <script type='text/javascript' src='$GODOT_URL'></script>
<script type='text/javascript'>//<![CDATA[
- var engine = new Engine;
- var setStatusMode;
- var setStatusNotice;
+ const GODOT_CONFIG = $GODOT_CONFIG;
+ var engine = new Engine(GODOT_CONFIG);
(function() {
- const EXECUTABLE_NAME = '$GODOT_BASENAME';
- const MAIN_PACK = '$GODOT_BASENAME.pck';
- const EXTRA_ARGS = JSON.parse('$GODOT_ARGS');
- const GDNATIVE_LIBS = [$GODOT_GDNATIVE_LIBS];
const INDETERMINATE_STATUS_STEP_MS = 100;
- const FULL_WINDOW = $GODOT_FULL_WINDOW;
-
- var canvas = document.getElementById('canvas');
var statusProgress = document.getElementById('status-progress');
var statusProgressInner = document.getElementById('status-progress-inner');
var statusIndeterminate = document.getElementById('status-indeterminate');
@@ -157,9 +149,6 @@ $GODOT_HEAD_INCLUDE
var initializing = true;
var statusMode = 'hidden';
- var lastWidth = 0;
- var lastHeight = 0;
- var lastScale = 0;
var animationCallbacks = [];
function animate(time) {
@@ -168,26 +157,8 @@ $GODOT_HEAD_INCLUDE
}
requestAnimationFrame(animate);
- function adjustCanvasDimensions() {
- const scale = window.devicePixelRatio || 1;
- if (lastWidth != window.innerWidth || lastHeight != window.innerHeight || lastScale != scale) {
- lastScale = scale;
- lastWidth = window.innerWidth;
- lastHeight = window.innerHeight;
- canvas.width = Math.floor(lastWidth * scale);
- canvas.height = Math.floor(lastHeight * scale);
- canvas.style.width = lastWidth + "px";
- canvas.style.height = lastHeight + "px";
- }
- }
- if (FULL_WINDOW) {
- animationCallbacks.push(adjustCanvasDimensions);
- adjustCanvasDimensions();
- } else {
- engine.setCanvasResizedOnStart(true);
- }
+ function setStatusMode(mode) {
- setStatusMode = function setStatusMode(mode) {
if (statusMode === mode || !initializing)
return;
[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
@@ -213,7 +184,7 @@ $GODOT_HEAD_INCLUDE
throw new Error('Invalid status mode');
}
statusMode = mode;
- };
+ }
function animateStatusIndeterminate(ms) {
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
@@ -225,7 +196,7 @@ $GODOT_HEAD_INCLUDE
}
}
- setStatusNotice = function setStatusNotice(text) {
+ function setStatusNotice(text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
@@ -236,21 +207,6 @@ $GODOT_HEAD_INCLUDE
});
};
- engine.setProgressFunc((current, total) => {
- 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');
- }
- });
-
function displayFailureNotice(err) {
var msg = err.message || err;
console.error(msg);
@@ -263,9 +219,22 @@ $GODOT_HEAD_INCLUDE
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
- engine.setCanvas(canvas);
- engine.setGDNativeLibraries(GDNATIVE_LIBS);
- engine.startGame(EXECUTABLE_NAME, MAIN_PACK, EXTRA_ARGS).then(() => {
+ engine.startGame({
+ 'onProgress': function (current, total) {
+ 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');
+ }
+ },
+ }).then(() => {
setStatusMode('hidden');
initializing = false;
}, displayFailureNotice);
diff --git a/misc/dist/html/manifest.json b/misc/dist/html/manifest.json
new file mode 100644
index 0000000000..6e0053c23c
--- /dev/null
+++ b/misc/dist/html/manifest.json
@@ -0,0 +1,18 @@
+{
+ "name": "Godot Engine",
+ "short_name": "Godot",
+ "description": "Multi-platform 2D and 3D game engine with a feature-rich editor",
+ "lang": "en",
+ "start_url": "/godot.tools.html",
+ "display": "standalone",
+ "orientation": "landscape",
+ "theme_color": "#478cbf",
+ "icons": [
+ {
+ "src": "favicon.png",
+ "sizes": "256x256",
+ "type": "image/png"
+ }
+ ],
+ "background_color": "#333b4f"
+}
diff --git a/misc/dist/html/offline.html b/misc/dist/html/offline.html
new file mode 100644
index 0000000000..000c21b4d3
--- /dev/null
+++ b/misc/dist/html/offline.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>You are offline</title>
+ <style>
+ html {
+ background-color: #333b4f;
+ color: #e0e0e0;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ margin: 2rem;
+ }
+
+ p {
+ margin-block: 1rem;
+ }
+
+ button {
+ display: block;
+ padding: 1rem 2rem;
+ margin: 3rem auto 0;
+ }
+ </style>
+</head>
+<body>
+ <h1>You are offline</h1>
+ <p>This application requires an Internet connection to run for the first time.</p>
+ <p>Press the button below to try reloading:</p>
+ <button type="button">Reload</button>
+
+ <script>
+ document.querySelector("button").addEventListener("click", () => {
+ window.location.reload();
+ });
+ </script>
+</body>
+</html>
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
new file mode 100644
index 0000000000..d4eaed2b17
--- /dev/null
+++ b/misc/dist/html/service-worker.js
@@ -0,0 +1,84 @@
+// This service worker is required to expose an exported Godot project as a
+// Progressive Web App. It provides an offline fallback page telling the user
+// that they need an Internet conneciton to run the project if desired.
+// Incrementing CACHE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const CACHE_VERSION = "@GODOT_VERSION@";
+const CACHE_NAME = "@GODOT_NAME@-cache";
+const OFFLINE_URL = "offline.html";
+// Files that will be cached on load.
+const CACHED_FILES = [
+ "godot.tools.html",
+ "offline.html",
+ "godot.tools.js",
+ "godot.tools.worker.js",
+ "godot.tools.audio.worklet.js",
+ "logo.svg",
+ "favicon.png",
+];
+
+// Files that we might not want the user to preload, and will only be cached on first load.
+const CACHABLE_FILES = [
+ "godot.tools.wasm",
+];
+const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
+
+self.addEventListener("install", (event) => {
+ event.waitUntil(async function () {
+ const cache = await caches.open(CACHE_NAME);
+ // Clear old cache (including optionals).
+ await Promise.all(FULL_CACHE.map(path => cache.delete(path)));
+ // Insert new one.
+ const done = await cache.addAll(CACHED_FILES);
+ return done;
+ }());
+});
+
+self.addEventListener("activate", (event) => {
+ event.waitUntil(async function () {
+ if ("navigationPreload" in self.registration) {
+ await self.registration.navigationPreload.enable();
+ }
+ }());
+ // Tell the active service worker to take control of the page immediately.
+ self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+ const isNavigate = event.request.mode === "navigate";
+ const url = event.request.url || "";
+ const referrer = event.request.referrer || "";
+ const base = referrer.slice(0, referrer.lastIndexOf("/") + 1);
+ const local = url.startsWith(base) ? url.replace(base, "") : "";
+ const isCachable = FULL_CACHE.some(v => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+ if (isNavigate || isCachable) {
+ event.respondWith(async function () {
+ try {
+ // Use the preloaded response, if it's there
+ let request = event.request.clone();
+ let response = await event.preloadResponse;
+ if (!response) {
+ // Or, go over network.
+ response = await fetch(event.request);
+ }
+ if (isCachable) {
+ // Update the cache
+ const cache = await caches.open(CACHE_NAME);
+ cache.put(request, response.clone());
+ }
+ return response;
+ } catch (error) {
+ const cache = await caches.open(CACHE_NAME);
+ if (event.request.mode === "navigate") {
+ // Check if we have full cache.
+ const cached = await Promise.all(FULL_CACHE.map(name => cache.match(name)));
+ const missing = cached.some(v => v === undefined);
+ const cachedResponse = missing ? await caches.match(OFFLINE_URL) : await caches.match(CACHED_FILES[0]);
+ return cachedResponse;
+ }
+ const cachedResponse = await caches.match(event.request);
+ return cachedResponse;
+ }
+ }());
+ }
+});
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 07:48:39 +0000