В наше время первопроходцем быть трудно, ибо совсем мало осталось областей деятельности для пытливого ума. «Эка, загнул», — скажете вы и, возможно, подумаете о скромности автора. Что ж, отрину философские, занудные тексты и начну повествование на нормальном языке.

Есть 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, выбранный раннее, добавил новые функции. Итак, чтобы включить водичку, нужно выполнить следующие действия:

1. Просчитать UV-координаты для плоскости. В моем случае — это простейшая операция Unwrap (Edit Mode: клавиша U, выбрать Unwrap).
2. Включить прозрачность. Панель Transparency, опция Show Transparency. Тип нужно установить, как Alpha Blend.
3. Включить рефракцию. Опция Refractive.
4. Включить опцию 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. Будьте внимательны, результат работы функции зависит от расстояния водной поверхности до объектов.