支援多種板型規格和螢幕尺寸

本主題介紹使用 Godot for Android 遊戲開發時,如何支援多種板型規格和螢幕尺寸。

Android 裝置有多種板型規格和螢幕尺寸。常見的類別包括:

  • 手機
  • 平板電腦
  • 電視和電視機上盒
  • 配有適用於 Chrome 的 Android 執行階段的筆記型電腦

這樣的多樣性意味著遊戲會遇到各種不同的螢幕解析度。這些螢幕解析度通常具有不同的長寬比。舉例來說:

  • 長寬比為 19:9 的手機橫向螢幕解析度 (2280x1080)
  • 長寬比為 20:9 的手機橫向螢幕解析度 (3200x1400)
  • 長寬比為 16:9 的 1080p 高畫質電視螢幕解析度 (1920x1080)
  • 長寬比為 4:3 的平板電腦螢幕解析度 (2048x1536)

遊戲設計應考量這些差異,以確保無論螢幕解析度、裝置的長寬比和使用者輸入方式為何,都能正確呈現。

螢幕解析度

Godot 使用像素來定義螢幕解析度和尺寸。建議您為 Godot 專案設定標準基本解析度。Godot 提供設定,可用來控制螢幕解析度與專案基本解析度不同時的行為。

設定基本解析度

若要為專案設定基本解析度,請在 Godot 編輯器中開啟專案,然後執行下列步驟:

  1. 在 Godot 選單列中,依序選取「Project」->「Project Settings…」
  2. 在「Project Settings」視窗中找到「Category」分頁的「Display」清單,然後選取「Window」項目。
  3. 在「Size」類別底下,將「Width」和「Height」欄位設為所需的基本解析度 (以像素為單位)。
Godot 專案的寬度和高度設定
圖 1:「Project Settings」中的「Width」和「Height」欄位

Godot 編輯器設為 2D 檢視畫面時,會顯示與基本解析度相對應的輔助矩形。透過編輯器執行專案或情境時,基本解析度會用來做為專案視窗的預設維度。

Godot 編輯器 2D 檢視畫面中的基本解析度矩形
圖 2:Godot 編輯器 2D 檢視畫面中的基本解析度矩形,基本解析度為 640 x 360 像素

延展設定

當基本解析度與螢幕解析度不同時,有兩項設定可控制基本解析度的調整方式:「Stretch Mode」和「Stretch Aspect」。這些設定位於「Project Settings」視窗的「Display」->「Window」區段下方。

Godot 專案的延展設定
圖 3 「Project Settings」中的「Stretch Mode」和「Stretch Aspect」欄位

「Stretch Mode」有三種設定:disabled2dviewport。下一節將針對不同的「Stretch Aspect」與「Stretch Mode」設定介紹視覺範例。所有範例都會使用 320x180 像素的專案基本解析度。

disabled 設定不會調整大小或調整基本解析度。如果「Stretch Mode」設為 disabled,系統會一律忽略「Stretch Aspect」的值。

「Stretch Mode」設為 disabled,螢幕解析度是 320 x 180
圖 4:「Stretch Mode」 disabled,螢幕解析度是 320 x 180

如果螢幕解析度低於基本解析度,系統就會裁剪底部和/或右側邊緣。

「Stretch Mode」設為 disabled,螢幕解析度是 256 x 128
圖 5 「Stretch Mode」 disabled,螢幕解析度是 256 x 128

如果螢幕解析度高於基本解析度,多餘的區域就會留空。

「Stretch Mode」設為 disabled,螢幕解析度是 512 x 256
圖 6:「Stretch Mode」 disabled,螢幕解析度是 512 x 256

2d 設定會將基本解析度調整為螢幕解析度。對於使用 2D 圖片的專案,由於基本解析度與螢幕解析度之間的像素比不再是 1:1,因此會導致縮放偽影。這項設定可能適用於不需要完美像素轉譯的專案中的特定高解析度圖片樣式。

「Stretch Aspect」設定會指定套用至縮放的限制,維持基本解析度的長寬比。如需「Stretch Aspect」設定選項的說明,請參考「長寬比」一節。以下為 2d「Stretch Mode」的設定範例,該設定使用 ignore 的「Stretch Aspect」,可縮放至無限制的螢幕解析度:

延展模式 2d,螢幕解析度為 256x128
圖 7:「Stretch Mode」 2d,螢幕解析度是 256 x 128
「Stretch Mode」設為 2d,螢幕解析度是 512 x 256
圖 8. 「Stretch Mode」 2d,螢幕解析度是 512 x 256

viewport 設定會將根情境的 Viewport 設為基本解析度。而根 Viewport 的轉譯輸出隨後會縮放至螢幕解析度。Godot Viewport 物件是用來將檢視畫面建立至畫面中,或是在另一個 Viewport 中建立子檢視畫面。與 2d 設定不同的是,viewport 設定在縮放至螢幕解析度時不會套用篩選條件。viewport 設定也會使用「Stretch Aspect」的值來確定是否要對縮放套用限制,以維持長寬比。需要完美像素精確度時,viewport 設定是比 2d 設定更好的選擇,因為仍是採用基本解析度進行主要轉譯。下列為使用 ignore 的「Stretch Aspect」viewport「Stretch Mode」設定範例:

延展模式可視區域,螢幕解析度為 256x128
圖 9:「Stretch Mode」 viewport,螢幕解析度是 256 x 128
「Stretch Mode」設為 viewport,螢幕解析度是 512 x 256
圖 10. 「Stretch Mode」 viewport,螢幕解析度是 512 x 256

顯示比例

「Stretch Aspect」提供多個長寬比縮放限制選項。如果「Stretch Aspect」設為 ignore,系統不會套用任何限制。當「Stretch Aspect」設為 keep 時,基本解析度會縮放至符合螢幕解析度的最大尺寸,同時維持原始長寬比。縮放圖像未覆蓋的螢幕區域會用黑色長條填滿。視長寬比差異的主要維度而定,長條可以是橫條 (即「上下黑邊」) 或豎條 (即「左右黑邊」)。

延展模式可視區域、延展長寬比為保持狀態,螢幕解析度為 384x256
圖 11:「Stretch Mode」 viewport、「Stretch Aspect」keep,螢幕解析度為 384 x 256
「Stretch Mode」設為 viewport,「Stretch Aspect」設為 keep,且螢幕解析度是 512 x 200
圖 12. 「Stretch Mode」 viewport,「Stretch Aspect」keep,螢幕解析度是 512 x 200

「Stretch Aspect」包含 keep 設定的兩個變數:keep_widthkeep_height。設定 keep_width 時,如果螢幕解析度的長寬比較基本解析度來得寬,就會加入左右黑邊。不過,如果螢幕解析度的長寬比相較於基本解析度的更高,多餘的區域就會留空。空白區域會填滿畫面底部。

「Stretch Mode」設為 viewport,「Stretch Aspect」設為 keep_width,且螢幕解析度是 512 x 384
圖 13:「Stretch Mode」 viewport,「Stretch Aspect」 keep_width,螢幕解析度是 512 x 384

keep_height 設定適用於水平方向,而非垂直方向。空白區域會填滿畫面右側。

「Stretch Mode」設為 viewport,「Stretch Aspect」設為 keep_height,且螢幕解析度是 512 x 200
圖 14:「Stretch Mode」 viewport,「Stretch Aspect」keep_height,螢幕解析度是 512 x 200

最後一個「Stretch Aspect」設定為 expandexpand 設定會維持基本解析度長寬比,但多餘的區域會留空 (而非上下黑邊或左右黑邊)。

延展模式可視區域、延展長寬比為擴展狀態,螢幕解析度為 384x256
圖 15:「Stretch Mode」 viewport、「Stretch Aspect」 expand,螢幕解析度為 384 x 256
「Stretch Mode」設為 viewport,「Stretch Aspect」設為 expand,且螢幕解析度是 512 x 256
圖 16. 「Stretch Mode」 viewport,「Stretch Aspect」 expand,螢幕解析度是 512 x 256

錨點

支援多種螢幕解析度時,UI 元素定位需要額外考量。例如,使用絕對像素座標將控制項放在右上角,可能會導致在不同水平解析度的裝置上定位不一致。Godot 的 UI 系統支援使用 AnchorMargin 屬性的相對定位。UI 元素的 Anchor 屬性會在其父項控制物件或可視區域中指定錨點。接著,使用 Margin 屬性的值來補償相對於其錨點的控制項。

如果物件要包含 AnchorMargin 屬性,則其必須衍生自 Godot Control 物件。Godot 的標準 UI 元素均衍生自 Control。當您在 Godot 編輯器中選取 Control 衍生物件時,Anchor 和 Margin 的屬性欄位會顯示在「Inspector」分頁中。

已選取 Button 控制項,而檢查器中顯示「Anchor」和「Margin」屬性
圖 17:已選取 Button 控制項,而檢查器中顯示「Anchor」和「Margin」屬性

Godot 中的「Layout」工具可以快速將 AnchorMarginSize 屬性設為常用的預設值。在編輯器中選取 Control 衍生物件時,情境檢視畫面上方的工具列會顯示「Layout」下拉式選單。「Layout」工具預設包括定位以及定位與尺寸組合。定位預設支援各種用途,例如置中、錨定至右上角、錨定到中間偏左。定位加尺寸預設包括各種用途,例如,橫跨整個父項寬度時錨定至底部。

Godot 編輯器的「Layout」下拉式選單
圖 18:Godot 編輯器的「Layout」下拉式選單

錨點適用於多種常見用途,例如抬頭顯示器、基本對話方塊,或畫面上的提示。Godot 容器系統適用於更複雜的 UI 版面配置,例如在顯示含有大量控制項的視窗或對話方塊,或動態調整內容大小時。

視野

Godot 的視野設定可控制各種長寬比的 3D 情境呈現方式。視野調整是透過 Camera 物件的 Keep Aspect 屬性控制。Keep Height 預設值適用於橫向執行的專案。基本解析度與螢幕解析度的長寬比不同時,Keep Height 就會調整為更寬或更窄的視野。Keep Width 設定更適合直向執行的專案。Keep Width 會根據長寬比的差值,調整為更高或更短的視野。

可視區域控制項

Viewport 物件提供微調的長寬比和縮放控制功能。專案可以使用可視區域執行以下作業:

  • 使用不依賴於解析度的邊框,以基本解析度長寬比轉譯情境。
  • 以較低解析度轉譯 3D 情境,藉此提升效能並將其放大顯示為原生解析度。
  • 為 VR 應用程式轉譯情境的左右視角。
  • 產生動態紋理。

如需展示如何使用可視區域物件的範例,請參閱 Godot Viewport 範例。

使用者輸入

有些遊戲設計與 Android 支援的每個輸入模式都不相容。支援多點觸控手勢的遊戲通常無法順利新增滑鼠和遊戲控制器輸入功能。專為遊戲控制器輸入設計的遊戲,可能難以施加有效的觸控設定。Godot 支援所有這些類型的輸入方式,但您應該在開發過程中盡早決定您要在專案中使用的輸入方式,並視情況設計。

如果專案的觸控和滑鼠輸入功能可互換,Godot 會提供 Proxy 選項,透過滑鼠事件產生模擬觸控事件,反之亦然。使用這些選項時,您不必為滑鼠和觸控事件編寫獨立的輸入處理程式碼。可用選項為:「Emulate Touch from Mouse」和「Emulate Mouse from Touch」。您可以在「Project Settings」的「Input Devices」->「Pointing」區段底下找到這兩個選項。

Godot 專案的輸入裝置設定
圖 19:依序點選「Project Settings」中的「Input Devices」->「Pointing」設定

其他資源