視差捲動(中國大陸作視差滾動,台灣作視差捲動)是電腦圖學中使用的技術,通過在攝影機移動過程中,讓背景圖像的移動速度比前景圖像慢的方式在二維場景中創造景深錯覺。[1]該技術起源於20世紀30年代在傳統動畫[2]中使用的多平面成像技術。
此條目翻譯品質不佳。 (2023年1月20日) |
視差捲動在2D電腦圖形在20世紀80年代引入電子遊戲時被廣泛使用。1981年的街機遊戲《跳跳車》[3]中,視差捲動被有限的使用,在主場景捲動的同時背景的星空保持靜止,同時雲朵緩緩移動,營造了背景的深度。1982年,街機遊戲《登月車》[4][5]中完整的實現了視差捲動,由三層不同的背景層以不懂速度捲動而模擬其間的距離變化。這一作品通常被認為是視差捲動技術被廣泛運用的開山製作。1982年發售的《叢林大戰》[6]也出現了視差捲動技術的運用。
方法
有些顯示系統支援多背景圖層,允許圖層在水平或者垂直方向獨立捲動並混成為一個圖層來模擬多平面相機技術。以這種顯示系統呈現的遊戲可以通過在同一方向上以不同速度移動圖層位置的方式產生視差。移動越快的圖層距離虛擬攝影機越近。通常來說,這樣的圖層都會置於主場景(包含與玩家互動對象的圖層)的後面作為背景;但出於各種原因,如增強維度感,掩蓋遊戲的部分動作,或干擾玩家操作等,圖層可以放在主場景的前面。
如果在顯示系統上可用的話,程式設計師也可能會製作精靈(在圖層上或者圖層後由硬件繪製的可控制的移動物體)的假層。例如《星際力量》,紅白機上的一款俯視垂直捲軸射擊遊戲,它的星空背景使用了視差捲動;還有超級任天堂平台上的街頭快打在主場景的前圖層上也使用了該方式。
Amiga電腦系統的精靈可以設置為任意高度,配合Copper協處理器還可以把其設置為水平,這對於實現視差捲動來說非常理想。Amiga電腦上的屠魔大法師使用多路復用的精靈以建立全屏幕的視差背景圖層[7]以取代系統本身的雙場模式。
由獨立的貼圖塊構成的捲動顯示層可以在重複背景圖層的上面繪製以產生「浮動」感覺,從而製造視差捲動效果。顏色迴圈技術可以在整個熒幕上快速建立貼圖塊動畫。軟件效果使另外的層(硬件)產生了錯覺。很多遊戲將這一技術用在捲動的星空背景上。但有時也要實現更複雜以及多方位的效果,比如 Sensible Software 開發的遊戲 Parallax。
在光柵圖形中,一張圖像的像素線通常是在畫一條線和畫另一條線之間自上而下的順序構成及重新整理並且會有輕微延遲(稱為水平消隱間隔)。為老舊的圖像晶片組設計的遊戲(例如第三和第四代的電子遊戲機,還有那些專門的電視遊戲,或類似的手持系統),會利用光柵的特點,創造更多層的錯覺。
有些顯示系統只有一個圖層。包括最經典的8位元系統(如Commodore 64電腦、紅白機、世嘉Master System、PC Engine/TurboGrafx-16和最初的Game Boy)。在這些系統上的更複雜的遊戲通常將圖層分為水平條,每個都有不同的位置和捲動的速度。通常情況下,在熒幕上越高的水平條表示離虛擬相機越遠,或者被固定的水平條用來顯示狀態資訊。然後程式將等待水平空白,在顯示系統開始繪製每一條掃描線之前改變圖層的捲動位置。這被稱為「光柵效應」,也有助於改變系統調色盤來產生一個漸變背景。
有些平台(如Commodore 64、Amiga、世嘉Master System[8],PC Engine/TurboGrafx-16[9]、世嘉Mega Drive/Genesis、超任、Game Boy、Game Boy Advance和任天堂DS)會用水平消隱間隔自動設置暫存器獨立於程式的部分。其他的系統如紅白機,需要使用周期定時程式碼(這些專門書寫的程式碼的執行時間與視頻晶片畫一條掃描線的時間差不多),或者遊戲卡匣內的定時器(一定數量的掃描線畫完後產生中斷)。很多紅白機遊戲會使用這一技術繪製狀態列,紅白機上的《忍者神龜 街機版》和GUN-DEC使用該技術用不同的速率捲動背景層。
更先進的光柵技術可以產生有趣的效果。如果光柵層混合的話,系統可以產生非常有效的景深。《超音鼠》、《超音鼠2》、《雷莎出擊》、《Lionheart》和《街霸2》中很好的使用這個效果。如果每條掃描線都有自己的圖層,就會產生Pole Position遊戲的效果,就是在2D系統中建立一個偽3D的道路(或者NBA Jam遊戲中的偽3D球場)。如果顯示系統除了捲動還支援旋轉和縮放,就可以產生Mode 7中的所熟知的特效。改變旋轉和縮放因子可以繪製一個平面的投影(比如在《F-Zero》和《超級馬里奧賽車》中)或者通過建立額外因子可以彎曲主場景。
另一種先進的技術是行/列捲動。它可以使熒幕上的磚塊的行/列單獨捲動[10]。這種技術在很多世嘉的街機主機板(從Sega Space Harrier和System 16[11]開始)、世嘉Mega Drive/Genesis遊戲機[12]、Capcom CP系統、Irem M-92、Taito F3系統街機遊戲主機板中得以實現。
範例
在下面的動畫中,三個圖層以不同的速度向左移動。它們的速度從前到後依次遞減,相對於觀察者的距離則依次遞增。地面的移動速度是植被層的8倍。植被層的移動速度是雲層的兩倍。
-
雲層 - 背景
-
植被層 - 中景
-
地面層 - 前景
-
動畫(點擊播放)
網頁設計中的視差捲動
網頁端的首個視差捲動的實現是由網頁設計師Glutnix在2007年所製作並分享在自己的一篇博文上的。這一範例使用了JavaScript和CSS 2,支援Internet Explorer 6和其他當時的瀏覽器。然而,直到2011年HTML 5和CSS 3被大面積推廣後,視差捲動設計才在網頁設計中開始流行。擁護者認為這是迎接響應式網頁設計的簡單方式。支持者將視差背景作為工具以貼近用戶並且提升網站的整體體驗。不過,2013年普渡大學研究者發佈的研究報告表明:「……雖然視差捲動增強了某些方面的用戶體驗,但它並不一定提高整體的用戶體驗」。[13]
參考文獻
參見
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.