cocos2d-js关于对话框Layer的屏幕适配

来源：互联网发布：java serversocket 编辑：程序博客网时间：2024/05/21 14:04

当我们要制作一个类似于手机中的对话框的时候我们会用Layer代替、并且会对Layer限制大小，以达到我们要制作一个对话框的目的。

但是当我们改变屏幕的适配模式的时候如果用的是类似于this.setPosition(cc.p(50,30));这种绝对的坐标的时候会发生偏移。

代码如下：

/** * 游戏结束的对话框 */var DialogLayer = cc.LayerColor.extend({    _listener:null,    bottom_bg:null,    onEnter: function () {        this._super();        this.setOpacity(100);        this.initDialog();        this.setColor(cc.color(0,0,0));        var listener = cc.EventListener.create({            event: cc.EventListener.TOUCH_ONE_BY_ONE,            swallowTouches: true,            onTouchBegan: function () {                return true;            }        });        cc.eventManager.addListener(listener,this);        this._listener = listener;        this.chooseGameModel();    },    initDialog: function () {        this.bottom_bg = new cc.LayerColor(cc.color(255, 255, 255),400,400);        this.bottom_bg.setPosition(cc.p((winSize.width / 2) - (this.bottom_bg.width / 2), (winSize.height / 2) - (this.bottom_bg.height / 2)));        this.addChild(this.bottom_bg);    },    //选择游戏模式    chooseGameModel: function () {        var restartLabel = new cc.LabelTTF("重新开始", "Arial", 36);        var restart = new cc.MenuItemLabel(restartLabel,this.restartGame,this);        restart.setColor(cc.color(255, 0, 0));        restart.setPosition(cc.p(-110 , -this.bottom_bg.height + 180));        var model_1 = new cc.LabelTTF("模式一", "Arial", 36);        var modelOne = new cc.MenuItemLabel(model_1,this.modelOneGame,this);        modelOne.setColor(cc.color(255, 0, 0));        modelOne.setPosition(cc.p(-110 , -this.bottom_bg.height + 30 ));        var model_3 = new cc.LabelTTF("模式3", "Arial", 36);        var modelThree = new cc.MenuItemLabel(model_3,this.modelThreeGame,this);        modelThree.setColor(cc.color(255, 0, 0));        modelThree.setPosition(cc.p(-110 , -this.bottom_bg.height -120));        var menu = new cc.Menu(restart,modelOne,modelThree);        this.bottom_bg.addChild(menu);    },    //点击游戏重新开始    restartGame: function () {        this.initData();    },    //模式一    modelOneGame: function () {        this.initData();    },    //模式三    modelThreeGame: function () {        this.initData();    },    initData: function () {    }});

比如在shwo_all模式下你已经把位置设定好了、但是如果你改成fixed_width模式的时候会发生变型、并且Item的位置发生改变

这是是因为MenuItem添加到DIalogLayer的时候的原点坐标是屏幕的中点。而Layer的原点坐标是屏幕的左下点。所以当要确定MenuItem的位置的时候要计算好当Layer坐标发生改变、并且在Layer发生变型的情况下的坐标也要相应的改变。则修改后的代码如下：

/** * 游戏结束的对话框 */var DialogLayer = cc.LayerColor.extend({    _listener:null,    bottom_bg:null,    dialogWidth:null,    dialogHeight:null,    ctor: function () {        this._super();        this.initDialog();    },    onEnter: function () {        this._super();        var listener = cc.EventListener.create({            event: cc.EventListener.TOUCH_ONE_BY_ONE,            swallowTouches: true,            onTouchBegan: function () {                return true;            }        });        cc.eventManager.addListener(listener,this);        this.chooseGameModel();    },    initDialog: function () {        this.setColor(cc.color(255,255,255));        this.setContentSize(400,400);        var winSize = cc.winSize;        this.dialogWidth = this.getContentSize().width;        this.dialogHeight = this.getContentSize().height;        this.x = winSize.width/2 - this.dialogWidth/2;  //移动到屏幕的中间        this.y = winSize.height/2 - this.dialogHeight/2;//移动到屏幕中间    },    //选择游戏模式    chooseGameModel: function () {        //要确定的位置就是 屏幕中点的位置减去你要移动到的位置        //比如要放在跟DialogLayer的中点则必须 cc.p(-(winSize.width/2 - this.dialogWidth/2),-(winSize.height/2 - this.dialogHeight/2))；        var centerVertical = -(winSize.width/2 - this.dialogWidth/2);        var top = -(winSize.height/2 - this.dialogHeight);        var buttom = -(winSize.height/2);        var centerHori = -(winSize.height/2 - this.dialogHeight/2);        var restartLabel = new cc.LabelTTF("重新开始", "Arial", 36);        var restart = new cc.MenuItemLabel(restartLabel,this.restartGame,this);        restart.setColor(cc.color(255, 0, 0));        restart.setPosition(cc.p(centerVertical , top - 30));        var model_1 = new cc.LabelTTF("模式一", "Arial", 36);        var modelOne = new cc.MenuItemLabel(model_1,this.modelOneGame,this);        modelOne.setColor(cc.color(255, 0, 0));        modelOne.setPosition(cc.p(centerVertical , centerHori ));        var model_3 = new cc.LabelTTF("模式3", "Arial", 36);        var modelThree = new cc.MenuItemLabel(model_3,this.modelThreeGame,this);        modelThree.setColor(cc.color(255, 0, 0));        modelThree.setPosition(cc.p(centerVertical , buttom + 30));        var menu = new cc.Menu(restart,modelOne,modelThree);        this.addChild(menu);    },    //点击游戏重新开始    restartGame: function () {        this.initData();    },    //模式一    modelOneGame: function () {        this.initData();    },    //模式三    modelThreeGame: function () {        _cardsRandom.length = 0;        gameModel = _GAME_MODEL_THREE;        this.initData();    },    initData: function () {    }});

这样修改后、无论Layer的坐标怎么改变、Layer如何变型都不会影响MenuItem在Layer的相对位置

如图：

0 0