How can I build my own preloader?
11 January 2016 17:01
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?
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
Hi!
Preloader technique is mentioned a little in this article.
You just need to create a simple preloader during the initialization (in init_cb):
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):
Finally, if you want to add some animation you need to create a special callback, which updates the preloader:
but i still can't figure out what is the roll of "christmas_tree.json" fileThis 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);
}