summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFabio Alessandrelli <fabio.alessandrelli@gmail.com>2021-09-20 14:47:55 +0200
committerFabio Alessandrelli <fabio.alessandrelli@gmail.com>2021-10-19 15:45:32 +0200
commit9de577ba12a7f14aa5fc5187c7902285bfaae184 (patch)
tree18e4b00e27504062aaea737936be1f270b28c475
parent9471de7e000a33f6a410f05b4628c9fe5c60ad9c (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.html42
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;
});