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能尽快完善吧。