除了使用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描述粒子属性。
本书交流讨论网站:http://www.cocoagame.net
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:
京东:http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
相关推荐
资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...
Cocos2d-x实战 JS卷 Cocos2d-JS开发 PDF 电子书完整版本
第14 章 超炫的效果——粒子系统 / 211 第15 章 尝试做一个更大的游戏——Hungry Hero(上篇)/ 226 第16 章 尝试做一个更大的游戏——Hungry Hero(下篇)/ 235 第三部分总结 / 291 第四部分 把两个游戏做成...
该书作者是《保卫萝卜》核心开发人员,该书手把手教会大家如何使用Cocos2d-js开发一款《保卫萝卜》手游,cocos2d创始人 王哲 亲自为本书作序!是一部非常优秀的开发书籍!
Cocos2d-JS开发之旅 从HTML 5到原生手机游戏 PDF 带书签目录 完整版
cocos2d-x-2.1.5
Cocos2d-JS---demo 放在服务器上就可以直接预览了,本地打开是黑屏,Cocos2d-JS的方法及效果的演示
Cocos2d-JS开发之旅 从HTML5到原生手机游戏随书资源源码
Cocos2d-x 自定义可接受处理触摸信息精灵类 一个简单的例子,基于cocos2dx-2.1.5版本
经典版本 方便下载 源码 旧版本 3.8 官网找不到了 cocos2d-x-3.8.zip
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》源码
Cocos2d-x实战
在使用cocos2d-x开发游戏的过程中,为了实现逻辑和显示相分离。 在下通宵了一个晚上,写出了该事件类。 谨记,该事件只能用于cocos2d-x中。 事件发送者需要继承EventDispatcher类 事件接收者需要继承EventHandle类...
资源名称:大富翁手机游戏开发实战基于Cocos2d-x3.2引擎内容简介:李德国编著的《大富翁手机游戏开发实战(基于 Cocos2d-x3.2引擎)》使用Cocos2d-x游戏引擎技术,带领读者一步一步从零开始进行大富翁移动游戏的开发...
《Cocos2d-x实战 JS卷 Cocos2d-js开发》随书源码 ch13-ch24 下卷 因为超过csdn上传限制分为2个压缩文件
Cocos2d-x是移动跨平台开发最流行的游戏引擎,而本书是一本很全面的、比较‘接地气’的游戏开发教程。书中汇聚了热门手机游戏《捕鱼达人》开发的实战经验,作者从最基础的内容开始,逐步深入地介绍了Cocos2d-x的相关...
Get a gentle introduction to the Cocos2d-JS framework to begin working with sprite manipulations, animations, and other 2d game development topics. This book covers environment setup and getting ...
Cocos2d-JS开发之旅 从HTML 5到原生手机游戏 PDF 带书签目录 完整版 以及Cocos2d-js项目教程 pdf文档
cocos2d-x-3.2下载,不多说。或者可以下载另一个资源 cocos引擎老版本集合(cocos2d-x-2.2.1 - 3.5) http://download.csdn.net/download/crazymagicdc/9982656
cocos2d-x 初级粒子爆炸特效,引用了大虾superraccoon作品中的资源,做初级示范之用。