Cocos2d-x教程(20)-闪电效果

翻译 2014年01月29日 13:21:17

欢迎加入 Cocos2d-x 交流群: 193411763

转载时请注明原文地址:http://blog.csdn.net/u012945598/article/details/18862091

视频地址:http://www.tudou.com/programs/view/WNmDVt1NYEY/

源码下载地址:http://download.csdn.net/detail/u012945598/6890965

原文地址:http://krazydad.com/bestiary/bestiary_lightning.html


原文是一篇讲解闪电路径算法的文章,本文将通过该算法,在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<curDetail)时,我们绘制线段。


原文中的四个滑动条:
1.detail 增加后,线条数量会减少,每个线条会更长。
2.thickness 代表线条的粗细
3.number bolts 代表线条的数量
4.displacement 位移量,也就是线条数值方向偏移的最大值


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

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


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


在.cpp文件中实现


很简单吧,看一下效果图


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

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

cocos2dx-3.2 之 闪电效果

参考闪电特效算法:http://krazydad.com/bestiary/bestiary_lightning.html 算法详细信息可参上述网址 下面直接上代码,这其实就是一个算法问题: .h...

Cocoscreator-基础接口函数

cc.log('你好'); //输出日志:字符串 cc.log(变量);//输出日志:变量 cc.log('第' + number + '表白');//输出日志:字符串,变量混合 let...

Cocos2d-x教程(10)-CCProgressTimer实现页面加载进度条效果

原码下载地址:http://download.csdn.net/detail/u012945598/6683161         相信大家在玩游戏的过程中都会遇到一个loading的界面,lo...

Cocos2d-x教程(6)-粒子效果

源码请到 http://download.csdn.net/download/u012945598/6623377 下载。         Cocos2d-x的粒子系统由CCParticleSy...

Cocos2d-x教程(4)-创建动画效果,TexturePacker工具

在游戏中,我们经常会看到鱼在游,人在跑,那么这些便是通过Cocos2d-x中的动画来实现的,一个动画是由精灵帧序列组成。下面笔者将教大家如何如何将多张图片打包到一起,如何利用打包好的图片生成一个动画。...

Cocos2d-x教程(4)-创建动画效果,TexturePacker工具

在游戏中,我们经常会看到鱼在游,人在跑,那么这些便是通过Cocos2d-x中的动画来实现的,一个动画是由精灵帧序列组成。下面笔者将教大家如何如何将多张图片打包到一起,如何利用打包好的图片生成一个动画。...

Cocos2d-x教程(11)-利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)

源码下载地址:http://download.csdn.net/detail/u012945598/6702495  在我们第一次使用一款软件的时候,都会有一个新手引导的画面,画面上一般会有一个...

Cocos2d-x教程(21)-画板

Cocos2d-x 实现画板功能

Cocos2d-x教程-多线程与异步加载

本文转载原文出处 :http://blog.csdn.NET/u012945598/article/details/41312345 1.为什么要使用多线程       Coc...
  • hushhw
  • hushhw
  • 2017年08月08日 01:43
  • 158
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Cocos2d-x教程(20)-闪电效果
举报原因:
原因补充:

(最多只允许输入30个字)