JavaScript強化教程 —— Cocos2d-JS的屏幕適配方案

時間 2020-07-24

標籤 javascript 強化教程 cocos2d cocos 屏幕適配方案欄目 JavaScript 简体版

原文原文鏈接

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下就能夠了：

<body>
    <canvas id="gameCanvas"></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();
4.4.3 重要概念

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

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

本文爲 H5EDU 機構官方 HTML5培訓教程，主要介紹：JavaScript強化教程 —— Cocos2d-JS的屏幕適配方案
html