第60節 - Unity: Handling Different Screen Resolutions

這一節我會介紹如何利用Unity顯示遊戲畫面到不同大小的屏幕，而保持遊戲畫面的長寬比(Aspect Ratio - AR)。

我在第57節 - LibGDX: Handling Different Screen Resolutions介紹過如何利用LibGDX顯示遊戲畫面到不同大小的屏幕，而保持遊戲畫面的長寬比(Aspect Ratio - AR)。因為LibGDX預設有一個FitViewport Class, 它可以用來做出以下效果，如下圖:

Unity Handling Different Screen Resolutions

但unity沒有類似LibGDX 的FitViewport Class, 所以要做出以上的效果，我們可以用以下兩種方法:

方法1: Using Canvas UI Elements
方法2: Using C# Script

1.0 Result (執行結果):

以下是本節Unity: Handling Different Screen Resolutions所執行的結果:

1.1 方法1: Using Canvas UI Elements

1.2 方法2: Using C# Script

2.0 Unity: Method 1 - Using Canvas UI Elements

如果遊戲畫面只有Canvas UI elements，例如UI Text、UI Image或UI Button等，即是100%純 Canva畫面，就可以用這一個方法，如下圖:

Canvas內的UI Elements。

100%純Canva畫面，大至有以下幾種，例如: Splash Screen、 Start Screen、 Menu Screen、 Level Selection Screen和 Options Screen等，如下圖:

2.1 Unity Setting

建立一個新檔案。

選擇Main Camera。

選擇Blackground Colour。

選擇Orthographic，設定Orthograhic Size=2560/2=1280。

注意: Unity預設Orthograhic Size = The amount of in-game units half of your vertical screen size takes，所以如果你的遊戲畫面設定為1440(W) x 2560(H)，而你希望Camera Viewport可以看到整個遊戲畫面，我們可以設定Orthograhic Size=2560/2=1280。

在Assets區域內，加入兩個圖片。

在Hierarchy區域內，建立兩個Image (bg和button)，它們會自動建立在Canvas之內。

設定Render Mode。

把Main Camera拖放到Render Camera內。

設定Render Mode，最主要是設定Screen Match Mode = Expand。

選擇bg。

設定blackground size = 1440(W) x 2560(H)。

把圖片拖放到Source Image內。

選擇button。

設定blackground size = 805(W) x 314(H)。

把圖片拖放到Source Image內。

2.2 Result (執行結果):

選擇不同的裝置畫面(Device Screen)測試結果。

2.3 Set Background Color to Black

設定兩邊區域為紅色只是作示範用途，大家只要把背景設定與圖片顏色相似，例如黑色就可改善效果，如下圖:

選擇Main Camera。

選擇Blackground Colour。

2.4 Result (執行結果):

選擇不同的裝置畫面(Device Screen)測試結果。

3.0 Unity: Method 2 - Using C# Script

有一些畫面不能只有Canvas UI elements, 例如: 遊戲的主畫面(Main Game Screen)，因為遊戲主畫面大多數需要在Unity GameObject(2D/3D)裡加入一些特效，例如: Physics(2D/3D)或Particle System等，這些畫面就不能只用Canvas，所以就需要用上C# Script來寫一個類似LibGDX 的FitViewport Class。

Unity GameObject (2D)裡加入一些特效，例如: Physics(2D/3D)內的Collision Detection。

3.1 Relationship between Design Screen, Camera Screen, Camera Viewport and Device Screen

以下是Design Screen, Camera Screen, Camera Viewport和Device Screen的關係:

Design Screen是你想顯示的遊戲畫面大小。

設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

假設Device Screen Size是2000(W)x400(H)。

( W,H) = (1,1)，是Device Screen的右上角。

(X,Y) = (0, 0)，是Device Screen的左下角。

注意: Camera Viewport Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1)，所以Camera Viewport Rect最大可見區域就是Device Screen的2000(W)x400(H)。

Camera Screen Height = 2560 (因為Orthograhic Size = 1280)，但Camera Screen Width還沒有設定，因為 Camera Screen AR = Device Screen AR，所以Camera Screen Width就可以計算出來。

最後大家可以改變Camera的背景顏色。

3.2 Problem

但是如果設定Device Screen AR > 1.778 (16:9)，問題就會出現，Design Screen就不能完全看見，如下圖:

Design Screen是你想顯示的遊戲畫面大小。

設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

假設Device Screen Size是2000(W)x400(H)。

(W,H) = (1,1)，是Device Screen的右上角。

( X,Y) = (0, 0)，是Device Screen的左下角。

注意: Camera Viewort Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1)，所以Camera Viewort Rect最大可見區域就是Device Screen的2000(W)x400(H)。

Camera Screen Height = 2560 (因為Orthograhic Size = 1280)，但Camera Screen Width還沒有設定，因為 Camera Screen AR = Device Screen AR，所以Camera Screen Width就可以計算出來。

3.3 Solution

解決方法是除了設定Orthographic Size之外，也要設定Camera Viewport Rect，如下圖:

Design Screen是你想顯示的遊戲畫面大小。

設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

假設Device Screen Size是2000(W)x400(H)。

( W,H) = (0.1125,1)，設定Camera Viewport Rect的大小，令Camera Viewport Rec AR = Design Screen AR。

( X,Y) = (0.4438, 0)，設定Camera Viewport Rect的(X,Y)位置在Device Screen中間。

注意: Camera Viewport Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1)，所以Camera Viewport Rect最大可見區域就是Device Screen的2000(W)x400(H)。

Camera Screen Height = 2560 (因為Orthograhic Size = 1280)，但Camera Screen Width還沒有設定，因為 Camera Screen AR = Device Screen AR，所以Camera Screen Width就可以計算出來。

因為Main Camera已經沒了背景，所以就沒有了背景顏色，而是Device Screen的背景，預設是黑色。

Design Screen是你想顯示的遊戲畫面大小。

設定Orthograhic Size = Design Screen Height/2 = 2560/2=1280。

假設Device Screen Size是400(W)x2000(H)。

(W,H) = (1,0.3556)，設定Camera Viewport Rect的大小，令Camera Viewport Rec AR = Design Screen AR。

(X,Y) = (0, 0.3222)，設定Camera Viewport Rect的(X,Y)位置在Device Screen中間。

注意: Camera Viewort Rect最大可見區域是(X,Y - W,H)) = (0,0, - 1,1)，所以Camera Viewport Rect最大可見區域就是Device Screen的400(W)x2000(H)。

Camera Screen Height = 2560 (因為Orthograhic Size = 1280)，但Camera Screen Width還沒有設定，因為 Camera Screen AR = Device Screen AR，所以Camera Screen Width就可以計算出來。

因為Main Camera已經沒有了背景，所以就沒有了背景顏色，而是Device Screen的背景，預設是黑色。

3.4 Conclusion

3.5 Unity Setting

建立一個新檔案。

選擇Main Camera。

選擇Blackground Colour。

選擇Orthographic，設定Orthograhic Size=2560/2=1280。

注意: Unity預設Orthograhic Size = The amount of in-game units half of your vertical screen size takes，所以如果你的遊戲畫面設定為1440(W) x 2560(H)，而你希望Camera Viewport可以看到整個遊戲畫面，我們可以設定Orthograhic Size=2560/2=1280。

在Assets區域內，加入兩個圖片。

建立一個GameObject Sprite (bg)。

把圖片拖放到Source Image內。

選擇圖片。

設定Pixels Per Unit = 1，即是把Camera設定為1 Pixel Per Unit，因為Orthographic Size = 1280 units，即是Camera全高是2560 units，因為Camera設定為1 Pixel Per Unit，所以就可以完整顯示Design Screen(遊戲畫面)。

建立一個GameObject Sprite (button)。

把圖片拖放到Source Image內。

選擇圖片。

設定Pixels Per Unit = 1，即是把Camera設定為1 Pixel Per Unit，因為Orthographic Size = 1280 units，即是Camera全高是2560 units，因為Camera設定為1 Pixel Per Unit，所以就可以完整顯示Design Screen(遊戲畫面)。