Делаем свой спрайт-счетчик с помощью Blender 3D

Привет. Совсем недавно меня попросили сделать спрайт лайфбара (полоску жизни) для одного молодого КС сервера. В отличии от нашей версии необходимо было нарисовать цифровой лайфбар, предусматривающий 200 очков здоровья. Вспомните старенькие игры Worms, где над головами червей отображалось их состояние. Кроме того, требовались четыре спрайта с цветами на каждую команду (красный, синий, зеленый и желтый). В итоге, я насчитал 804 кадра, которые визуализировать вручную очень долго и скучно. К счастью, нас окружают удивительные технологии. Методов, автоматизирующих данный процесс, очень много. Одним из них я поделюсь с Вами в этой статье.

Что должно быть на борту

Blender 3D (официальный сайт, Steam) для генерации картинок для нашего спрайта
Blender Text Counter (официальный сайт) для анимирования цифровой надписи в Blender 3D
Paint.NET (официальный сайт) и мой плагин для сборки нашего спрайта

Готовим сцену

Сразу предупреждаю, что эта статья рассчитана на пользователей с базовыми знаниями Blender 3D. Если Вы впервые запустили этот прекрасный редактор или не знаете самых простейших вещей в нем, то Вам стоит немного "подкачаться".

Запускаем блендер и подключаем аддон Blender Text Counter. Для этого заходим в File->User Preferences (ctrl+alt+u). Нажимаем на кнопку "Install from File..." и выбираем скаченный архив с аддоном (надеюсь, Вы не поспешили его распаковывать). Ставим галку на флажке "Animation: Text Counter" и жмем "Save User Settings".

Теперь удаляем ненужные объекты со сцены: куб и точечный источник света (если они у Вас были). Перемещаем камеру к центру и выравниваем ее, чтобы она ровно "смотрела" вперед. Нам же удобно смотреть вперед, а не куда-то в сторону из под произвольного угла?

В свойствах камеры устанавливаем ее в ортографический режим. Если бы мы оставались в режиме перспективы, то наш счетчик казался бы объемным.

Готовим надпись

Создаем объект типа текста и поворачиваем его на 90 градусов по оси X. В свойствах ставим горизонтальное выравнивание по центру. Наша камера должна смотреть в сторону нашей надписи. Там же включаем Text Counter и устанавливаем значение Counter на 0 (или на 1 если хотите отчет с единицы). Еще Вы можете загрузить свой шрифт в разделе Font.

На временной прямой установите стартовый кадр в соответствие со стартовым значением Text Counter (у меня 0). Так же поступите для последнего кадра.

Теперь перейдите на самый первый кадр, наведите курсор на значение Counter в Text Counter и нажмите I. Поле должно окраситься в желтый цвет. Так Вы установите первый ключевой кадр. Переместитесь на последний кадр, задайте нужный Counter и также нажмите на I.

Теперь когда Вы будите переходить между кадрами, значение надписи будет изменяться.

Только изменяется эта надпись не совсем корректно. Чтобы исправить это, зайдите в редактор графов Grapth Editor.

Выделите все узлы (A) и нажмите на T. В появившемся контекстном меню выберите Linear.

Так итерация Counter будет постоянной без всяких ненужных затуханий. Вернитесь в 3D View и проверьте как хорошо и четко работает анимация.

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

Меня устраивал такой вид счетчика, поэтому про более тонкую настройку материалов, включая режим Cycles со своими нодами, я опущу - статья немножко про другое)

Готовим рендер

В свойствах Render установим прозрачный фон и разрешение на 128x64 (или на другое удобное). В разделе Input назначьте директорию, куда будут сохраняться картинки с кадрами.

Нажав на Num 0, Вы увидите сцену от лица активной камеры. Мне сразу показалось, что надпись очень маленькая и я сразу же уменьшил Orthographic Scale. Также я немного приподнял камеру (можно было и сам текст), чтобы надпись была ровно по центру.

Проверяем, что порождать мы будет изображения в формате PNG, а не что-то другое. Наконец, жмем Animation и наблюдаем генерацию наших картинок.

Готовим спрайт

Запускаем Paint.NET и ставим плагин для работы со спрайтами. Устанавливаем нужное разрешение холста. В проводнике выделяем все порожденные картинки и перетаскиваем в пространство графического редактора. Соглашаемся на добавление новых слоев. Убеждаемся, что порядок слоев совпадает с их названиями. Удаляем стандартный белый фон, если он у Вас остался.

Сохраняем спрайт.

Готово)

Заключение

Спрайт готов и Вы уже можете добавлять его в свой плагин. Не отрицаю, что существует более быстрые способы. Да, и, сама статья не претендует на хорошо обучающее руководство. Все же, надеюсь, Вы уловили суть этой технологии, ведь её можно применить не только для лайфбара. Если что-то не получается, или у Вас возникли вопросы, не стесняйтесь и оставляйте свои комментарии. Я с удовольствием отвечу каждому.