利用 XNA 实现 Windows Phone 7 上的电流效果

 

最近在做一款消除类游戏，需要实现强电流横穿屏幕的效果。首先我想到了用粒子系统（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://files.cnblogs.com/elecpiano/JasonElectricEffectDemo.zip

作者: 李靖南 出处: http://www.cnblogs.com/elecpiano Email: elecpiano@gmail.com 新浪微博: http://weibo.com/zengnami MSN: zengnami@hotmail.com QQ: 52717278   关于作者： 从事微软平台解决方案的设计与实现。主要专注方于 Silverlight 及 Windows Phone 7 应用开发，及前者与微软云计算平台（Azure）的结合。   本文版权归作者和博客园共有，欢迎转载，但未经作者同意则必须保留此段声明，并在文章较明显位置给出原文连接。非常感谢！