Cocos2d-JS的屏幕適配方案

Cocos2d引擎爲遊戲開發者提供了屏幕適配策略（Resolution Policy）解決方案。

使用方式

1. 設置屏幕適配策略（Resolution Policy）

　　若是你尚未用過Resolution Policy，只須要在遊戲載入過程完成以後（cc.game.onStart函數回調中），調用下面的代碼：

cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);

　　setDesignResolutionSize函數的前兩個參數是你想要在你的代碼中使用的遊戲分辨率，第三個參數就是你選擇的適配方案。引擎中內置了5種適配方案

　　若是你已經設置了設計分辨率，那麼你能夠直接設置你的Resolution Policy：

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);

 　　原生遊戲中游戲老是使用所有屏幕空間，可是在WEB端你的網頁中也許除了遊戲還有別的視覺或文字元素，或者也許你須要給你的遊戲設計一個漂亮的邊框。因此 Cocos2d-JS中Web引擎的適配方案會默認適配遊戲Canvas元素的父節點，若是你但願遊戲場景適配瀏覽器屏幕，那麼只須要將Canvas直接 放置到body下就能夠了

 

2. Resolution Policy的意義

使用Resolution Policy的好處很明顯，不論設備屏幕大小如何，也不論瀏覽器窗口的寬高比，你的遊戲場景都會被自動放縮到屏幕大小。更重要的是，在遊戲代碼中，你將永 遠使用你所設計的遊戲分辨率來佈置遊戲場景。好比說，若是你將設計分辨率設置爲320 * 480，那麼在遊戲代碼中你的遊戲窗口右上角座標將永遠是(320, 480)(在FIXED_WIDTH模式高度可能會被縮放，一樣在FIXED_HEIGHT模式下寬度可能存在縮放的狀況，具體看下文說明)。

3. 監聽瀏覽器窗口大小變化事件

新的適配方案容許在瀏覽器大小變化的時候自動從新嘗試適配。好比說，當用戶拖拽來改變瀏覽器大小，或者更有用的狀況，當他們轉動本身手機方向的時候。遊戲中任意時刻均可以開啓這種行爲，只須要調用cc.view的resizeWithBrowserSize函數：

cc.view.resizeWithBrowserSize(true);

 

 爲了更靈活得應對變化，咱們爲cc.view提供了一個新的函數，你能夠經過setResizeCallback函數註冊一個回調函數來監聽瀏覽器窗口大小變化事件：

cc.view.setResizeCallback(function() {
    // 作任何你所須要的遊戲內容層面的適配操做
    // 好比說，你能夠針對用戶的移動設備方向來決定所要應用的適配模式
});

 

 

4. Fullscreen API

Fullscreen API是瀏覽器容許Web頁面在得到用戶全屏幕的一個新的制定中的API。

Cocos2d-JS在移動端瀏覽器中會嘗試自動進入全屏幕來給用戶更好的遊戲體驗（須要指出並非全部瀏覽器都支持這個API）。

另外一方面，桌面端幾乎全部現代瀏覽器都支持Fullscreen API，若是你但願使用這個API，Cocos2d-JS也簡化了它的使用方式：

• 嘗試進入全屏模式（須要用戶交互）: cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
• 檢測是否處於全屏模式: cc.screen.fullScreen();
• 退出全屏模式: cc.screen.exitFullScreen();

重要概念

　　1. 遊戲外框 Frame

　　　　遊戲外框是你的遊戲Canvas元素的初始父節點，通常狀況下，它是html文檔的body元素。可是若是你願意，它能夠是DOM結構中的任意容器節點。Canvas元素的初始大小並不重要，屏幕適配過程當中它會被自動放縮來適應你設置的外框大小。 再次提醒，若是你但願遊戲窗口適應整個瀏覽器窗口，那麼只須要將Canvas元素直接放在body下。

　　2. 遊戲容器 Container

　　　　在Cocos2d-JS的初始化進程中，引擎會自動將你的Canvas元素放置到一個DIV容器中，而這個容器會被加入到Canvas的原始父節點（遊戲外框）中。這個遊戲容器是實現屏幕適配方案的重要輔助元素，你能夠經過cc.container來訪問它。

　　3. 遊戲世界 Content

　　　　遊戲世界表明遊戲內使用的世界座標系。

　　4. 視窗 Viewport

　　　　視窗是遊戲世界相對於遊戲Canvas元素座標系中的座標及大小.

　　5. 容器適配策略 Container Strategy

　　　　容器適配策略負責對遊戲容器和遊戲Canvas元素進行放縮以適應遊戲外框。

　　6. 內容適配策略 Content Strategy

　　　　內容適配策略負責將遊戲世界放縮以適應遊戲容器，同時也會計算並設置視窗。

 

系統預設適配模式

　　在Cocos2d-JS中預設了5種適配模式，下面將圖解每種適配模式的行爲。圖中紅色方框指示的是遊戲世界的邊界，而綠色方框指示的是Canvas元素的邊界。

全部適配模式都是由一個容器適配策略搭配一個內容適配策略所組成的，括號中顯示的是每一個模式的構成方式。

　　1. SHOW_ALL (PROPORTION_TO_FRAME + SHOW_ALL)

 　　　　SHOW_ALL模式會盡量按原始寬高比放大遊戲世界以適配外框(Frame)，同時使得遊戲內容所有可見，因此瀏覽器寬高比不一樣於遊戲寬高比時，窗口中會有必定的留白。留白部分的顏色或背景能夠經過設置外框的CSS屬性來修改。

 　  

　　2. NO_BORDER (EQUAL_TO_FRAME + NO_BORDER)

　　　　NO_BORDER模式會盡量按原始寬高比放大遊戲世界以適配外框，而且保證不留空白。因此瀏覽器寬高比不一樣於遊戲寬高比時，遊戲世界會被部分切割。同時，在這種狀況下，cc.visibleRect表明的就是Canvas在遊戲世界中的視窗，大小比cc.winSize要小一些。

　　3. EXACT_FIT (EQUAL_TO_FRAME + EXACT_FIT)

　　　　EXACT_FIT模式會忽略原始寬高比放大遊戲世界以徹底適應外框，因此瀏覽器寬高比不一樣於遊戲寬高比時，遊戲世界會被必定程度拉伸。　　　　

　　　　FIXED_WIDTH模式會橫向放大遊戲世界以適應外框的寬度，縱向按原始寬高比放大。結果有兩種可能，相似與SHOW_ALL模式的結果（如 圖），或者類於NO_BORDER模式。它與前面兩種模式的差異在於，在FIXED_WIDTH模式下游戲世界座標系等同於Canvas元素座標系，而且 Canvas元素必然佔滿整個外框。

　　　　注意下與SHOW_ALL模式的區別，此時Canvas大小是整個外框大小，因此可顯示內容區域實際上比SHOW_ALL模式更多。

　　5. FIXED_HEIGHT (EQUAL_TO_FRAME + FIXED_HEIGHT)　　　　

　　　　與前一個模式相反，FIXED_HEIGHT模式會縱向放大遊戲世界以適應外框的高度，橫向按原始寬高比放大。結果同上。

　　　　在這個模式下，與NO_BORDER模式的區別是此時遊戲世界座標系和大小等同於Canvas座標系。

 

用系統預設策略來構建適配模式

如你所看到的，全部預設模式都是預設策略的組合，你也能夠作到一樣的事情，系統預設策略以下所示：

　　Container strategies: 容器適配策略

    cc.ContainerStrategy.EQUAL_TO_FRAME // 使容器大小等同於外框
    cc.ContainerStrategy.PROPORTION_TO_FRAME // 使容器大小按原始寬高比放大以適應外框
    cc.ContainerStrategy.ORIGINAL_CONTAINER // 原始容器大小

 

　　Content strategies 內容適配策略

    cc.ContentStrategy.SHOW_ALL
    cc.ContentStrategy.NO_BORDER
    cc.ContentStrategy.EXACT_FIT
    cc.ContentStrategy.FIXED_WIDTH
    cc.ContentStrategy.FIXED_HEIGHT