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

距离上一篇博客已经有将近一年时间，没有写什么一个是因为一直太忙，另外一个也是不知道要写什么，还是做游戏项目，不过从手游转到了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();