cocos2dx v3.x 屏幕适配方案

本文转自：http://www.2cto.com/kf/201409/333604.html，感谢作者分享！

1.解决方案

先直接给出解决方案，再慢慢解释，当然这个解决方案也不是完全完美的。

 
        //如果是横屏游戏: 
       
        glview->setDesignResolutionSize( 
        960 
        , 
        640 
        ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,ResolutionPolicy::FIXED_HEIGHT); 
       
        //一张960x640的背景显示 
       
        auto visibleSize = Director::getInstance()->getVisibleSize(); 
       
        auto Bg = Sprite::create( 
        "Bg.png" 
        ); 
       
        this 
        ->addChild(Bg); 
       
        Bg->setPosition(visibleSize.width /  
        2 
        ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,visibleSize.height /  
        ); 
       
        //Bg->setPosition(visibleSize.width / 2,320);//等价上面的 
       
        Bg->setScaleX(visibleSize.width /  
        ); 
       
        //右上角显示一个精灵 
       
        auto Spr = Sprite::create( 
        "test.png" 
        ); 
       
        ->addChild(Spr); 
       
        Spr->setPosition(visibleSize.width -  
        50 
        ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,visibleSize.height -  
        ); 
       
        //因为是固定高度，所以visibleSize.height永远都是640，所以下面的写法也是可以的 
       
        //Spr->setPosition(visibleSize.width - 50,590); 
       
        //如果是竖屏游戏: 
       
        ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,ResolutionPolicy::FIXED_WIDTH);

美术出图都按照960x640规格出图。

2.开始测试各种适配方式

屏幕适配其实应该从Opengles开始讲的，这里跳过了，感兴趣的可以看这篇文章了解一二《Android 中使用OpenGL ES进行2D开发（绘制第一个三角形番外篇）》

glview->setDesignResolutionSize(960,640);先不管第三个参数。setDesignResolutionSize是什么意思呢？就是设置一个固定大小的区域来进行程序布局和美术设计。再通过Opengles进行投射到具体手机屏幕上去，是无视具体手机屏幕大小的。比如手机屏幕分辨率是480x320，Opengles会自动缩小一倍进行投射。手机屏幕分辨率是1920x1280，Opengles会自动放大一倍进行投射。程序和美术这块都不需要改：一套程序坐标，一套美术资源。

比如背景图片，只需要一张960x640的就OK了，把它放在(480,320)的中心位置就OK了。

一个精灵假设要放在右上角的位置，把它放在(960,640)的位置就OK了。也根本不需要考虑cocos2d中的visibleSize什么的。

现实中，手机分辨率不可能都是960x640的倍数。而我们又要全屏显示，就有了第三个参数来规定具体投射的方式。

cocos2d的ResolutionPolicy现在总共有5种：

        8 
      
        enum 
         class 
         ResolutionPolicy 
       
        { 
       
        EXACT_FIT, 
       
        NO_BORDER, 
       
        SHOW_ALL, 
       
        FIXED_HEIGHT, 
       
        FIXED_WIDTH 
       
        };

2.1 EXACT_FIT

EXACT_FIT是会完全投射到屏幕全屏的。这样对程序和美术来说是最完美的，但是会有拉伸的现象。

上面这张是960x540的原图，4个角我加上了参照物，总的是一张图片。

假设目标手机分辨率是1136x500(现实是不存在的)，使用EXACT_FIT就是下面的效果：

其实对于背景的拉伸，还是可以接受的，主要的问题是:精灵也会被拉伸,还有拉伸区域是不可控制的。

EXACT_FIT适用场景：个人小项目，轻微拉伸不影响游戏的展示的游戏。但公司大项目这个基本不可用。

使用EXACT_FIT的时候，visibleSize不管手机分辨率是多少，visibleSize永远都是960x640。

2.2 SHOW_ALL

Show_ALL 能不能用呢？几乎不能用。虽然它的visibleSize也都是960x640。但是黑边的问题，苹果那边是通过不的。这里的黑边是不能用东西来覆盖的。

2.3 NO_BORDER
NO_BORDER 顾名思义就是没有黑边，且保持宽高比。这样的结果就是，会有部分被裁剪掉。

手机分辨率比较长的时候，上下不够，会被裁掉，注意看背景下面的参考物。

IPad分辨率比较高的时候，左右不够，会被裁掉，注意看背景左边的参考物。

2.4 FIXED_HEIGHT
FIXED_HEIGHT和FIXED_WIDTH是类似的，就讲个FIXED_HEIGHT。FIXED_HEIGHT和FIXED_WIDTH是较高cocos2d版本才有的。这个解决方案是固定一个方向上的值，且固定比例。这样会导致部分覆盖不到或者部分被裁掉，要程序进行动态适配。

精灵放置的位置就有讲究了，在纵向，完全可以使用魔鬼数字，320肯定是垂直居中的。横向就要斟酌了，比如要把一个精灵放在右上角就要考虑visibleSize了。