Пятница, 19 Октября 2018, 07:53

Приветствую Вас Гость

Меню сайта
Категории каталога
Создание игр [312]
Статьи об общих понятиях связанных с созданием игр.
Программирование [69]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [123]
Статьи о программах для создания игр, уроки и описания.
Софт [27]
Различные программы, в том числе в помощь игроделам.
2D-графика [11]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [10]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [5]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [94]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [69]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Покупаете ли вы конструкторы игр?
Всего ответов: 11074
Главная » Статьи » Создание игр

Игра на Blend4Web. Эффект параллакса
Чтобы было понятно, о чем идет речь — посмотрите на анимацию ниже. Если её еще нет, то просто дождитесь. Этот 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». Подробности на форуме.
Категория: Создание игр | Добавил: Prand (03 Июня 2016)
Просмотров: 1719 | Комментарии: 2 | Рейтинг: 4.8/5 |
Теги: эффект, слои, Эффект параллакса, Игра на Blend4Web, Blender, анимация, Blend4Web, Параллакс, Dope Sheet, B4W
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:
Если вас заинтересовал материал «Игра на Blend4Web. Эффект параллакса», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

Всего комментариев: 2
+0-
1 TLT   (03 Июня 2016 19:18)
TLTЭто простой эффект 2D-параллакса, Parallax Scrolling. Всегда нравились файтинги на Sega Mega Drive, где полы показывали самый сложный вариант параллакса.


+0-
2 MyDreamForever   (29 Июня 2016 13:31)
MyDreamForeverДа кстати, всегда поражал этот эффект. Ещё в черве джиме похожее было. До сих пор хорошо смотрится

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
10 случ. движков
  • Mortal Szombat
  • SMBX
  • PureBasic
  • HÖVE
  • GameLooper
  • Garry's mod
  • Advanced RPG Maker
  • Blitz3D
  • RPG Maker MV
  • BuildBox
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    Все права сохранены. GcUp.ru © 2008-2018 Рейтинг