Прокрутка с параллаксом - Parallax scrolling

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

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

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

Методы

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

Слойный метод

Демонстрация слоистого метода
Вид сбоку на слои, используемые для параллаксной прокрутки в The Whispered World
То же изображение, что и выше, если смотреть спереди

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

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

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

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

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

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

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

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

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

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

Некоторые платформы (такие как Commodore 64, Amiga , Sega Master System, PC Engine / TurboGrafx-16, 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-системе.

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

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

Пример

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

Параллаксная прокрутка в веб-дизайне

Одна из первых реализаций параллакс-прокрутки в браузере была создана и опубликована в блоге веб-разработчиком Glutnix в 2007 году, она включала пример кода и демонстрацию с использованием JavaScript и CSS 2, которые поддерживали Internet Explorer 6 и другие браузеры той эпохи. Тем не менее, он не был до 2011 года и внедрение HTML5 и CSS 3 кодирования , что техника стала популярной веб - дизайнеров. Защитники утверждают, что это простой способ принять гибкость Интернета. Сторонники используют параллакс-фон в качестве инструмента для лучшего взаимодействия с пользователями и улучшения общего впечатления от веб-сайта. Однако исследование Университета Пердью , опубликованное в 2013 году, показало следующие результаты: «... хотя параллаксная прокрутка улучшила определенные аспекты взаимодействия с пользователем, она не обязательно улучшила общий опыт пользователя».

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

использованная литература