欢迎来到淼淼之森的博客小站。  交流请加我微信好友: studyjava。  也欢迎关注同名公众号:Java学习之道

CocosCreator之点击任意位置关闭

  |   0 评论   |   0 浏览

推荐阅读:

今天,接触到一个新功能,当弹出某个弹框时,需要点击除弹框的剩余任意位置,来关闭该弹框,例如:当红框内容显示时,点击红框外任意位置可关闭红框。
20190703103302199.png

刚开始做这个功能时,第一想法:
判断点击的UI不是该弹框UI,改功能只需要一个if语句就能实现,这时候我发现有两个困难点,1:如何判断点击的UI是否是目标弹框;2:使用该方法,需要为除弹框外的整个UI界面添加监听事件,由于开始搭建UI的时候没有考虑这种情况,所以要为除弹框外的整个UI界面添加监听事件就特别繁杂。

为此,我果断放弃了这种方法,我又寻找到另一种方法:可不可以添加一个屏幕大小的透明Button,当弹框弹出来时,显示Button,为Button添加一个监听事件:关闭弹框。但是我又发现问题,以前用U3D的事件,点击事件具有穿透效果,当弹框弹出来时,Button也显示,这样会造成点击弹框上某UI,也会触发Button的监听事件。

当然,这只是根据自己的开发经验推测的,由于暂时没想到其他方法,我还是尝试了一下,发现cocos并不存在事件的穿透。所以,在你走头无路的时候,需要用于尝试,有时候,你和成功只差一步:动手实践。

接下来。讲讲我的实现过程吧
1.在弹框的上面一个层级,新建一个透明Button,命名为:anyPos
2.为anyPos添加监听事件

// 查找btn
        var findBtn = function (str, prt, call, bAudio = true) {
            var obj = cc.find(str, prt);
            obj.on("click", function () {
                if (bAudio) { gm.HallAudio.playClick(); }
                call();
            }, this);
            return obj;
        };


//任意位置按钮
        uiRoot.anyPos = findBtn("anyPos", obj3, function () {
            self.uiRoot.myBox.active = false;//隐藏弹框
            self.uiRoot.anyPos.active = false;//隐藏anyPos
        })
        //默认anyPos为隐藏的
        self.uiRoot.anyPos.active = false;

3.显示弹框时

//打开弹框
    openMyBox() {
        var self = this;
        
    self.uiRoot.myBox.active = true;
    self.uiRoot.anyPos.active = true;
    }

其实该功能挺简单的,代码几行就是实现了,也不难理解。


标题:CocosCreator之点击任意位置关闭
作者:shirln
地址:https://www.mmzsblog.cn/articles/2019/08/09/1565360209287.html

如未加特殊说明,文章均为原创,转载必须注明出处。均采用CC BY-SA 4.0 协议

本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。若本站转载文章遗漏了原文链接,请及时告知,我们将做删除处理!文章观点不代表本网站立场,如需处理请联系首页客服。
• 网站转载须在文章起始位置标注作者及原文连接,否则保留追究法律责任的权利。
• 公众号转载请联系网站首页的微信号申请白名单!

个人微信公众号 ↓↓↓                 

微信搜一搜爱上游戏开发