最近在做一款消除类游戏,需要实现强电流横穿屏幕的效果。首先我想到了用粒子系统(Particle System)来实现,但尝试过无数次的参数调整之后,发现粒子系统并不适合做电流、闪电等效果。
剖析原因:
无论是复杂还是简单的粒子系统,核心思路都是通过不断地释放(Emit)离散的、辐射状蔓延的小亮点,来营造诸如火焰、烟雾、爆炸等效果。电流和闪电效果与前者最大的区别在于:前者的粒子移动轨迹是辐射状的,而后者的分布和移动却是线性的(所谓线性,后文具体阐述)。
如果要直观地感受一下电流的运动轨迹,可以在网上搜一搜“等离子求”或“Plasma Ball”等关键字,甚至可以下载相关的手机应用来体验一下。
下图是本人在Windows Phone 7上利用XNA实现的电流效果:
欢迎下载示例代码。
设计思路:
我认为电流的运动模型可以抽象为:
每一股电流,都是由一系列小亮点组成。而在任意时刻,这些小亮点都沿着某一特定曲线分布。在该曲线中选择若干个特征点,然后通过不断移动这些特征点的位置,就能模拟一股电流的蠕动效果。
请看下面的图示:
上图中,蓝色直线连接着一股电流的起点和终点。5个红色小点,就是我们选取的特征点。
试着想象一下,在某一时刻,这5个点分别位于各自活动范围内的任意位置。那么,其效果就会是如下图所示:
上图中,红色的连线代表着实际的小亮点分布曲线。当然,利用直线来连接两个特征点是最简单的做法,却显得有些不够逼真。我们可以采用不同的曲线计算方法来对此进行改善。下图就是利用Catmull Rom算法来改善后的效果:
注:Catmull Rom方法是XNA的Vector2 类中自带的方法。有关Catmull Rom算法的详细介绍,请参考网上的相关文章。
进一步改善:
实际上,上述这些特征点并漫无边际地运动,而是应该在某一特定范围内移动。请看下图:
蓝色半透明圆形区域,是每个特征点所对应的移动范围。每个小亮点都从原点出发,沿着某一随机的方向,按照某一随机速度,努力向外游动,当达到半径所示范围边界时,就会回到原点,再次沿着另一个方向移动。这样一来就能够营造出更加逼真的电流效果(请参考网上的一些Plasma Ball的动画,电流在弯曲到一定程度后,就会重新开始蠕动)。
闪烁效果:
电流的蠕动已经实现了,但还不够。再次仔细观察Plasma Ball的效果,你会发现电流在蠕动过程中,还有闪烁的效果。闪烁的效果可以不断修改每个小亮点的透明度来实现。
但是!人类的眼睛实在是太过尖锐了,任何机械的变化都会令我们感到很做作。因此,还需要不断随机变更小亮点本身的材质。材质的变更要遵循“大同小异”的原则,在颜色和尺寸上稍作修改即可,否则就会产生“乱七八糟”的感觉,过犹不及嘛。
意外收获:
由于每个特征点都是各自独立地移动,因此必然会在某一时刻,一部分特征点彼此靠近一些,而另一部分特征点则相互远离一些。这种不均匀的分布,使得电流上的明暗分布产生了变化:小亮点愈集中的地方,视觉效果就越明亮。更有趣的是,在电流不断蠕动过程中,这些明暗的变化也在“肆意”移动,进一步满足了喜欢追求新鲜感的眼球。
代码结构简介:
示例代码中,JasonElectricEffect项目是一个可重用的Windows Phone 7 Library。其中:
1. ElectricEffect是代表一个电流效果的类,它可以包含若多个ElectricFlow对象(顾名思义,代表一股电流)。
2. 每一个ElectricFlow对象,都包含若干个ElectricNode对象(即上文中所提及的特征点)。
3. 通过ElectricEffectType枚举变量来指定特征点之间曲线的计算方法,包括:Line(直线)、Bezier(贝塞尔曲线)、CatmullRom(翻译成啥才好?)。不同的曲线可营造出不同的感觉,或铿锵尖锐,或婉转流畅。
4. ElectricEffect类的Density属性定义了特征点与特征点之间,小亮点分布的密度。
5. ElectricFlow的LifeSpan属性用来定义每隔多久要变更一次小亮点的材质。
关于如何快速生成一个电流效果,请参考JasonElectricEffectDemo项目中GamePage.xaml.cs文件里的InitElectricEffect()方法。
这篇文章代码较少,分析的文字多了些,感谢读到最后的每一位朋友。
欢迎下载示例代码,并分享改善和扩展的想法。
作者: 李靖南 出处:http://elecpiano.blog.51cto.com/ Email: elecpiano@gmail.com 新浪微博: http://weibo.com/zengnami MSN: zengnami@hotmail.com QQ: 52717278 关于作者: 从事微软平台解决方案的设计与实现。主要专注于 Windows 8 及 Windows Phone 7 应用开发,及前者与微软云计算平台(Azure)的结合。
本文版权归作者和51CTO共有,欢迎转载,但未经作者同意则必须保留此段声明,并在文章较明显位置给出原文连接。非常感谢! |
转载于:https://blog.51cto.com/elecpiano/818127