使用Cocos2d-x 3.2和Cocos Studio做屏幕適配方案總結

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

1、鋪滿屏幕(長寬非等比縮放 EXACTFIT)

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

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

保衛蘿蔔即用了這種方式,場景中的控件相對佈局大小等比縮放。 由於背景圖採用了足夠長的圖片,在較寬的手機上背景圖會展示的多,較窄的手機上展示的比較少。


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

20141115214736337.jpg1416298548299548.jpg

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

方案測試:

第一種fit的方式就不說了,960*640的佈局就OK。下面就使用Cocos Studio來測試製作一下第二種方案的場景。

測試方案一:

根節點使用絕對佈局,勾選自適應屏幕。 子空間尺寸不勾選百分比(以免寬高非等比縮放導致變形),控件佈局勾選百分比。480*320分辨率,背景圖片大小也是480*320。

Cocos Studio如下:

20141115222106978.jpg

修改屏幕大小:

glview->setFrameSize(480, 320);

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

1416299260889735.jpg

2.

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



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

1416299667777770.jpg

測試方案二:

根節點使用絕對佈局,勾選自適應屏幕。 子空間尺寸不勾選百分比(以免寬高非等比縮放導致變形),控件佈局勾選百分比。480*320分辨率,背景圖片大小則改爲640*320。

20141115221659359.jpg

修改屏幕大小:

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

20141115222035656.jpg

修改屏幕大小:

glview->setFrameSize(640, 320);

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


1416301870450203.jpg

修改屏幕大小

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


20141115222952796.jpg


結論:

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

原文地址:http://cn.cocos2d-x.org/tutorial/show?id=1909

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章