что такое параллакс в играх
Знакомство с 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 является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
Параллакс: глубинное зрение
Как мы определяем глубину — расстояние от нашего местоположения до другого объекта? Для этого существует несколько способов, и один из самых распространённых и простых для понимания включает в себя такое геометрическое явление, как параллакс. Этот чрезвычайно простой принцип используется нашими глазами и мозгом для формирования нашего трёхмерного изображения мира, а астрономы столетиями используют его для определения расстояний (или относительных расстояний) от Земли до астрономических объектов.
Ещё один распространённый способ определять расстояния включает в себя отправку волны (звука, света, чего-то ещё), распространяющейся с известной скоростью, которая отражается от объекта и возвращается к нам; время, затраченное на возврат волны — эхо — сообщает нам расстояние до объекта. По этому принципу летучие мыши определяют расстояние до пищи и препятствий, а также работает радар.
Рис. 1
Мы воспринимаем параллакс, даже не думая о нём, каждый раз, когда двигаем головой. Представьте, что произойдёт, Если ваш друг спрячется от вас, встав в нескольких метрах за крупным деревом (рис. 1, в центре). Если вы достаточно далеко отодвинетесь влево или вправо, вашего друга станет видно (рис. 1, слева и справа). Мы знаем, что всё дело просто в перспективе; при определённом угле зрения дерево уже не будет загораживать вам вашего таинственного друга. Геометрически происходящее изображено на рис. 1. Когда вы двигаетесь влево и вправо, смотря вперёд, близлежащие объекты меняют свой угол по отношению к тому, что находится прямо перед вами, быстрее, чем объекты, расположенные дальше. Из скорости изменения угла при вашем движении — из параллакса движения — вы можете понять, насколько далеко расположен объект.
Каждый ребёнок это знает, поскольку, когда вы выглядываете из окна движущейся машины, фонарные столбы проносятся мимо очень быстро, удалённые здания проходят медленнее, а Луна, находящаяся настолько далеко, что угол зрения по отношению к наблюдателю не меняется на ощутимую величину, пока машина едет по шоссе, как будто бы двигается вместе с машиной. Именно небольшой параллакс, являющийся следствием огромного расстояния, заставляет луну «следовать за машиной».
Все, кто смотрел старые двумерные мультфильмы (и многие современные), такие, как Флинстоуны, знают, что этот факт используется, чтобы изобразить глубину. Когда персонажи путешествуют в автомобиле, двигаясь слева направо, автомобиль рисуют неподвижным, деревья рисуют в другом слое, который с высокой скоростью передвигается справа налево, а холмы в удалении рисуют на третьем слое, который двигается справа налево чуть медленнее (см. рис. 2).
Рис. 2
Наша способность воспринимать глубину, даже не двигая головой, основана на том же принципе. Левый и правый глаз видят мир с немного разных углов. Попробуйте разместить пару объектов — неважно, каких, пусть даже это будут большие пальцы рук — так, чтобы один из них был в два раза дальше другого, и находился прямо за ним. Закройте левый глаз и посмотрите на них правым; затем поменяйте глаза; потом снова поменяйте, и сделайте так несколько раз — и вы увидите, что объекты двигаются, как на рис. 1, только ваш левый глаз увидит ближайший объект справа от того, что дальше, а правый глаз увидит его чуть левее.
Так почему вы воспринимаете эти объекты при помощи обоих глаз так, будто они находятся один за другим? У вашей оптической системы есть очень хитрый обработчик информации — своего рода компьютер. Для вас он создаёт не такую картину мира, какую непосредственно видят ваши глаза, а выстроенную на её основе при помощи сложных преобразований картину. Воспринимать глубину вам позволяет информация, полученная от двух глаз и скомбинированная вместе (это в основном — хотя параллакс движения тоже вносит свою лепту). Ни один из ваших глаз не может определить глубину, если вы стоите неподвижно. Попробуйте закрыть глаза, повернуться в другую сторону и открыть один глаз. Можете ли вы точно описать расстояние до предметов? Мир выглядит более плоским, более двумерным, чем обычно. С обоими открытыми глазами у вас нет таких проблем. Это использование двух изображений для использования трёхмерной карты мира называется стереоэффектом.
Но даже с одним открытым глазом вы можете довольно быстро оценить глубину, если подвигаете головой. Ваш мозг способен использовать параллакс движения — более быстрое изменение угла зрения на близлежащие объекты по отношению к отдалённым при движении влево или вправо — чтобы помочь восстановить часть информации о глубине, которая обычно получается сравнением вида из двух разных глаз (рис. 2).
Рис. 3
Какие основные подсчёты использует наша оптическая система? Простейший случай показан на рис. 3. Допустим, объект находится прямо перед вами. Если ваши глаза находятся на расстоянии R друг от друга, а ваш левый глаз видит объект под углом α правее по отношению ко взгляду прямо вперёд, а правый глаз видит объект под углом α левее, тогда согласно простейшей геометрии прямоугольных треугольников, расстояние D до объекта будет равняться
Из формулы видно, что когда D меньше, угол, на который линия взгляда на объект отстоит от прямого взгляда, становится больше. Именно этого мы и ожидаем от параллакса.
В более общем случае, показанном на рис. 4, когда объект находится не прямо перед вами, получается чуть более сложным, как и тригонометрические формулы, но в нём работает тот же самый основной принцип и в итоге его не так уж сложно подсчитать. Ваш мозг проделывает такие подсчёты так быстро (используя технику, которую мы пока ещё не раскрыли), что вы об этом и не подозреваете.
Для достаточно удалённых объектов угол α оказывается слишком малым для того, чтобы его восприняли ваши глаза и мозг. В этот момент ваше чувство глубины пропадает. Поэтому Луна не кажется расположенной ближе, чем звёзды; они находятся слишком далеко, чтобы ощутить глубину. Также вашего ощущения глубины обычно не хватает, чтобы понять, пройдёт ли самолёт перед или за горой вдалеке. Но это просто ограничение ваших глаз.
Рис. 4
Как определить расстояние до более удалённых объектов? Есть два варианта; разработать научный инструмент, способный измерять углы точнее, чем ваш глаз; увеличить R, чтобы сравнивать не вид из глаз, а, например, вид из двух камер, стоящих в нескольких метрах друг от друга, или даже в разных местах континента. А когда астрономы хотят измерить самые большие расстояния, какие только можно измерить при помощи параллакса, они сравнивают изображения удалённой звезды, сделанные с разницей в шесть месяцев, чтобы получить максимальное расстояние R на основании того, что Земля в течение года проходит довольно большое расстояние. Детали этих техник отличаются, но основной принцип тот же, что показа на рис. 3 и рис. 4 — принцип параллакса.
Всем привет! Занимаясь разработкой игры, стилизованной под текстовый режим, я пришел к ожидаемому противоречию. С одной стороны, игра должна быть пропитана духом текстового режима, ведь за это она нравится мне и, надеюсь, понравится любителям ретро игр. С другой стороны, мне хочется, чтобы игровой процесс был максимально приятен и современен.
В отличие от текстовых режимов в игре ASCIIDENT используется пиксельная точность перемещения текстовых слоев и движущихся спрайтов.
В текстовом режиме смещение спрайта на одну позицию выглядит как ощутимый скачок. Для такой динамичной игры как ASCIIDENT — это неприемлемо с точки зрения современного игрового опыта. Поэтому для отдельных спрайтов и текстовых слоев, о которых пойдет речь дальше, я сделал плавное перемещение.
Для сохранения аутентичности я придерживаюсь следующего правила. Внутри одного текстового слоя все статичные объекты четко выровнены по символьной сетке. Более того, каждый спрайт состоит из символов, также выровненных по символьной сетке.
Относительно же друг друга слои и движущиеся объекты могут находиться на субсимвольном расстоянии. Это обеспечивает плавность движения и, соответственно, комфортный игровой процесс. Вот такой компромисс.
В игре присутствует несколько текстовых слоев, которые двигаются с разной скоростью, реализуя эффект параллакса. Символы верхних слоев перекрывают символы нижних. При субсимвольной точности критерий перекрытия — это наложение более 50% от ширины и/или высоты текстовой ячейки. Используя простой z-буффер, легко реализовать это перекрытие.
Параллакс с плавным движением слоев — очень выразительный графический прием. Да, он, возможно, сильно нарушает аутентичность текстовому режиму. Тем не менее, я решил использовать параллакс. Очень уж красиво получается.
Чтобы получать больше обратной связи и понимать, в правильную ли сторону я двигаюсь, решил запустить игру на раннем доступе в Стиме: store.steampowered.com/app/1113220/ASCIIDENT/
Есть что-то магически привлекательное в текстовых режимах. Удалось ли мне сохранить ламповое алфавитно-цифровое настроение в игре? Прошу высказать мнение!
Лига Разработчиков Видеоигр
4.4K постов 19.1K подписчика
Правила сообщества
— Уважайте чужой труд и используйте конструктивную критику
— Не занимайтесь саморекламой, пишите качественные и интересные посты
— Не употребляйте мат без необходимости
— Посты о Вашей игре с историей её разработки и описанием полученного опыта
— Обучающие материалы, туториалы
— Интервью с опытными разработчиками
— Анонсы бесплатных мероприятий для разработчиков и истории их посещения;
— Ваши работы, если Вы художник/композитор и хотите поделиться ими на безвозмездной основе
НЕ СТОИТ ПУБЛИКОВАТЬ:
— Только гифки/арты/скриншоты из игры. Такие материалы могут сопровождать рассказ об игре или обучающий туториал, но не должны являться основой поста
— Посты, содержащие только идею игры
— Посты, не относящиеся к тематике сообщества
Подобные посты по решению администрации могут быть перемещены из сообщества в общую ленту.
— Публиковать бессодержательные посты с рекламой Вашего проекта (см. следующий пункт), а также все прочие посты, содержащие рекламу/рекламные интеграции
— Выдавать чужой труд за свой
Подобные посты будут перемещены из сообщества в общую ленту, а их авторы по решению администрации могут быть внесены в игнор-лист сообщества.
Ссылка на сторонний ресурс, связанный с игрой, допускается только при следующих условиях:
— Пост должен быть содержательным и интересным для пользователей, нести пользу для сообщества
— Ссылка должна размещаться непосредственно в начале или конце поста и только один раз
— Cсылка размещается в формате: «Страница игры в Steam: URL»
Обычно я не люблю все эти pseudo-retro-закосы и пиксели размером с кошку.
Но вот конкретно этот проект меня зацепил. Я никогда не видел ничего подобного.
Респект за удачную адаптацию ASCII в современных реалиях.
а возможен вариант, когда в ячейке символ плавно затухает и в это же время в соседней плавно загорается? (в 3-4 кадра)
А, на звёзды надо смотреть. На нижней гифке, которая по логике текста является демонстрация параллакса, их так мало, что пришлось пересмотреть верхнюю, где параллакс более заметен.
добавь для паралакса еще 2-3 слоя, я увидел только один слой задника, и эффект паралакса для него не очень и заметен
Символы верхних слоев перекрывают символы нижних. При субсимвольной точности критерий перекрытия — это наложение более 50% от ширины и/или высоты текстовой ячейки. Используя простой z-буффер, легко реализовать это перекрытие.
На приложенной гифке в случае движения платформ результат выглядит странно.
Мой первый релиз в Steam. Крысы, ассеты и 8 месяцев жизни
Продолжаю попытки рассказать о своей игре, и на этот раз повод самый приятный: релиз!
Теперь побегать по условной Средневековой Европе (названия городов изменены, но всё угадывается) может каждый, а я могу чуть-чуть вынырнуть из разработки и рассказать что-как творилось в процессе, на каких граблях я потерял больше всего здоровья и времени, про использованные ассеты и всякое разное окологеймдевское.
Звёзды-то сошлись, и что дальше? А дальше тернии-тернии, ДевГАММ, выгорание, тернии, питерская жара. Около 5 раз переносил срок выпуска игры. Сначала хотел делать всё исключительно своими силами (плюс ассеты из юнити-магазина и хамбл-бандла), но здравый смысл победил, и под конец разработки обратился к профессионалам.
Угадайте, где рисовал программист.)
Из явно правильных решений было взятие максимального количества готовых ассетов, включая TopDown Engine, DunGen, Rewired, Databox и ещё около 20. Плюс графика, музыка и звуки из хамбл бандлов. Без этой подмоги игра никогда бы свет не увидела, я бы просто забил после пары недель строительства прототипа. Так уже бывало не раз.
Из неправильных решений были попытки всунуть эти ассеты любой ценой. Например, кучу времени было потрачено, чтобы Dialogue System заработал, но там начался такой «карнавал» костылей, чтобы подружить его с другими ассетами, что смех и слёзы. только без смеха.
Итого, камень, в течение 1338 часов и 16 минут натиравший плечи и не только, продолжает давить, так как после релиза продолжаю работу и над фичами, и над балансом, и над ловлей багов, куда ж без них. Но теперь стало полегче, осознание «незряшности» вложенных усилий сильно радует и мотивирует.
Спасибо за внимание! И до скорой встречи!
PS. Скриншоты, для тех, кому это важно.
The Knight Demo
В 2015-м году Unreal Engine стал условно бесплатным, и всяк, кто грезил о создании виртуальных миров на фотореалистичном движке — его установил. Я был в их числе. Как-то так.
У меня на этом всё, спасибо!
Flappy math
Всем привет, хотелось бы поделится своей игрой и получить фидбэк, и вообще стоит ли двигаться дальше в этом направлении.
Суть игры заключается в том, чтобы правильно считать простые математические операции, по типу «2 + 2», сложность заключается в том что, все это основано на механике игры «Flappy Bird».
Игроку надо прыгнуть туда, где указан правильный ответ, но в дальнейшем по мере прохождения сложность повышается, но не скоростью полета шарика, а усложнением операций которые попадаются игроку, то бишь при старте у игрока сложность «сложение», после того как игрок прошел 10 препятствий, уровень повышается до «вычитания».
Так в игре всего 7 уровней сложности, после чего все начинается заново. Уровнями сложности являются такие операции как: сложение, вычитание, умножение, деление, число в квадрате, корень из числа, и простое уравнение, такое как (2+2)*2. Соответственно для каждого уровня сложности есть свои правила, чтобы облегчить игровой процесс (ну в какой-то степени). Допустим такая операция как «корень из числа» довольно таки сложная, но сложность начинается после двухзначных чисел, таким образом в этом уровне сложности игроку не попадутся числа больше 10, соответственно с другими уровнями примерно так же. При повышении уровня сложности меняется цвет фона и игрок пролетает «релакс» зону, чтобы чуть-чуть расслабиться.
Повышение уровня сложности
Меню игры хотел сделать максимально простым, при этом красивым, не знаю получилось у меня это или нет.
Рекламу в игре старался сделать не слишком надоедливой, показываю ее 1 раз после 5 поражений, рекламу можно пропустить после 5 секунд, думаю убавить хотя бы до 3-х.
Вот такая вот игра у меня получилась, если ты дочитал до этого момента, то спасибо тебе большое за твое внимание.
Значение слова «параллакс»
1. Спец. Кажущееся смещение рассматриваемого предмета вследствие перемещения глаза наблюдателя.
2. Астр. Видимое смещение светила (звезды относительно других звезд), обусловленное перемещением наблюдателя вследствие вращения и движения Земли, позволяющее определить расстояние до светил. Суточный параллакс (наблюдаемое смещение светила вследствие вращения Земли). Годичный параллакс (наблюдаемое смещение светила вследствие обращения Земли вокруг Солнца).
Источник (печатная версия): Словарь русского языка: В 4-х т. / РАН, Ин-т лингвистич. исследований; Под ред. А. П. Евгеньевой. — 4-е изд., стер. — М.: Рус. яз.; Полиграфресурсы, 1999; (электронная версия): Фундаментальная электронная библиотека
Зная расстояние между точками наблюдения L (база) и угол смещения α, можно определить расстояние до объекта:
Для малых углов (α — в радианах):
Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов (в частности в специальных единицах — парсеках). На явлении параллакса основано бинокулярное зрение.
ПАРАЛЛА’КС, а, м. [греч. parallaxis — уклонение] (астр.). Угол, измеряющий видимое смещение светила при перемещении наблюдателя из одной точки пространства в другую. Суточный п. (угол между направлениями на светило из данного места земной поверхности и из центра земли). Годичный п. (угол между направлениями на светило из данной точки земной орбиты и из солнца).
Источник: «Толковый словарь русского языка» под редакцией Д. Н. Ушакова (1935-1940); (электронная версия): Фундаментальная электронная библиотека
паралла́кс
1. опт. видимое изменение положения предмета вследствие перемещения глаза наблюдателя ◆ С. Максимович и С. Прокудин-Горский в 1910–1914 гг. разработали и затем запатентовали трёхцветный аддитивный процесс цветного кино. Интересно отметить, что для устранения параллакса, возникающего при съёмке, С. Максимович рассчитал призму, на которую позже взяла патент американская фирма «Техниколор» для своего способа цветной кинематографии. Е. М. Голдовский, «Советская кинотехника», 1950 г. ◆ Жителям разных широт путь Луны по Плеядам представится не совсем одинаковым: обитатели юга России увидят, что Луна прошла почти по центру скопления, а северянам покажется, что она лишь задела его южный край. Все это результат так называемого параллакса (видимое изменение положения небесного светила, в данном случае лунного диска, относительно звездного скопления Плеяд вследствие перемещения наблюдателя). А. Остапенко, «Луна и планеты в марте-апреле 2006 года», 2006 г. // «Наука и жизнь» (цитата из НКРЯ)
2. астрон. угол, под которым из центра небесного тела был бы виден радиус Земли, мысленно проведенный в данную точку земной поверхности (суточный параллакс), или экваториальный радиус Земли (горизонтальный параллакс) ◆ Произведённые измерения параллакса звезды β привели к величине 0,49″, т.е. почти к полсекунде, что соответствует 415 тысячам радиусов земной орбиты или 56¼ биллионам вёрст. Н. К. Фламмарион, «Звездное небо и его чудеса», 1899 г. ◆ Другое явление ― противустояние Марса ― повторяется почти через каждые два года; но весьма редко происходит оно в таких благоприятных для наблюдения условиях в обеих полушариях, как в нынешнем году, а именно для определения параллакса планеты, из которого выводится параллакс Солнца. К. С. Веселовский, «Отчет по физико-математическому и историко-филологическому отделениям Императорской Академии наук за 1862 год, читанный в публичном заседании 29 декабря того же года непременным секретарем академиком К. С. Веселовским», 1862 г. (цитата из НКРЯ) ◆ Для выявления параллакса и собственного движения звезд с помощью особых астрографов (длиннофокусных фотографических телескопов) делаются фотоснимки положения звезд, которые повторяются в течение многих лет и которые позволяют с точностью до сотых долей секунды дуги определять положение звезд на небесной сфере. Г. А. Гурев, «Далекие планетные системы», 1947 г. // «Наука и жизнь» (цитата из НКРЯ)
Делаем Карту слов лучше вместе
Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!
Спасибо! Я стал чуточку лучше понимать мир эмоций.
Вопрос: печёночный — это что-то нейтральное, положительное или отрицательное?