Новости
IF ... THEN ... ELSE ... Стоп, стоп, не закривайте сторінку браузера! Нам не знадобиться текстовий редактор, компілятор або інші штучки бородатих програмістів. Розробники Blend4Web зробили художникам розкішний подарунок у вигляді візуального редактора логіки.
Тільки миша, трохи кмітливості і ваш проект стане по справжньому інтерактивним. Що ж стосується загадкових слів на початку абзацу - це дійсно зі світу програмування, але я відкрию невеликий секрет - наша програма прекрасно без них обійдеться.
Підготовка до роботи
Blender - надзвичайно потужна програма для створення 3D моделей і анімації. Все, що ви дізналися з моїх уроків тільки вершина айсберга. Ми вивчали ті інструменти, які були нам необхідні для створення презентації, і зараз настав час познайомитися з ще одним.
До складу Blender входить унікальний редактор, який дозволяє конструювати матеріали, текстури або створювати композітінг сцени за допомогою спеціальних блоків, які називаються нодамі (також вузлами). Практично, це виглядає як розміщення окремих функціональних нод в певній послідовності і зв'язування їх між собою. У разі використання Blend4Web цей же редактор застосовується для створення логіки.
Blender пропонує спеціальну заготовку для роботи з редактором нод і вона називається Compositing. Після її вибору, ви побачите нове, незнайоме вікно (рис. 1).
Мал. 1
Щоб використовувати логічні Ноди в своїй програмі, потрібно попередньо виконати деякі дії. По-перше, переключити редактор нод в режим створення логіки. Для цього є спеціальна кнопка на панелі вікна. На малюнку вона розташована в нижній частині і виділена червоним.
По-друге, створити дерево нод. Це комплексна одиниця, яка об'єднує всю вашу логіку презентації. Натисніть кнопку New для створення нового дерева. За замовчуванням, дерево нод отримає назву NodeTree, але, зрозуміло, ви можете його перейменувати.
По-третє, вказати в налаштуваннях Blend4Web ваше нове дерево. Для цього перейдіть у вікно Properties, відкрийте вкладку Scene і включіть опцію Logic Editor. Трохи нижче в випадаючому меню виберіть своє дерево, але якщо воно відсутнє, то натисніть на кнопку поновлення поруч з меню.
Все, тепер ви готові до програмування.
найпростіший конвеєр
Робота над програмою починається з визначення завдань. Спочатку потрібно відповісти на питання «Що буде робити моя презентація?» І лише потім «Як це зробити?». Не поспішайте приступати до справи, без чіткого розуміння цілей роботи!
Отже, наш навчальний додаток буде вміти:
Демонструвати модель, шляхом обертання.
Міняти колір корпусу при натисканні на відповідні кнопки в додатку.
«Включати» смартфон і відображати зображення на його екрані.
Тепер приступимо до роботи ...
Blend4Web пропонує великий набір логічних нод, які можна знайти в меню Add. Всі вони відсортовані за категоріями.
Будь-яка логічна ланцюг завжди починається з Ноди Entry Point, яка розташована в категорії Control Flow. Саме від неї ви будете розгортати свою логіку. Цікаво, що Blend4Web дозволяє використовувати кілька незалежних логічних ланцюжків з окремими вузлами Entry Point. Це дозволяє распараллелить кілька завдань, але в нашому випадку ми обійдемося одним ланцюгом.
Додайте в проект ще одну ноду Switch Select з категорії Control Flow (рис. 2).
Мал. 2
Перш ніж, говорити про призначення Switch Select, давайте спробуємо з'єднати обидві Ноди в єдиний ланцюг.
Зверніть увагу на жовті сфери, що розташовуються по сторонах нод. Це вузлові точки для з'єднання блоків. З лівого боку знаходяться приймаюча мітка, а з правого - передає. Так як Entry Point завжди є першою нодою ланцюга, то вона має тільки мітку Next.
Виділіть лівою кнопкою миші мітку Next у Entry Point. Утримуючи ліву кнопку миші, перемістіть з'явився провідник до мітки Previous Ноди Switch Select. Відпустіть кнопку миші при досягненні цієї позначки. Таким чином створюються зв'язку між нодамі (див. Рис. 3).
Ви можете розірвати цей зв'язок, від'єднавши провідник у мітки Next. Або утримуючи клавішу CTRL, проведіть курсором-ножем по непотрібному провіднику.
Мал. 3
Нода Switch Select найбільш часто використовувана з усього набору вузлів. З її допомогою ви можете відстежити виділення мишею об'єкта в сцені і, відповідно, передати управління наступній ноді. Для цього необхідно вибрати потрібний об'єкт з меню Object. Це повинен бути корпус телефону. У моєму проекті він має назву Phone.
Blend4Web має безліч зручних заготовок, що значно полегшують створення презентацій. Одна з них - можливість автоматичного створення окантовки у об'єкта при його виділенні. Щоб ця функція запрацювала, виділіть потрібний об'єкт в сцені (Phone), відкрийте панель Object (вікно Properties) і перейдіть до вкладки Selection and Outlining. Увімкніть опції, як на малюнку 4.
Мал. 4
Ви можете встановити потрібний колір для окантовки в загальних налаштуваннях Blend4Web (рис. 5).
Мал. 5
Отже, давайте міркувати. Управління передається від Entry Point до Switch Select. Програма очікує клацання мишею по будь-яких об'єктів і, якщо це Phone, управління переходить до наступної, приєднаної до виходу Hit, ноді (див. Рис. Вище).
Але є один нюанс використання цього вузла, який потрібно знати. Нода Switch Select очікує дію користувача і, або передає управління далі, або просто припиняє роботу. Тому варто «підказати» ноді, що їй робити в разі виділення не того об'єкта. Подивіться на малюнок 5. Нода Switch Select має ще один вихід з назвою Miss. Саме сюди буде передаватися управління при виборі некоректного об'єкта. Тому цей вихід потрібно «повернути» на вхід Switch Select.
Додайте в сцену два нодів об'єкта Reroute з категорії Layout. Це допоміжні вузли, які зазвичай використовують для більш зручного створення зв'язків між нодамі. Подивіться на малюнок нижче і зробіть так само.
Мал. 6
Тут ще одна нова нода Stop Animation (категорія Animation). Її призначення в відключенні анімації у об'єкта зазначеного в поле Object. На минулому уроці ми вивчали анімацію в Blender і створили постійне обертання для Empty. Саме цей об'єкт вкажіть для Ноди Stop Animation.
Тепер наша логічний ланцюжок вміє розпізнавати клік мишею по моделі телефону і відключати анімацію обертання.
Наша поточна задача в наступному: прибрати підставку за межі екрану, розгорнути телефон «обличчям» до камери і трохи його наблизити.
Створіть самостійно анімацію відведення підставки за межі екрану камери, наприклад вниз. Для цього використовуйте ключі Location.
Не забувайте, що до кожного уроку додаються вихідні файли і ви можете підглянути в них, як це зроблено.
Анімація підставки не повинна стартувати автоматично при запуску програми. Ми це зробимо за допомогою спеціальної Ноди Play Animation з групи Animation (рис. 7).
Мал. 7
Нода Play Animation запускає анімацію у об'єкта зазначеного в поле Object. Поле Anim Name призначене для зазначення назви анімації (якщо у даного об'єкта їх є кілька). Але в нашому випадку підставка має тільки одну анімацію, тому залиште це поле порожнім.
Меню Behavior дозволяє вибрати поведінку після програвання анімації. Встановіть його як Finish Stop. Остання опція Do Not Wait дозволить не чекати завершення анімації, а відразу передасть управління наступній ноді.
Отже, тепер наша логічний ланцюг вміє: «слухати» клік миші, зупиняти обертання телефону і прибирати підставку за межі екрану. За планом у нас ще розворот апарату «обличчям» до камери.
У наборі логічних блоків є відмінна нода, за допомогою якої можна змінювати поточні параметри об'єкта: Location, Rotation, Scale. По суті, ви можете управляти анімацією об'єкта за допомогою цієї ноди!
Знайомтеся - нода Transform Object.
Мал. 8
Дуже потужний інструмент для створення анімації за допомогою логіки! Як завжди, ви повинні вказати об'єкт для застосування. У нашому випадку - це корпус телефону.
Вам потрібно вказати кінцеві параметри трансформації об'єкта. Координати розташування телефону можна скопіювати з панелі Transform (гаряча клавіша N), так як вони не змінюватимуться. Параметри Rotation і Scale - ось, що нас цікавить!
У моїй тестовій сцені, щоб апарат дивився «обличчям» в камеру, його Rotation по всіх осях повинен бути нульовим. У вас, можливо, буде не так. Спробуйте експериментальним чином розгорнути об'єкт так, як вам хочеться, і скопіюйте параметри обертання в ноду.
Параметр Scale вказує на масштаб об'єкта. За замовчуванням значення дорівнює 1, тобто ніяких змін нода виконувати не стане. Для себе я підібрав значення 1.5, як найбільш оптимальне.
Параметр Duration відповідає за швидкість виконання анімації в секундах. Думаю, пари секунд цілком достатньо.
А ось повна логічний ланцюжок, зроблена на цьому уроці (рис. 9).
Мал. 9
Всього п'ять нод і наша сцена стала інтерактивною. Як бачите, програмувати для Blend4Web просто. Візуальний редактор логіки дозволяє творити насичені діями презентації будь-якій людині, навіть дуже далекому від програмування.
Посилання на інтерактивну сцену.
Оновлені вихідні файли ви можете знайти в Blend4Web SDK, починаючи з релізу 17.01, як у версії CE, так і у версії PRO. Вони знаходяться в директорії: blend4web / blender / tutorials / basic / for_beginners.
Спочатку потрібно відповісти на питання «Що буде робити моя презентація?» І лише потім «Як це зробити?