diff options
author | Fabio Alessandrelli <fabio.alessandrelli@gmail.com> | 2021-02-07 13:45:04 +0100 |
---|---|---|
committer | Fabio Alessandrelli <fabio.alessandrelli@gmail.com> | 2021-02-19 05:12:32 +0100 |
commit | 2972ea32297adfd9cc08c81dd85339679365f52e (patch) | |
tree | 63e41e958a5610449595354ace4c30f719b2a555 /misc/dist | |
parent | 5c2fe970b87f8e95306bad0f713567a150b1e442 (diff) |
[HTML5] Easier HTML templates, better deinit/cleanup.
Diffstat (limited to 'misc/dist')
-rw-r--r-- | misc/dist/html/editor.html | 131 | ||||
-rw-r--r-- | misc/dist/html/full-size.html | 58 |
2 files changed, 99 insertions, 90 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index c2cfd96da5..b4a8c69cc6 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -236,7 +236,7 @@ <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; @@ -321,8 +321,8 @@ function closeEditor() { closeGame(); - if (engine) { - engine.requestQuit(); + if (editor) { + editor.requestQuit(); } } @@ -336,6 +336,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 +350,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 +420,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 +449,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}); }); }, 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 +516,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': ['--video-driver', video_driver]}).then(function() { setStatusMode('hidden'); initializing = false; }); diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html index 85c5305b85..c7e657e53d 100644 --- a/misc/dist/html/full-size.html +++ b/misc/dist/html/full-size.html @@ -134,21 +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'); @@ -180,14 +173,13 @@ $GODOT_HEAD_INCLUDE canvas.style.height = lastHeight + "px"; } } - if (FULL_WINDOW) { + if (GODOT_CONFIG['canvasResizePolicy'] == 2) { animationCallbacks.push(adjustCanvasDimensions); adjustCanvasDimensions(); - } else { - engine.setCanvasResizedOnStart(true); } - setStatusMode = function setStatusMode(mode) { + function setStatusMode(mode) { + if (statusMode === mode || !initializing) return; [statusProgress, statusIndeterminate, statusNotice].forEach(elem => { @@ -213,7 +205,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 +217,7 @@ $GODOT_HEAD_INCLUDE } } - setStatusNotice = function setStatusNotice(text) { + function setStatusNotice(text) { while (statusNotice.lastChild) { statusNotice.removeChild(statusNotice.lastChild); } @@ -236,21 +228,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 +240,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); |