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

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

视察滚动是计算机图形学以及网页设计中的技术。原理就是在二维场景中创建一个深度错觉,背景图像跟随摄影机移动的速度比前景图像要慢。该技术起源于20世纪30年代在传统动画中使用的多平面成像技术。视差滚动得益于在街机游戏 Moon Patrol 和 Jungle 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/GenesisSuper NESGame BoyGame Boy Advance and Nintendo DS)会用 horizontal blank interrupt 自动设置寄存器独立于程序的其余部分。其他的系统如NES,需要使用周期定时代码(这些专门书写的代码的执行时间与视频芯片画一条扫描线的时间差不多),或者游戏卡带内的定时器(一定数量的扫描线画完后产生 interrupts)。很多NES游戏会使用这一技术绘制状态栏,NES上的Teenage Mutant Ninja Turtles II: The Arcade Game 和 Vice: Project Doom 使用该技术用不同的速率滚动背景层。

更先进的光栅技术可以产生有趣的效果。如果光栅层混合的话,系统可以产生非常有效的景深。Sonic the HedgehogSonic The Hedgehog 2ActRaiserLionheart and Street Fighter II 中很好的使用这个效果。如果每条扫描线都有自己的图层,就会产生 Pole Position 的效果,就是在2D系统中创建一个伪3D的道路(或者 NBA Jam 游戏中的伪3D球场)。如果显示系统除了滚动还支持旋转和缩放,就可以产生 Mode 7 中的所熟知的特效。改变旋转和缩放因子可以绘制一个平面的投影(比如在 F-Zero 和 Super 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年发布的研究报告表明:“虽然视差滚动增强了某些方面的用户体验,但它并没有提高整体的用户体验”。

参见

时间: 2025-01-04 00:35:49

视差滚动技术的简介及运用的相关文章

神奇的滚动动画,30个视差滚动网站设计

使用 HTML5 和 CSS3,我们能够在浏览器中创建更有趣和更吸引眼球的效果.其中,视差滚动(Parallax Scrolling)就是这样的效果之一.这种技术通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果. 第一个视差滚动效果的网站是由伊恩·科伊尔在2011年设计的(叫“Nike Better World”,现在已经改版了).如今,视差滚动已经通过各种各样方式被大量使用,这是一个创建愉快的用户体验的伟大的方式. 在这个综合列表中,推荐了30个梦幻般的

视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚动? 视 差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快. 当我们坐在车上向车窗外 看时,也会有 这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中都使用视差效果来增加场景的立体感.说的简单点就是网页内的元素 在滚动屏幕

40个极好的视差滚动国外网站

视差滚动是网页设计的新创新技术,它实现方法通常是使用HTML5和CSS3实现,视差滚动除了强大的前端技术支持外,更多的创意发挥.如果一个好的视差滚动网站,它很容易吸引用户并且让人留下深刻印象. 这里我们整理了一系列相关视差效果的网站,很多不同的创意展示,而且有的是惊人的,如果你也想制作一个类似的项目,我想这是你最好的灵感来源.前面我们分享过<34个网页视差滚动插件和视差特效教程分享>,或许对你也有帮助哦! 更多优秀网页设计例子:<极好的交互设计 19个创意网页设计欣赏><15

利用background-attachment做视差滚动效果

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看看eBay上的效果:http://www.ebay.com/new/ 其实就是固定背景不让它随着滚动轴移动,但包含背景的容器是跟着滚动的,所造成的视觉差异看起来就像跟转换场景一样.(这个解释别嫌混乱-) 在CSS中定义背景滚动方式的属性是backgroud-attacthment backgroun

美!视差滚动在图片滑块中的应用【附源码下载】

视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大家分享过,这里再推荐一下.美女很养眼吧 :) 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载

视差滚动(Parallax Scrolling)效果的原理和实现(转)

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果:http://www.ok-studios.de/home/ 一.什么是视差滚动? 视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快.当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中

swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动

原文:swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动 9.9 移除场景之外的平台 用为平台是源源不断的产生的,如果不注意销毁,平台就将越积越多,虽然在游戏场景中看不到.几十个还看不出问题,那几万个呢?几百万个呢? 所以我们来看看怎么移除平台,那什么样的平台需要移除呢?又如何移除呢?之前我们也说过,当平台完全移除游戏场景的时候就可以进行移除操作了.需要做两个操作,1从平台工厂类中移除,2从平台数组中移除. 而且,因为平台是一个接一个出现的,所以我们不需要每次都遍历

Sequence.js 实现带有视差滚动特效的图片滑块

Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 效果演示     插件下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTM

视差滚动学习笔记(1):整屏滚动

转载请注明出处: 猩猩队长  http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为2014年网页设计的热点趋势,越来越多的网站应用了这项技术.http://www.awwwards.com/top-10-web-design-topics-of-2014.html 这里有一些在awwwards上获