簡單的Cocos2d x螢幕適配策略

2021-07-05 13:27:41 字數 2392 閱讀 1763



開發手機遊戲時常常需要對不同的裝置進行解析度適配。在 pc 遊戲開發中,一種比較直截了當的作法——全屏顯示遊戲,將螢幕鎖定在乙個預設好的解析度中即可。但這在當下的移動裝置中無法做到。由於生產標準不一,市場上有各種讓人零亂的 android 裝置尺寸,即便是規格較統一的 ios 裝置,如今也正走向多解析度**的格局:

為了應對不同的螢幕,cocos2d-x 遊戲引擎提供了一組解析度適配策略:

詳細的使用方法可參見此官方文件。這些策略通過一些妥協使得遊戲在不同的裝置上得以較完整的顯示。文件中提到乙個重要概念叫「設計解析度」(design resolution),表示設計組在這個尺寸下進行遊戲素材的設計。在這裡對於這些顯示策略的優勢與不足作一些簡單的介紹:

將遊戲畫面完全顯示在螢幕上,若寬高比大於設計解析度,螢幕左右將出現黑邊;若寬高比小於設計解析度,螢幕上下將出現黑邊——這有點像在4:3螢幕上看16:9的寬屏電影。該策略較為常用,適用於大部分 2d 遊戲。

一些遊戲為了更好地利用螢幕,則為使用 no border 方式,該策略在保證設計解析度的寬高比的情況下,將畫面放大到完全填充螢幕。使得在裝置寬高比不同於設計解析度時,遊戲部分內容無法呈現在螢幕內。通常適用於 3d 類遊戲,主要內容位於螢幕中間部分,對於邊界的損失可以無視。

通過拉伸畫面的方式,將遊戲畫面完全適應螢幕解析度。這種做法在不同的螢幕上可能導致畫面變形。很少有遊戲會使用。

僅保證遊戲畫面水平場景完整顯示於螢幕中,而豎直場景(高度)可能小於螢幕高(上下出現黑邊),或超出螢幕(遊戲畫面溢位)。適用於橫版闖關遊戲。

類似於 fixed width,僅保證遊戲的垂直場景。適用於豎版闖關/飛行遊戲。

綜上所述,對於 2d 遊戲來說,show all 可能是當下較多遊戲的選擇。但是有沒有更好的利用螢幕的方式呢,倘若能在 show all 的基礎上加以改進,完全消除黑邊,豈不是更好。於是我想到了一種簡單的方法,動態計算「設計解析度」,在保證較小調整的基礎上,消除螢幕黑邊:

計算縮放係數 k 使用得設計解析度能完整顯示在裝置螢幕中,然後計算x或y,補足黑邊占用的螢幕尺寸。

// define the design resolution

var designwidth = 960;

var designheight = 640;

// retrieve device resolution

var devicewidth = cc.visiblerect.width;

var deviceheight = cc.visiblerect.height;

var k = 1, x = 0, y = 0;

k = devicewidth / designwidth;

var scaledheight = designheight * k;

if (scaledheight <= deviceheight) else else

}// print out parameters

cc.log("device width:" + devicewidth);

cc.log("device height:" + deviceheight);

cc.log("k:" + k + " x:" + x + " y:" + y);

// resize the design resolution

cc.view.setdesignresolutionsize(

960 + x / k, 640 + y / k,

cc.resolutionpolicy.show_all);

// after screen fitted

cc.log("view width:" + cc.visiblerect.width + " view height:" + cc.visiblerect.height);

若設計解析度為 960×640 在以下不同裝置上執行,調整後的設計解析度如下:

這些尺寸能完全容納設計解析度,並且消除了黑邊。

但是設計分辨在寬或高的其中乙個維度變化了,遊戲的內容又要如何呈現?乙個簡單的作法是在原來黑邊的位置使用一些裝飾性的介面元素進行修飾;如果遊戲使用了 cocos studio 進行 ui 開發,則可以通過開啟根節點的「自適應解析度」來進行螢幕適配——這是乙個絕佳的方案。

以上**在 cocos2d-js 3.0 rc2 測試通過。

其它版本可能需要在 setdesignresolutionsize 後對 cc.visiblerect 進行重置。

cc.view.adjustviewport(true);

cc.view.setdesignresolutionsize(...);

cc.view.resizewithbrowsersize(true);

cocos2d x螢幕適配

第一,對於螢幕適配問題,首先必須理解幾個基本的概念。framesize 實 際上就是裝置的原始解析度,開發環境中可以通過cceglview sharedopenglview setframesize 來設 置裝置的解析度大小,當然也可以可以通過cceglview sharedopenglview g...

Cocos2d x 螢幕適配

為了適應移動終端的各種解析度大小,各種螢幕寬高比,在 cocos2d x 當前穩定版 2.0.4 中,提供了相應的解決方案,以方便我們在設計遊戲時,能夠更好的適應不同的環境。而在設計遊戲之初,決定著我們螢幕適配的因素有哪些,簡而言之只有兩點 螢幕大小 和 寬高比。這兩個因素是如何影響遊戲的 螢幕大小...

cocos2dx 螢幕適配策略

cocos2dx的常用函式 cceglview sharedopenglview setdesignresolutionsize 設計解析度大小 即開發時為基準的螢幕解析度 cceglview sharedopenglview setframesize 設定win32模擬器的解析度 cceglvie...