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

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

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

查看所有标签

猜你喜欢:

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

基于模型的设计

基于模型的设计

2011-8 / 69.00元

《基于模型的设计:MSP430/F28027/F28335DSP篇》的最大特色就是软硬件结合,在使用最新版本Simulink的基础上,结合多型号板卡实现设计开发。书中不仅详细剖析了MSP430/F28027/F28335板卡功能,而且使用Simulink演示了从建模到模型验证、从定点设计到处理器在环、从代码生成到硬件联调等诸多方面,内容充实,确实是一本学习基于模型设计进行DSP开发的较为理想的工程......一起来看看 《基于模型的设计》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

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

RGB CMYK 互转工具