Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[HTML5] Easier HTML templates, better canvas size handling #46200

Merged
merged 2 commits into from
Feb 19, 2021
Merged

[HTML5] Easier HTML templates, better canvas size handling #46200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2972ea3
[HTML5] Easier HTML templates, better deinit/cleanup.
Faless Feb 7, 2021
65abf94
[HTML5] Better fullscreen, canvas resizing.
Faless Jan 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 75 additions & 56 deletions misc/dist/html/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -321,8 +321,8 @@

function closeEditor() {
closeGame();
if (engine) {
engine.requestQuit();
if (editor) {
editor.requestQuit();
}
}

Expand All @@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
});
Expand Down
71 changes: 22 additions & 49 deletions misc/dist/html/full-size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,21 +134,14 @@
<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');
Expand All @@ -168,26 +161,8 @@
}
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 => {
Expand All @@ -213,7 +188,7 @@
throw new Error('Invalid status mode');
}
statusMode = mode;
};
}

function animateStatusIndeterminate(ms) {
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
Expand All @@ -225,7 +200,7 @@
}
}

setStatusNotice = function setStatusNotice(text) {
function setStatusNotice(text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
Expand All @@ -236,21 +211,6 @@
});
};

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);
Expand All @@ -263,9 +223,22 @@
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);
Expand Down
1 change: 1 addition & 0 deletions platform/javascript/.eslintrc.engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module.exports = {
"./.eslintrc.js",
],
"globals": {
"EngineConfig": true,
"Godot": true,
"Preloader": true,
"Utils": true,
Expand Down
1 change: 1 addition & 0 deletions platform/javascript/SCsub
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ sys_env.Depends(build[0], sys_env["JS_EXTERNS"])
engine = [
"js/engine/preloader.js",
"js/engine/utils.js",
"js/engine/config.js",
"js/engine/engine.js",
]
externs = [env.File("#platform/javascript/js/engine/engine.externs.js")]
Expand Down
Loading