cocos2dx基礎篇(27) 屏幕適配

【3.x】https://blog.csdn.net/qq_40338728/article/details/82964046

 

【屏幕適配】

一、兩個分辨率

    1.一、窗口分辨率

    在main.cpp中有個設置窗口分辨率的函數。該函數是設置了咱們預想設備的屏幕大小，也就是應用程序窗口的大小。

//
	eglView->setFrameSize(480, 320);
//

    1.二、設計分辨率（可視區域）

    在AppDelegate.cpp中也有個設置設計分辨率的函數。該函數是設置了咱們遊戲設計時候的分辨率，也就是可視區域的大小，也就是說設計者初衷的遊戲可視區域的分辨率屏幕大小。

    可是對於每一個用戶來講，他們使用的設備不必定是（480/320）的，好比手機有大有小。

    然後面的kResolutionShowAll，意思是按照原比例（480/320）進行放縮以適配實際屏幕大小。

//
	CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480,320,kResolutionShowAll);
//

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

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

    （2）若設置窗口大小爲setFrameSize(960, 640)，而不設置設計分辨率kResolutionShowAll的狀況下，圖片不放縮，原圖仍是480 * 320。

    （3）設置了kResolutionShowAll以後，圖片放縮到適配整個屏幕960 * 640 了。

 

二、五種適配模式

    從上面的講解咱們能夠了解到，setFrameSize()是設置了窗口大小（即屏幕的實際大小），而這個參數只是爲了咱們開發時做爲模擬參照，在實際手機上運行時，手機的屏幕大小是咱們沒法設置的。

    而屏幕適配的關鍵在於setDesignResolutionSize()，經過它來設置可視區域的分辨率以及屏幕適配模式。該函數的前兩個參數爲分辨率（即屏幕長寬比例），而最後一個參數則是適配的模式。

 

    2.一、適配模式

    （1）kResolutionExactFit   ：拉伸變形，使鋪滿屏幕。

    （2）kResolutionNoBorder   ：按比例放縮，全屏展現不留黑邊。

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

    （3）kResolutionShowAll    ：按比例放縮，所有展現不裁剪。

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

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

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

 

    2.二、計算方法

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

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

    則適配後的分辨率大小以下：

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

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

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

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

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

 

    2.三、有圖有真相

        屏幕大小：400 X 400 。

        可視區域大小：480 X 320 。

        

 

        

 

        

 

三、橫豎換屏

    cocos2dx開發的遊戲，在手機上運行的時候，默認是橫屏的。

    3.一、Android

    AndroidManifest.xml文件中

    （1）android:screenOrientation = "landscape"   //橫屏顯示（默認）

    （2）android:screenOrientation = "portrait"    //豎屏顯示

     3.二、IOS

//
	- (NSUInteger) supportedInterfaceOrientations{
		//橫屏顯示
		//return UIInterfaceOrientationMaskLandscape;
		
		//豎屏顯示
		return UIInterfaceOrientationMaskPortrait;
	}
//

四、屏幕大小及座標

    （1）WinSize        ：屏幕大小

    （2）VisibleSize    ：可視區域大小

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

//
	CCDirector::sharedDirector()->getWinSize()
	CCDirector::sharedDirector()->getVisibleSize();
	CCDirector::sharedDirector()->getVisibleOrigin();
//

    圖解：