Живая открытка под Новый год

Раз, два и готово… Не верите? Правильно, и я не верил, хотя получилось. Всё началось с программирования. Да, да, вы не ослышались — именно с кода. Я инди-разработчик игр или, по-крайне мере, считаю себя таковым, и просто обязан быть человеком-оркестром: программировать, лепить 3D, рисовать. Хотя действительность не столь радужна. Да, я могу написать код и он будет работать, но истинный программист при взгляде на листинг поседеет. Я могу моделировать, работать с текстурами, звуками, но только на том уровне, что необходим. Всё упирается во время. Должно быть быстро и качественно в отведенных рамках.

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

Все началось с тупика. Нужно было решить одну программную задачу для разрабатываемой игры. Имеющихся знаний не хватало и пришлось залезть в глубь API игрового движка. Чтобы понять и освоить новый материал, требовался простой проект для закрепления. Понятное дело, что текущий игровой проект для этого не годился — очень легко всё испортить. Но была модель елочки, шел снежок за окном, настроение было предновогоднее, хотелось настоящего  праздника… “Раз, два, три — елочка гори!”. Волшебные слова из детства. Ах, как иногда хочется сказки!

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

Когда мне кто-то говорит, что программы Open Source уступают в качестве проприетарным аналогам или чрезвычайно раскрученным брендам, мне хочется рассмеяться. Каждый выбирает себе по потребностям и возможностям. Я знаю Photoshop, но использую Gimp, знаю Illustrator, но предпочитаю Inkscape. И, разумеется, Blender. Мне не нужен 3Ds Max, чтобы воплотить задуманное. Я полностью свободен от коммерческих приложений.

И эта маленькая зимняя игра-открытка была создана с помощью Blender, Gimp, Inkscape. Ах да, к этой троице нужно присоединить Blend4Web, движок с помощью которого воплотилось задуманное.

Я знаю, здесь много профессионалов, но возможно мои маленькие советы по созданию собственной новогодней сказки кому-нибудь пригодятся?

Открытка должна быть красивой, но легкой. Интересной, но опять-таки легкой, звучащей и снова легкой! Да, никто не будет ждать, когда подгрузятся десятки мегабайт. Лично я бы не стал.

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

Модель ёлочки самая обычная, низкополигональная, где вместо реальных веток с иголками всего-лишь текстура. Вот только была одна проблема с ней — вечнозеленная она. И тут на помощь приходит Gimp с его возможность смешивания слоев.

На самом деле получить заснеженные ветки оказалось проще простого. Я нашел текстуру кристаллического, крупнозернистого снега. Расположил ее слоем выше и определил для нее тип смешивания Lighten only (Только светлое). Так и получилось, что вся веточка покрылась кристалликами снега. Нужно сказать, что это не оптимальное решение. Ведь елка получилась полностью заснеженной, но это быстрое решение.

На елочке я развесил несколько шаров, причем они являются только фасадом для невидимых ламп. В моей открытке пользователь нажимает кнопки на экране и при этом зажигаются лампочки определенного цвета. Технически в Blender были созданы простейшие анимации движения для каждого шарика, а уже к нему добавлены в качестве child сами источники света. Теперь при движении шаров двигаются и они. Это добавляет динамику в сцену и выглядит красиво.

И не думайте, что это действие сложно перенести в интернет. Blend4Web настолько интегрирован с Blender, что подобную открытку можно сделать, не выходя из редактора. Так, например, для включения анимации достаточно поставить всего одну галочку, как на рисунке ниже.

Кстати, коли разговор пошел о Blend4Web, то дам совет — не делайте, как я. Не нужно писать код JavaScript, не нужно изучать API, такую открытку можно сделать и без программирования. Дело в том, что b4w имеет визуальный редактор логики, который построен на привычном нодовом механизме Blender. Специальных блоков немного, но их достаточно для создания приложения средней сложности. Например, в моей открытке пользователь должен щелкать по кнопкам и от этого зажигаются лампы. Я не проверял, но думаю, вот такой кусок логики прекрасно справится с этой задачей:

Немного пришлось помучится с гирляндами. Очень не хотелось расставлять десятки одинаковых объектов вокруг елки и я вспомнил про модификатор Array. Потом еще не много подумал и добавил в сцену Spline. Пару минут экспериментов и вот уже елку можно обматывать гирляндами.

Вот как-то так. Свою мини-игру я оставляю открытой для всех желающих. Размещайте ее на сайтах и блогах, копайтесь в исходниках, в общем делайте, что хотите. 

С Наступающим!