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