Cocos2d-js3.3 模态对话框的实现

前端之家收集整理的这篇文章主要介绍了Cocos2d-js3.3 模态对话框的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先,先了解一下什么是模态对话框,百度百科的给出了下面一个定义:

模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭


游戏中经常会出现很多模态对话框,例如登陆框、提示框等等。

下面来看下效果图:


有几点值得关注的:

1.当对话框出现后,对话框外不响应触摸。

这就需要用到setSwallowTouches()设置为true时,并且onTouchBegan返回true,就会吞没事件,不再向下传递


2.当对话框出现后,背景变暗

这里用到LayerColor的两个方法,设置颜色setColor()和设置透明度setOpacity()


下面,请看代码

var ModalDialogueBox = cc.LayerColor.extend({
    _listener: null,ctor: function() {
        this._super(cc.color.BLACK);
        this.ignoreAnchorPointForPosition(false);   //忽略锚点设置为false,默认为true,锚点(0,0)
        this.setOpacity(128);       //透明度

        //初始化对话框
        this._initDialog();

        return true;
    },onEnter: function()
    {
        this._super();
        //监听器
        this._listener = new cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches: false,onTouchBegan: function(touch,event)
            {
                return true;
            }
        });

        //添加触摸监听
        cc.eventManager.addListener(this._listener,this);
    },//初始化对话框
    _initDialog: function()
    {
        var winSize = cc.winSize;

        //背景
        var bg = new cc.Sprite(res.dialog_png);
        bg.setPosition(cc.p(winSize.width / 2,winSize.height / 2));
        this.addChild(bg,101);

        //OK按钮
        var OKLabel = new cc.LabelTTF("OK","Arial",36);
        var OKMenuItem = new cc.MenuItemLabel(OKLabel,this._onCallback,this);
        OKMenuItem.setPosition(cc.p(100,50));

        //Cancel按钮
        var cancelLabel = new cc.LabelTTF("Cancel",36);
        var cancelMenuItem = new cc.MenuItemLabel(cancelLabel,this);
        cancelMenuItem.setPosition(cc.p(250,50));

        //菜单
        var menu = new cc.Menu(OKMenuItem,cancelMenuItem);
        menu.setPosition(cc.p(0,0));
        bg.addChild(menu);      //注意是添加到背景里面

        this.setVisible(false);     //默认设置为不可见
    },_onCallback: function()
    {
        this.hidden();
    },//弹出
    popup: function()
    {
        this.setVisible(true);
        this._listener.setSwallowTouches(true);

        var bg = this.getChildByTag(101);
        bg.setScale(0);
        var scaleTo = new cc.ScaleTo(2.0,1);
        var rotateBy = new cc.RotateBy(2.0,360,0);
        var spawn = new cc.Spawn(scaleTo,rotateBy);
        bg.runAction(spawn);
    },//隐藏
    hidden: function()
    {
        this.setVisible(false);
        this._listener.setSwallowTouches(false);
    },onExit: function()
    {
        this._super();
        //移除触摸监听
        cc.eventManager.removeListeners(cc.EventListener.TOUCH_ONE_BY_ONE,true);
    }
});

源码下载: 点击打开链接 原文链接:https://www.f2er.com/cocos2dx/343601.html

猜你在找的Cocos2d-x相关文章