【转】Cocos2d-X中闪电效果的实现

2014-07-29

字数统计: 764 | 阅读时长≈ 2 分钟

本文将通过讲解闪电路径算法，在Cocos2d-x上面实现闪电特效。

笔者使用的2d-x版本为2.2.2。下面进入正题

这部短片使用了中点位移法来模拟闪电。

中点位移法通常是用于生成分形地形的算法，你会发现闪电的形状类似于一个理想化的山脉的边缘。

下面节选的这段闪电递归程序可以帮你完成所有的工作。

function 
drawLightning(x1,y1,x2,y2,displace)

{

  if

(displace < curDetail) {

    graf.moveTo(x1,y1);

    graf.lineTo(x2,y2);

  }

  else

{

    var

mid_x = (x2+x1)/2;

    var

mid_y = (y2+y1)/2;

    mid_x
+= (Math.random()-.5)*displace;

    mid_y
+= (Math.random()-.5)*displace;

    drawLightning(x1,y1,mid_x,mid_y,displace/2);

    drawLightning(x2,y2,mid_x,mid_y,displace/2);

  }

}

你可以通过传递一个线段的两个端点坐标（x1,y1,x2,y2）和一个位移量，计算出线段终点坐标(mid_x,mid_y)，然后通过一个随机值替换它，该随机值按照每次划分线段时的位移值比例减少。

第一次划分会得到一个较大的位移线段，而之后随着位移值的减小位移线段也会逐渐减小(每次递归位移值都会除以2)，如此便可以使一条线段"碎形"。

当位移值低于我们定义的最小值时(可使用"detail"滑动条修改)，我们就将这条线绘制出来。也就是说满足条件if(displace

原文中的四个滑动条：
1.detail
增加后，线条数量会减少，每个线条会更长。

2.thickness 代表线条的粗细

3.number bolts 代表线条的数量

4.displacement 位移量，也就是线条数值方向偏移的最大值

下面我们将使用该算法，在Cocos2d-x 中实现上图效果。

首先新建一个工程，笔者依旧习惯性的命名为reventon....由于reventon文件夹已经存在了，还是命名为drawlighting吧。

由于实现起来十分简单，所以便直接在HelloWorld里面添加代码吧，首先是HelloWorld.h文件中添加声明

在.cpp文件中实现

很简单吧，看一下效果图

貌似静态图片不是很好看，实际运行效果是和原文中的那个效果相似的。

还有一点需要注意的是，在draw方法中drawLighting函数调用一次实际上只有一根闪电，但是人眼看到的效果会有很多根，因为刷新频率太高的原因，draw函数每帧都会调用。笔者截的那张图实际上是四根闪电，也就是调用了四次drawLighting函数，为了让大家能够看的更清楚一些，因为截屏的时候会固定到某一帧，实际项目看到的效果会有很多闪电。

原文链接：http://krazydad.com/bestiary/bestiary_lightning.html

Donate

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！