視差滾動

本頁使用了標題或全文手工轉換
維基百科,自由的百科全書

視差捲動(中國大陸作視差滾動)是計算機圖形學中使用的技術,通過在攝影機移動過程中,讓背景圖像的移動速度比前景圖像慢的方式在二維場景中創造景深錯覺。[1]該技術起源於20世紀30年代在傳統動畫[2]中使用的多平面成像技術。

視差滾動在二維計算機圖形在20世紀80年代引入電子遊戲時被廣泛使用。1981年的街機遊戲《跳跳車[3]中,視差滾動被有限的使用,在主場景滾動的同時背景的星空保持靜止,同時雲朵緩緩移動,營造了背景的深度。1982年,街機遊戲登月車[4][5]中完整的實現了視差滾動,由三層不同的背景層以不懂速度滾動而模擬其間的距離變化。這一作品通常被認為是視差滾動技術被廣泛運用的開山製作。1982年發售的《叢林大戰[6]也出現了視差滾動技術的運用。

方法

街機主板電子遊戲機個人電腦系統中實現視差滾動的方法主要有4種。

圖層法

圖層法演示
風語世界中使用視差滾動圖層的側視圖
上圖的正視圖

有些顯示系統支持多背景圖層,允許圖層在水平或者垂直方向獨立滾動並混成為一個圖層來模擬多平面相機技術。以這種顯示系統呈現的遊戲可以通過在同一方向上以不同速度移動圖層位置的方式產生視差。移動越快的圖層距離虛擬攝影機越近。通常來說,這樣的圖層都會置於主場景(包含與玩家交互對象的圖層)的後面作為背景;但出於各種原因,如增強維度感,掩蓋遊戲的部分動作,或干擾玩家操作等,圖層可以放在主場景的前面。

精靈法

如果在顯示系統上可用的話,程序員也可能會製作精靈(在圖層上或者圖層後由硬件繪製的可控制的移動物體)的假層。例如《星際力量》,紅白機上的一款俯視垂直捲軸射擊遊戲,它的星空背景使用了視差滾動;還有超級任天堂平台上的快打旋風在主場景的前圖層上也使用了該方式。

Amiga電腦系統的精靈可以設置為任意高度,配合Copper協處理器還可以把其設置為水平,這對於實現視差滾動來說非常理想。Amiga電腦上的屠魔大法師使用多路復用的精靈以創建全屏的視差背景圖層[7]以取代系統本身的雙場模式。

重複紋理/動畫法

由獨立的貼圖塊構成的滾動顯示層可以在重複背景圖層的上面繪製以產生「浮動」感覺,從而製造視差滾動效果。顏色循環技術可以在整個屏幕上快速創建貼圖塊動畫。軟件效果使另外的層(硬件)產生了錯覺。很多遊戲將這一技術用在滾動的星空背景上。但有時也要實現更複雜以及多方位的效果,比如 Sensible Software 開發的遊戲 Parallax。

光柵法

光柵圖形中,一張圖像的像素線通常是在畫一條線和畫另一條線之間自上而下的順序構成及刷新並且會有輕微延遲(稱為水平消隱間隔)。為老舊的圖像芯片組設計的遊戲(例如第三和第四代的電子遊戲機,還有那些專門的電視遊戲,或類似的手持系統),會利用光柵的特點,創造更多層的錯覺。

有些顯示系統只有一個圖層。包括最經典的8位系統(如Commodore 64計算機、紅白機世嘉Master SystemPC Engine/TurboGrafx-16和最初的Game Boy)。在這些系統上的更複雜的遊戲通常將圖層分為水平條,每個都有不同的位置和滾動的速度。通常情況下,在屏幕上越高的水平條表示離虛擬相機越遠,或者被固定的水平條用來顯示狀態信息。然後程序將等待水平空白,在顯示系統開始繪製每一條掃描線之前改變圖層的滾動位置。這被稱為「光柵效應」,也有助於改變系統調色板來產生一個漸變背景。

有些平台(如Commodore 64、Amiga、世嘉Master System[8],PC Engine/TurboGrafx-16[9]世嘉Mega Drive/Genesis超任Game BoyGame 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-92Taito F3系統街機遊戲主板中得以實現。

示例

在下面的動畫中,三個圖層以不同的速度向左移動。它們的速度從前到後依次遞減,相對於觀察者的距離則依次遞增。地面的移動速度是植被層的8倍。植被層的移動速度是雲層的兩倍。

網頁設計中的視差滾動

網頁端的首個視差滾動的實現是由網頁設計師Glutnix在2007年所製作並分享在自己的一篇博文上的。這一示例使用了JavaScript和CSS 2,支持Internet Explorer 6和其他當時的瀏覽器。然而,直到2011年HTML 5和CSS 3被大面積推廣後,視差滾動設計才在網頁設計中開始流行。擁護者認為這是迎接響應式網頁設計的簡單方式。支持者將視差背景作為工具以貼近用戶並且提升網站的整體體驗。不過,2013年普渡大學研究者發布的研究報告表明:「……雖然視差滾動增強了某些方面的用戶體驗,但它並不一定提高整體的用戶體驗」。[13]

參考文獻

  1. ^ Cap. O'Rourke to the rescue. New Straits Times Malaysia. 1988-09-01 [2009-07-06]. (原始內容存檔於2019-07-01). 
  2. ^ Paul, Wyatt. The Art of Parallax Scrolling (PDF). August 2007 [2009-07-06]. (原始內容 (PDF)存檔於2009-10-07). 
  3. ^ 存档副本. [2017-03-27]. (原始內容存檔於2021-04-30). 
  4. ^ Stahl, Ted. Chronology of the History of Video Games: Golden Age. 2006-07-26 [2009-07-06]. (原始內容存檔於2013-07-07). 
  5. ^ Gaming's Most Important Evolutions. GamesRadar: 3. October 8, 2010 [2011-04-27]. (原始內容存檔於2012-03-19). 
  6. ^ Jungle Hunt Was a Terrible Waste of Quarters. [2017-03-27]. (原始內容存檔於2019-03-28). 
  7. ^ 存档副本. [2017-03-27]. (原始內容存檔於2015-02-19). 
  8. ^ 存档副本. [2017-03-27]. (原始內容存檔於2019-06-24). 
  9. ^ 存档副本. [2014-03-18]. (原始內容存檔於2014-03-18). 
  10. ^ 存档副本. [2014-01-02]. (原始內容存檔於2014-01-02). 
  11. ^ 存档副本. [2016-08-08]. (原始內容存檔於2016-03-04). 
  12. ^ 存档副本. [2017-03-27]. (原始內容存檔於2015-09-24). 
  13. ^ Dede M. Frederick. The Effects Of Parallax Scrolling On User Experience And Preference In Web Design. Purdue University. Purdue University. 18 April 2013 [17 April 2014]. (原始內容存檔於2014-04-16). 

參見