代码创建粒子系统需要手工设置这些属性,维护起来非常困难,我们推荐使用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.c
欢迎加入Cocos2d-x技术讨论群:257760386
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51w智捷课堂现推出Cocos会员,敬请关注: http://v.51w