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" ""><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次幂,大小不要超过64×64像素,在美工设计纹理图片时候,不用关注太多细节,例如:设计雪花纹理图片时候,按照雪花是有6个角的,很多人会设计为下图所示的样式,而事实上我们需要的下图所示的渐变效果的圆点。

雪花图片

雪花粒子纹理图片

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

寂寞时,想想我的影子,我会在远方给你一个微笑;难过时,

JS自定义粒子系统

相关文章:

你感兴趣的文章:

标签云: