前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CocosCreator实战-使用粒子资源实现点击屏幕效果

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

作者头像
Javen
发布2019-03-15 14:24:06
2.5K0
发布2019-03-15 14:24:06
举报
文章被收录于专栏:酷玩时刻酷玩时刻
效果图

粒子特效点击效果

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

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

选择粒子特效模板

设置粒子特效属性

导出粒子特效资源

选择粒子特效模板

设置粒子特效属性

导出粒子特效资源

事件监听

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

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

代码语言:javascript
复制
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) {},
});
获取触摸点的坐标
代码语言:javascript
复制
_onTouchBegin: function (event) {
    //获取当前点击的全局坐标
    let temp = event.getLocation();
    //获取当前点击的局部坐标
    let tempClick = this.node.convertToNodeSpaceAR(temp)
},
制作粒子特效预制资源

制作粒子特效预制资源

动态加载预制资源

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

代码语言:javascript
复制
//使用对象池动态实例化预制资源
    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); //回调节点
        }

    },
动态显示特效
代码语言:javascript
复制
_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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.03.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 涉及到的知识点
  • 制作粒子特效
  • 事件监听
  • 获取触摸点的坐标
  • 制作粒子特效预制资源
  • 动态加载预制资源
  • 动态显示特效
  • 相关参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档