cocos creator粒子不变色_Cocos Creator中实现相对地图运动的粒子系统
最近在做一个H5的海战类小游戏。
1.jpg
地图很大，船在边角位置的时候，相对世界坐标有绝对运动，也就是说地图不动船在动。但是在中间位置的时候，地图和船同时运动，最后的显示效果，相当于船在屏幕中间只转向不运动，而地图在运动。
实现这样的效果其实并不难。首先船在海上运动，船的x,y坐标是相对地图(海)的坐标。然后根据船的位置调整海的坐标：
_setPos: function (boatX,boatY) {
let x = -boatX;
let y = -boatY;
if (x < -this.xLimit) {
x = -this.xLimit;
} else if (x > this.xLimit) {
x = this.xLimit;
}
if (y < -this.yLimit) {
y = -this.yLimit;
} else if (y > this.yLimit) {
y = this.yLimit;
}
this.node.x = x;
this.node.y = y;
}
其中，xLimit是用地图的宽度减去设计分辨率宽度然后除2；yLimit是用地图的高度减去设计分辨率高度然后除2。
我们要给船在运动的时候加上水花拖尾的效果，首先想到的就是用粒子系统来实现。然后发现，当船在边角位置移动的时候，有完美的水花拖尾效果，但是船运动到中间以后，由于船相对世界坐标没有运动，拖尾就没有了。
解决这个问题，在原来cocos的系统中，可以设置粒子系统里面的positionType，将默认的PositionType::FREE设置为 PositionType::RELATIVE，然而在Creator中我们发现将positionType由0设置为1并没有什么用。
查官方文档，终于发现Creator里面并不支持：
positonType.png
怎么办呢？
自己做一个粒子系统来实现吧。用js实现的效率可能略低，但是总比做不了的好，效率等做出来看了再说。
原理：
每帧在船所在位置下面的海面上贴一个粒子发射器，每个粒子发射器发射3-5个粒子，每个粒子的生命期从0-0.8秒左右随机，当粒子生命期结束后，主动将自己从发射器节点上删除；当发射器上所有的粒子都已经结束生命期，发射器主动将自身从父节点删除。粒子的位置有一个小范围随机，将用作粒子的图片从0到一个固定的scale进行缩放。数值可以调整，生存期长，粒子拖尾会比较长，目标scale大，拖尾的尺寸就比较大。具体还可以做一些颜色、透明度等变化。粒子发射器不跟随船运动，这样在船快速运动的时候，就会出现明显的拖尾。
实战：
首先，自定义一个Prefab做成粒子发射器，取名为ParticleEmitter。实质是一个空节点，上面挂一个脚本，用于控制粒子发射。然后在Scene的update里面，每一帧产生一个ParticleEmitter，放到当前船所在的位置，贴到地图上面，船的下面。
update: function (dt) {
let waveNode = cc.instantiate(this.mPrefabWave);
waveNode.parent = this.mSeaNode;
waveNode.x = this.x;
waveNode.y = this.y;
waveNode.setLocalZOrder(10);
},
其中：this.mPrefabWave就是我们的发射器预制件ParticleEmitter。this.mSeaNode是海(地图)所属的节点。
ParticleEmitter所挂的脚本代码如下：
cc.Class({
extends: cc.Component,
properties: {
mPrefabWave: {
default: null,
type: cc.Prefab
}
},
// use this for initialization
onLoad: function () {
this.varX = 10; //粒子X位置可变范围
this.varY = 5; //粒子Y位置可变范围
this.avgNum = 4; //每个发射器发射的粒子平均数
let cnt = this.avgNum + cc.MyLib.rand(2) - 1;
//cc.MyLib.rand(2)： 在[0,2]区间产生一个随机整数(0,1或者2)；
for (let i=0;i
this._createParticleNode();
}
this.particleNum = cnt;
},
_createParticleNode: function() {
let Rand = cc.MyLib.rand;
let particleNode = cc.instantiate(this.mPrefabWave);
particleNode.parent = this.node;
//在当前位置附近小范围内随机一个x,y作为粒子的位置。
let x = Rand(this.varX * 10) / 10 - this.varX / 2;
let y = Rand(this.varY * 10) / 10 - this.varY / 2;
particleNode.setPosition(x,y);
let sc = particleNode.getComponent("ParticleNode");
let attr = {};
attr.pSuper = this;
attr.lifespan = 0.8 * Math.random(); //粒子的生命期
attr.srcR = 64;
attr.srcG = 64;
attr.srcB = 64;
attr.desR = 128;
attr.desG = 128;
attr.desB = 128;
sc._init(attr);
},
//当每个粒子生命期结束的时候，将发射器的粒子计数减一。
//当计数减为0的时候，将粒子发射器自身节点移除。
_reduceParticleNum: function() {
if (--this.particleNum == 0) {
this.node.removeFromParent();
}
}
});
每个粒子节点是一个叫做ParticleNode的Prefab, 里面就是一个Sprite，一个静态水花的图做spriteFrame，将Blend设置为Src：SRC_ALPHA以及Dst：ONE，然后挂上一个控制脚本。
particleNode.png
ParticleNode控制脚本的内容：
cc.Class({
extends: cc.Component,
properties: {
},
// use this for initialization
onLoad: function () {
this.totalDt = 0;
this.srcScale = 0;
this.node.scale = this.srcScale;
this.desScale = 0.8;
this.srcOpacity = 255;
},
_init: function(attr) {
this.pSuper = attr.pSuper;
this.life = attr.lifespan;
this.srcR = attr.srcR;
this.srcG = attr.srcG;
this.srcB = attr.srcG;
this.desR = attr.desR;
this.desG = attr.desG;
this.desB = attr.desB;
this.node.color = cc.color(this.srcR,this.srcG,this.srcB,this.srcOpacity);
},
// called every frame, uncomment this function to activate update callback
update: function (dt) {
this.totalDt += dt;
if (this.totalDt <= this.life/2) {
let ratio = 2 * this.totalDt / this.life;
let scale = this.srcScale + (this.desScale-this.srcScale) * ratio;
this.node.scale = scale;
let r = this.srcR + (this.desR-this.srcR) * ratio;
let g = this.srcG + (this.desG-this.srcG) * ratio;
let b = this.srcB + (this.desB-this.srcB) * ratio;
this.node.color = cc.color(r,g,b,this.srcOpacity);
} else if (this.totalDt <= this.life) {
let ratio = (1 - this.totalDt / this.life) * 2;
let opacity = this.srcOpacity * ratio;
this.node.setOpacity(opacity);
} else {
this.node.removeFromParent();
this.pSuper._reduceParticleNum();
}
},
});
update里面，一半生命期粒子的尺寸从0一直增大到目标scale，因为图片略大，这里的目标scale定为0.8，同时颜色值从开始的RGB不断变化到目标RGB。另外一半生命期，将粒子的透明度从当前透明度减少到0，实现淡出效果。生命期结束后，将粒子自身节点移除，并且在它所属的发射器上将粒子计数减少1。
最后的效果还不错，同时效率也还可以，看一下效果图：
2.jpg
3.jpg
4.jpg
后话：
虽然自己实现了相对运动的粒子效果，但是如果有现成的粒子系统可以用的话，谁愿意重复造轮子啊？希望Creator能尽快完善吧。