Cocos2dx進階學習之屏幕適配

背景

在學習cocos2dx時，咱們在main函數中發現一句代碼，

 1 #include "main.h"   2    3 #include "AppDelegate.h"   4    5 #include "CCEGLView.h"   6    7      8    9 USING_NS_CC;  10   11     12   13 int APIENTRY _tWinMain(HINSTANCE hInstance,  14   15                        HINSTANCE hPrevInstance,  16   17                        LPTSTR    lpCmdLine,  18   19                        int       nCmdShow)  20   21 {  22   23     UNREFERENCED_PARAMETER(hPrevInstance);  24   25     UNREFERENCED_PARAMETER(lpCmdLine);  26   27     28   29     // create the application instance  
30   31     AppDelegate app;  32   33     CCEGLView* eglView = CCEGLView::sharedOpenGLView();  34   35     eglView->setViewName("CrazyMario");  36   37     eglView->setFrameSize(480, 320);  38   39     return CCApplication::sharedApplication()->run();  40   41 }

那就是eglView->setFrameSize(480,320)，這句代碼設置了窗口的大小，通常說來手機遊戲須要全屏顯示，因此對於不一樣分辨率的手機，setFrameSize要求不同的。這樣是否是很崩潰？由於咱們代碼裏不少地方可能也要改，圖片大小可能也要改，那怎麼辦呢？

其實cocos2dx已經爲咱們作好了這一切

結局方案

這個方案就是調用eglView->setDesignResolutionSize(480, 320, kResolutionShowAll);來告訴cocos2dx，個人程序是按照480，320來設計的，那麼setFrameSize若是不是480，320那麼cocos2dx會按照比例給咱們作適配，不用咱們作別的事情。

在超級馬里奧這個遊戲裏，在AppDelegate中已經調用了setDesignResolutionSize函數設置設計大小爲480，320。

那麼在setFrameSize不一樣的狀況下，也不會引發圖片比例不合適的狀況，只是窗口大小會發生變化而已

在480*320的狀況下

在960*640的狀況下，只是界面變大了，圖片沒有任何的不適合

 

setDesignResolutionSize的參數

第三個參數的取值範圍以下： 

 1 enum ResolutionPolicy  2 {  3     // The entire application is visible in the specified area without trying to preserve the original aspect ratio.  4     // Distortion can occur, and the application may appear stretched or compressed.
 5     kResolutionExactFit,  6     // The entire application fills the specified area, without distortion but possibly with some cropping,  7     // while maintaining the original aspect ratio of the application.
 8     kResolutionNoBorder,  9     // The entire application is visible in the specified area without distortion while maintaining the original 10     // aspect ratio of the application. Borders can appear on two sides of the application.
11     kResolutionShowAll, 12     // The application takes the height of the design resolution size and modifies the width of the internal 13     // canvas so that it fits the aspect ratio of the device 14     // no distortion will occur however you must make sure your application works on different 15     // aspect ratios
16     kResolutionFixedHeight, 17     // The application takes the width of the design resolution size and modifies the height of the internal 18     // canvas so that it fits the aspect ratio of the device 19     // no distortion will occur however you must make sure your application works on different 20     // aspect ratios
21     kResolutionFixedWidth, 22   23     kResolutionUnKnown, 24 };

kResolutionExactFit：會靠拉伸來填滿屏幕，本例來講背景圖會變形來填充屏幕，由於1024:768=1.3， 480:320=1.5，寬高比不一樣，圖片也就沒法等比縮放來填滿屏幕，只能變形了。

kResolutionNoBorder： 看不到黑邊，實際就是寬高等比縮放，但縮放比例取寬比和高比之中大的那一個。

kResolutionShowAll：所有顯示，能夠理解爲保證內容都顯示在屏幕以內，實際也是寬高等比縮放，但縮放比例取寬比和高比之中小的那一個。