Forum

How can I build my own preloader?

11 January 2016 17:01 #6447
Hi guys :)

How can I build my own preloader?

what i understand is put the code like below to my project js file.. but i still can't figure out what is the roll of "christmas_tree.json" file and how to create it. I found the blend file and opened but I can't find anything related to the preloader scene.

Can you give me some hint or link that I can look?

"use strict";

b4w.register("new_year_main", function(exports, require) {


var m_preloader = require("preloader");


var PRELOADING = true;



function init_cb(canvas_elem, success) {

if(!success) {
console.log("b4w init failure");
return;
}
m_app.enable_controls();

if (PRELOADING)
m_preloader.create_simple_preloader({
bg_color:"#00000000",
bar_color:"#FFF",
background_container_id: "background_image_container",
canvas_container_id: "canvas3d",
preloader_fadeout: true});



load();
}

function load() {
if (DEBUG)
_assets_dir = "../../deploy/assets/new_year/";
else
_assets_dir = "../../assets/new_year/";
var p_cb = PRELOADING ? preloader_cb : null;
m_data.load( _assets_dir + "christmas_tree.json", load_cb, p_cb, true);
}


11 January 2016 19:09 #6454
Hi!

but i still can't figure out what is the roll of "christmas_tree.json" file
This file is a result (with "christmas_tree.bin") of exporting "christmas_tree.blend". Preloader isn't related to a blend file. It is usually created with js/css/html coding.

Preloader technique is mentioned a little in this article.

You just need to create a simple preloader during the initialization (in init_cb):
m_preloader.create_simple_preloader({
            bg_color:"#00000000",
            bar_color:"#FFF",
            background_container_id: "background_image_container",
            canvas_container_id: "canvas3d",
            preloader_fadeout: true});


It also requires an html-element (with id specified in "background_container_id" option) as a container for you preloader with some css rules applied (see new_year_dev.html and new_year.css):
<div id="background_image_container"></div>

#background_image_container {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(icons/background.png) 100% 100% no-repeat;
    background-position: center;
    background-size: cover;
}


Finally, if you want to add some animation you need to create a special callback, which updates the preloader:

...
m_data.load( _assets_dir + "christmas_tree.json", load_cb, preloader_cb, true);
...

function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}
Blend4Web Team
12 January 2016 04:10 #6462
Thank you very much! :) it works perfectly
 
Please register or log in to leave a reply.