[HTML5] Easier HTML templates, better deinit/cleanup.
This commit is contained in:
Fabio Alessandrelli
parent
5c2fe970b8
commit
2972ea3229
10 changed files with 285 additions and 290 deletions
131
misc/dist/html/editor.html
vendored
131
misc/dist/html/editor.html
vendored
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
const gameConfig = {
|
||||
'persistentPaths': persistentPaths,
|
||||
'unloadAfterInit': false,
|
||||
'canvas': gameCanvas,
|
||||
'canvasResizePolicy': 1,
|
||||
'onExit': function () {
|
||||
setGameTabEnabled(false);
|
||||
showTab('editor');
|
||||
game = null;
|
||||
},
|
||||
};
|
||||
|
||||
engine.setPersistentPaths(persistentPaths);
|
||||
|
||||
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;
|
||||
});
|
||||
|
|
|
|||
58
misc/dist/html/full-size.html
vendored
58
misc/dist/html/full-size.html
vendored
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue