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

栏目: 后端 · 发布时间: 5年前

内容简介:推荐免费在线工具Particle2dx,这里就使用键盘事件、触摸事件以及自定义事件发射与监听的详细介绍可以参考CocosCreator官方提供的文档,文末会提供。本篇文章中主要是使用到屏幕的触摸事件。
Cocos Creator实战-使用粒子资源实现屏幕点击效果

涉及到的知识点

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

制作粒子特效

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

选择粒子特效模板 设置粒子特效属性 导出粒子特效资源
Cocos Creator实战-使用粒子资源实现屏幕点击效果
Cocos Creator实战-使用粒子资源实现屏幕点击效果
Cocos Creator实战-使用粒子资源实现屏幕点击效果

事件监听

键盘事件、触摸事件以及自定义事件发射与监听的详细介绍可以参考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)
},
复制代码

制作粒子特效预制资源

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

动态加载预制资源

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

//使用对象池动态实例化预制资源
    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));
},
复制代码

以上所述就是小编给大家介绍的《Cocos Creator实战-使用粒子资源实现屏幕点击效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

区块链革命

区块链革命

[加]唐塔普斯科特(Don Tapscott)、[加]亚力克斯·塔普斯科特(Alex Tapscott) / 中信出版集团股份有限公司 / 2016-9 / 69

(1)国际大腕“数字经济之父”继畅销书《维基经济学》之后再出力作! (2)一本真正全景式描述区块链理论及应用的巨著! (3)苹果共同创始人史蒂夫·沃兹尼亚克、世界经济论坛创始人和论坛主席克劳斯·施瓦布、网景及硅谷安德森·霍洛维茨风险投资公司创始人马克·安德森、麦肯锡董事长兼全球总裁鲍达民、 百事公司首席执行官卢英德、丹·舒尔曼 Paypal公司首席执行官等全球政治界、学术界和商界精英联......一起来看看 《区块链革命》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具