У наш час першопрохідцем бути важко, бо зовсім мало залишилося областей діяльності для допитливого розуму. «Ека, загнув», - скажете ви і, можливо, подумаєте про скромність автора. Що ж, відрину філософські, занудні тексти і почну оповідь нормальною мовою.
Є WebGL - універсальна технологія для веб. Є Blend4Web - платформа для роботи з технологією WebGL. Є документація і приклади роботи з цією платформою, але зовсім немає ігор.
«Зовсім?»
«На жаль, зовсім».
А може я погано шукав? Не знаю, але хочу покласти край цій несправедливості і створити Першу гру. Першу не для себе, адже у мене вже є три комерційні гри на Unity. Першу на цьому движку.
Я не буду особливо поширюватися з приводу вибору движку. Статті на цю тему вже були написані, а списи в словесній перепалці зламані. Я просто почну робити і розповідати про хід роботи.
Як ви думаєте, з чого починається гра? Тільки не кажіть, що з ідеї. Особисто я вважаю за краще з'ясувати корисність нового проекту для людей і для себе на самому ранньому етапі. І що ж мені потрібно отримати: гроші, досвід, піар чи все відразу? Так хочеться вигукнути - всього і побільше! Але, на жаль, за двома (або вже трьома?) зайцями погонишся...
Останнім часом мене цікавлять браузерні ігри. Мобільні я робив, PC-варіант теж у скарбничці є, а ось для веб якось ще немає. На жаль, мій головний інструмент Unity в цьому допомогти зараз не може. Тому я зупинився на Blend4Web.
Ось тільки вивчати його я бажаю на реальному робочому проекті. Нехай нескладному, але дозволяє мені здобути настільки дорогоцінні експи.
Головне - це досвід. А досвід найкраще досягається у відкритості. Тому гасло мого проекту: «Open Source!». Та я відкрию скрипти, моделі, сцени для вільного використання. І я, сподіваюся, зворотна віддача значно підвищить мій професіоналізм.
Показ завдання
Є така популярна тема, як «fish hunter». Відкрийте Google Play і ви побачите сотні ігор схожої тематики. Азіати навіть зістряпали ігровий автомат і діти активно «гасять» нещасних риб. Ось і я хочу створити ще один клон подібної гри. Але не простий, а з родзинкою. Свого часу я розповім про все. А поки - до роботи.
У кожного розробника є свій підхід до першого етапу роботи. Хтось робить прототип, хтось відразу ваяє головних героїв, а я ж почну з ігрової сцени. Моє перше завдання - це симпатична заготовка, така собі «ванночка» наповнена водою, де майбутні мисливці будуть жадібно вишукувати рибок. Що мені потрібно зробити на цьому етапі:
- красиве піщане дно з відблисками від води;
- реалістичну воду з заломленням.
І вже потім, я почну наповнювати цю сцену всілякими декораціями: від черепашок до водоростей.
Як ви вже зрозуміли, основна робота буде йти в Blender. Я не буду торкатися питання встановлення і налаштування SDK Blend4Web - це зовсім просто і на сайті розробників все «розжовано». Важливо тільки виконати деякий ряд рекомендацій для спрощення роботи.
По-перше, робочі проекти Blender повинні бути збережені в папці SDK/Blender/Назва проекту.
По-друге, в профілі редактора потрібно замінити стандартний Blender Render на Blend4Web. У результаті зникнуть функції Blender, які не підтримуються рушієм.
І по-третє, експорт JSON повинен здійснюватися в теку SDK/Deploy/Assets/Назва проекту.
Одна маленька хитрість. Ви ж не забули, що кінцева платформа - це веб? Для тестування потрібен сервер, хоча б локальний. Так от, після установки Blend4Web і при відкритому Blender автоматично запуститься сервер за адресою localhost:6687. Для прискорення роботи розробники пропонують при експорті встановити галочку в одній непримітній опції Run in Viewer. Це змусить програму запустити програму відразу після експорту.
Є ще одне приємне доповнення - програма-переглядач з можливістю налаштування параметрів движку прямо у вікні браузера. Якраз ця програма і стартує при включенні параметра Run in Viewer. Вона просто незамінна для точної підбудови матеріалів або інших компонентів сцени в реальному WebGL. Адже Blender не повністю відображає всі махінації з налаштуваннями движку.
Теоретична частина закінчена, переходимо до практики.
За моїми планами, гравець повинен бачити картинку зверху. Камера перспективна і нерухома. Джерело світла в одному положенні. Сцену можна представити у вигляді шару:
- Вода.
- Плаваючі створіння (риби).
- Повзаючі по дну тварі (краби, морські зірки) і декорації.
- Власне, саме дно.
З усього цього, мені зараз потрібно зробити два пункти - перший і останній.
Здається, я чую вигуки: «І все?!». Тверде «Так», адже я хочу це зробити красиво. Заодно і подивимося, а чи можливо це взагалі засобами Blend4Web.
Як ви думаєте, що зображено на малюнку? Відповідь проста - базова сцена. Намітаний погляд виділить камеру, джерело світла та дві горизонтально розташовані площини. Це і є майбутні земля і вода.
Виглядає круто, хоча б тому, що це ознака початку роботи. Адже починати завжди ой як складно. Закинув у сцену пару примітивів і радієш - 0.00001% вже зроблено.
Був час, коли користувачі Unity Free облизувалися на якісну водичку версії Pro. В Unity були заготовки з характерними назвами Water (Simple) і Water (Pro). Зараз вони змішалися і доступні всім.
У Blend4Web спочатку такого поділу немає і навіть у вільній версії доступні всі функції платформи. І це мене радує, оскільки для проекту я використовую безкоштовний SDK. Так от, Blend4Web пропонує свій спосіб створення водних поверхонь. Не потрібно паритися з написанням скриптів або шейдерів - достатньо налаштувати матеріал.
Подивіться на цей скріншот. Тут ніщо інше, як стандартна панель матеріалу Blender. Правда, вона виглядає трохи незвично, адже профіль Blend4Web, обраний раніше, додав нові функції. Отже, щоб увімкнути водичку, потрібно виконати такі дії:
- Прорахувати UV-координати для площини. У моєму випадку - це найпростіша операція Unwrap (Edit Mode: клавіша U, обрати Unwrap).
- Увімкнути прозорість. Панель «Transparency», параметр Show Transparency. Тип потрібно встановити, як Alpha Blend.
- Увімкнути рефракцію. Параметр Refractive.
- Увімкнути параметр Water.
До речі, налаштувань водички великий натовп. На скріншоті показано аж ніяк не всі параметри. Розробники прикрутили можливість створення підводного світу, прибережної піни, хвиль і багато чого іншого. Так як мені в моєму проекті це не потрібно, то відсилаю цікавляться офіційною довідкою.
Однак, водичка «не заграє», якщо не додати текстуру до матеріалу. Це повинна бути Normal Map, що імітує водну горобу. В інтернеті їх великий безліч, можна зробити і самому, але я вирішив не витрачати час і взяв текстуру з прикладу в SDK платформи.
Причому, що цікаво, таких текстур можна встановити цілих 4 штуки (фактично файл повинен бути одним і тим же). Тільки для кожної з них потрібно змінити її масштаб (панель Texture у закладці Mapping). Я так розумію, що саме накладення різномасштабних текстур і викликає ефект водної поверхні. І так, оскільки це Normal Map, то потрібно в параметрах Influence відключити Diffuse і включити Normal. У підсумку шляхом нескладних махінацій можна отримати ось таку картинку (див. рис.). Звичайно, це виглядає примітивно, але анімована водичка з переломленням в Blend4Web є.
Водне дно. Особисто у мене асоціація з піском, напевно, тому що виріс на морі. Всякі черепашки, медузи, русалки - ой, щось мене не туди понесло. Загалом, робимо піщане дно.
У примітивному розумінні - це площина з двома текстурами: власне піском і похідний від нього Normal Map. В принципі, робота з текстурами для Blend4Web нічим не відрізняється від стандартної функціональності Blender. Важливо лише враховувати фізичне знаходження файлів, а повинні вони розташовуватися в теці SDK/Deploy/Assets/Назва проекту. Звичайно, ви можете запхати їх куди завгодно, але Blend4Web має деякі інструменти автоматизуючі і оптимізують фінальний білд.
Розгляну створення піску дуже коротко, бо подібної інформації по роботі з текстурами в Blender ставок-ставки:
- Прорахувати UV-координати для площини (та ж операція, що і для води);
- Додати до текстурного слота основну текстуру. Її можна залишити без налаштування;
- Додати до сліду текстурний слот другу текстуру і встановити параметри в Influence, як для водної Normal Map.
В принципі поки роботу з дном відкладемо і звернемо увагу на камеру. Якщо ви не просто читаєте мій урок, а намагаєтеся щось зваяти, то напевно вже пробували експортувати сцену. Крутили, вертіли її в перегляді, з упоєнням розглядаючи неказисті площини. Ось тільки в грі такого не передбачається. Камера повинна знаходиться зверху і бути статичною. Зауважте, що обертання камери - це не вбудована функція перегляду. Він в точності виконує лише ті параметри, що закладаються при створенні сцени, а тому звернемося до параметрів камери.
Це стандартна панель налаштувань камери з деякими вкрапленнями від Blend4Web. Зараз нас цікавить вкладка Camera Move Style. За замовчуванням там стоїть Target, тобто стеження за певною точкою в просторі, але якщо вибрати режим Static, то отримаємо статичну картинку. Зауважте, що розробники створили аж 4 варіанти поведінки камери, тим самим полегшуючи життя простим ігроділам.
Але повернемося до нашого дна. Уже пробували погратися за моїми рецептами? Рефракція, прозорість, хвилі і все ж чогось не вистачає. Немає якогось життя.
Якщо знайти якесь відео морського дна, то побачите характерні світлові переливи. Своєрідний рух світлових плям реально зачаровує і я хочу таке ж у своїй грі. Такий ефект отримав назву каустика.
В принципі, Blend4Web підтримує каустику для підводних об'єктів. Це досягається шляхом додавання ще однієї текстури до води, але вже процедурної.
Додайте в новий слот текстуру Voronoi, підкрутіть її параметри хоча б як в офіційній довідці і ви отримаєте каустику. Приблизно так, коротко, звучить офіційна довідка. Але не тут-то було. Я бився над цим завданням довгий час, поки не додумався, що каустика-то повинна відображатися на самих об'єктах, а не на воді. Виявилося, що налаштування каустики складається з двох етапів:
- Налаштування процедурної текстури Voronoi для води.
- Включення параметра Caustics персональне для кожного об'єкта дна (панель Object, група Special Effects).
Якщо мою статтю читають розробники Blend4Web, то хочу звернутися: «Хлопці, допрацюйте свою документацію!». У моєму випадку, додайте хоча б посилання зі сторінки з каустикою на сторінку з описом об'єктів.
Повернемося до сцени. Залишилося трохи змінити налаштування середовища. Щоб об'єкти були не дуже темними, потрібно увімкнути навколишнє світло. Це можливо на панелі World (параметр Environment Lighting). Зверніть увагу, що навколишнє світло розраховується від поточного білого. Мене це не влаштовує і віддаю перевагу своєму відтінку.
Я вибрав з меню Environment Color пункт Sky Color і встановив потрібний колір трохи вище в налаштуваннях Horizon Color (увімкніть параметр Render Sky). Скріншот приводити не буду, так як цей етап найпростіший. Зате похвалюся кінцевим результатом (раджу подивитися білд, посилання на який трохи нижче. «Жива» картинка симпатичніша).
Не шедеврально, але працюючий варіант. Звичайно параметри світла, води, оточення ще не раз будуть коригуватися, і все ж, ця частина гри вже зроблена.
Післямова
Я впорався з поставленим завданням першого етапу і заклав першу цеглинку у фундамент проекту. Поки особливих труднощів не було. На жаль, я ще не встиг підготувати сторінку з проектом на своєму сайті і нормально оформити репозиторій на bitbacket.
Збірка
Вихідники
А до творців Blend4Web у мене є ще одне прохання: зробіть швидку кнопку для експорту сцени в JSON. Трохи напружує відкривати меню, вибирати потрібні параметри. Під час роботи над проектом доводиться дуже часто експортувати сцену для тестування. Така кнопка збереже чимало часу для розробника.
UPDATE
У новій версії рушія 15.07 змінено підхід до створення каустики. Тепер не потрібна процедурна текстура voronoi. На панелі Water з'явилася область Caustic. Будьте уважні, результат роботи функції залежить від відстані водної поверхні до об'єктів.
