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实战-使用粒子资源实现屏幕点击效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

C#入门经典

C#入门经典

[美] Karli Watson、Christian Nagel / 齐立波、黄静 / 清华大学出版社 / 2008-12 / 118.00元

这是一本成就无数C#程序员的经典名著,厚而不“重”,可帮助您轻松掌握C#的各种编程知识,为您的职业生涯打下坚实的基础,《C#入门经典》自第1版出版以来,全球销量已经达数万册,在中国也有近8万册的销量,已经成为广大初级C#程序员首选的入门教程,也是目前国内市场上最畅销的C#专业店销书,曾两次被CSDN、《程序员》等机构和读者评选为“最受读者喜爱的十大技术开发类图书”!第4版面向C#2008和.NET......一起来看看 《C#入门经典》 这本书的介绍吧!

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

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具