Эффект параллакса в компьютерной графике

Введение

Техника компьютерной графики

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

Методы

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

Метод слоя

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

Способ Сприта

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

Метод повторения шаблонов/анимации

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

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

В растровой графике линии пикселей в изображении обычно компонуются и обновляются сверху вниз с небольшой задержкой (называемой интервалом обратного хода развертки) между отрисовкой одной линии и следующей. Игры, разработанные для старых графических чипсетов – таких как консоли видеоигр третьего и четвертого поколений, специализированные телевизионные игры или аналогичные портативные системы – используют растровые характеристики для создания иллюзии большего количества слоев. Некоторые системы отображения имеют только один слой. К ним относятся большинство классических 8-битных систем (таких как Commodore 64, Nintendo Entertainment System, Master System, PC Engine/TurboGrafx 16 и оригинальный Game Boy). Более сложные игры на этих системах обычно делят слой на горизонтальные полосы, каждая из которых имеет разную позицию и скорость прокрутки. Как правило, полосы, расположенные выше на экране, представляют объекты, находящиеся дальше от виртуальной камеры, или одна полоса остается неподвижной для отображения информации о состоянии. Затем программа ожидает интервала обратного хода развертки и изменяет позицию прокрутки слоя непосредственно перед тем, как система отображения начнет рисовать каждую строку развертки. Это называется "растровым эффектом" и также полезно для изменения палитры системы для создания градиентного фона. Некоторые платформы (такие как Commodore 64, Amiga, 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-системе. Если система отображения поддерживает вращение и масштабирование в дополнение к прокрутке – эффект, широко известный как Mode 7 – изменение факторов вращения и масштабирования может нарисовать проекцию плоскости (как в F Zero и Super Mario Kart) или исказить игровое поле, чтобы создать дополнительный уровень сложности. Другая передовая техника – прокрутка по строкам/столбцам, при которой строки/столбцы тайлов на экране могут прокручиваться независимо друг от друга. Эта техника реализована в графических чипах различных аркадных системных плат Sega, начиная с Sega Space Harrier и System 16, а также в Sega Mega Drive/Genesis и аркадных игровых платах Capcom CP System, Irem M 92 и Taito F3.

In raster graphics, the lines of pixels in an image are typically composited and refreshed in top to bottom order with a slight delay (called the horizontal blanking interval) between drawing one line and drawing the next line. Games designed for older graphical chipsets—such as those of the third and fourth generations of video game consoles, those of dedicated TV games, or those of similar handheld systems—take advantage of the raster characteristics to create the illusion of more layers. Some display systems have only one layer. These include most of the classic 8 bit systems (such as the Commodore 64, Nintendo Entertainment System, Master System, PC Engine/TurboGrafx 16 and original Game Boy). The more sophisticated games on such systems generally divide the layer into horizontal strips, each with a different position and rate of scrolling. Typically, strips higher on the screen will represent things farther away from the virtual camera or one strip will be held stationary to display status information. The program will then wait for horizontal blank and change the layer's scroll position just before the display system begins to draw each scanline. This is called a "raster effect" and is also useful for changing the system palette to provide a gradient background. Some platforms (such as the Commodore 64, Amiga, Master System, PC Engine/TurboGrafx 16, Sega Mega Drive/Genesis, Super NES, Game Boy, Game Boy Advance and Nintendo DS) provide a horizontal blank interrupt for automatically setting the registers independently of the rest of the program. Others, such as the NES, require the use of cycle timed code, which is specially written to take exactly as long to execute as the video chip takes to draw one scanline, or timers inside game cartridges that generate interrupts after a given number of scanlines have been drawn. Many NES games use this technique to draw their status bars, and Teenage Mutant Ninja Turtles II: The Arcade Game and Vice: Project Doom for NES use it to scroll background layers at different rates. More advanced raster techniques can produce interesting effects. A system can achieve a very effective depth of field if layers with rasters are combined; Sonic the Hedgehog, Sonic The Hedgehog 2, ActRaiser, Lionheart, Kid Chaos and Street Fighter II used this effect well. If each scanline has its own layer, the Pole Position effect is produced, which creates a pseudo 3D road (or a pseudo 3D ball court as in NBA Jam) on a 2D system. If the display system supports rotation and scaling in addition to scrolling—an effect popularly known as Mode 7—changing the rotation and scaling factors can draw a projection of a plane (as in F Zero and Super Mario Kart) or can warp the playfield to create an extra challenge factor. Another advanced technique is row/column scrolling, where rows/columns of tiles on a screen can be scrolled individually. This technique is implemented in the graphics chips of various Sega arcade system boards since the Sega Space Harrier and System 16, the Sega Mega Drive/Genesis console, and the Capcom CP System, Irem M 92 and Taito F3 System arcade game boards.

Пример

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

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

Одно из первых воплощений эффекта параллаксной прокрутки в браузере было создано и опубликовано в блоге веб-разработчика Glutnix в 2007 году. В публикации был представлен пример кода и демонстрация, реализованные с помощью JavaScript и CSS 2, поддерживавшие Internet Explorer 6 и другие браузеры того времени. В февральской статье 2008 года на веб-дизайн блоге Think Vitamin веб-дизайнер Пол Аннетт объяснил, как он создал эффект параллакса, используя только CSS, без JavaScript, для сайта Silverback – приложения для тестирования юзабилити. Он продемонстрировал этот эффект на сцене SXSW Interactive 2009 с помощью участия аудитории и человека в костюме гориллы. Сторонники утверждают, что это простой способ подчеркнуть динамичность веб-пространства, приводя в пример сайт Silverback как первый известный им пример использования этого эффекта. Приверженцы используют параллаксные фоны как инструмент для повышения вовлеченности пользователей и улучшения общего впечатления от веб-сайта. Однако исследование, проведенное Университетом Пердью и опубликованное в 2013 году, показало следующее: «хотя параллаксная прокрутка улучшает отдельные аспекты пользовательского опыта, она не обязательно улучшает пользовательский опыт в целом». В не датированном исследовании, проведенном в 2010 году или позже Деде Фредерик, Джеймсом Молером, Михаелой Ворворану и Рональдом Глотцбахом, отмечается, что параллаксная прокрутка «может вызывать тошноту у некоторых людей».