Cocos Creator实战-使用粒子资源实现点击屏幕效果

效果图

涉及到的知识点

• 粒子特效制作
• 触摸事件监听以及坐标转化
• 预制资源制作
• 对象池的使用
• 动态显示特效

制作粒子特效

推荐免费在线工具Particle2dx，这里就使用模板中已有的Click特效circle1

选择粒子特效模板	设置粒子特效属性	导出粒子特效资源

事件监听

键盘事件、触摸事件以及自定义事件发射与监听的详细介绍可以参考CocosCreator官方提供的文档，文末会提供。

本篇文章中主要是使用到屏幕的触摸事件。

cc.Class({
    extends: cc.Component,

    properties: {
        
    },


    // onLoad () {},

    start() {
        this._initNodeTouchEvent();
    },
    _initNodeTouchEvent() {
        //监听事件
        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
    },

    _destroyTouchEvent() {
        //销毁事件
        this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
        cc.log("销毁事件...");
    },

    _onTouchBegin: function (event) {
        cc.log('_onTouchBegin');
    },

    _onTouchMoved: function (event) {
        cc.log('_onTouchMoved');
    },

    _onTouchEnd: function (event) {
        cc.log('_onTouchEnd');
    },

    _onTouchCancel: function (event) {
        cc.log('_onTouchCancel');
    },

    onDestroy() {
        //销毁事件
        this._destroyTouchEvent();
    },

    // update (dt) {},
});

获取触摸点的坐标

_onTouchBegin: function (event) {
    //获取当前点击的全局坐标
    let temp = event.getLocation();
    //获取当前点击的局部坐标
    let tempClick = this.node.convertToNodeSpaceAR(temp)
},

制作粒子特效预制资源

动态加载预制资源

使用对象池动态加载预制资源

//使用对象池动态实例化预制资源
    newClickNode(position, callBack) {
        let newNode = null;
        if (!this._clickPool) {

            //初始化对象池
            this._clickPool = new cc.NodePool();
        }
        if (this._clickPool.size() > 0) {

            //从对象池请求对象
            newNode = this._clickPool.get();
            this.setClickNode(newNode, position, callBack);
        } else {

            // 如果没有空闲对象，我们就用 cc.instantiate 重新创建
            cc.loader.loadRes("prefab/particle_click", cc.Prefab, function (err, prefab) {
                if (err) {
                    return;
                }
                newNode = cc.instantiate(prefab);
                this.setClickNode(newNode, position, callBack);
            }.bind(this));
        }

    },

    setClickNode(newNode, position, callBack) {
        newNode.name = "clickNode"; //设置节点名称
        newNode.setPosition(position); //设置节点位置
        this.node.addChild(newNode); //将新的节点添加到当前组件所有节点上
        if (callBack) {
            callBack(newNode); //回调节点
        }

    },

动态显示特效

_onTouchBegin: function (event) {
    //获取当前点击的全局坐标
    let temp = event.getLocation();
    //获取当前点击的局部坐标
    let tempClick = this.node.convertToNodeSpaceAR(temp)

    this.newClickNode(tempClick, function (node) {

        if (!node) return

        //杀死所有存在的粒子，然后重新启动粒子发射器。
        node.getComponent(cc.ParticleSystem).resetSystem();

        cc.log("子节点数:" + this.node.children.length);

        this.node.children.forEach(element => {

            if (element.name === 'clickNode') {

                //获取粒子系统组件
                let particle = element.getComponent(cc.ParticleSystem);

                //指示粒子播放是否完毕
                if (particle.stopped) {
                    //特效播放完毕的节点放入对象池
                    this._clickPool.put(element);
                    cc.log("顺利回收...");
                }
            }
        });
    }.bind(this));
},

相关参考资料

CocosCreator开发小游戏示例:Brickengine_Guide

• 免费粒子特效在线制作工具Particle2dx
• 发射和监听事件
• 系统内置事件
• 粒子系统相关API

完

到这里就介绍完了，个人能力有限如有错误欢迎指正，如有遗漏欢迎补充。如有疑问欢迎留言一起交流讨论。