diff options
author | Fabio Alessandrelli <fabio.alessandrelli@gmail.com> | 2021-09-20 14:47:55 +0200 |
---|---|---|
committer | Fabio Alessandrelli <fabio.alessandrelli@gmail.com> | 2021-10-19 15:45:32 +0200 |
commit | 9de577ba12a7f14aa5fc5187c7902285bfaae184 (patch) | |
tree | 18e4b00e27504062aaea737936be1f270b28c475 | |
parent | 9471de7e000a33f6a410f05b4628c9fe5c60ad9c (diff) |
[HTML5] Editor video driver option. Replace canvas on exit.
Default is "Auto", but can be forced to a specific WebGL version if the
automatic detection fails.
The game and editor canvas are now replaced with a new one in the exit
hooks. This helps the browser do some context cleanup, and allow us to
create a new context of a different type (WebGL/WebGL2).
-rw-r--r-- | misc/dist/html/editor.html | 42 |
1 files changed, 30 insertions, 12 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index 2cae215951..69e267f665 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -14,7 +14,7 @@ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="msapplication-starturl" content="/latest" /> <meta property="og:site_name" content="Godot Engine Web Editor" /> - <meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" /> + <meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" /> <meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine" /> <meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." /> <meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png" /> @@ -269,11 +269,6 @@ <div id="tabs"> <div id="tab-loader"> <div style="color: #e0e0e0;" id="persistence"> - <label for="videoMode" style="display: none;">Select video driver:</label><br /> - <select id="videoMode" style="display: none;"> - <option value="GLES2" selected="selected">WebGL</option> - <option value="GLES3">WebGL 2</option> - </select> <br /> <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" /> <br /> @@ -283,6 +278,14 @@ <br /> <br /> <br /> + <label for="videoMode" style="margin-right: 1rem">Video driver:</label> + <select id="videoMode"> + <option value="" selected="selected">Auto</option> + <option value="GLES2">WebGL</option> + <option value="GLES3">WebGL 2</option> + </select> + <br /> + <br /> <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/> <br /> <a href="demo.zip">(Try this for example)</a> @@ -348,7 +351,7 @@ var game = null; var setStatusMode; var setStatusNotice; - var video_driver = "GLES2"; + var video_driver = ""; function clearPersistence() { function deleteDB(path) { @@ -479,6 +482,15 @@ animationCallbacks.push(adjustCanvasDimensions); adjustCanvasDimensions(); + function replaceCanvas(from) { + const out = document.createElement("canvas"); + out.id = from.id; + out.tabIndex = from.tabIndex; + from.parentNode.replaceChild(out, from); + lastScale = 0; + return out; + } + setStatusMode = function setStatusMode(mode) { if (statusMode === mode || !initializing) return; @@ -534,6 +546,7 @@ 'canvas': gameCanvas, 'canvasResizePolicy': 1, 'onExit': function () { + gameCanvas = replaceCanvas(gameCanvas); setGameTabEnabled(false); showTab('editor'); game = null; @@ -548,7 +561,7 @@ 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; - if (is_project_manager) { + if (video_driver) { args.push('--video-driver', video_driver); } if (is_game) { @@ -561,7 +574,7 @@ showTab('game'); game.init().then(function() { requestAnimationFrame(function() { - game.start({'args': args}).then(function() { + game.start({'args': args, 'canvas': gameCanvas}).then(function() { gameCanvas.focus(); }); }); @@ -576,7 +589,7 @@ showTab('loader'); setLoaderEnabled(true); }; - editor.start({'args': args, 'persistentDrops': is_project_manager}); + editor.start({'args': args, 'persistentDrops': is_project_manager, 'canvas': editorCanvas}); }); }, 0); OnEditorExit = null; @@ -603,6 +616,7 @@ 'canvas': editorCanvas, 'canvasResizePolicy': 0, 'onExit': function() { + editorCanvas = replaceCanvas(editorCanvas); if (OnEditorExit) { OnEditorExit(); } @@ -634,10 +648,14 @@ } catch(e) { // File exists } - //selectVideoMode(); + selectVideoMode(); showTab('editor'); setLoaderEnabled(false); - editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() { + const args = ['--project-manager']; + if (video_driver) { + args.push('--video-driver', video_driver); + } + editor.start({'args': args, 'persistentDrops': true}).then(function() { setStatusMode('hidden'); initializing = false; }); |