Very nice
Preloader? Easy!
2016-08-11
All right, guys. Raise your hands if you don’t know what preloader is. I assume no one did, but if someone’s shaking hand is in the air, then why don’t you press the Reset button on your computer and enjoy looking at a very real preloader.
And for those of you who have just grinned and ignored my bad advice, let’s continue the lesson.
It is amazing that when a programmer makes an application, he or she always wants to add a loading bar to it. Just in case someone might think that the program got stuck and not downloading terabytes of data from the Internet. It feels nice, you know, to think that the user takes in the view of a slowly crawling strip and not curses clumsy developers. So let us start the lesson and grasp this preloader thing.
A Bit of Theory
A preloader works in a close connection with a loader which is implemented in Blend4Web as the load function of the data module. The structure of a loader usually looks like this:
var m_data = require("data");
var m_preloader = require("preloader");
function load() {
m_data.load("filename.json", load_cb, preloader_cb);
}
function load_cb(data_id) {
}
function preloader_cb(percentage) {
}
Here, the load function fires two events first one of which is called after loading the file, while the second one constantly returns the numeric value of the progress. Because of this, the core work with the preloader should be done in the preloader_cb event handler.
Preloader in Two Seconds
Don’t believe? We'll only need these two commands:
m_preloader.create_preloader();
m_preloader.update_preloader();
Simple "strip" made in just two seconds!
Using them, you can create a simple loading bar very quickly and with no effort at all. Here’s a working example:
var m_data = require("data");
var m_preloader = require("preloader");
function load() {
m_preloader.create_preloader();
m_data.load("filename.json", load_cb, preloader_cb);
}
function load_cb(data_id) {
}
function preloader_cb(percentage) {
m_preloader.update_preloader(percentage);
}
Turning On Overdrive
The developers have also provided some features that may help us to diversify preloader’s basic palette.
Just a few options, and the screen has "bloomed".
All you have to do is define the colors using the create_preloader() function:
var m_data = require("data");
var m_preloader = require("preloader");
function load() {
m_preloader.create_preloader({
container_color:"#a0e5ff", // background color of the container
bar_color:"#fa200", // background color of the bar
frame_color: "#f35600", // color of the frame border
font_color: "#000" // color of the font
});
m_data.load("filename.json", load_cb, preloader_cb);
}
function load_cb(data_id) {
}
function preloader_cb(percentage) {
m_preloader.update_preloader(percentage);
}
Expert Mode
You can achieve a better result if you decide to make your own preloader.
The loading screen from the game "Petigor’s Tale"
A few months ago the Blend4Web developers announced the release of a browser game called «Petigor’s Tale». The game is open source, and its source files are available in the SDK package, so you can not only enjoy the interesting gameplay and colorful environments of the game made with Blend4Web engine, but also take a look at its inner structures.
A certain fragment of Petigor's program code can serve as an excellent example of creating your own preloader.
At the base level the loading scheme here is the same as the one mentioned above, but it does not use any functions from the preloader module. Instead, the idea of it lies in the synergy of the JavaScript code and HTML and CSS. Let’s see how all this works.
HTML file
An application canvas and a loading screen can be separate HTML elements, and that’s how it is done in Petigor. This allows us to easily control these elements using JavaScript:
<body>
<div id="main_canvas_container"></div>
<div id="preloader_cont">
<div id="prelod_static_path">
<div id="prelod_dynamic_path"></div>
<span>0%</span>
</div>
</div>
</body>
Here, the "main_canvas_container" element is the application canvas, while "preloader_cont" handles the loading screen.
CSS file
Of course, it is always better to describe the style of a web page in a CSS file. I won’t go into details of this process and will simply cite a fragment of Petigor’s code:
div#prelod_static_path {
position: absolute;
left: 50%;
top: 50%;
width: 395px;
height: 134px;
margin-left: -197px;
margin-top: -75px;
}
div#prelod_dynamic_path {
position: absolute;
left: 0;
top: 0;
width: 0%;
height: 100%;
background-image: url(images/loader_bar_line.png);
}
div#preloader_cont {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(images/preloader_bg.jpg);
background-color: #171717;
background-repeat: no-repeat;
background-position: center center;
visibility: hidden;
}
It describes every element that is used to form the loading screen. Take a note of the visibility option of the #preloader_cont block. Using this very option, we can control the showing of the loading screen.
JavaScript file
The loading screen is activated before starting the loading. The getElementById() function returns an HTML element, then we change its visibility style parameter (see the CSS listing).
function load() {
var preloader_cont = document.getElementById("preloader_cont");
preloader_cont.style.visibility = "visible";
m_data.load("filename.json", load_cb, preloader_cb);
}
As the preloader_cb function returns percentage of the completed loading, we can use it to redraw certain parts of the screen.
In the example below, the width parameter of the style describing the loading strip is constantly changing. Its initial value is equal to zero, and it is changing dynamically in accordance with the percentage variable. The numeric value of the loading process is changing in the same way.
Please note that you will have to hide the preloader_cont HTML element after the loading is finished.
function preloader_cb(percentage) {
var prelod_dynamic_path = document.getElementById("prelod_dynamic_path");
var percantage_num = prelod_dynamic_path.nextElementSibling;
prelod_dynamic_path.style.width = percentage + "%";
percantage_num.innerHTML = percentage + "%";
if (percentage == 100) {
var preloader_cont = document.getElementById("preloader_cont");
preloader_cont.style.visibility = "hidden";
return;
}
}
This is just an example of creating your own preloader. Remember that every feature of modern browsers, including HTML5, CSS3, jQuery (complement this list yourselves), are at your service when you are using Blend4Web. It is here where flexibility and power of our favorite framework truly manifests. We wish you luck in creating great preloaders!