Итак, парни. Поднимите руку, кто не знает, что такое прелоадер. Полагаю никто не купился, а если все же чья-то дрожащая рука мелькает, то предлагаю нажать на компе кнопку Reset и полюбоваться на самый настоящий прелоадер.
Для всех остальных, кто ухмыльнулся и проигнорировал мой вредный совет, я продолжу урок.
Удивительное дело, едва программист создал свою программу, как ему хочется внедрить в нее полосу загрузки. А вдруг, кто подумает, что она банально зависла, а не качает терабайт данных из сети Интернет! Знаете, как-то приятно осознавать, что пользователь любуется ползущей полоской, а не проклинает криворуких создателей. Поэтому, давайте приступим к уроку и разберемся с этим самым прелоадером.
Теоретический ликбез
Прелоадер работает в тесной связке с загрузчиком, который в Blend4Web реализуется в виде функции load из модуля data. Обычно структура загрузчика выглядит так:
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) {
}
Здесь функция load генерирует два события, где первое вызывается после окончании загрузки файла, а второе постоянно возвращает числовой результат процесса. Поэтому, основная работа с прелоадером концентрируется именно в обработчике события preloader_cb.
Прелоадер за две секунды
Не верите? Нам понадобятся только эти две команды:
m_preloader.create_preloader();
m_preloader.update_preloader();
Простая «полоска» за две секунды.
С их помощью можно очень быстро и без труда создать простейшую полоску загрузки. Вот рабочий пример:
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);
}
Включаем «форсаж»
Разработчики предусмотрели некоторые опции, которые помогут разнообразить стандартную палитру прелоадера.
Всего несколько опций и экран «расцвёл».
Для этого достаточно определить цвета в функции create_preloader():
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);
}
Режим эксперта
Лучшего результата можно достичь, если сделать свой собственный прелоадер.
Экран загрузки из игры «Сказ о Пятигоре».
Несколько месяцев назад разработчики Blend4Web заявили о релизе браузерной игры «Сказ о Пятигоре». Исходники её открыты и доступны в дистрибутиве SDK. Так что вы можете не только наслаждаться интересным геймплеем и красочностью игры сделанной на Blend4Web, но и познакомиться с внутренней «кухней».
Отличным примером создания собственного прелоадера может служить соответствующий код в Пятигоре.
Основой его является всё та же схема загрузки, приведенная выше. Однако здесь не используются функции модуля preloader. Смысл заключается во взаимодействии кода на JavaScript с HTML и CSS. Давайте рассмотрим, как это работает.
Файл HTML
Канвас приложения и экран загрузки могут быть отдельными html-элементами. Собственно, так и сделано в Пятигоре. Это позволяет с легкостью управлять ими через 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>
Здесь, элемент "main_canvas_container" — канвас приложения, а "preloader_cont" отвечает за экран загрузки.
Файл CSS
Конечно, стиль веб-страницы лучше всего описывать в файле CSS. Я не стану вдаваться в подробности этого процесса, а просто приведу соответствующий кусок кода, взятый из Пятигора:
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;
}
Здесь описывается каждый графический элемент используемый в построении экрана загрузки. Обратите внимание на опцию visibility у блока #preloader_cont. Именно с его помощью можно управлять показом экрана загрузки.
Файл JavaScript
Перед выполнением загрузки активируется экран прелоадера. Функция getElementById() возвращает нужный html-элемент у которого изменяется свойство стиля visibility (см. листинг CSS).
function load() {
var preloader_cont = document.getElementById("preloader_cont");
preloader_cont.style.visibility = "visible";
m_data.load("filename.json", load_cb, preloader_cb);
}
Так как функция preloader_cb возвращает процентное значение от выполненного действия, то этим можно воспользоваться, чтобы перерисовывать соответствующие области экрана.
В примере ниже, изменяется свойство width у стиля, описывающего полосу загрузки. Первоначальное значение его равно нулю, которое, в соответствии с переменной percentage, динамически изменяется. Таким же способом корректируется числовое значение результата работы.
Обратите внимание, что после завершения загрузки потребуется скрыть html-элемент preloader_cont.
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;
}
}
Это всего-лишь пример создания собственного прелоадера. Не забывайте, что используя Blend4Web, к вашим услугам остаются все возможности современных браузерных технологий: HTML5, CSS3, jQuery (дополните этот список сами). В этом и проявляется гибкость и мощь нашего любимого фреймворка. Удачи в создании крутых прелоадеров!
