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

來源：懂視網責編：小采時間：2020-11-27 20:31:04

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

JavaScript強化教程——Cocos2d-JS的屏幕適配方案:本文為 H5EDU 機構官方 HTML5培訓教程，主要介紹：JavaScript強化教程 —— Cocos2d-JS的屏幕適配方案 1. 設置屏幕適配策略（Resolution Policy）如果你還沒有用過Resolution Policy，只需要在游戲載入過程完成之后（cc.game.onStart函數

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript強化教程——Cocos2d-JS的屏幕適配方案:本文為 H5EDU 機構官方 HTML5培訓教程，主要介紹：JavaScript強化教程 —— Cocos2d-JS的屏幕適配方案 1. 設置屏幕適配策略（Resolution Policy）如果你還沒有用過Resolution Policy，只需要在游戲載入過程完成之后（cc.game.onStart函數

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

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com