使用Graphics在鼠标点击画圆圈扩散效果

很久没更新博客了，因为看到别的游戏中有今天要说的效果，所以就去稍微看了一下Cocos Creator里的Graphics组件，并且也实现了这个挺好玩的效果，就是在鼠标点击的位置画一个填充好的圆圈并且实现扩散效果，这并不是唯一实现这个效果的解决办法，用动画同样也可以实现，然后废话不多说了，直接开始。（因为不会弄gif图就简单的截了个图）如下图所示是效果图，

效果图比较简陋，一会我会把代码贴出来，代码写在一个脚本中并且在场景中创建一个空节点，这个空节点位置、宽高和Canvas一样，挂上graphics组件即可，脚本也直接挂到这个空节点上运行在浏览器中就可以看到实际效果了。

//鼠标点击出现画线圆圈扩散
cc.Class({
    extends: cc.Component,
    properties: {
    },
    onLoad () {

        if(cc.director.setClearColor){
            cc.director.setClearColor(cc.hexToColor('#d1f1ff'));
        }
        this.ctx=this.node.getComponent(cc.Graphics);
        this.ripples=[];
        this.mouse={x:0,y:0};
        this.onClick();
    },
    onClick(){
        const self=this;
        self.node.on(cc.Node.EventType.TOUCH_START,function (event) {
            self.mouse=event.touch.getLocation();
            self.addRipples();
        },self);
    },
    start () {
    },
    update(){
        let ripples=this.ripples;
        for(let index=0;index<ripples.length;index++){
            var ripple=ripples[index];
            ripple.reactivity+=10;
            ripple.fade-=0.05;
            if(ripple.fade<=0.0){
                ripples.splice(index,1);
            }
        }
        this.render();
    },
    addRipples(){
        if(this.ripples.length==0){
            this.ripples.push({
                x:this.mouse.x,
                y:this.mouse.y,
                reactivity:0,
                fade:1.0
            })
        }

    },
    render(){
        let graphics=this.ctx;
        graphics.clear();
        let ripples=this.ripples;
        for(var index = 0; index < ripples.length; index++) {
            var ripple = ripples[index];
            let fillColor = cc.hexToColor('#AAA5A5');
            fillColor.a = ripple.fade * 255;
            graphics.fillColor = fillColor;
            graphics.circle(ripple.x, ripple.y, ripple.reactivity);
            graphics.fill();
        }
    },
    onDisable() {
        if (cc.director.setClearColor) {
            cc.director.setClearColor( cc.Color.BLACK );
        }
    },
});

代码不做任何解释，不懂的API请自行去官网上查阅，想了解更多的小伙伴也可以直接去Cocos Creator的范例集合中去看，我也是在那里研究整理出来的，想直接用的小伙伴直接代码拷贝过去就可以用，我自己也测试过没有问题。