Заметки о создании новогодней открытки и советы под Новый год
Начало декабря, работы навалом и такое ощущение, что всё больше и больше прибавляется. Две игры в разработке, третья требует размещения, да и для обучения нужно время. Я сейчас активно работаю над браузерными проектами, изучаю эту часть игростроя, а куда деваться — рынок браузерок манит.
Новый год на носу. Те, кто связан с разработкой игр, знают, что это очень «горячая» пора. А если ты простой инди, то будь готов не высыпаться вплоть до конца уходящего года.
Обо всём понемногу Игры — это фасад, за которым скрыты сотни часов работы, измотанные нервы и совсем немножко фана. К тому же постоянно нужно изучать новые инструменты, повышать уровень владения старыми. Как говорится, век живи — век учись. И если теория смыкается с практикой и получается неожиданно полезный результат — это реально радует. Особенно, если ты не планировал его изначально.
Вообще, в своей работе использую только те инструменты, которые требуют минимум времени на решение задачи. Время — это очень ценный ресурс. Я могу написать ужасный, не оптимальный, некрасивый с виду код, но если он работает, как следует, он останется. Я могу расположить текстурную развертку UV так, что у поборников “правильного подхода” волосы на голове вздыбятся. Но если текстура легла на свое место, то модель отправляется в игру.
Однако, бывают моменты, когда имеющихся знаний уже не хватает или их применение требует лишних временных затрат. Так стало с проработкой логики персонажей одной из разрабатываемой игры. Пришлось изучать событийную модель Blend4Web (игровой движок, выбранный мною для браузерных игр). Ранее я старался обходить ее стороной, используя только базовые возможности событий, но вот настал момент получения “глубинных” знаний. Дело в том, что изучать такие программные функции очень сложно без практики. Использовать текущий игровой проект нерентабельно, поэтому я оттачиваю навыки на чем-то простом, примитивном. Так бы история и закончилась, если бы один хороший знакомый не предложил кое-что другое.
Собственно, предложение было сделать что-то простое, но интересное. Оно вроде и время займет немного, и приспособить можно будет куда-нибудь. Первоначально я собирался отмахнуться, но вдруг вспомнил, что сайт у меня совсем не новогоднего облика. Так и получилось, что чисто теоретический проект перешел вдруг в практическую плоскость.
Чем хорош Blend4Web… Тем, что не нужно изучать ничего лишнего, если, конечно, ты уже знаешь Blender. В своей работе над открыткой я еще использовал Gimp и Inkscape. Вот они - три кита инди-разработчика!
Собственно задумка была простая: зимний пейзаж, одиноко стоящая елочка и “раз, два, три — ёлочка гори!”. Но тыкать в кнопки слишком скучно, так почему бы не предложить пользователю чуть-чуть поиграть и по-угадывать порядок звучания звуков? Эта идея и была воплощена в открытке.
Непосвященный в секреты создания игр при взгляде на картинку увидит большое количество объектов. Продвинутый игродел привычно отделит бэкграунд от 3D. Так как же на самом деле собрана эта сцена?
Вот теперь видны обрезанный террейн, явно двухмерный пейзаж и несколько объемных объектов. Вообще сцена отнюдь не оптимизирована и собиралась на скорую руку. Так как камера неподвижна и всегда “смотрит” в одну точку, то можно было бы обрезать ненужные полигоны ландшафта, убрать невидимые гирлянды с другой стороны елки и многое другое. Но тут вступает мое категорическое нежелание изменять то, что работает и так. Вы знаете, есть такой тип игроделов, которые очень любят оптимизировать, даже тогда, когда это не нужно (по секрету, и я этим страдал, но недолго). К тому же мне было любопытно, а вытянет ли Blend4Web/WebGL большое количество источников света.
Как вы думаете, сколько лампочек в сцене? Ответ: пять динамичных источника и 2 статичных, распространяющих влияние на 22000 вершин. Это много даже и в обычной игре, а для браузерной — совсем неоптимально. Но ведь работает! Сами разработчики Blend4Web предупреждают, что в одном кадре нежелательно иметь более 4 источников света (где-то я видел такое у них на форуме). Очевидно, что запас прочности у движка гораздо больше.
Как быстро заснежить дерево Когда я начал собирать сцену, то столкнулся с тем, что имеющаяся у меня модель елочки была с зелеными иголками. Увы, на бэкграунде деревья запорошены снегом. Поэтому моя ель слишком сильно выделялась.
Технически каждая ветка дерева представляет собой плоскость с натянутой текстурой и все дальнейшие действия нужно выполнять именно с ней. В Gimp я знаю несколько инструментов, которые могли помочь в этом деле, например, Color Balance или Posterize. Они позволяют в достаточно широком диапазоне менять оттенки рисунка, вот только результат получается весьма грубым. К тому же мне хотелось именно запорошенность снегом, а не просто белый цвет иголок. И я нашел другой, более приемлемый вариант, основанный на использовании режима наложения слоев.
Рецепт простой:
Нижний слой — базовая текстура ветки.
Верхний слой — текстура снега.
Для верхнего слоя установить режим наложения (Mode) как Lighten Only, т.е. убрать темные оттенки.
Вот скриншот с этими настройками.
Как сделать гирлянды А вот этот раздел будет интересен пользователям Blender.
Нет ничего противней, как вручную размещать десятки однотипных объектов, таких как гирлянда, снежный дождь, всякие-там цепочки. Но на самом деле, Blender позволяет сделать это буквально несколькими щелчками.
Рецепт создания гирлянд:
Создайте базовый объект, который будет являться частичкой гирлянды. В моем случае — это был простой примитив Ico Sphere с немного измененной формой.
Добавьте в сцену сплайн. Он будет служить в качестве пути для размещения частей гирлянды. В дальнейшем сплайн обматывается вокруг елки. Для создания следующего звена сплайна используйте Extrude (клавиша <E>) в режиме редактирования.
Добавьте к базовому объекту два модификатора: Curve и Array. Именно в таком порядке!
Изучайте скриншот с настройками модификаторов. Я думаю, там все понятно. Ах, да “BezierCurve2”, как раз и есть название использованного мною сплайна.
Как сделать кнопки в Blend4Web GUI — это больное место в Blend4Web, его просто нет. Собственно можно использовать возможности HTML, это и предлагают разработчики, но я предпочитаю все делать в Blender. На сайте b4w я закинул удочку насчет GUI, глядишь кто-нибудь из команды разработчиков клюнит и включит эту фичу в список TODO.
Рецепт создания кнопок:
Добавьте примитив Plane в сцену, натяните нужную текстуру с рисунком кнопки.
Разместите кнопку так, чтобы она “смотрела” прямиком на камеру.
В настройках Plane в панели Object включите опции Selectable и Enable Outlining.
Используйте этот код:
Код
//подключаем нужные модули движка var m_scene = b4w.require("scenes"); var m_ctr = b4w.require("controls");
//ищем в сцене кнопку по названию “Button” var button = m_scene.get_object_by_name("Button");
//создаем событие и подписываемся на него var sel_sensor = m_ctr.create_selection_sensor(button, true); m_ctr.create_sensor_manifold (button , "button", m_ctr.CT_SHOT, [sel_sensor ], null, sel_sensor_cb, null);
//если нажата кнопка, то вызывается эта функция function sel_sensor_cb () { //делаем что хотим }
Я буду рад, если мои советы вам пригодятся. До Нового года осталось совсем чуть-чуть и еще можно успеть создать прекрасную зимнюю игру. Что же касается моей открытки, то вы можете свободно использовать её. Отослать например другу Или покопаться в исходниках. .
Ссылка на “паспорт” открытки. И да, с Наступающим!
Категория: Создание игр | Добавил: Prand (03 Декабря 2015)
| Автор: Андрей Прахов
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:
Игровые объявления и предложения:
Если вас заинтересовал материал «Заметки о создании новогодней открытки и советы под Новый год», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела.
Предлагаются такие схожие материалы:
Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.
Или покопаться в исходниках. . 
2
Привет, 2007!
