點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

cocos2dxv3.x屏幕適配方案

來源：懂視網責編：小采時間：2020-11-09 08:32:34

cocos2dxv3.x屏幕適配方案

cocos2dxv3.x屏幕適配方案:1.解決方案先直接給出解決方案，再慢慢解釋，當然這個解決方案也不是完全完美的。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //如果是橫屏游戲: glview-setDesignResolutionSize( 960 , 640 , Resolutio

推薦度：

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

導讀cocos2dxv3.x屏幕適配方案:1.解決方案先直接給出解決方案，再慢慢解釋，當然這個解決方案也不是完全完美的。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //如果是橫屏游戲: glview-setDesignResolutionSize( 960 , 640 , Resolutio

1.解決方案先直接給出解決方案，再慢慢解釋，當然這個解決方案也不是完全完美的。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //如果是橫屏游戲: glview-setDesignResolutionSize( 960 , 640 , ResolutionPolicy::FIXED_HEIGHT); //一張960x640

1.解決方案

先直接給出解決方案，再慢慢解釋，當然這個解決方案也不是完全完美的。

//如果是橫屏游戲:

glview->setDesignResolutionSize(960,640, ResolutionPolicy::FIXED_HEIGHT);

//一張960x640的背景顯示

auto visibleSize = Director::getInstance()->getVisibleSize();

auto Bg = Sprite::create("Bg.png");

this->addChild(Bg);

Bg->setPosition(visibleSize.width /2, visibleSize.height /2);

//Bg->setPosition(visibleSize.width / 2, 320);//等價上面的

Bg->setScaleX(visibleSize.width /960);

//右上角顯示一個精靈

auto Spr = Sprite::create("test.png");

this->addChild(Spr);

Spr->setPosition(visibleSize.width -50, visibleSize.height -50);

//因為是固定高度，所以visibleSize.height永遠都是640，所以下面的寫法也是可以的

//Spr->setPosition(visibleSize.width - 50, 590);

//如果是豎屏游戲:

glview->setDesignResolutionSize(640,960, ResolutionPolicy::FIXED_WIDTH);

美術出圖都按照960x640規格出圖。

2.開始測試各種適配方式

屏幕適配其實應該從Opengles開始講的，這里跳過了，感興趣的可以看這篇文章了解一二《Android 中使用OpenGL ES進行2D開發（繪制第一個三角形番外篇）》

glview->setDesignResolutionSize(960, 640);先不管第三個參數。setDesignResolutionSize是什么意思呢？就是設置一個固定大小的區域來進行程序布局和美術設計。再通過Opengles進行投射到具體手機屏幕上去，是無視具體手機屏幕大小的。比如手機屏幕分辨率是480x320，Opengles會自動縮小一倍進行投射。手機屏幕分辨率是1920x1280，Opengles會自動放大一倍進行投射。程序和美術這塊都不需要改：一套程序坐標，一套美術資源。

比如背景圖片，只需要一張960x640的就OK了，把它放在(480,320)的中心位置就OK了。

一個精靈假設要放在右上角的位置，把它放在(960,640)的位置就OK了。也根本不需要考慮cocos2d中的visibleSize什么的。

現實中，手機分辨率不可能都是960x640的倍數。而我們又要全屏顯示，就有了第三個參數來規定具體投射的方式。

cocos2d的ResolutionPolicy現在總共有5種：

enum class ResolutionPolicy

{

EXACT_FIT,

NO_BORDER,

SHOW_ALL,

FIXED_HEIGHT,

FIXED_WIDTH

};

2.1 EXACT_FIT

EXACT_FIT是會完全投射到屏幕全屏的。這樣對程序和美術來說是最完美的，但是會有拉伸的現象。

上面這張是960x540的原圖，4個角我加上了參照物，總的是一張圖片。

假設目標手機分辨率是1136x500(現實是不存在的)，使用EXACT_FIT就是下面的效果：

其實對于背景的拉伸，還是可以接受的，主要的問題是:精靈也會被拉伸,還有拉伸區域是不可控制的。

EXACT_FIT適用場景：個人小項目，輕微拉伸不影響游戲的展示的游戲。但公司大項目這個基本不可用。

使用EXACT_FIT的時候，visibleSize不管手機分辨率是多少，visibleSize永遠都是960x640。

2.2 SHOW_ALL

先來解釋下Show_All.它不會拉伸，但是左右或者上下會有黑邊，沒有全屏的感覺。

1136x640

1024x768

Show_ALL 能不能用呢？幾乎不能用。雖然它的visibleSize也都是960x640。但是黑邊的問題，蘋果那邊是通過不的。這里的黑邊是不能用東西來覆蓋的。

2.3 NO_BORDER

NO_BORDER 顧名思義就是沒有黑邊，且保持寬高比。這樣的結果就是，會有部分被裁剪掉。

1136x640

手機分辨率比較長的時候，上下不夠，會被裁掉，注意看背景下面的參考物。

visibleSize width:960
visibleSize height:540.8450927734375 //不到640

1024x768

IPad分辨率比較高的時候，左右不夠，會被裁掉，注意看背景左邊的參考物。

visibleSize width:853.3333129882812 //不到960
visibleSize height:640

使用NO_BORDER會導致visible一直變化，且會被裁掉。

2.4 FIXED_HEIGHT

FIXED_HEIGHT和FIXED_WIDTH是類似的，就講個FIXED_HEIGHT。FIXED_HEIGHT和FIXED_WIDTH是較高cocos2d版本才有的。這個解決方案是固定一個方向上的值，且固定比例。這樣會導致部分覆蓋不到或者部分被裁掉，要程序進行動態適配。

1136x640

圖7

visibleSize width:1136 //會根據手機屏幕分辨率進行變化

visibleSize height:640 //永遠固定是640

1024x768

visibleSize width:854 //會根據手機屏幕分辨率進行變化

visibleSize height:640 //永遠固定是640

圖7雖然這里的效果看起來跟SHOW_ALL的一樣，但是是完全不一樣的，通過看visibleSize就知道了。這里的黑邊我們是可以通過手動拉伸背景來覆蓋的。有人就問了，拉伸背景不就跟EXACT_FIT的一樣了？不一樣的！EXACT_FIT是拉伸整個區域，場景放置的精靈也是會被拉伸的。FIXED_HEIGHT就不會拉伸精靈了。

精靈放置的位置就有講究了，在縱向，完全可以使用魔鬼數字，320肯定是垂直居中的。橫向就要斟酌了，比如要把一個精靈放在右上角就要考慮visibleSize了。

setPosition(visibleSize.width - 50, 640 - 50);

下面是簡單拉伸背景的效果，加上一個精靈。

var visibleSize = cc.Director.getInstance().getVisibleSize();

var scaleRate = visibleSize.width /960;

var bg = cc.Sprite.create("res/bg.jpg");

this.addChild(bg);

bg.setPosition(visibleSize.width /2, visibleSize.height /2);

bg.setScaleX(scaleRate);

var sp = cc.Sprite.create("res/menu1.png");

this.addChild(sp);

sp.setPosition(100 * scaleRate,320);

1136x640

1024x768

其他安卓的分辨率就不列出來了。

3.講講資源適配

我們知道一套圖片你想要同時適配960x640, 2048x1536或者將來的IPhone6 Plus 1920x1080，是很困難的。主要的問題是，如果你都是一套960x640的圖片，那么在高分辨率下就不清楚了。如果你是一套1920x1280的圖，那么在低分辨率的手機上運行比較卡。上面例子都是使用了960x640的分辨率作為設計分辨率，可以考慮將來手機分辨率就都比較高的時候上升點，比如上升到1248x832。

還有個問題是屏幕高寬比的問題，IPad是1024/768 即1.33 這個比例都比960/640 的1.5的要低，而IPhone5，IPhone6的屏幕高寬比例上升到1.775。在加上Android的屏幕高寬比。可以考慮未來使用1.6的比例。比如1248x780作為設計分辨率。然后IPad上要格外小心要特殊處理，橫向，個別UI要進行縮小適配。

沒有兩全其美的做法，要不準備2套資源，這樣游戲包會比較大。現在一般都準備一套低分辨率的資源，其實在高分辨上看起來也不會太差。當然如果你的游戲是IPad游戲，那就要好好斟酌。

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