Cocos2d-JS屏幕适配（NO-BORDER模式）

概述         距离上一篇博客已经有将近一年时间，没有写什么一个是因为一直太忙，另外一个也是不知道要写什么，还是做游戏项目，不过从手游转到了Html5游戏，继续使用Cocos2d，语言换成了JS。          不多叙旧，这次简单说下Cocos2d-JS的适配问题，上一个项目（手机QQ空间玩吧的《点点萌萌消》，欢迎试玩^_^）没有考虑分辨率适配问题，直接采用的是640*960的方式进行开发，

距离上一篇博客已经有将近一年时间，没有写什么一个是因为一直太忙，另外一个也是不知道要写什么，还是做游戏项目，不过从手游转到了HTML5游戏，继续使用Cocos2d，语言换成了Js。

不多叙旧，这次简单说下Cocos2d-Js的适配问题，上一个项目（手机QQ空间玩吧的《点点萌萌消》，欢迎试玩^_^）没有考虑分辨率适配问题，直接采用的是640*960的方式进行开发，基本上不用考虑适配问题。

当前这个项目需要考虑屏幕白边问题，今天有点闲工夫，就慢慢研究了一上午，还有点意思。说有点意思是因为NO_border模式需要计算屏幕尺寸，而这也将解决屏幕适配问题。

参考http://segmentfault.com/blog/tangyunlou/1190000000635287这篇技术博客，在Cocostudio编辑器中创建一个适配层，将需要适配的部件丢到这个层中。

接着在代码中对这个适配层进行位置和大小的计算，如果依然按照这篇博客的代码写，可能不能得到想要的效果，因为Cocos2d-Js是有点不同的。

现在我们重新考虑NO_border模式的原理。

代码中对NO_border的解释是：Theentire application fills the specifIEd area,without distortion but possiblywith some cropPing,while maintaining the original aspect ratio of theapplication.（翻译即是：程序将是充满整个区域，做裁剪而不是变形处理，裁剪不会改变原有宽高比）

如上图所示：在iPhone4s（我目前用的）的手机上，如果说设计高宽为1280*720（设计高宽通过cc.vIEw.setDesignResolutionSize函数设置），那么屏幕上显示的高宽到底是多少呢？而这个高宽也是我们适配层需要设置的大小。

不是960*640，也不是1280*720，是不是有点意思了。

对于NO_border模式，手机屏幕大小作为摄像头的尺寸，设计高宽作为对象（舞台），那么，在这个例子中，摄像头需要做放大 *** 作，使得屏幕高度能容纳720的像素展示。

感性的做一下放大 *** 作，可以感知适配层大小必须为宽960.0*(720.0/640.0)和高720.0。

理性分析下，很快适配层的大小就计算出来了代码见后面的dockUI函数。

NO_border适配合适分辨率差异大且UI相对独立的情况，效果算是比较理想的吧。

var _LayoutUtil = cc.Class.extend({    //UI层    dockUI: function(panelUI) {        panelUI.setAnchorPoint(0.5,0.5);        var size = cc.vIEw.getFrameSize();        var wsize = cc.director.getWinSize();        var rw = wsize.wIDth/size.wIDth;        var rh = wsize.height/size.height;        panelUI.setposition(wsize.wIDth/2,wsize.height/2);        if(rw > rh){        	panelUI.setContentSize(cc.size(size.wIDth*rh,size.height*rh));        }else{        	panelUI.setContentSize(cc.size(size.wIDth*rw,size.height*rw));        }    },//锚点默认为0.5    /**     * 停靠在左边，距离左边距intervalX个像素     * @param  {CCNode} node      节点     * @param  {int} intervalX 边距     * @return {null}           无     */    dockleft: function(node,intervalX,isCenter) {        intervalX = intervalX | 0;        var parent = node.getParent();        var pos = node.getposition();        var size = node.getContentSize();        if(isCenter){        	node.setposition(size.wIDth / 2 + intervalX,node.getParent().getContentSize().height/2);        }else{        	node.setposition(size.wIDth / 2 + intervalX,pos.y);        }            },/**     * 停靠在右边，距离右边距intervalX个像素     * @param  {CCNode} node      节点     * @param  {int} intervalX 边距     * @return {null}           无     */    dockRight: function(node,isCenter) {        intervalX = intervalX | 0;        var parent = node.getParent();        var psize = parent.getContentSize();        var pos = node.getposition();        var size = node.getContentSize();        if(isCenter){        	node.setposition(psize.wIDth - size.wIDth / 2 - intervalX,node.getParent().getContentSize().height/2);        }else{        	node.setposition(psize.wIDth - size.wIDth / 2 - intervalX,/**     * 停靠在上边，距离上边距intervalY个像素     * @param  {CCNode} node      节点     * @param  {int} intervalX 边距     * @return {null}           无     */    docktop: function(node,intervalY,isCenter) {        intervalY = intervalY | 0;        var parent = node.getParent();        var psize = parent.getContentSize();        var pos = node.getposition();        var size = node.getContentSize();        if(isCenter){        	node.setposition(node.getParent().getContentSize().wIDth/2,psize.height - size.height / 2 - intervalY);        }else{        	node.setposition(pos.x,psize.height - size.height / 2 - intervalY);        }    },/**     * 停靠在下边，距离下边距intervalY个像素     * @param  {CCNode} node      节点     * @param  {int} intervalX 边距     * @return {null}           无     */    dockBottom: function(node,isCenter) {        intervalY = intervalY | 0;        var parent = node.getParent();        var pos = node.getposition();        var size = node.getContentSize();        if(isCenter){        	node.setposition(node.getParent().getContentSize().wIDth/2,size.height / 2 + intervalY);        }else{        	node.setposition(pos.x,size.height / 2 + intervalY);        }            },/**     * 停靠在中心     * @param  {CCNode} node      节点     * @return {null} 无     */    dockCenter: function(node) {        var parent = node.getParent();        var size = parent.getContentSize();        node.setposition(size.wIDth / 2,size.height / 2);    },});var LayoutUtil = new _LayoutUtil();

总结

以上是内存溢出为你收集整理的Cocos2d-JS屏幕适配（NO-BORDER模式）全部内容，希望文章能够帮你解决Cocos2d-JS屏幕适配（NO-BORDER模式）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。