Управление проектами¶

Мастер создания проектов¶

Мастер создания новых проектов входит в состав приложения Project Manager и вызывается по ссылке [Create New Project] на главной странице этого приложения.

Кнопка [Back to Projects] используется для возвращения на главную страницу менеджера проектов, а кнопка [Help] вызывает справку.

1. Имя проекта. Текущим именем будут названы директории в “projects/имя_проекта”, “projects/имя_проекта/assets”, “projects/имя_проекта/blender” и “projects/имя_проекта/build”. Для лучшей совместимости рекомендуется использовать буквы и нижнее подчеркивание.

2. Название проекта. Это имя будет показываться в заголовке веб-браузера.

3. Имя автора проекта.

4. Добавить шаблоны приложения. В директорию проекта “projects/имя_проекта” будут добавлены стандартные шаблоны приложения: html-файл, css-файл, js-файл.

5. Добавить шаблоны сцены. В директорию “projects/имя_проекта/assets” будет добавлен стандартный json-файл; в директорию “projects/имя_проекта/blender” - blend-файл.

6. Использовать библиотеку материалов. Blend-файлы библиотеки материалов будут скопированы в директорию проекта “blender/project_name”, файлы медиаресурсов - в директорию “projects/project_name/assets”.

7. Скопировать скрипт менеджера проектов. Скрипт project.py будет скопирован в директорию проекта.

8. Тип собираемого проекта. Здесь возможны варианты:

   • Copy - файлы движка прямо копируются в папку приложения из каталога deploy/apps/common/.

     При сборке проекта компилируются только файлы приложения, но не движка (т.е. сам движок не может быть модифицирован);

   • Compile - исходники движка компилируются вместе со скриптами приложения.

     Этот вариант применяется, если необходимо внести изменения в исходный код самого движка;

   • Command - this project type is similar to Compile, but it also gives you an option to set command for compiling the application. Environment variables are also supported.

     Примечание

     Variables like NODE, NPM or PYTHON refer to the corresponding files in the Blend4Web SDK.

   • None - движок не копируется в директорию проекта, также менеджер проектов не производит никаких действий при сборке проекта. Разработчик приложения должен самостоятельно производить все необходимые операции;

   • Web Player JSON - json-файл, находящийся в проекте, запускается при помощи веб-плеера в составе SDK;

   • Web Player HTML - проект состоит из html-файла, внутри которого находятся все необходимые ресурсы.

9. Уровень оптимизации javascript.

   • “Simple” - в коде заменяются имена переменных;

   • “Advanced” - производится оптимизация кода;

   • “Whitespace Only” - в коде удаляются только пробелы.

10. URL-атрибуты Веб-плеера. Эта вкладка доступна только если параметр Engine Binding Type имеет значение Web Player JSON или Web Player HTML.

    • “Show FPS” - включает счётчик кадров в секунду в правом верхнем углу окна веб-плеера.

    • “Auto-rotate camera” включает автоматическое вращение камеры сразу после загрузки сцены.

    • “Disable social network buttons” используется для отключения кнопок социальных сетей на панели управления.

    • “Background transparency” используется для установки прозрачности области отрисовки.

    • “Use compressed textures” используется для включения загрузки уменьшенных текстур и текстур с компрессией (формат DDS).

    • “Use compressed textures” используется для включения загрузки уменьшенных текстур и текстур с компрессией (формат PVR).

    • “Use min capabilities”: при включении этой опции веб-плейер запускает приложение так, как если бы оно работало на системе с низкой производительностью (например, на мобильном устройстве).

    • “Use gzip compression” включает использование компрессии gzip.

Создание приложений для Веб-плеера¶

Главное преимущество приложений для Веб-плеера - простота размещения подобных приложений на веб-страницах.

Создать приложение для Веб-плеера несложно. Для этого достаточно при создании нового проекта выбрать опцию Web Player JSON или Web Player HTML на вкладке Application Type.

Проекты для веб-плеера обладают практически тем же набором параметров, что и проекты других типов. Единственное исключение - группа параметров, известная как Web Player Params.

Настройки проекта¶

Эта вкладка доступна только в том случае, если включена опция Web Player JSON или Web Player HTML. Перечисленные здесь параметры по сути представляют собой URL-атрибуты, которые веб-плеер будет использовать при запуске проекта.

Информация о проекте¶

Эта страница содержит информацию о выбранном проекте и доступна по ссылке [info] рядом с его названием.

Редактирование проекта¶

По ссылке [edit] рядом с названием проекта доступен простой веб-интерфейс для редактирования файлов проекта.

Левая часть окна редактора содержит список всех .html-, .css- и .js-файлов, находящихся в директории проекта (projects/<мой_проект>). Правая часть содержит текст выбранного файла (по умолчанию файл не выбран) с подсвеченным синтаксисом.

Новые файлы .html, .js и .css могут быть добавлены в директорию проекта при помощи кнопки [New File].

Для сохранения выбранного файла используются кнопки [Save] и [Save As...] в нижней части страницы.

Конфигурационный файл проекта¶

Веб-интерфейс, позволяющий просматривать и изменять параметры проекта после его создания.

Параметры на этой странице включают все параметры, доступные при создании проекта, а также несколько дополнительных. Некоторые из параметров доступны только для чтения (и не могут быть изменены после того, как проект создан).

Импорт проектов¶

Средства импорта проектов вызываются по ссылке [Import Project(s)].

Нажатие на эту ссылку вызывает стандартный диалог открытия файла, где можно выбрать файл проекта, который требуется импортировать.

Экспорт проектов¶

Окно экспорта проекта вызывается по ссылке [Export Project(s)].

Размещение проекта¶

После завершения работы над проектом, выберите опцию deploy project на панели Operations, на главной странице менеджера проектов. После этого проект будет экспортирован и запакован в архив.

Этот архив затем может быть загружен при помощи кнопки Download и сохранён в папку, которую ваш браузер использует для хранения загруженных файлов. Следует заметить, что, в зависимости от размера архива, загрузка может быть достаточно долгой.

Чтобы разместить проект на веб-странице, распакуйте архив и загрузите файлы, находящиеся в нём на веб-сервер с помощью FTP, SSH или любого другого протокола, поддерживаемого сервером.

После этого приложение типа Web Player HTML можно разместить на веб-странице с помощью контейнера iframe. Ниже приводится пример HTML-кода, который можно использовать для этого:

<!DOCTYPE html>
<html>
<head>
    <title>An Example Application</title>
</head>
<body>
    <iframe width="800" height="500" allowfullscreen src="/projects/myproject/myproject.html"></iframe>
</body>
</html>

Размещение JSON-проекта происходит почти так же, но вместо одного HTML-файла используется комбинация веб-плеера и JSON-файла, содержащего саму сцену.

<!DOCTYPE html>
<html>
<head>
    <title>Another Example Application</title>
</head>
<body>
    <iframe width="800" height="500" allowfullscreen src="/myproject/webplayer.html?load=/projects/myproject/myproject.json&show_fps"></iframe>
</body>
</html>

Зависимости¶

Система управления проектами работает на всех операционных системах, однако для некоторых операций может потребоваться установка дополнительных зависимостей. Проверить, установлены ли необходимые зависимости, можно с помощью команды:

./project.py check_deps

Для пользователей ОС Windows:

python project.py check_deps

Для работы скрипта необходимо установить java и записать ее в переменную среды PATH.

При конверсии ресурсов также используется набор внешних приложений, описанных в соответствующем разделе.

Список проектов¶

Список всех проектов в SDK доступен посредством следующей команды:

python3 project.py -p myproject list

Структура проекта¶

Структура проекта, озаглавленного my_project и размещённого в директории ./projects (в корне директории SDK), выглядит следующим образом:

blend4web/
    projects/
        my_project/
            assets/
                my_project.json
                my_project.bin
            blender/
                my_project.blend
            build/
                my_project.html
                my_project.min.css
                my_project.min.js
            .b4w_project
            my_project.js
            my_project.css
            my_project.html

Как видно, это приложение состоит из 3 различных директорий:

1. my_project/assets. Содержит медиафайлы (текстуры, звуки, а также .bin- и .json-файлы) сцен проекта.

2. my_project/blender. Содержит .blend-файлы сцен проекта.

3. my_project/build. Содержит файлы собранного приложения.

Файл проекта .b4w_project, а также .js-, .html`- и .css-файлы располагаются в корне каталога my_project/.

Кроме того, операция развёртывания (deploy) может создавать ещё одну директорию, однако она обычно располагается за пределами SDK и её название и расположение зависит от структуры директорий на конечном сервере.

Конфигурационный файл проекта (.b4w_project)¶

Конфигурационный файл проекта включает всю необходимую информацию о проекте, в том числе его заголовок, метаданные, каталоги, а также информацию для сборки и размещения приложения.

Конфигурационный файл проекта можно редактировать вручную, но более удобным будет использование интерфейса редактирования проекта.

[info]
author = Blend4Web
name = my_project
title = MyProject
icon =

[paths]
assets_dirs = projects/my_project/assets;
blend_dirs = projects/my_project/blender;
blender_exec = blender
build_dir = projects/my_project/build
deploy_dir =

[compile]
apps =
css_ignore =
engine_type = external
ignore =
js_ignore =
optimization = simple
use_physics =

[deploy]
assets_path_dest = assets
assets_path_prefix = assets
ignore =
override =

Это стандартный конфигурационный INI-файл, состоящий из разделов, включающих параметры и их значения.

Создание проекта¶

./project.py init my_project

Команда создает проект с указанной именем в текущей директории. По умолчанию в директории проекта будет находиться только конфигурационный файл.

Доступные опции:

• -A | --copy-app-templates (необязательная) создает в директории проекта стандартные шаблоны приложения (<имя проекта>_dev.html, <имя проекта>.js, <имя проекта>.css).

• -C | --author (необязательная) записывает в конфигурационный файл имя автора или компании.

• -o | --optimization (необязательная) записывает в конфигурационный файл тип оптимизации скриптов.

• -P | --copy-project-script (необязательная) создает скрипт project.py в директории проекта.

• -S | --copy-scene-templates (необязательная) создает в директориях deploy/assets/<имя проекта> и blender/<имя проекта> (необязательная) стандартные шаблоны сцены (<имя проекта>.json/.bin и <имя проекта>.blend соответственно).

• -T | --title (необязательная) записывает в конфигурационный файл заголовок проекта. При сборке он будет добавлен в html-тэг <title>.

• -t | --engine-type (необязательная) записывает в конфигурационный файл тип собираемого приложения.

Пример:

./project.py init -AS -C Blend4Web -o simple -T MyProject -t external my_project

Эта команда создаст директорию my_project, внутри которой будут располагаться следующие файлы: my_project.js, my_project.css, my_project_dev.html и .b4w_project.

Файл .b4w_project будет выглядеть следующим образом:

[info]
author = Blend4Web
name = my_project
title = MyProject
icon =

[paths]
assets_dirs = projects/my_project/assets;
blend_dirs = projects/my_project/blender;
blender_exec = blender
build_dir = projects/my_project/build
deploy_dir =

[compile]
apps =
css_ignore =
engine_type = external
ignore =
js_ignore =
optimization = simple
use_physics =
use_smaa_textures =
version =

[deploy]
assets_path_dest = assets
assets_path_prefix = assets
ignore =
override =

Разработка нескольких приложений в составе проекта¶

В проекте может содержаться несколько приложений. Для этого необходимо в конфигурационном файле указать соответствующие HTML-файлы через точку с запятой:

...
[compile]
apps = myapp1;myapp2;
...

Если поле apps пусто, то каждый html файл из директории проекта будет считаться отдельным приложением.

Сборка проекта¶

python3 project.py -p my_project compile

Собирает проект в директории projects/my_project/build.

Доступные опции:

• "-a | --app" (необязательная) указывает на HTML-файл, относительно которого будет собираться приложение для проекта.

• "-c | --css-ignore" (необязательная) добавляет в исключения стили, которые не будут скомпилированы.

• "-j | --js-ignore" (необязательная) добавляет в исключения скрипты, которые не будут скомпилированы.

• "-o | --optimization" (необязательная) используется для указания метода оптимизации js-файлов. Доступные варианты: whitespace, simple (по умолчанию) и advanced.

• "-v | --version" добавляет версию к адресам скриптов и стилей.

Требования, накладываемые компилятором:

• В корне директории должен находится единственный html-файл, если не указана опция -a.

• Скрипты и стили могут находиться как в корне проекта (приложения), так и во вложенных папках.

Автоматический экспорт blend-файлов¶

python3 project.py -p my_project reexport

Повторно экспортирует blend-файлы в форматах JSON и HTML.

Доступные опции:

• "-b | --blender-exec" путь к исполняемому файлу blender.

• "-s | --assets" определяет директорию с ресурсами сцены.

Конвертация ресурсов¶

python3 project.py -p my_project convert_resources

Конвертирует внешние ресурсы (текстуры, звуковые и видео-файлы) проекта в альтернативные форматы для обеспечения кроссбраузерности и кроссплатформенности.

Доступные опции:

• "-s | --assets" определяет директорию с ресурсами сцены.

Более подробно о процессе конвертации ресурсов сказано в соответствующем разделе.

Развертывание проекта¶

python3 project.py -p my_project deploy DIRECTORY

Сохраняет проект во внешнюю директорию со всеми необходимыми зависимостями.

Доступные опции:

• "-e | --assets-dest" задаёт директорию для файлов ресурсов (по умолчанию “assets”)

• "-E | --assets-prefix" задаёт URL-префикс для файлов ресурсов (по умолчанию “assets”)

• "-o | --override" удаляет директорию, если она существует.

• "-s | --assets" записывает в конфигурационный файл путь к файлам ресурсов.

• "-t | --engine-type" (необязательная) записывает в конфигурационный файл тип движка.

Удаление проекта¶

python3 project.py -p my_project remove

Удаляет проект. Удаляемые директории берутся из конфигурационного файла.

Обновление приложений на новые версии SDK¶

В процессе обновления на новые версии движка чаще всего возникает две проблемы:

1. Несоответствие модулей новой и старой версии движка.

2. Несоответствие старых и новых API движка.

Для того, чтобы обновить список модулей, подключаемых в необфусцированной версии приложений, необходимо перейти в директорию с исходными файлами приложений apps_dev/my_project. Затем необходимо вызвать скрипт, генерирующий пути к файлам движка:

python3 ../../scripts/mod_list.py

Для пользователей ОС Windows:

python ..\..\scripts\mod_list.py

В консоли появится список модулей, которые необходимо скопировать и вставить в главный HTML-файл:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="../../src/b4w.js"></script>
    <script type="text/javascript" src="../../src/anchors.js"></script>
    <script type="text/javascript" src="../../src/animation.js"></script>
    <script type="text/javascript" src="../../src/assets.js"></script>
    <script type="text/javascript" src="../../src/batch.js"></script>
    <script type="text/javascript" src="../../src/boundings.js"></script>
    <script type="text/javascript" src="../../src/camera.js"></script>
    . . .
</head>

Несоответствие API решается рефакторингом кода приложения. Все изменения подробно описываются в замечаниях к релизам.