使用cocos2dx3.2和cocosstudio屏幕適配總結(jié)----相對布局

屏幕適配的文章太多了，基本上都是理論性的東西，大家明白了機制就知道了，沒有完美的適配方案，除非你們的美工愿意折騰。 常規(guī)策略： 今天研究了一下屏幕適配導(dǎo)致的縮放和展示不全的問題（黑邊的方案直接淘汰）。細想一下，美工給我們一張圖（假設(shè)這張圖wid

屏幕適配的文章太多了，基本上都是理論性的東西，大家明白了機制就知道了，沒有完美的適配方案，除非你們的美工愿意折騰。

常規(guī)策略：

今天研究了一下屏幕適配導(dǎo)致的縮放和展示不全的問題（黑邊的方案直接淘汰）。細想一下，美工給我們一張圖（假設(shè)這張圖width足夠長），在不同的分辨率上我們應(yīng)該如何對其展示？肯定不可能在所有的分辨率上把這張圖完美的按照原比例展示出來，那答案就只有兩種了：

1、鋪滿屏幕（長寬非等比縮放 EXACTFIT）

天天德州就采用了這種方法，在不同的分辨率上能明顯看到元素被縮放或者拉伸了，對于休閑類游戲不必太過追求完美。就不上圖了。

2、部分圖片被遮擋（長寬等比縮放 FIXHEIGHT）

保衛(wèi)蘿卜即用了這種方式，場景中的控件相對布局大小等比縮放。 由于背景圖采用了足夠長的圖片，在較寬的手機上背景圖會展示的多，較窄的手機上展示的比較少。

請看下面兩張圖的四個角：

上面是手機截圖原圖，從上圖可以看到控件的大小是一樣的，但是由于分辨率的不同導(dǎo)致背景圖的展示寬度不同。

方案測試：

第一種fit的方式就不說了，960*640的布局就OK。下面就使用cocosstudio來測試制作一下第二種方案的場景。（吐槽一下，cocos preview實在是不能用，怪不得只能叫preview）

測試方案一：

根節(jié)點使用絕對布局，勾選自適應(yīng)屏幕。 子空間尺寸不勾選百分比（以免寬高非等比縮放導(dǎo)致變形），控件布局勾選百分比。480*320分辨率，背景圖片大小也是480*320。

cocosstudio如下：

修改屏幕大小：

1.

glview->setFrameSize(480, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

2.

glview->setFrameSize(640, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

下圖可以看到控件都未做任何拉伸，背景圖明顯小了。

測試方案二：

根節(jié)點使用絕對布局，勾選自適應(yīng)屏幕。 子空間尺寸不勾選百分比（以免寬高非等比縮放導(dǎo)致變形），控件布局勾選百分比。480*320分辨率，背景圖片大小則改為640*320。

修改屏幕大小：

1.

glview->setFrameSize(480, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

修改屏幕大小：

2.

glview->setFrameSize(640, 320);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

修改屏幕大小：

3.

glview->setFrameSize(640,480);
glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

結(jié)論：

測試用例為了展示效果使用的分辨率比較夸張，正常情況下長寬比是不會不會差距這么明顯。如果對于背景要求不是很嚴格的游戲，可以采用第二種來做屏幕適配。 控件寬高保持等比縮放，背景圖部分展示即可。

PS:1、對于理論性的東西不過與陳述，只問方案到底行，還是不行！

2、以上圖片請勿用作商業(yè)用途，版權(quán)歸光輝和老B同學(xué)所有。

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