Skip to content

Commit

Permalink
Merge pull request #46201 from Faless/js/3.x_canvas_size_pr
Browse files Browse the repository at this point in the history 
[3.2] [HTML5] Easier HTML templates, better canvas size handling.
  • Loading branch information
@akien-mga
akien-mga authored Feb 19, 2021
2 parents b7695f1 + 45a67fa commit 0d94bf7
Show file tree
Hide file tree
Showing 12 changed files with 479 additions and 415 deletions.
136 changes: 75 additions & 61 deletions misc/dist/html/editor.html
View file
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,13 +321,12 @@

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

function startEditor(zip) {

const INDETERMINATE_STATUS_STEP_MS = 100;
const persistentPaths = ['/home/web_user'];

Expand All @@ -337,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 @@ -350,22 +350,28 @@
}
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();

setStatusMode = function setStatusMode(mode) {

if (statusMode === mode || !initializing)
return;
[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
Expand Down Expand Up @@ -394,7 +400,6 @@
};

function animateStatusIndeterminate(ms) {

var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
if (statusIndeterminate.children[i].style.borderTopColor == '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
Expand All @@ -405,7 +410,6 @@
}

setStatusNotice = function setStatusNotice(text) {

while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
Expand All @@ -416,25 +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 @@ -447,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 @@ -496,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
73 changes: 21 additions & 52 deletions misc/dist/html/full-size.html
View file
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 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,7 @@
}
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);
}

setStatusMode = function setStatusMode(mode) {
function setStatusMode(mode) {

if (statusMode === mode || !initializing)
return;
Expand Down Expand Up @@ -217,7 +191,6 @@
}

function animateStatusIndeterminate(ms) {

var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
if (statusIndeterminate.children[i].style.borderTopColor == '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
Expand All @@ -227,8 +200,7 @@
}
}

setStatusNotice = function setStatusNotice(text) {

function setStatusNotice(text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
Expand All @@ -239,22 +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 @@ -267,9 +223,22 @@
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
engine.setCanvas(canvas);
engine.setGDNativeLibraries(GDNATIVE_LIBS);
engine.startGame(EXECUTABLE_NAME, MAIN_PACK).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
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
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,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

0 comments on commit 0d94bf7

Please sign in to comment.