Параллакс-прокрутка
 | Эта статья нуждается в дополнительных цитатах для проверки . ( сентябрь 2007 г. ) |
 |
| Часть серии о |
| Графика видеоигр |
|---|
Параллаксная прокрутка — это метод компьютерной графики , при котором фоновые изображения движутся мимо камеры медленнее, чем изображения переднего плана, создавая иллюзию глубины в двухмерной сцене на расстоянии. [ 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 ]
Методы
[ редактировать ] | Возможно, этот раздел содержит оригинальные исследования . ( Март 2015 г. ) |
Существует четыре основных метода параллаксной прокрутки, используемых в заголовках для игровых автоматов , игровых консолей и персональных компьютерных систем. [ нужна ссылка ]
Метод слоев
[ редактировать ]
Некоторые системы отображения поддерживают несколько фоновых слоев, которые можно прокручивать независимо в горизонтальном и вертикальном направлениях и накладывать друг на друга, имитируя многоплоскостную камеру . В такой системе отображения игра может создавать параллакс, просто изменяя положение каждого слоя на разную величину в одном и том же направлении. Слои, которые движутся быстрее, воспринимаются как находящиеся ближе к виртуальной камере. Слои могут быть размещены перед игровым полем (слоем, содержащим объекты, с которыми взаимодействует игрок) по разным причинам, например, для увеличения размера, скрытия некоторых действий в игре или отвлечения игрока.
Спрайтовый метод
[ редактировать ]Программисты также могут создавать псевдослои спрайтов — индивидуально управляемых движущихся объектов, нарисованных аппаратным обеспечением поверх или за слоями, — если они доступны в системе отображения. Например, 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 ] Двигатель ПК/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 Этот эффект хорошо использовали . Если каждая строка сканирования имеет свой собственный слой, Поул-позиции создается эффект , который создает псевдо-3D-дорогу (или псевдо-3D площадку для игры в мяч, как в NBA Jam ) в 2D-системе.
Если система отображения поддерживает вращение и масштабирование в дополнение к прокрутке (эффект, широко известный как Режим 7) , изменение коэффициентов вращения и масштабирования может привести к рисованию проекции плоскости (как в F-Zero и Super Mario Kart ) или может деформировать игровое поле. создать дополнительный фактор вызова.
Еще один продвинутый метод — прокрутка строк/столбцов, при которой строки/столбцы плиток на экране можно прокручивать индивидуально. [ 12 ] Этот метод реализован в графических чипах различных игровых системных плат Sega, начиная с Sega Space Harrier и System 16 . [ 13 ] консоль Sega Mega Drive/Genesis, [ 14 ] и система Capcom CP , [ 15 ] Ирем М-92 [ 16 ] и система Тайто F3 [ 17 ] доски для аркадных игр .
Пример
[ редактировать ]В следующей анимации три слоя движутся влево с разной скоростью. Их скорость уменьшается спереди назад и соответствует увеличению относительного расстояния от зрителя. Слой земли движется в 8 раз быстрее растительного слоя. Растительный слой движется в два раза быстрее, чем облачный слой.
-
Слой облаков – сзади -
Растительный слой - средний -
Земляной слой - лицевой -
Анимация
Параллакс-прокрутка в веб-дизайне
[ редактировать ]Одна из первых реализаций параллаксной прокрутки в браузере была создана и опубликована в блоге веб-разработчиком Glutnix в 2007 году. Она включала пример кода и демонстрацию с использованием JavaScript и CSS 2, которые поддерживали Internet Explorer 6 и другие браузеры той эпохи. [ 18 ] [ 19 ]
В феврале 2008 года в учебном пособии блога Think витамин по веб-дизайну веб-дизайнер Пол Аннетт объяснил, как он создал эффект параллакса с помощью CSS и без JavaScript для веб-сайта Silverback, приложения для тестирования юзабилити. [ 20 ] Он продемонстрировал эффект на сцене SXSW Interactive 2009 с помощью участия публики и человека в костюме гориллы. [ 21 ] [ 22 ]
Сторонники утверждают, что это простой способ воспользоваться гибкостью Интернета, ссылаясь на веб-сайт Silverback как на первый пример, с которым они столкнулись. [ 23 ]
Сторонники используют фон параллакса как инструмент для лучшего вовлечения пользователей и улучшения общего впечатления от веб-сайта. Однако исследование Университета Пердью , опубликованное в 2013 году, показало следующие результаты: «... хотя параллаксная прокрутка улучшила определенные аспекты пользовательского опыта, она не обязательно улучшила общее впечатление от пользователя». [ 24 ] В недатированном исследовании, проведенном в 2010 году или после него Деде Фредериком, Джеймсом Молером, Михаэлой Форворяну и Рональдом Глотцбахом, было отмечено, что параллаксная прокрутка «может вызвать у некоторых людей тошноту». [ 25 ]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ «Капитан О'Рурк спешит на помощь» . Нью-Стрэйтс Таймс Малайзия. 1 сентября 1988 г. Проверено 6 июля 2009 г.
- ^ Пол, Вятт (август 2007 г.). «Искусство параллаксной прокрутки» (PDF) . Архивировано из оригинала (PDF) 7 октября 2009 г. Проверено 6 июля 2009 г.
- ^ Пуркару, Богдан Ион (13 марта 2014 г.). «Игры против оборудования. История компьютерных видеоигр: 80-е» . Пуркару Ион Богдан – через Google Книги.
- ^ Выставка Игорь (26 декабря 2013). Чертежи игр для iPhone . Пакт Паблишинг, ООО . п. 339. ИСБН 978-1-84969-027-0 .
- ^ Шталь, Тед (26 июля 2006 г.). «Хронология истории видеоигр: Золотой век» . Архивировано из оригинала 16 июля 2009 г. Проверено 6 июля 2009 г.
- ^ «Важнейшие эволюции игр» . Игровой радар . 8 октября 2010 г. с. 3 . Проверено 27 апреля 2011 г.
- ^ «Охота в джунглях была ужасной тратой кварталов» . Архивировано из оригинала 02 апреля 2015 г. Проверено 27 марта 2015 г.
- ^ Акаги, Масуми (13 октября 2006 г.). телеигр Список аркадных : внутреннее • зарубежное издание (1971–2005 гг .) (на японском языке: Агентство новостей развлечений, стр. 13) . 978-4990251215 .
- ^ «Рискованный лес» . codetapper.com . Архивировано из оригинала 19 февраля 2015 г. Проверено 23 апреля 2015 г.
- ^ «Архивная копия» . Архивировано из оригинала 09.11.2017 . Проверено 4 сентября 2018 г.
{{cite web}}: CS1 maint: архивная копия в заголовке ( ссылка ) - ^ «Архивная копия» . Архивировано из оригинала 18 марта 2014 г. Проверено 18 марта 2014 г.
{{cite web}}: CS1 maint: архивная копия в заголовке ( ссылка ) - ^ «Использование системы тайловых карт MAME — DevWiki» . 2 января 2014 г. Архивировано из оригинала 02 января 2014 г.
- ^ «Архивная копия» . Архивировано из оригинала 4 марта 2016 г. Проверено 8 августа 2016 г.
{{cite web}}: CS1 maint: архивная копия в заголовке ( ссылка ) - ^ «Sega Genesis против Super Nintendo» . gamepilgrimage.com . 11 августа 2009 г. Архивировано из оригинала 24 сентября 2015 г. Проверено 26 сентября 2014 г.
- ^ Лиман, Пол. «Новый клон забытого мира — системный код CP» . Гитхаб . Архивировано из оригинала 25 мая 2015 года.
- ^ «Система 16 — Аппаратура Ирем М92 (Ирем)» . www.system16.com . Архивировано из оригинала 24 декабря 2014 г. Проверено 26 сентября 2014 г.
- ^ «Система 16 — Системное оборудование Taito F3 (Taito)» . www.system16.com . Архивировано из оригинала 21 апреля 2014 г. Проверено 26 сентября 2014 г.
- ^ Бретт Тейлор (20 марта 2007 г.). «Параллакс-фоны — многослойный эксперимент с JavaScript» . Глутникс . внутренний.geek.nz . Проверено 28 июня 2019 г.
- ^ Матиас Кречманн (23 мая 2008 г.). «Демонстрация эффекта параллакса CSS — 12+1 творческое использование» . Глутникс . kremalicious.com . Проверено 28 июня 2019 г.
- ^ Аннетт, Пол (февраль 2008 г.). «Как воссоздать эффект параллакса Сильвербэка» . Архивировано из оригинала 19 июля 2010 г. Проверено 27 февраля 2024 г.
- ^ Марк Норман Фрэнсис (14 марта 2009 г.). «Фото: Пола забавляют гориллы» . Проверено 27 февраля 2024 г.
- ^ Робби Макдонелл (14 марта 2009 г.). «Пол Аннетт из ClearLeft заставляет людей разыгрывать дизайн silverbackapp.com» . Проверено 27 февраля 2024 г.
- ^ Дэн Седерхольм; Итан Маркотт (9 апреля 2010 г.). CSS, созданный вручную: более надежный веб-дизайн . Новые гонщики. стр. 198–199. ISBN 978-0-13-210481-4 .
- ^ Деде М. Фредерик (18 апреля 2013 г.). «Влияние параллаксной прокрутки на пользовательский опыт и предпочтения в веб-дизайне» . Университет Пердью . Архивировано из оригинала 16 апреля 2014 г. Проверено 17 апреля 2014 г.
- ^ Фредерик, Деде. «Влияние параллаксной прокрутки на пользовательский опыт в веб-дизайне». Журнал пользовательского опыта . 10 (2).