Чтобы было понятно, о чем идет речь — посмотрите на анимацию ниже. Если её еще нет, то просто дождитесь. Этот GIF достаточно тяжеловесный.
Итак, параллакс-скроллинг — это одна из обманок, которые во множестве придумали разработчики игр и служит для придания объемности двухмерной анимации. Собственно эффект будет виден только при движении. В статичной сцене, где бэкграунд не перемещается, параллакс создать не удастся.
Идея заключается в том, чтобы разделить бэкграунд на несколько независимых слоев и заставить их двигаться в одном направлении с разной скоростью. Обычно, самый дальний фон имеет минимальную скорость перемещения, которая всё увеличивается для других слоев, по мере приближения к камере. За большим количеством слоев здесь гнаться нет смысла. Хватает 3-4 для создания визуального объема в сцене. Только нужно учитывать, что изображения для параллакса используются в совокупности с альфа-каналом, что для мобильных устройств может быть затратно по производительности.
Во многих движках, параллакс делается в виде программного кода, который сдвигает либо объект, либо группу объектов. В случае с Blend4Web все действия выполняются в Blender. Никакого программирования, только чистая анимация. Вообще, работая над проектами Blend4Web, нужно привыкнуть к тому, чтобы использовать возможности Blender по максимуму, благо b4w практически всё перерабатывает в HTML. По сути, на движок остается только программирование логики. Причем часть её может быть вынесена в Blender (я говорю о нодовом редакторе логики). Возможно, я напишу об этом отдельный урок, а пока вернемся к параллаксу.
Здесь на рисунке 2 можно увидеть, что для каждого метеорита используется обычный объект-плоскость. В свою очередь несколько метеоритов объединяются в группу под патронажем пустышки (Empty). Точнее между ними создается иерархия. Сначала выделяется младший объект, затем к этому выделению добавляется родитель (пустышка) и нажимается CTRL+P.
Таким образом я создал 4 отдельных слоев для параллакса. Для удобства работы с ними советую использовать слои Blender. В принципе, при экспорте в HTMLдвижок учитывает их все. Чтобы поместить нужные объекты в конкретный слой, выделите их в сцене, нажмите клавишу M и появится окошко слоев, где выберите нужный слот (на рисунке ниже это пункт «Б»). А потом просто выключаете ненужные слои в окошке «A» и, тем самым, убираете с экрана лишнее.
Анимация слоев — дело простое. Это движение в нужном направлении. В моем случае все слои двигаются по оси Y (в игре сверху-вниз). Нужно создать обычную объектную анимацию Blender для конкретных родительских Empty. Именно поэтому все графические слои имеют свои пустышки. Очень удобно.
Итак, есть несколько нюансов для создания анимации. Во-первых, она должна быть достаточно длительной. Я исходил из игрового времени примерно в 10 минут, выделяемого на уровень. Плюс накинул ещё пару минут для подстраховки, а то получится совсем некрасиво, если уровень ещё не завершен, а графика уже остановилась. Во-вторых, движение должно быть с одинаковой скоростью. Фишка в том, что Blender по умолчанию, придает ускорение. От этого можно избавиться, если использовать линейную экстраполяцию. В третьих, анимация должна стартовать автоматически при загрузке сцены.
А теперь подробнее... Готовьтесь, масса скриншотов!
Переключитесь для удобства в режим Animation.
Установите счетчик кадров в 1 для первого ключа (нужное окошко выделено красным. Правда у меня там указан 0. Blender всегда начинает анимацию с 1 кадра, просто не стал переснимать скриншот), выделите Empty в сцене, нажмите клавишу I. Появится меню Insert Keyframe. В нем нужно выбрать пункт Location.
Установите конечный кадр в этом же окошке. Затем передвиньте Empty куда нужно и опять вызовите меню анимации для установки второго ключа Location. Если все сделано верно, то нажав ALT+A, вы можете просмотреть эту анимацию.
Среди окон раскладки Animation есть окно редактора Dope Sheet. Здесь можно контролировать скорость работы анимации. Вот эти желтые точки и являются ключами анимации. Их можно передвигать по панели, тем самым изменяя ключевой кадр. Для выделения и передвижения в Blender используется правая кнопка мыши.
Этот редактор Blender позволяет точно настраивать процесс анимации с помощью кривых. В данном случае он понадобится, чтобы сделать скорость нашей анимацию равномерной. Выделите все ключи в окне (горячая клавиша A) и выберите в меню Channel пункт Handle Type | Vector. После этого, плавные кривые в окне должны стать прямыми между ключевыми точками.
И последнее. Включите автоматический запуск анимации для нужных объектов Empty, как на рисунке выше.
P.S. Урок основан на моем игровом проекте «Warrior of Light». Подробности на форуме.
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:
Игровые объявления и предложения:
Если вас заинтересовал материал «Игра на Blend4Web. Эффект параллакса», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела.
Предлагаются такие схожие материалы:
Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.
0
Это простой эффект 2D-параллакса, 
Да кстати, всегда поражал этот эффект. Ещё в черве джиме похожее было. До сих пор хорошо смотрится
