cocos2dx屏幕适配

手机的屏幕大小千差万别，如现在流行的安卓手机屏幕大部分长宽比例为16:9。而iPhone 5S的长宽比例为71:40（接近16:9），也有预测说iPhone 6S的长宽比例也将会是主流的16:9。另外还有一些平板电脑为4:3、16:10、5:4等等。当然还有一些其他的牌子可能屏幕比例也不一样。

    要想让你的程序在各种手机上都能很好的呈现游戏画面，就需要进行屏幕适配。

【致谢】

    http://gl.paea.cn/contents/10adab2de4f4bf1c.html

【小知识】

    分辨率：是指屏幕图像的精密度，即显示器所能显示的像素有多少。

            如：分辨率480×320的意思是水平方向含有像素数为480个，垂直方向像素数320个。

            屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

            同时分辨率也反映了屏幕长宽比例（如15：10）。

【屏幕适配】

1、两个分辨率

    1.1、窗口分辨率

    在AppDelegate.cpp中有个设置窗口分辨率的函数。该函数是设置了我们预想设备的屏幕大小，也就是应用程序窗口的大小。

[cpp] view plain copy

1. //  
2.     glView->setFrameSize(480, 320);  
3. //  

1.2、设计分辨率（可视区域）

    在AppDelegate.cpp中也有个设置设计分辨率的函数。该函数是设置了我们游戏设计时候的分辨率，也就是可视区域的大小，也就是说设计者初衷的游戏可视区域的分辨率屏幕大小。

    但是对于每个用户来说，他们使用的设备不一定是（480/320）的，比如手机有大有小。

    而后面的ResolutionPolicy::SHOW_ALL，意思是按照原比例（480/320）进行放缩以适配实际屏幕大小。

[cpp] view plain copy

1. //  
2.     glview->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL);  
3. //  

以下贴了三张对比图，加深理解。

    （1）这是原图片大小，窗口大小为480 * 320。

    （2）若设置窗口大小为setFrameSize(960, 640)，而不设置设计分辨率ResolutionPolicy::SHOW_ALL 的情况下，图片不放缩，原图还是480 * 320。

    

    （3）设置了 ResolutionPolicy::SHOW_ALL 之后，图片放缩到适配整个屏幕960 * 640 了。

2、五种适配模式

    从上面的讲解我们可以了解到，setFrameSize()是设置了窗口大小（即屏幕的实际大小），而这个参数只是为了我们开发时作为模拟参照，在实际手机上运行时，手机的屏幕大小是我们无法设置的。

    而屏幕适配的关键在于setDesignResolutionSize()，通过它来设置可视区域的分辨率以及屏幕适配模式。该函数的前两个参数为分辨率（即屏幕长宽比例），而最后一个参数则是适配的模式。

    2.1、适配模式

    （1）ResolutionPolicy::EXACT_FIT    ：拉伸变形，使铺满屏幕。

    （2）ResolutionPolicy::NO_BORDER    ：按比例放缩，全屏展示不留黑边。

                                             （长宽中小的铺满屏幕，大的超出屏幕）

    （3）ResolutionPolicy::SHOW_ALL     ：按比例放缩，全部展示不裁剪。

                                             （长宽中大的铺满屏幕，小的留有黑边）

    （4）ResolutionPolicy::FIXED_WIDTH  ：按比例放缩，宽度铺满屏幕。

    （5）ResolutionPolicy::FIXED_HEIGHT ：按比例放缩，高度铺满屏幕。

    2.2、计算方法

    假设：屏幕分辨率（fWidth，fHeight） ； 设计分辨率（dWidth，dHeight）。

          放缩因子：k1 = fWidth/dWidth ； k2 = fHeight/dHeight。

    则适配后的分辨率大小如下：

    （1）EXACT_FIT    ：（ dWidth * k1         , dHeight * k2         ）

    （2）NO_BORDER    ：（ dWidth * max(k1,k2) , dHeight * max(k1,k2) ）

    （3）SHOW_ALL     ：（ dWidth * min(k1,k2) , dHeight * min(k1,k2) ）

    （4）FIXED_WIDTH  ：（ dWidth * k1         , dHeight * k1         ）

    （5）FIXED_HEIGHT ：（ dWidth * k2         , dHeight * k2         ）

    2.3、有图有真相

        屏幕大小：400 X 400 。

        可视区域大小：480 X 320 。

        根据上面的计算方法，自己慢慢琢磨吧。

        

        

        

3、横竖换屏

    cocos2dx开发的游戏，在手机上运行的时候，默认是横屏的。

3.1、Android

    AndroidManifest.xml文件中

    （1）android:screenOrientation = "landscape"   //横屏显示（默认）

    （2）android:screenOrientation = "portrait"    //竖屏显示

    3.2、IOS

[cpp] view plain copy

1. //  
2.     - (NSUInteger) supportedInterfaceOrientations{  
3.         //横屏显示  
4.         //return UIInterfaceOrientationMaskLandscape;  
5.            
6.         //竖屏显示  
7.         return UIInterfaceOrientationMaskPortrait;  
8.     }  
9. //  

4、屏幕大小及坐标

    （1）WinSize        ：屏幕大小

    （2）VisibleSize    ：可视区域大小

    （3）VisibleOrigin  ：可视区域的左下角坐标

[cpp] view plain copy

1. //  
2.     Director::getInstance()->getWinSize()  
3.     Director::getInstance()->getVisibleSize();  
4.     Director::getInstance()->getVisibleOrigin();  
5. //  

图解：

项目实际应用：

       -- 界面常量
    g_uiSize = cc.size(1136, 640)                   -- ui大小
    g_uiCenter = cc.p(1136 / 2, 640 / 2)            -- ui中心
    g_sceneSize = cc.size(1136, 852)                -- 场景大小
    g_sceneCenter = cc.p(1136 / 2, 852 / 2)         -- 场景中心

    -- initialize director
    local director = cc.Director:getInstance()
    local glview = director:getOpenGLView()
    if glview then
        if g_Device.OS == cc.PLATFORM_OS_WINDOWS then
            glview:setFrameSize(g_windowSize.width, g_windowSize.height)
            glview:setViewName("myTank");
            print("1")
        else
            print("2")
            g_windowSize = director:getWinSize()
        end
    else
        if g_windowSize == nil then
            g_windowSize = cc.rect(0, 0, 1136, 640)          -- 窗口大小
        end

        glview = cc.GLViewImpl:createWithRect( "myTank", cc.rect( 0, 0, g_windowSize.width, g_windowSize.height ) )
        director:setOpenGLView(glview)
    end
    
    -- 逻辑窗口大小
    g_visibleSize = cc.size( g_uiSize.width, g_uiSize.height )
    local scaleX = g_windowSize.width / g_uiSize.width
    local scaleY = g_windowSize.height / g_uiSize.height
    if scaleX < scaleY then
        g_visibleSize.height = g_windowSize.height / scaleX
    elseif scaleX > scaleY then
        g_visibleSize.width = g_windowSize.width / scaleY
    end
    glview:setDesignResolutionSize(g_visibleSize.width, g_visibleSize.height, cc.ResolutionPolicy.NO_BORDER)
    print("g_visibleSizeW=",g_visibleSize.width,"g_visibleSizeH",g_visibleSize.height);

    -- 逻辑窗口中心位置
    g_visibleCenter = cc.p( g_visibleSize.width / 2, g_visibleSize.height / 2 )

    -- 可操作区域
    g_operateSize = cc.size( math.min( g_sceneSize.width, g_visibleSize.width ), math.min( g_sceneSize.height, g_visibleSize.height ) )
    -- 可操作区域中心
    g_operateCenter = cc.p( g_operateSize.width / 2, g_operateSize.height / 2 )
    -- dlg偏移
    g_dlgOffsetY = ( g_uiSize.height - g_visibleSize.height ) / 2