stringtranslate.com

Параллакс-скроллинг

" 2.5D " параллакс-скроллинг городских зданий

Параллаксная прокрутка — это техника в компьютерной графике , при которой фоновые изображения движутся мимо камеры медленнее, чем изображения переднего плана, создавая иллюзию глубины в двухмерной сцене на расстоянии. [1] Эта техника возникла из техники многоплоскостной камеры, используемой в традиционной анимации [2] с 1930-х годов.

Параллакс-скроллинг был популярен в 2D-компьютерной графике с его появлением в видеоиграх в начале 1980-х годов. Некоторое количество параллакс-скроллинга использовалось в аркадной видеоигре Jump Bug (1981). [3] В ней использовалась ограниченная форма параллакс-скроллинга с прокруткой основной сцены, в то время как звездное ночное небо было неподвижным, а облака двигались медленно, добавляя глубину пейзажу. В следующем году в Moon Patrol (1982) была реализована полная форма параллакс-скроллинга с тремя отдельными фоновыми слоями, прокручивающимися с разной скоростью, имитируя расстояние между ними. [4] Moon Patrol часто приписывают популяризацию параллакс-скроллинга. [5] [6] Jungle King (1982), позже названный Jungle Hunt , также имел параллакс-скроллинг, [7] и был выпущен через месяц после Moon Patrol в июне 1982 года. [8]

Методы

Существует четыре основных метода параллаксной прокрутки, используемых в играх для игровых приставок , игровых консолей и персональных компьютеров . [ необходима ссылка ]

Метод слоев

Демонстрация метода слоев

Некоторые системы отображения поддерживают несколько фоновых слоев, которые можно прокручивать независимо в горизонтальном и вертикальном направлениях и накладывать друг на друга, имитируя многоплоскостную камеру . На такой системе отображения игра может создавать параллакс, просто изменяя положение каждого слоя на разную величину в одном и том же направлении. Слои, которые движутся быстрее, воспринимаются как находящиеся ближе к виртуальной камере. Слои могут быть размещены перед игровым полем — слоем, содержащим объекты, с которыми взаимодействует игрок — по разным причинам, например, чтобы обеспечить увеличенное измерение, скрыть часть действия игры или отвлечь игрока.

Метод спрайта

Программисты также могут создавать псевдослои спрайтов — индивидуально управляемые движущиеся объекты, нарисованные аппаратно поверх или за слоями, — если они доступны в системе отображения. Например, Star Force , шутер с видом сверху и вертикальной прокруткой для NES , использовал это для своего звездного поля, а Final Fight для Super NES использовал эту технику для слоя непосредственно перед основным игровым полем.

В компьютере Amiga спрайты могут иметь любую высоту и устанавливаться горизонтально с помощью медного сопроцессора, что делает их идеальными для этой цели.

Risky Woods на Amiga использует спрайты, мультиплексированные с медью, для создания целого полноэкранного параллаксного фонового слоя [9] в качестве альтернативы режиму двойного игрового поля системы.

Повторяющийся узор/метод анимации

Прокручивающиеся дисплеи, состоящие из отдельных плиток, можно заставить «плавать» над повторяющимся фоновым слоем, анимируя битовые карты отдельных плиток, чтобы изобразить эффект параллакса. Цикличность цветов можно использовать для быстрой анимации плиток на всем экране. Этот программный эффект создает иллюзию другого (аппаратного) слоя. Во многих играх эта техника использовалась для прокручивающегося звездного поля, но иногда достигается более сложный или многонаправленный эффект, например, в игре Parallax от Sensible Software .

Растровый метод

В растровой графике линии пикселей в изображении обычно компонуются и обновляются в порядке сверху вниз с небольшой задержкой (называемой горизонтальным интервалом гашения ) между рисованием одной линии и рисованием следующей линии. Игры, разработанные для старых графических чипсетов — например, для игровых консолей третьего и четвертого поколений, для специализированных телевизионных игр или для аналогичных портативных систем — используют преимущества растровых характеристик для создания иллюзии большего количества слоев.

Некоторые системы отображения имеют только один слой. К ним относятся большинство классических 8-битных систем (таких как Commodore 64 , Nintendo Entertainment System , Master System , PC Engine/TurboGrafx-16 и оригинальный Game Boy ). Более сложные игры на таких системах обычно делят слой на горизонтальные полосы, каждая из которых имеет разное положение и скорость прокрутки. Обычно полосы, расположенные выше на экране, представляют вещи, находящиеся дальше от виртуальной камеры, или одна полоса будет оставаться неподвижной для отображения информации о состоянии. Затем программа будет ждать горизонтального пробела и изменять положение прокрутки слоя непосредственно перед тем, как система отображения начнет рисовать каждую строку сканирования. Это называется «растровым эффектом» и также полезно для изменения палитры системы для обеспечения градиентного фона.

Некоторые платформы (такие как Commodore 64, Amiga , Master System, [10] PC Engine/TurboGrafx-16, [11] Sega Mega Drive/Genesis , Super NES , Game Boy , Game Boy Advance и Nintendo DS ) предоставляют горизонтальное пустое прерывание для автоматической установки регистров независимо от остальной части программы. Другие, такие как NES, требуют использования кода с циклической синхронизацией, который специально написан так, чтобы его выполнение занимало ровно столько времени, сколько требуется видеочипу для отрисовки одной строки развертки, или таймеров внутри игровых картриджей , которые генерируют прерывания после отрисовки заданного количества строк развертки. Многие игры NES используют эту технику для отрисовки своих строк состояния, а Teenage Mutant Ninja Turtles II: The Arcade Game и Vice: Project Doom для NES используют ее для прокрутки фоновых слоев с разной скоростью.

Более продвинутые растровые методы могут создавать интересные эффекты. Система может достичь очень эффективной глубины резкости, если слои с растрами объединены; Sonic the Hedgehog , Sonic The Hedgehog 2 , ActRaiser , Lionheart , Kid Chaos и Street Fighter II хорошо использовали этот эффект. Если каждая строка сканирования имеет свой собственный слой, создается эффект Pole Position , который создает псевдо-3D дорогу (или псевдо-3D площадку для игры в мяч, как в NBA Jam ) на 2D-системе.

Если система отображения поддерживает вращение и масштабирование в дополнение к прокрутке (эффект, широко известный как Mode 7) , изменение коэффициентов вращения и масштабирования может нарисовать проекцию плоскости (как в F-Zero и Super Mario Kart ) или может деформировать игровое поле, создавая дополнительный фактор сложности.

Другой продвинутой техникой является прокрутка строк/столбцов, при которой строки/столбцы плиток на экране можно прокручивать по отдельности. [12] Эта техника реализована в графических чипах различных игровых плат Sega, начиная с Sega Space Harrier и System 16 , [13] консоли Sega Mega Drive/Genesis, [14] и игровых плат Capcom CP System , [15] Irem M-92 [16] и Taito F3 System [17] .

Пример

В следующей анимации три слоя движутся влево с разной скоростью. Их скорости уменьшаются спереди назад и соответствуют увеличению относительного расстояния от зрителя. Слой земли движется в 8 раз быстрее, чем слой растительности. Слой растительности движется в два раза быстрее, чем слой облаков.

Параллакс-скроллинг в веб-дизайне

Одна из первых реализаций параллакс-скроллинга в браузере была создана и опубликована в блоге веб-разработчиком Glutnix в 2007 году. Она включала пример кода и демонстрацию с использованием JavaScript и CSS 2, которые поддерживали Internet Explorer 6 и другие браузеры той эпохи. [18] [19]

В феврале 2008 года в обучающем видео на блоге о веб-дизайне Think Vitamin веб-дизайнер Пол Аннетт рассказал, как он создал эффект параллакса с помощью CSS и без JavaScript для веб-сайта Silverback, приложения для тестирования удобства использования. [20] Он продемонстрировал эффект на сцене на SXSW Interactive 2009 с помощью участия аудитории и человека в костюме гориллы. [21] [22]

Сторонники утверждают, что это простой способ использовать текучесть Интернета, ссылаясь на сайт Silverback как на первый пример, с которым они столкнулись. [23]

Сторонники используют параллакс-фоны как инструмент для лучшего вовлечения пользователей и улучшения общего опыта, который предоставляет веб-сайт. Однако исследование Университета Пердью , опубликованное в 2013 году, выявило следующие результаты: «... хотя параллакс-прокрутка улучшила некоторые аспекты пользовательского опыта, она не обязательно улучшила общий пользовательский опыт». [24] Недатированное исследование, проведенное в течение или после 2010 года Деде Фредериком, Джеймсом Молером, Михаэлой Форворяну и Рональдом Глотцбахом, отметило, что параллакс-прокрутка «может вызывать у некоторых людей тошноту». [25]

Смотрите также

Ссылки

  1. ^ "Капитан О'Рурк спешит на помощь". New Straits Times Malaysia. 1988-09-01 . Получено 06.07.2009 .
  2. ^ Пол, Уайетт (август 2007 г.). «Искусство параллаксной прокрутки» (PDF) . Архивировано из оригинала (PDF) 2009-10-07 . Получено 2009-07-06 .
  3. ^ Пуркару, Богдан Ион (13 марта 2014 г.). «Игры против оборудования. История компьютерных видеоигр: 80-е». Пуркару Ион Богдан – через Google Books.
  4. ^ Uduslivii, Игорь (26 декабря 2013 г.). iPhone Game Blueprints. Packt Publishing Ltd. стр. 339. ISBN 978-1-84969-027-0.
  5. ^ Шталь, Тед (2006-07-26). "Хронология истории видеоигр: Золотой век". Архивировано из оригинала 2009-07-16 . Получено 2009-07-06 .
  6. ^ "Самые важные эволюции игр". GamesRadar . 8 октября 2010 г. стр. 3. Получено 27.04.2011 .
  7. ^ "Охота в джунглях была ужасной тратой четвертак". Архивировано из оригинала 2015-04-02 . Получено 2015-03-27 .
  8. ↑ Акаги, Масуми (13 октября 2006 г.). アーケードTVゲームリスト国内•海外編(1971-2005) [ Список аркадных телеигр: внутреннее • зарубежное издание (1971-2005) ] (на японском языке). Япония: Агентство новостей развлечений. стр. 13, 42. ISBN. 978-4990251215.
  9. ^ "Risky Woods". codetapper.com . Архивировано из оригинала 2015-02-19 . Получено 2015-04-23 .
  10. ^ "Архивная копия". Архивировано из оригинала 2017-11-09 . Получено 2018-09-04 .{{cite web}}: CS1 maint: archived copy as title (link)
  11. ^ "Архивная копия". Архивировано из оригинала 2014-03-18 . Получено 2014-03-18 .{{cite web}}: CS1 maint: archived copy as title (link)
  12. ^ "Использование системы тайловых карт MAME - DevWiki". 2 января 2014 г. Архивировано из оригинала 2014-01-02.
  13. ^ "Архивная копия". Архивировано из оригинала 2016-03-04 . Получено 2016-08-08 .{{cite web}}: CS1 maint: archived copy as title (link)
  14. ^ "Sega Genesis против Super Nintendo". gamepilgrimage.com . 2009-08-11. Архивировано из оригинала 2015-09-24 . Получено 2014-09-26 .
  15. ^ Лиман, Пол. "New Forgotten World Clone – CP System Code". GitHub . Архивировано из оригинала 25 мая 2015 г.
  16. ^ "System 16 - Irem M92 Hardware (Irem)". www.system16.com . Архивировано из оригинала 2014-12-24 . Получено 2014-09-26 .
  17. ^ "System 16 - Taito F3 System Hardware (Taito)". www.system16.com . Архивировано из оригинала 2014-04-21 . Получено 2014-09-26 .
  18. ↑ Бретт Тейлор (20 марта 2007 г.). «Parallax Backgrounds — многослойный эксперимент javascript». Glutnix . inner.geek.nz . Получено 28 июня 2019 г. .
  19. ^ Маттиас Кречманн (23 мая 2008 г.). «Демонстрация эффекта параллакса css — 12+1 творческих применений». Glutnix . kremalicious.com . Получено 28 июня 2019 г. .
  20. ^ Аннетт, Пол (февраль 2008 г.). «Как воссоздать эффект параллакса Silverback». Архивировано из оригинала 2010-07-19 . Получено 2024-02-27 .
  21. ↑ Марк Норман Фрэнсис (14 марта 2009 г.). «Фото: Пола забавляют гориллы» . Получено 27 февраля 2024 г.
  22. ↑ Робби Макдонелл (14 марта 2009 г.). «Пол Аннетт из ClearLeft заставляет людей разыгрывать дизайн silverbackapp.com» . Получено 27 февраля 2024 г.
  23. ^ Дэн Седерхолм; Итан Маркотт (9 апреля 2010 г.). Рукотворный CSS: более пуленепробиваемый веб-дизайн . Новые райдеры. стр. 198–199. ISBN 978-0-13-210481-4.
  24. ^ Деде М. Фредерик (18 апреля 2013 г.). «Влияние параллакс-скроллинга на пользовательский опыт и предпочтения в веб-дизайне». Университет Пердью . Архивировано из оригинала 2014-04-16 . Получено 17 апреля 2014 г.
  25. ^ Фредерик, Деде. «Влияние параллакс-скроллинга на пользовательский опыт в веб-дизайне». Журнал пользовательского опыта . 10 (2).