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