最近在做一个H5的海战类小游戏。
地图很大，船在边角位置的时候，相对世界坐标有绝对运动，也就是说地图不动船在动。但是在中间位置的时候，地图和船同时运动，最后的显示效果，相当于船在屏幕中间只转向不运动，而地图在运动。
实现这样的效果其实并不难。首先船在海上运动，船的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里面并不支持：
怎么办呢？
自己做一个粒子系统来实现吧。用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每个粒子节点是一个叫做ParticleNode的Prefab, 里面就是一个Sprite，一个静态水花的图做spriteFrame，将Blend设置为Src：SRC_ALPHA以及Dst：ONE，然后挂上一个控制脚本。
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。
最后的效果还不错，同时效率也还可以，看一下效果图：
后话：
虽然自己实现了相对运动的粒子效果，但是如果有现成的粒子系统可以用的话，谁愿意重复造轮子啊？希望Creator能尽快完善吧。