版本：2.3.4

 

一 豎屏手機適配

二 橫屏手機適配

三 其他（百分比適配，ShowAll模式，游戲常用分辨率）

 

一 豎屏手機適配

游戲場景Canvas分辨率640x1080， 選擇Fit Width ，Widget組件默認Top/Right/Bottom/Left都勾選。

 

場景中放幾個圖片

 

給圖片添加Widget組件，並勾選Top/Right/Bottom/Left等如下，下圖分別是左上/右上/左下/右下/居中。

      

 

 運行游戲。可以看到寬度無論過大還是過窄，都會鋪滿，不會出現黑框。  而高度過大時背景上下會出現黑框，過小時背景上下會進行裁剪，Widgt進行適配的圖片始終保持在左上/右上/左下/右下/居中的位置。

 

二  橫屏手機適配

Canvas分辨率1080*640，選擇Fit Height

 

界面組件的Widgt和豎屏適配一樣，根據位置勾選top/bottom/left/right等

 

運行游戲。高度無論過大過小，始終鋪滿，不會出現黑框。而寬度過大時背景會出現黑框，過小時左右背景會被裁剪，Wdigt適配的圖片依然在自己的位置上。

 

三 其他

 百分比適配

Widget組件，不僅提供了固定位置適配，還提供了百分比適配。

 

 

 

Show All模式

fit Width 是適配寬度，任何手機上，都優先寬度100%顯示，高度會進行裁剪。

fit Height 是適配高度，任何手機上，都優先高度100%顯示，寬度會進行裁剪。

fit Width和fit Height都勾選，則是show all模式， 任何手機上，高寬都是100%顯示，只會有黑框，不會進行裁剪。

 

 

 

widget的target

widget默認適配的是自己的父容器，target可以指定適配的容器，例如一個層次很深的組件想要一直在頂部顯示，則可以設置target為canvas即可。

 

 

多UI適配

 如果icon1，icon2，icon3...icon10都需要左上適配，那么只需要設置他們的容器iconNode左上適配即可，不需要每個icon都綁定一個widget。

 

常用分辨率

我的慣用，豎版游戲用fixwidth，橫版游戲用fixheight，pc游戲用show all。

設計分辨率根據手機來設置的，一般手機分辨率如下

手機                          分辨率                 比例

華為mate9                1080x1920         16：9 （1.77）

華為mate40 pro        2772 x 1344                 （2.06）

小米11                      3200×1440                   （2.22）

iphone11                  1792x828                     （2.16）

iphone12                  2532 x 1170                 （2.16） 

iphone12  pro          2532 x 1170                 （2.16）

iphone12 pro max   2778×1284                     (2.16)

 

如果打算使用比例16：9來做游戲，canvas設計分辨率720x1280，那么在小米11上，背景圖的大小就應該是720x1600，這樣才不至於背景多短，導致游戲里露出黑邊。

 

分辨率      Canvas高寬(美術效果圖)       游戲背景圖高寬

16:9               640x1140                                640x1430

16:9               720x1280                               720x1600

2:1                 640x1280                               640x1430

2:1                 720x1440                               720x1600

 

SafeArea 劉海屏

例如iphonex的劉海屏，cocos提供了safeArea+widget組件進行適配。具體沒測試過，真機才有效果，我沒真機