视差滚动(台湾作视差卷动)是计算机图形学中使用的技术,通过在摄影机移动过程中,让背景图像的移动速度比前景图像慢的方式在二维场景中创造景深错觉。[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). 

参见

编辑