Cocos2d-JS自定义粒子系统

前端之家收集整理的这篇文章主要介绍了Cocos2d-JS自定义粒子系统前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
除了使用Cocos2d-JS的11种内置粒子系统外,我们还可以通过创建ParticleSystem对象,并设置属性实现自定义粒子系统,通过这种方式完全可以实现我们说需要的各种效果的粒子系统。使用ParticleSystem自定义粒子系统至少有两种方式可以实现:代码创建和plist文件创建。
代码创建粒子系统需要手工设置这些属性,维护起来非常困难,我们推荐使用Particle Designer等粒子设计工具进行所见即所得的设计,这些工具一般会生成一个描述粒子的属性类表文件plist,然后通过类似下面的语句加载:
var particleSystem = new cc.ParticleSystem("res/snow.plist");
snow.plist是描述运动的属性文件,plist文件是一种XML文件,参考代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>angle</key>
	<real>270</real>	
	<key>angleVariance</key>
	<real>5</real>
	<key>blendFuncDestination</key>
	<integer>771</integer>
	<key>blendFuncSource</key>
	<integer>1</integer>
	<key>duration</key>
	<real>-1</real>
	<key>emitterType</key>
	<real>0.0</real>
	<key>finishColorAlpha</key>
	<real>1</real>
	<key>finishColorBlue</key>
	<real>1</real>
	<key>finishColorGreen</key>
	<real>1</real>
	<key>finishColorRed</key>
	<real>1</real>
	<key>finishColorVarianceAlpha</key>
	<real>0.0</real>
	<key>finishColorVarianceBlue</key>
	<real>0.0</real>
	<key>finishColorVarianceGreen</key>
	<real>0.0</real>
	<key>finishColorVarianceRed</key>
	<real>0.0</real>
	<key>finishParticleSize</key>
	<real>-1</real>
	<key>finishParticleSizeVariance</key>
	<real>0.0</real>
	<key>gravityx</key>
	<real>0.0</real>
	<key>gravityy</key>
	<real>-10</real>
	<key>maxParticles</key>
	<real>700</real>
	<key>maxRadius</key>
	<real>0.0</real>
	<key>maxRadiusVariance</key>
	<real>0.0</real>
	<key>minRadius</key>
	<real>0.0</real>
	<key>minRadiusVariance</key>
	<real>0.0</real>
	<key>particleLifespan</key>
	<real>3</real>
	<key>particleLifespanVariance</key>
	<real>1</real>
	<key>radialAccelVariance</key>
	<real>0.0</real>
	<key>radialAcceleration</key>
	<real>1</real>
	<key>rotatePerSecond</key>
	<real>0.0</real>
	<key>rotatePerSecondVariance</key>
	<real>0.0</real>
	<key>rotationEnd</key>
	<real>0.0</real>
	<key>rotationEndVariance</key>
	<real>0.0</real>
	<key>rotationStart</key>
	<real>0.0</real>
	<key>rotationStartVariance</key>
	<real>0.0</real>
	<key>sourcePositionVariancex</key>
	<real>1200</real>
	<key>sourcePositionVariancey</key>
	<real>0.0</real>
	<key>speed</key>
	<real>130</real>
	<key>speedVariance</key>
	<real>30</real>
	<key>startColorAlpha</key>
	<real>1</real>
	<key>startColorBlue</key>
	<real>1</real>
	<key>startColorGreen</key>
	<real>1</real>
	<key>startColorRed</key>
	<real>1</real>
	<key>startColorVarianceAlpha</key>
	<real>0.0</real>
	<key>startColorVarianceBlue</key>
	<real>0.0</real>
	<key>startColorVarianceGreen</key>
	<real>0.0</real>
	<key>startColorVarianceRed</key>
	<real>0.0</real>
	<key>startParticleSize</key>
	<real>10</real>
	<key>startParticleSizeVariance</key>
	<real>5</real>
	<key>tangentialAccelVariance</key>
	<real>0.0</real>
	<key>tangentialAcceleration</key>
	<real>1</real>
	<key>textureFileName</key>
	<string>snow.png</string>
</dict>
</plist>
在上述的plist文件描述的属性属性值都是成对出现,其中<key>标签描述的是属性,<real>描述的属性值。
plist文件中textureFileName属性指定了纹理图片,纹理图片宽高必须是2的n次幂,大小不要超过64x64像素,在美工设计纹理图片时候,不用关注太多细节,例如:设计雪花纹理图片时候,按照雪花是有6个角的,很多人会设计为下图所示的样式,而事实上我们需要的下图所示的渐变效果的圆点。

雪花图片

雪花粒子纹理图片




提示 描述粒子属性的plist文件,可以通过粒子系统设计工具生成,有关粒子系统工具使用大家可以参考本系列丛书的工具卷(《Cocos2d-JS实战(卷Ⅳ):工具详解》)。
下面我们通过实现如下图所示的下雪粒子系统,介绍一下自定义粒子系统的实现。


下雪粒子系统实例
图中所示的下雪实例,使用plist文件创建,主要代码如下:
var HelloWorldLayer = cc.Layer.extend({
    
	ctor: function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        var size = cc.director.getWinSize();


        var bg = new cc.Sprite("res/background-1.png");
        bg.x = size.width / 2;
        bg.y = size.height / 2;
        this.addChild(bg);


        var particleSystem = new cc.ParticleSystem("res/snow.plist");
        particleSystem.x = size.width / 2;
        particleSystem.y = size.height - 50;        
        this.addChild(particleSystem);
        
        return true;
    }
});

代码可见plist文件创建粒子系统要比代码创建简单很多,这主要是因为采用了plist描述粒子属性


更多内容请关注最新Cocos图书《 Cocos2d-x实战:JS卷——Cocos2d-JS开发
本书交流讨论网站:http://www.cocoagame.net
欢迎加入Cocos2d-x技术讨论群:257760386
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
智捷课堂现推出Cocos会员,敬请关注: http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&amp;categoryId=0

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息

猜你在找的Cocos2d-x相关文章