视差滚动

视差滚动计算机图形学网页设计中使用的技术。原理是在二维场景中创建一个深度错觉,在摄影机移动过程中,让背景图像的移动速度比前景图像慢。[1]该技术起源于20世纪30年代在传统动画[2]中使用的多平面成像技术。视差滚动得益于二维计算机图形电子游戏的发展,特别是1982年所推出的街机游戏月球战车[3][4]丛林大战[5]。部分视差滚动最早被1981年的街机游戏跳跳车[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倍。植被层的移动速度是云层的两倍。

网页设计中的视差滚动

网页设计师在2011年开始使用Html5和CSS3制作视差滚动。拥护者认为这是迎接流动性网页的简单方式。支持者将视差背景作为工具以贴近用户并且提升网站的整体体验。不过普渡大学在2013年发布的研究报告表明:“虽然视差滚动增强了某些方面的用户体验,但它并没有提高整体的用户体验”。[13]

参考文献

  1. . New Straits Times Malaysia. 1988-09-01 [2009-07-06].
  2. Paul, Wyatt. (PDF). August 2007 [2009-07-06]. (原始内容 (PDF)存档于2009-10-07).
  3. Stahl, Ted. . 2006-07-26 [2009-07-06].
  4. . GamesRadar: 3. October 8, 2010 [2011-04-27].
  5. .
  6. https://books.google.com/books?id=lB4PAwAAQBAJ&pg=PA181
  7. http://www.codetapper.com/amiga/sprite-tricks/risky-woods/
  8. http://www.smspower.org/uploads/Development/richard.txt
  9. . [2014-03-18]. (原始内容存档于2014-03-18).
  10. https://web.archive.org/web/20140102211938/http://mamedev.org/devwiki/index.php?title=Using_MAME%27s_tilemap_system
  11. . [2016-08-08]. (原始内容存档于2016-03-04).
  12. http://www.gamepilgrimage.com/content/sega-genesis-vs-super-nintendo
  13. Dede M. Frederick. . Purdue University. Purdue University. 18 April 2013 [17 April 2014].

参见

  • 伪三维
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.