视差滚动技术的简介及运用

维基百科地址:https://en.wikipedia.org/wiki/Parallax_scrolling

视察滚动是计算机图形学以及网页设计中的技术。原理就是在二维场景中创建一个深度错觉,背景图像跟随摄影机移动的速度比前景图像要慢。该技术起源于20世纪30年代在传统动画中使用的多平面成像技术。视差滚动得益于在街机游戏 Moon PatrolJungle Hunt 中的推广。两款游戏都是在1982年发行。有一些视察滚动技术在1981年发行的街机游戏 Jump Bug 中已经使用。

方法

在街机系统板、电子游戏机和个人电脑系统中有4中实现视差滚动的方法。

1.图层方法

有些显示系统支持多背景图层,这些图层可以在水平或者垂直方向独立滚动并且合成一个图层来模拟多平面相机。在这种显示系统中,一款游戏可以通过在同一方向上以不同变量移动图层位置的方式产生视差。移动越快的图层距离虚拟摄影机越近。图层可以放在 playfield (包含与玩家交互对象的图层)的前面,这样对于各种原因,如提供增加的维度,可以掩盖了游戏的一些动作,或分散玩家的注意力。

The Whispered World 中使用视差滚动图层的侧视图

上图的正视图

2.Sprite 方法

 程序员可能会制作 sprites (在图层上或者图层后面由硬件绘制的可控制的移动物体)的假层,如果它们在显示系统上可用的话。例如 Star Force ,NES上的一个俯视垂直滚动射击游戏,它的星空背景使用了视差滚动。还有Super NES上的 Final Fight 在主要的playfield前面的图层上也使用了该技术。

使用copper处理器的Amiga 电脑的sprites可以有任意高度并且可以设置水平,这对于实现视差滚动非常理想。Amiga 电脑上的 Risky Woods使用多路复用的sprites,这是为了创建全屏的视差背景图层以取代系统的双场模式。

3.重复模式/动画方法

 为了实现视差效果,由个性砖块构成的滚动显示层可以浮动在重复背景图层的上面以产生个性砖块位图的动画。彩色循环技术可以在整个屏幕上快速创建砖块动画。软件效果使另外的层(硬件)产生了错觉。很多游戏将这一技术用在滚动的星空背景上。但有时也要实现更复杂以及多方位的效果,比如 Sensible Software 开发的游戏 Parallax。

4.光栅方法

 在光栅图形中,一张图像的像素线通常是在画一条线和画另一条线之间自上而下的顺序构成及刷新并且会有轻微延迟(称为 horizontal blanking interval)。为老旧的图像芯片组设计的游戏(例如第三和第四代的视频游戏机,还有那些专门的电视游戏,或类似的手持系统),会利用光栅的特点,创造更多层的错觉。

有些显示系统只有一个图层。这些包括最经典的8位系统(如Commodore 64 计算机,任天堂娱乐系统, 世嘉 Master SystemPC Engine/TurboGrafx-16 和最早的 Game Boy)。在这些系统上的更复杂的游戏通常将图层分为水平条,每个都有不同的位置和滚动的速度。通常情况下,在屏幕上越高的水平条表示离虚拟相机越远,或者被固定的水平条用来显示状态信息。然后程序将等待水平空白,在显示系统开始绘制每一条扫描线之前改变图层的滚动位置。这被称为“光栅效应”,也有助于改变系统调色板来产生一个渐变背景。

 有些平台(如Commodore 64 计算机,Amiga世嘉 Master SystemPC Engine/TurboGrafx-16世嘉 Mega Drive/Genesis, Super NES, Game Boy, Game Boy Advance and Nintendo DS)会用 horizontal blank interrupt 自动设置寄存器独立于程序的其余部分。其他的系统如NES,需要使用周期定时代码(这些专门书写的代码的执行时间与视频芯片画一条扫描线的时间差不多),或者游戏卡带内的定时器(一定数量的扫描线画完后产生 interrupts)。很多NES游戏会使用这一技术绘制状态栏,NES上的Teenage Mutant Ninja Turtles II: The Arcade GameVice: Project Doom 使用该技术用不同的速率滚动背景层。

更先进的光栅技术可以产生有趣的效果。如果光栅层混合的话,系统可以产生非常有效的景深。Sonic the Hedgehog, Sonic The Hedgehog 2, ActRaiser, Lionheart and Street Fighter II 中很好的使用这个效果。如果每条扫描线都有自己的图层,就会产生 Pole Position 的效果,就是在2D系统中创建一个伪3D的道路(或者 NBA Jam 游戏中的伪3D球场)。如果显示系统除了滚动还支持旋转和缩放,就可以产生 Mode 7 中的所熟知的特效。改变旋转和缩放因子可以绘制一个平面的投影(比如在 F-ZeroSuper Mario Kart 中)或者通过创建额外因子可以弯曲playfield。

另一种先进的技术是行/列滚动。它可以使屏幕上的砖块的行/列单独滚动。这种技术在很多世嘉的街机系统板(从Sega Space Harrier and System 16开始)、世嘉 Mega Drive/Genesis 游戏机、 Capcom CP 系统Irem M-92Taito F3 系统 以及 街机游戏板 中得以实现。

示例

 在下面的动画中,三个图层以不同的速度向左移动。它们的速度从前到后依次递减,相对于观察者的距离则依次递增。地面的移动速度是植被层的8倍。植被层的移动速度是云层的两倍。

Cloud Layer - Back

Vegetation Layer - Middle

Ground Layer - Front

Animation (click to play)

网页设计中的视察滚动

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

参见

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小作坊

中文排版二三事

前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

9910
来自专栏MixLab科技+设计实验室

从线条艺术到DIY实现一个网状体Net的js库

今天无意中看到一个可视化作品: WHAT MADE ME? INTERACTIVE PUBLIC INSTALLATION Most Original Exh...

32060
来自专栏对角另一面

vue-auto-focus: 控制自动聚焦行为的 vue 指令

在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面...

38700
来自专栏菜鸟前端工程师

html+css学习笔记019-H5响应式布局0自适应布局

40520
来自专栏程序员的诗和远方

20180728_ARTS_week05

这题有点犯难,上面是 Discuss 中的一个解法,看了之后挺好理解的,要找回环字符串,就从 a 和 aa 一阶和二阶这两种形式往两边找,感觉特别巧妙。

10520
来自专栏前端知识分享

第1天:CSS基本样式

记住:浏览器有默认margin和padding。样式最开始记得一定写:*{margin:0;padding:0}。

13020
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

16930
来自专栏IT大咖说

从UI到AI——移动端H5生成技术漫谈

15150
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

40330
来自专栏Coco的专栏

【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

32050

扫码关注云+社区

领取腾讯云代金券