Что такое параллакс в играх
Урок «Эффект Параллакс»
Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. То есть данный эффект создаёт иллюзию смещения картинки при движении главного героя, придавая игре многоплановость.
Урок рассчитан на опытных пользователей, которые знают основы программы Construct.
Итак. Чтобы сделать данный эффект в Construct, нам понадобятся 5 слоев.
1. Создаём слои в таком порядке:
2. Выделите слой и в его свойствах, в опциях Scroll X Rate и Scroll Y Rate выставите следующие значения: для первого фона 25%, для второго 50% и для третьего 75%. У всех остальных слоев должно быть значение 100%.
3. Для персонажа ставим поведение «8 Direction» и наслаждаемся тем, как фон реагирует на передвижение игрока.
Возможно также использовать только горизонтальный или вертикальный параллакс, изменяя параметр Scroll X Rate или Scroll Y Rate.
Вы также можете скачать исходник эффекта параллакс, чтобы сравнить результаты.
Смотрите также:
Автор статьи: RamP
Опубликовано: 22 августа, 2010
Параллакс для 2D игры без нервов и костылей
У меня получилось. Хочу поделиться с вами опытом.
Справедливо замечу, что параллакс — это не достояние веба. Еще в дремучие времена существования 8-битных игр параллакс успешно применялся для создания иллюзии объема в двухмерной игре. Коротко говоря, параллакс — это наслоение изображений, каждый слой движется со своей скоростью. Ближайший к игроку имеет самую высокую скорость, соответственно дальний (последний) — самую низкую.
Ну что, вроде, минимально в теории разобрались и даже нашли, откуда ноги растут, значит, мы готовы перейти непосредственно к практике и сотворить это чудо своими руками.
Что вам потребуется:
Ладно, последнее не очень обязательно =)
По ссылке вы можете скачать необходимые изображения, а также уже готовый проект.
Подготовка
Запускаем Unity3D, создаем новый проект, называем его, например, Parallax2D.
Закидываем в папку Assets наши бэкграунды. Рекомендую сложить их в отдельную папку. В моем случае они лежат в Assets – StarSky.
Каждое изображение называем удобно и понятно. Я назвала их по порядку размещения (Background – задний фон, MiddleBackground – средний, TopBackground – верхний слой).
Для того, чтобы картинка перемещалась гладко, нам необходимо настроить ее в Inspector. Обратите внимание, этот этап очень важен, иначе все размажет, как звезды за иллюминатором Энтерпрайза на 3-й космической скорости.
Тема связана со специальностями:
В поле Texture Type выбираем тип Texture, во Wrap Mode отмечаем Repeat. И радостно тыкаем Apply. Без этого действия изменения не сохранятся, а потом можно долго недоумевать, почему же оно не работает. Совершаем эти телодвижения и для 2-х остальных текстур.
Canvas меняет размер фона автоматически, подстраивает его под размеры экрана гаджета, на котором запускают игру. Это избавляет нас от потребности писать скрипт, который будет отвечать за отслеживание размеров экрана и изменения размера фона.
В Hierarchy выбираем UI – Canvas. Собственно, если работать с Юнькой для вас не впервой, то вы явно знаете еще много других способов, как добавить в Hierarchy объект. Так что делайте это любым удобным способом.
После добавления наша Hierarchy выглядит так:
Переименовываем Canvas и Panel, чтобы у всех были свои пароли и явки.
А теперь засучиваем рукава и беремся препарировать — подготавливать каждый компонент в Inspector.
Начнем с ParallaxBackground.
Изменяем Layer на Ignore Raycast, чтобы наш фон не реагировал на касания пальцами. Unity обязательно спросит, применить ли эти изменения ко всем «детям» — соглашаемся.
Далее переходим к компоненту Canvas.
Находим Render Mode, выбираем Screen Space – Camera. В Render Camera добавляем нашу текущую дефолтную камеру (Main Camera(Camera)).
Знакомство с Parallax Scrolling
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.
Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.
Первую вещь, которую вы заметите, это направление скроллинга страницы — оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.
Стоит также отметить, что использование эффекта параллакса на вашем сайте не должно быть ограничено лишь возможностью создания искусственного 3D-эффекта. Сайт немецкой студии веб-дизайна Webseitenfactory является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
Что такое параллакс в играх
Итак, параллакс-скроллинг — это одна из обманок, которые во множестве придумали разработчики игр и служит для придания объемности двухмерной анимации. Собственно эффект будет виден только при движении. В статичной сцене, где бэкграунд не перемещается, параллакс создать не удастся.
Идея заключается в том, чтобы разделить бэкграунд на несколько независимых слоев и заставить их двигаться в одном направлении с разной скоростью. Обычно, самый дальний фон имеет минимальную скорость перемещения, которая всё увеличивается для других слоев, по мере приближения к камере. За большим количеством слоев здесь гнаться нет смысла. Хватает 3-4 для создания визуального объема в сцене. Только нужно учитывать, что изображения для параллакса используются в совокупности с альфа-каналом, что для мобильных устройств может быть затратно по производительности.
Здесь на рисунке 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». Подробности на форуме.
—>Теги : эффект, слои, Эффект параллакса, Игра на Blend4Web, Blender, анимация, Blend4Web, Параллакс, Dope Sheet, B4W
Это простой эффект 2D-параллакса, Parallax Scrolling. Всегда нравились файтинги на Sega Mega Drive, где полы показывали самый сложный вариант параллакса.
