按钮长按效果

作者: wingsrao | 来源:发表于2017-12-26 23:11 被阅读136次

    Cocos Creator 确实可以快速开发不是很复杂的游戏,但是cocos creator还是有很多不足的地方,毕竟靠视图编辑器。作者也是很快的入门了cocos creator的开发和学习,学会了做简单的页面。本文也是作者的粗略记录,欢迎讨论,不喜勿喷。

    实现原理:通过cc.Node.EventType来监听按下和放开的动作,过程通过update方法来监听。是的,就是这么简单。

    具体步骤:
    myButton是需要实现长按效果的按钮;

    0.定义一个boolean值的flag:myButton_flag,如果此值为true表示按钮被按着的状态,false表示没被按着的状态。

    1.在生命周期方法的onLoad或onEnable中,给myButton绑定cc.Node.EventType.TOUCH_START 和TOUCH_END事件,如下:

    this.myButton.node.on(cc.Node.EventType.TOUCH_START,this.touchStartFun,this);
    this.myButton.node.on(cc.Node.EventType.TOUCH_END,this.touchEndFun,this);
    

    其中touchStartFun和touchEndFun为自定义的方法:

    touchStartFun:function(event){
            var targetNode = event.getCurrentTarget();
            if (targetNode == this.myButton.node) {
                 this.myButton_flag = true;
            }
    }
    
    touchEndFun:function(event){
            var targetNode = event.getCurrentTarget();
            if (targetNode == this.myButton.node) {
                 this.myButton_flag = false;
            }
    }
    //touchStartFun和touchEndFun分别改变myButton是否被按住的状态。
    

    2.update中实现被按住时执行的方法:

    update: function (dt) {
            if (this.myButton_flag) {
                    this.longTouchAction();
            }
    }
    //longTouchAction为自定义方法,其中执行自己的操作。
    

    问题:update方法是根据fps来更新的,假设fps是60帧/每秒(实际这个是不定的),也就是每秒要执行60次这个方法;因此这是不切实际的,所以要控制执行longTouchAction方法的时机。

    解决:通常长按操作的需求也是重复执行某个操作,例如持续加分。于是可以改为:

    //定义一个longTouch_delta来计数时间float类型
    update: function (dt) {
            if (this.myButton_flag) {
                this.longTouch_delta += dt;//dt为每帧切换的时间
                if (this.longTouch_delta>0.5) {//大于0.5秒就执行一次longTouchAction方法
                      this.longTouchAction();
                      this.longTouch_delta = 0;//执行一次后把时间计数清0
                }
            }
    }
    

    好了,说起来挺简单的,但是要用文字描述清楚还是挺困难的,写作能力需求提高,见谅。

    如有不同的意见,欢迎留言指正。

    相关文章

      网友评论

        本文标题:按钮长按效果

        本文链接:https://www.haomeiwen.com/subject/pzfygxtx.html