使用cocos2dx 3.2和cocosstudio屏幕適配總結----相對布局


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

常規策略:

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

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

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

就不上圖了。

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

      保衛蘿卜即用了這樣的方式,場景中的控件相對布局大小等比縮放。

因為背景圖採用了足夠長的圖片。在較寬的手機上背景圖會展示的多,較窄的手機上展示的比較少。

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




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


方案測試:

第一種fit的方式就不說了,960*640的布局就OK。以下就使用cocosstudio來測試制作一下另外一種方案的場景。(吐槽一下。cocos preview實在是不能用。怪不得僅僅能叫preview)

測試方案一:

根節點使用絕對布局,勾選自適應屏幕。 子空間尺寸不勾選百分比(以免寬高非等比縮放導致變形),控件布局勾選百分比。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);

下圖能夠看到控件都未做不論什么拉伸,背景圖明顯小了。




測試方案二:

根節點使用絕對布局,勾選自適應屏幕。

子空間尺寸不勾選百分比(以免寬高非等比縮放導致變形),控件布局勾選百分比。

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);



結論:

    測試用例為了展示效果使用的分辨率比較誇張,正常情況下長寬比是不會不會差距這么明顯。

假設對於背景要求不是非常嚴格的游戲,能夠採用另外一種來做屏幕適配。 控件寬高保持等比縮放,背景圖部分展示就可以。

   PS:1、對於理論性的東西只是與陳述。僅僅問方案究竟行,還是不行! 

          2、以上圖片請勿用作商業用途,版權歸光輝和老B同學全部。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM