cocos2dx3.2 ——屏幕適配

本文出自 “夏天的風(fēng)” 博客，請務(wù)必保留此出處 http://shahdza.blog.51cto.com/2410787/1550089  

手機(jī)的屏幕大小千差萬別，如現(xiàn)在流行的安卓手機(jī)屏幕大部分長寬比例為16:9。而iPhone 5S的長寬比例為71:40（接近16:9），也有預(yù)測說iPhone 6S的長寬比例也將會是主流的16:9。另外還有一些平板電腦為4:3、16:10、5:4等等。當(dāng)然還有一些其他的牌子可能屏幕比例也不一樣。

    要想讓你的程序在各種手機(jī)上都能很好的呈現(xiàn)游戲畫面，就需要進(jìn)行屏幕適配。

【致謝】

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

【小知識】

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

            如：分辨率480×320的意思是水平方向含有像素數(shù)為480個，垂直方向像素數(shù)320個。

            屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)和細(xì)膩。

            同時分辨率也反映了屏幕長寬比例（如15：10）。

【屏幕適配】

1、兩個分辨率

    1.1、窗口分辨率

    在AppDelegate.cpp中有個設(shè)置窗口分辨率的函數(shù)。該函數(shù)是設(shè)置了我們預(yù)想設(shè)備的屏幕大小，也就是應(yīng)用程序窗口的大小。

[cpp] view plain copy

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

1.2、設(shè)計分辨率（可視區(qū)域）

    在AppDelegate.cpp中也有個設(shè)置設(shè)計分辨率的函數(shù)。該函數(shù)是設(shè)置了我們游戲設(shè)計時候的分辨率，也就是可視區(qū)域的大小，也就是說設(shè)計者初衷的游戲可視區(qū)域的分辨率屏幕大小。

    但是對于每個用戶來說，他們使用的設(shè)備不一定是（480/320）的，比如手機(jī)有大有小。

    而后面的ResolutionPolicy::SHOW_ALL，意思是按照原比例（480/320）進(jìn)行放縮以適配實際屏幕大小。

[cpp] view plain copy

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

以下貼了三張對比圖，加深理解。

    （1）這是原圖片大小，窗口大小為480 * 320。

    （2）若設(shè)置窗口大小為setFrameSize(960, 640)，而不設(shè)置設(shè)計分辨率ResolutionPolicy::SHOW_ALL 的情況下，圖片不放縮，原圖還是480 * 320。

    （3）設(shè)置了 ResolutionPolicy::SHOW_ALL 之后，圖片放縮到適配整個屏幕960 * 640 了。

2、五種適配模式

    從上面的講解我們可以了解到，setFrameSize()是設(shè)置了窗口大?。雌聊坏膶嶋H大?。?，而這個參數(shù)只是為了我們開發(fā)時作為模擬參照，在實際手機(jī)上運行時，手機(jī)的屏幕大小是我們無法設(shè)置的。

    而屏幕適配的關(guān)鍵在于setDesignResolutionSize()，通過它來設(shè)置可視區(qū)域的分辨率以及屏幕適配模式。該函數(shù)的前兩個參數(shù)為分辨率（即屏幕長寬比例），而最后一個參數(shù)則是適配的模式。

    2.1、適配模式

    （1）ResolutionPolicy::EXACT_FIT    ：拉伸變形，使鋪滿屏幕。

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

                                             （長寬中小的鋪滿屏幕，大的超出屏幕）

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

                                             （長寬中大的鋪滿屏幕，小的留有黑邊）

    （4）ResolutionPolicy::FIXED_WIDTH  ：按比例放縮，寬度鋪滿屏幕。

    （5）ResolutionPolicy::FIXED_HEIGHT ：按比例放縮，高度鋪滿屏幕。

    2.2、計算方法

    假設(shè)：屏幕分辨率（fWidth，fHeight） ； 設(shè)計分辨率（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 。

        可視區(qū)域大?。?span style="padding:0px; margin:0px; color:rgb(0,176,80)">480 X 320 。

        根據(jù)上面的計算方法，自己慢慢琢磨吧。

3、橫豎換屏

    cocos2dx開發(fā)的游戲，在手機(jī)上運行的時候，默認(rèn)是橫屏的。

3.1、Android

    AndroidManifest.xml文件中

    （1）android:screenOrientation = "landscape"   //橫屏顯示（默認(rèn)）

    （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、屏幕大小及坐標(biāo)

    （1）WinSize        ：屏幕大小

    （2）VisibleSize    ：可視區(qū)域大小

    （3）VisibleOrigin  ：可視區(qū)域的左下角坐標(biāo)

[cpp] view plain copy

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

圖解：