Synchronizing Scene Loading with JavaScript
24 January 2017 00:59
In pursuance to a question I posted earlier regarding the loading of multiple canvas elements in one app, is there a command available to synchronize the loading of the scenes such that they both appear simultaneously? (another way of phrasing this is a command to postpone the scenes becoming visible until both are 100% loaded).
I'm attaching a project folder with all the necessary assets.
My thanks in advance for any assistance.
I'm attaching a project folder with all the necessary assets.
My thanks in advance for any assistance.
01 February 2017 13:10
Hi Colin! At first you need to pause every scene in the load_cb method immediately after it's loaded:
Thus all the scenes will be synchronized and will wait for resuming. The "loading_counter" function here is a sort of callback to report that a scene was loaded:
- this code can be placed as is in the global scope (or you can organize it as a b4w module). So, every scene informs us that it was loaded and increases the counter. When we count them all we do resuming in the "start_all" method. The following "resume" method should exist in every module:
Also, if you want to turn off preloaders synchronously, you shouldn't allow them to reach 100% (because it automatically hides a preloader):
- that means pausing them at 99%.
Then turn them off in the aforementioned "resume" method:
Anyway, you can write a custom preloader to make it look better than the default one.
function load_cb(data_id, success) {
if (!success) {
console.log("b4w load failure");
return;
}
m_main.pause();
loading_counter();
}
Thus all the scenes will be synchronized and will wait for resuming. The "loading_counter" function here is a sort of callback to report that a scene was loaded:
var _loaded_count = 0;
var _modules = [
["first_canvas", "canvas_1"],
["second_canvas", "canvas_2"]
]
function loading_counter() {
_loaded_count++;
if (_loaded_count == _modules.length)
start_all();
}
function start_all() {
for (var i = 0; i < _modules.length; i++)
b4w.require(_modules[i][0], _modules[i][1]).resume();
}
- this code can be placed as is in the global scope (or you can organize it as a b4w module). So, every scene informs us that it was loaded and increases the counter. When we count them all we do resuming in the "start_all" method. The following "resume" method should exist in every module:
exports.resume = function() {
m_main.resume();
}
Also, if you want to turn off preloaders synchronously, you shouldn't allow them to reach 100% (because it automatically hides a preloader):
function preloader_cb(percentage) {
if (percentage < 100)
m_preloader.update_preloader(percentage);
}
- that means pausing them at 99%.
Then turn them off in the aforementioned "resume" method:
exports.resume = function() {
m_main.resume();
m_preloader.update_preloader(100);
}
Anyway, you can write a custom preloader to make it look better than the default one.