Что такое параллакс в играх
Урок «Эффект Параллакс»
Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. То есть данный эффект создаёт иллюзию смещения картинки при движении главного героя, придавая игре многоплановость.
Урок рассчитан на опытных пользователей, которые знают основы программы 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
Знакомство с 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 является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
Параллакс для 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)).
Параллакс: глубинное зрение
Как мы определяем глубину — расстояние от нашего местоположения до другого объекта? Для этого существует несколько способов, и один из самых распространённых и простых для понимания включает в себя такое геометрическое явление, как параллакс. Этот чрезвычайно простой принцип используется нашими глазами и мозгом для формирования нашего трёхмерного изображения мира, а астрономы столетиями используют его для определения расстояний (или относительных расстояний) от Земли до астрономических объектов.
Ещё один распространённый способ определять расстояния включает в себя отправку волны (звука, света, чего-то ещё), распространяющейся с известной скоростью, которая отражается от объекта и возвращается к нам; время, затраченное на возврат волны — эхо — сообщает нам расстояние до объекта. По этому принципу летучие мыши определяют расстояние до пищи и препятствий, а также работает радар.
Рис. 1
Мы воспринимаем параллакс, даже не думая о нём, каждый раз, когда двигаем головой. Представьте, что произойдёт, Если ваш друг спрячется от вас, встав в нескольких метрах за крупным деревом (рис. 1, в центре). Если вы достаточно далеко отодвинетесь влево или вправо, вашего друга станет видно (рис. 1, слева и справа). Мы знаем, что всё дело просто в перспективе; при определённом угле зрения дерево уже не будет загораживать вам вашего таинственного друга. Геометрически происходящее изображено на рис. 1. Когда вы двигаетесь влево и вправо, смотря вперёд, близлежащие объекты меняют свой угол по отношению к тому, что находится прямо перед вами, быстрее, чем объекты, расположенные дальше. Из скорости изменения угла при вашем движении — из параллакса движения — вы можете понять, насколько далеко расположен объект.
Каждый ребёнок это знает, поскольку, когда вы выглядываете из окна движущейся машины, фонарные столбы проносятся мимо очень быстро, удалённые здания проходят медленнее, а Луна, находящаяся настолько далеко, что угол зрения по отношению к наблюдателю не меняется на ощутимую величину, пока машина едет по шоссе, как будто бы двигается вместе с машиной. Именно небольшой параллакс, являющийся следствием огромного расстояния, заставляет луну «следовать за машиной».
Все, кто смотрел старые двумерные мультфильмы (и многие современные), такие, как Флинстоуны, знают, что этот факт используется, чтобы изобразить глубину. Когда персонажи путешествуют в автомобиле, двигаясь слева направо, автомобиль рисуют неподвижным, деревья рисуют в другом слое, который с высокой скоростью передвигается справа налево, а холмы в удалении рисуют на третьем слое, который двигается справа налево чуть медленнее (см. рис. 2).
Рис. 2
Наша способность воспринимать глубину, даже не двигая головой, основана на том же принципе. Левый и правый глаз видят мир с немного разных углов. Попробуйте разместить пару объектов — неважно, каких, пусть даже это будут большие пальцы рук — так, чтобы один из них был в два раза дальше другого, и находился прямо за ним. Закройте левый глаз и посмотрите на них правым; затем поменяйте глаза; потом снова поменяйте, и сделайте так несколько раз — и вы увидите, что объекты двигаются, как на рис. 1, только ваш левый глаз увидит ближайший объект справа от того, что дальше, а правый глаз увидит его чуть левее.
Так почему вы воспринимаете эти объекты при помощи обоих глаз так, будто они находятся один за другим? У вашей оптической системы есть очень хитрый обработчик информации — своего рода компьютер. Для вас он создаёт не такую картину мира, какую непосредственно видят ваши глаза, а выстроенную на её основе при помощи сложных преобразований картину. Воспринимать глубину вам позволяет информация, полученная от двух глаз и скомбинированная вместе (это в основном — хотя параллакс движения тоже вносит свою лепту). Ни один из ваших глаз не может определить глубину, если вы стоите неподвижно. Попробуйте закрыть глаза, повернуться в другую сторону и открыть один глаз. Можете ли вы точно описать расстояние до предметов? Мир выглядит более плоским, более двумерным, чем обычно. С обоими открытыми глазами у вас нет таких проблем. Это использование двух изображений для использования трёхмерной карты мира называется стереоэффектом.
Но даже с одним открытым глазом вы можете довольно быстро оценить глубину, если подвигаете головой. Ваш мозг способен использовать параллакс движения — более быстрое изменение угла зрения на близлежащие объекты по отношению к отдалённым при движении влево или вправо — чтобы помочь восстановить часть информации о глубине, которая обычно получается сравнением вида из двух разных глаз (рис. 2).
Рис. 3
Какие основные подсчёты использует наша оптическая система? Простейший случай показан на рис. 3. Допустим, объект находится прямо перед вами. Если ваши глаза находятся на расстоянии R друг от друга, а ваш левый глаз видит объект под углом α правее по отношению ко взгляду прямо вперёд, а правый глаз видит объект под углом α левее, тогда согласно простейшей геометрии прямоугольных треугольников, расстояние D до объекта будет равняться
Из формулы видно, что когда D меньше, угол, на который линия взгляда на объект отстоит от прямого взгляда, становится больше. Именно этого мы и ожидаем от параллакса.
В более общем случае, показанном на рис. 4, когда объект находится не прямо перед вами, получается чуть более сложным, как и тригонометрические формулы, но в нём работает тот же самый основной принцип и в итоге его не так уж сложно подсчитать. Ваш мозг проделывает такие подсчёты так быстро (используя технику, которую мы пока ещё не раскрыли), что вы об этом и не подозреваете.
Для достаточно удалённых объектов угол α оказывается слишком малым для того, чтобы его восприняли ваши глаза и мозг. В этот момент ваше чувство глубины пропадает. Поэтому Луна не кажется расположенной ближе, чем звёзды; они находятся слишком далеко, чтобы ощутить глубину. Также вашего ощущения глубины обычно не хватает, чтобы понять, пройдёт ли самолёт перед или за горой вдалеке. Но это просто ограничение ваших глаз.
Рис. 4
Как определить расстояние до более удалённых объектов? Есть два варианта; разработать научный инструмент, способный измерять углы точнее, чем ваш глаз; увеличить R, чтобы сравнивать не вид из глаз, а, например, вид из двух камер, стоящих в нескольких метрах друг от друга, или даже в разных местах континента. А когда астрономы хотят измерить самые большие расстояния, какие только можно измерить при помощи параллакса, они сравнивают изображения удалённой звезды, сделанные с разницей в шесть месяцев, чтобы получить максимальное расстояние R на основании того, что Земля в течение года проходит довольно большое расстояние. Детали этих техник отличаются, но основной принцип тот же, что показа на рис. 3 и рис. 4 — принцип параллакса.
Что такое параллакс в играх
Итак, параллакс-скроллинг — это одна из обманок, которые во множестве придумали разработчики игр и служит для придания объемности двухмерной анимации. Собственно эффект будет виден только при движении. В статичной сцене, где бэкграунд не перемещается, параллакс создать не удастся.
Идея заключается в том, чтобы разделить бэкграунд на несколько независимых слоев и заставить их двигаться в одном направлении с разной скоростью. Обычно, самый дальний фон имеет минимальную скорость перемещения, которая всё увеличивается для других слоев, по мере приближения к камере. За большим количеством слоев здесь гнаться нет смысла. Хватает 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, где полы показывали самый сложный вариант параллакса.