注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

真实的3D下雪效果  

2014-01-14 00:20:32|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

        一个自定义AS3 SnowDisplay类,这个类可以用来创建多种雪花动画效果。可以添加雪花动画到你的图片或者把它放到一个对象的后面。你可以将你的图形放在两个SnowDisplay实例中间,创建一个神奇的实时视觉效果。雪花掉落动画的大小和雪花的属性都是通过参数可以很简单的参数操作来控制。点击这两个图片以在单独的窗口中打开对应的applet。

    下载两个范例的源文件:snow.zip

  关于效果

     雪花的移动方式有点想在空气中的波动模式,不是一直都下坠的。尽管如此,这对简单制作雪花以独立的随机运动放在四周还是不够的,因为附近的雪花都是以相同的方法运行的。我们需要的是一些类似的矢量场,这个用来定义波动引发的加速度,波动可以根据雪花所在的位置加在每个粒子上。但是,这将会更加的复杂和效率低下。

  解决方案,使用Perlin噪音来决定雪花的加速度,我们使用视差效应来制作3D效果。我们将在此指导手册的下一页更详细的介绍此方法。

  如何自定义

  为了使雪花效果尽量能够简单的使用,我们创建了SnowDisplay类继承Sprite类。因此,一个SnowDisplay是一个可以添加到舞台的交互显示对象。你只需要简单的调用新关键字的构造器就可以创建一个雪花效果:

  var snow: SnowDisplay = new SnowDisplay (550,300);

  以上代码创建了一个宽550,高300的雪花显示。一旦添加到舞台,他将开始下雪。雪花效果可以通过在SnowDisplay后面放置一个bitmap(或者其他图形)放在你选择的图片前面。

  在第一个applet中,我们用一些单选按钮展示了这个下雪类的潜力,这些单选按钮允许你设置不同参数来观察效果。可以做更多的雪花效果;做些试验看看你喜欢什么样的效果。在第二个范例中,我们放置了两个SnowDisplay实例:一个是在对象之前,一个在之后。我们这样做是想达到一个在松树前面的雪花更大,在松树后面的雪花更小的效果。另外,两个实例都在窗口之后。

  这里的基本代码是根据Dan的一些粒子范例改编的。SnowDisplay类使用一个更基础的ParticleDisplay类,这个类和我们在之前的例子范例中使用的相同,但是这个是简化了的。很明显,我们做了一个重要的更改:我们早期范例使用粒子随着时间而演变(变得更大或者更小,改变颜色等等)。这个要求粒子在每帧上可以擦除和重画。这里,粒子根本不改变,只需要改变他们的位置。ParticleDisplay类可以用于在显示区域移动的不改变例子的其他应用。

  执行最优化

  在我们的测试中,我们注意到使用大量的雪花的时候,动作可以执行,但是在动画不是很平滑,特别是在Snow Leopard Macs 上的时候。为了在一个不同范围的不同系统中增加雪花动画的相像性,可以把参数设置一下以造成较少的雪花坠落。

  SnowDisplay的公开属性waitCount设置在新的雪花添加到显示之前等待多少帧,公开属性particlesToAddEachFrame 设置将要添加多少雪花。因此,一个更高的waitCount或者一个更低的particlesToAddEachFrame 将可以让更少的雪花坠落。你可以在SnowDisplay.fla(对应我们的第一个范例)文件中看这些属性的不同值的表现。同时,你也可以用3D效果的深度做试验。使用一个更打的深度将造成背后的粒子坠落更慢,这样他们将在显示中逗留更久。改变zBack和zRange属性(代码中的注释有解释)的值可以设置动画使用更小的深度。

动画方法

  如我们在第一页讨论过的,为了创建一个张女士的下雪效果我们需要创建一个矢量场,这个矢量场根据粒子在空间的位置据顶加到雪花上的加速度。我们的解决方法是使用Perlin噪音去创建这个矢量场。由于Perlin噪音可以根据时间平滑的改变,矢量场可以持续改变,矢量场代表空气反复无常的漂浮和旋转。

  基本的解决方法是:一个位图是用Perlin噪音创建和填充的,仅使用红色和蓝色色道。当雪花在对应的位置的时候,加速度将由bitmap对应位置的颜色的色素决定。红色元件决定x方向的接速度,蓝色元件决定y方向的加速度。(注意我们创建了一个非常小的位图:创建一个和显示对象一样大的位图将很浪费,因为在显示对象上的雪花将更稀落。当计算对应的加速度的时候,雪花位置将对应一节一节的下降)。

Perlin噪音方法为2D效果工作的很好,但是我们现在要深入一点创建一个三维的下雪效果。代替使用Flash的自带的3D方法,我们决定简单使用视差效应,通过计算距离,调整物体的变大和缩小来模拟物体和观察者之间的距离。由于雪花都是白色的,我们不需要担心深度排列。一个离观察者更近的粒子要画在离观察者较远的粒子之上,但是如果它们是相同的颜色的话,就没有什么不同了。

  但是我们要如何创建我们的矢量场呢,并且我们现在需要的是一个三维的?一个简单的解决方案是使用两个位图:一个代表一直在后面的例子的加速度,另一个位图代表前面的粒子的加速度。 对于有些时候在之间的例子,我们插入前面和后面位图的红色和蓝色值以决定加速度。同时为了简化问题,雪花仅在x和y方向上移动,不会在z方向上移动(朝向或者远离观察者)。

  在我们在这个指导手册中贡献的第一个applet中,我们可以看见两个Perlin噪音位图在左下角。注意看这个位图有多小。这个小尺寸就是要用来制作我们效果的。

  在这里的叙述中我们漏掉了一些细节。例如,红色和蓝色的平均值持续的在重新计算,这些平均值用来补偿加速度总数。同时,由于前面可见的矩形代表了比后面的更少的空间。代码非常好的注释了,他内部工作仔细研究的话会很清晰的。

  这里有一些可以用来更改雪花视觉效果的参数。例如,雪花下落得有多远,深度是多少,重力,空气阻力,波动和风力。在前一页上的第一个applet中给出的不同单选按钮说明了这些参数的效果。

也许我们需要的只是一个简单的二维下雪效果。这个可以通过布尔属性make2D设置为true来实现。一个2D下雪效果可以在我们第一个applet的第四个单选按钮上观察得到。

  物理模型

  有一点点阻力,物体超地球落下的加速度是根据重力的。尽管如此,物体们,例如雪花朝地面落下是用一个恒定的速度的,叫做最终速度,这个是根据空气阻力的减缓得来的。我们在代码中将此建模,设置空气阻力和重力的参数,允许雪花相应的运动。在没有波动的情况下,雪花的最终速度将是重力除以空气阻力因子的平方根,你将可以在我们的代码中看到,这就是我们设置雪花的初始速度。因此,如果你要看雪花移动,比默认参数移动的更慢,你可以增加空气阻力或者减少重力常量。

  在显示中添加更多对象

  也许你想在雪花显示的一个特别的深度上放一个图形对象,希望在此对象附近的雪花穿过这个物体的前面,远离的雪花在它后面掉落。最简单方法是放置两个SnowDisplay对象:一个是雪花在后面的,一个是雪花在前面的。其他对象可以放置在这两个对象中间。当然,你需要为单独的SnowDisplay设置z值参数,这样他们覆盖不同的深度区域。我们在前一页的第二个范例中应用了这个放置技术。

下载两个范例的源文件: snow.zip
  评论这张
 
阅读(55)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017