cocos2dx3.2 ——螢幕適配

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

    要想讓你的程式在各種手機上都能很好的呈現遊戲畫面，就需要進行螢幕適配。

【致謝】

【小知識】

    解析度：是指螢幕影象的精密度，即顯示器所能顯示的畫素有多少。

    如：解析度480×320的意思是水平方向含有畫素數為480個，垂直方向畫素數320個。

    螢幕尺寸一樣的情況下，解析度越高，顯示效果就越精細和細膩。

    同時解析度也反映了螢幕長寬比例（如15：10）。

【螢幕適配】

1、兩個解析度

    1.1、視窗解析度

    在AppDelegate.cpp中有個設定視窗解析度的函式。該函式是設定了我們預想裝置的螢幕大小，也就是應用程式視窗的大小。

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

1.2、設計解析度（可視區域）

    在AppDelegate.cpp中也有個設定設計解析度的函式。該函式是設定了我們遊戲設計時候的解析度，也就是可視區域的大小，也就是說設計者初衷的遊戲可視區域的解析度螢幕大小。

    但是對於每個使用者來說，他們使用的裝置不一定是（480/320）的，比如手機有大有小。

    而後面的ResolutionPolicy::SHOW_ALL，意思是按照原比例（480/320）進行放縮以適配實際螢幕大小。

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

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

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

（2）若設定視窗大小為setFrameSize(960, 640)，而不設定設計解析度ResolutionPolicy::SHOW_ALL

    （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

1. //
2.     - (NSUInteger) supportedInterfaceOrientations{  
3.         //橫屏顯示
4.         //return UIInterfaceOrientationMaskLandscape;
5.         //豎屏顯示
6.         return UIInterfaceOrientationMaskPortrait;  
7.     }  
8. //

4、螢幕大小及座標

    （1）WinSize        ：螢幕大小

    （2）VisibleSize    ：可視區域大小

    （3）VisibleOrigin  ：可視區域的左下角座標

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

圖解：