Cocos2dx 3.0 學習筆記:屏幕適配的方法。

我們都知道現在手機的分辨率越來越雜。480*320 800*480 1280*720 等等分辨率。如果要讓遊戲運行在所有的屏幕分辨率上，似乎是很困難，美工要爲不同的分辨率創建不同分辨率的素材，這樣美工可是要累死的節奏。也是很讓人頭疼的。所以coco引進了一個"設計分辨率" 所有素材按照設計分辨率的大小來設計製造。以及在編碼時精靈的位置等等都依據這個"設計分辨率"作爲參照。之後如果遊戲運行在不同的設備上 coco會自動爲目標設備的分辨率進行縮放或者拉伸。這樣就做到了屏幕所有的適配。

下面貼一段代碼

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto eglView = EGLView::getInstance();
    director->setOpenGLView(eglView);
    eglView->setDesignResolutionSize(480,800,ResolutionPolicy(0)); //設計分辨率爲480*800的分辨率 我們的素材也按照480*800作爲標準設計。
    // turn on display FPS
   director->setDisplayStats(true);
    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);
    // create a scene. it's an autorelease object
    auto scene = HelloWorld::createScene();

    // run
    director->runWithScene(scene);
	
    return true;
}

第三個參數:ResolutionPolicy(0) 因爲我這裏沒有引用這個聲明枚舉的文件。下面貼一下其聲明

enum class ResolutionPolicy
{
    // The entire application is visible in the specified area without trying to preserve the original aspect ratio.
    // Distortion can occur, and the application may appear stretched or compressed.
    EXACT_FIT,//縮放拉伸全屏 
    // The entire application fills the specified area, without distortion but possibly with some cropping,
    // while maintaining the original aspect ratio of the application.
    NO_BORDER, //不顯示操作面板
    // The entire application is visible in the specified area without distortion while maintaining the original
    // aspect ratio of the application. Borders can appear on two sides of the application.
    SHOW_ALL,//顯示全部，但是保持寬高比
    // The application takes the height of the design resolution size and modifies the width of the internal
    // canvas so that it fits the aspect ratio of the device
    // no distortion will occur however you must make sure your application works on different
    // aspect ratios
    FIXED_HEIGHT,//高度不變
    // The application takes the width of the design resolution size and modifies the height of the internal
    // canvas so that it fits the aspect ratio of the device
    // no distortion will occur however you must make sure your application works on different
    // aspect ratios
    FIXED_WIDTH,//寬度不變

    UNKNOWN,
};

這裏面我試過就 EXACT_FIT 和NO_BORDER效果是一樣的 SHOW_ALL 是保持素材的寬高比但是上下方或者左右方可能出現黑條最後面兩個可以忽略，實用性基本沒有。

然後在入口函數設置寬高分辨率，因爲我這是在win下在安卓下入口不一樣並且寬度和高度肯定是要調用某些API獲取(還沒弄android抱歉)

int APIENTRY _tWinMain(HINSTANCE hInstance,
                       HINSTANCE hPrevInstance,
                       LPTSTR    lpCmdLine,
                       int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hPrevInstance);
    UNREFERENCED_PARAMETER(lpCmdLine);

    // create the application instance
    AppDelegate app;
    EGLView eglView;
    eglView.init("Test",320,480); //設置其分辨率爲320*480
    return Application::getInstance()->run();

運行可以看到，適配成功不管多少分辨率coco會爲我們拉伸或者縮放。

下面圖素材是480*800，分別使用320*480 和240*320測試。