Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

多解析度

多解析度問題

開發人員經常會遇到麻煩, 不知道如何在他們的遊戲中最好地支援多種解析度. 對於桌面和控制台遊戲, 這或多或少是簡單的, 因為大多數螢幕長寬比是16:9, 解析度是標準的720p, 1080p, 1440p, 4K,.......

對於手機遊戲來說,起初,這很容易。許多年來,iPhone 和 iPad 使用相同的解析度。當實行 Retina 後,他們只是將像素密度提高了一倍;大多數開發商不得不以預設和雙倍的解析度提供素材。

如今, 情況已不再如此, 因為有很多不同的螢幕尺寸, 密度和長寬比. 非傳統的尺寸也越來越受歡迎, 如超寬顯示幕.

對於3D遊戲來說, 沒有太大的必要支援多種解析度(從審美角度來看).3D幾何圖形將根據視場填充螢幕, 而不考慮長寬比. 在這種情況下, 人們可能想要支援的主要原因是為了 性能 的原因(以較低的解析度運作以增加每秒的影格數).

對於2D和遊戲UI, 這是一個不同的問題, 因為設計需要在Photoshop, GIMP或Krita等軟體中使用特定的像素尺寸來建立.

由於佈局, 長寬比, 解析度和像素密度會有很大的變化, 因此不再可能為每個特定的螢幕設計UI. 必須使用另一種方法.

萬全之策

最常見的方法是使用一個單一的 基礎 解析度, 然後將其適用於其他所有情況. 這個解析度是大多數玩家預期的玩遊戲的方式, 鑒於他們的硬體. 對於移動裝置, 穀歌在網上有有用的 統計資料 , 對於桌面裝置,Steam 也有 .

舉個例子,Steam顯示最常見的 主要顯示解析度是 1920×1080, 所以明智的做法是為這個解析度開發一個遊戲, 然後期處理不同尺寸和長寬比的縮放.

Godot 還提供了一系列通用的容器.

也參考

除了這份說明文件,你可能也會想看看 Godot Demo 專案

基本大小

視窗的基本尺寸可以在專案設定中的 Display → Window 下指定.

../../_images/screenres.png

然而, 它的作用並不完全明顯; 引擎將 嘗試將顯示器切換到此解析度. 相反, 將此設定視為 "設計大小", 即您在編輯器中使用的區域的大小. 此設定直接對應於2D編輯器中藍色矩形的大小.

通常需要支援具有與該基本大小不同的螢幕和視窗大小的裝置. Godot提供了許多方法來控制視口的大小調整和拉伸到不同的螢幕大小.

若要在執行時間從腳本配置伸展基本尺寸,請使用「get_tree().root.content_scale_size」屬性(請參閱 Window.content_scale_size)。更改此值可以間接更改 2D 元素的大小。但是,為了提供使用者可存取的縮放選項,建議使用 doc_multiple_resolutions_stretch_scale`,因為它更容易調整。

備註

Godot遵循了現代多種解析度的方法. 引擎永遠不會自行改變顯示器的解析度. 雖然改變顯示器的解析度是最有效的方法, 但這也是最不可靠的方法, 因為如果遊戲當機, 它可能會讓顯示器卡在一個低解析度上. 這在macOS或Linux上很常見, 因為它們對解析度變化的處理不如Windows.

更改顯示器的解析度還會取消遊戲開發者對篩選和縱橫比拉伸的控制, 這對於確保像素遊戲的正確顯示畫面非常重要.

最重要的是, 更改顯示器的解析度會使遊戲的Alt-Tab鍵切換速度變慢, 因為每次切換時顯示器都必須更改解析度.

調整大小

市面上有著各種各樣的裝置, 擁有各種型別的螢幕, 依次有著不同的像素密度和解析度. 處理所有的型別工作量巨大, 所以Godot試圖讓開發者的生活變得更簡單. Viewport 節點提供了幾個處理大小調整的函式, 而場景樹的根節點始終是一個Viewport (場景將作為它的子節點被產生實體, 並且始終可以通過呼叫 get_tree().get_root()get_node("/root") 來存取它.

在任何情況下,雖然更改根 Viewport 的參數可能是解決問題的最靈活方法,但這樣做的可能包含大量工作、大量程式碼、大量推測過程,因此 Godot 在專案設定中提供了一組簡單的參數來處理多解析度問題。

拉伸設定

拉伸設定位於專案設定中, 提供了幾個選項:

../../_images/stretchsettings.png

拉伸模式

Stretch Mode 設定定義了基本尺寸如何被伸展以適應視窗或螢幕的解析度.

../../_images/stretch.png

下面的動畫使用僅16×9像素的 "基本大小" 來演示不同拉伸模式的效果. 單個精靈, 大小也是16×9像素, 覆蓋整個視口, 並在其上新增一個對角線 Line2D :

../../_images/stretch_demo_scene.png
  • Stretch Mode = Disabled (預設). 不發生拉伸. 場景中的一個單位對應於螢幕上的一個像素. 在這種模式下, Stretch Aspect 設定沒有效果.

    ../../_images/stretch_disabled_expand.gif
  • Stretch Mode = 2D:在這種模式下,專案設定中所指定的寬高尺寸會被拉伸到覆蓋整個螢幕(會考慮 Stretch Aspect 設定)。這意味著所有的東西都直接在目標解析度下進行渲染。3D 不受影響,而在2D中,精靈像素和螢幕像素之間不再有 1:1 的對應關係,這可能會導致縮放的偽影。

    ../../_images/stretch_2d_expand.gif
  • Stretch Mode = Viewport : 視口縮放意味著根 Viewport 的尺寸被精確地設定為在專案設定的 Display 部分指定的基本尺寸. 場景首先被渲染到這個視口. 最後, 這個視口被縮放以適應螢幕(考慮 Stretch Aspect 的設定).

    ../../_images/stretch_viewport_expand.gif

要在運作時從腳本中配置拉伸, 請使用 get_tree().set_screen_stretch() 方法(見 SceneTree.set_screen_stretch() ).

拉伸比例(Stretch Aspect)

第二個設定是拉伸縱橫比. 請注意, 只有在 Stretch Mode 被設定為 Disabled 以外的情況下, 這才會生效.

在下面的動畫中, 您會注意到灰色和黑色區域. 黑色區域由引擎新增, 無法繪製. 灰色區域是場景的一部分, 可以繪製. 灰色區域對應於您在2D編輯器中看到的藍色框架外的區域.

  • Stretch Aspect = Ignore : 在拉伸螢幕時忽略長寬比. 這意味著原始解析度將被拉伸以完全填滿螢幕, 即使它更寬或更窄. 這可能會導致不均勻的拉伸, 事物看起來比設計的更寬或更高.

    ../../_images/stretch_viewport_ignore.gif
  • Stretch Aspect = Keep : 在拉伸螢幕的時候保持長寬比. 這意味著無論螢幕解析度如何, 視口都會保留原來的尺寸, 黑條會被新增到螢幕的頂部或底部("寬屏模式 ")或側面(" 豎屏模式").

    如果您事先知道目標裝置的寬高比, 或者您不想處理不同的寬高比, 這是一個不錯的選擇.

    ../../_images/stretch_viewport_keep.gif
  • Stretch Aspect = Keep Width : 在拉伸螢幕時保持長寬比. 如果螢幕比基本尺寸寬, 則會在左右兩邊新增黑條(豎屏模式). 但如果螢幕比基本解析度高, 視口將在垂直方向上增長(更多的內容將在底部可見). 你也可以把它看作是 "垂直擴充" .

    這通常是建立可擴充的GUI或HUD的最佳選擇, 因此一些控制項可以錨定到底部( 大小和錨點).

    ../../_images/stretch_viewport_keep_width.gif
  • Stretch Aspect = Keep Height : 在拉伸螢幕時保持長寬比. 如果螢幕比基本尺寸高, 則會在頂部和底部新增黑條(寬屏模式). 但如果螢幕比基本解析度寬, 視口將在水平方向上增長(更多的內容將在右邊可見). 你也可以把它看作是 "水平擴充" .

    這通常是水平滾動的2D遊戲的最佳選擇(如跑步者或平臺遊戲者).

    ../../_images/stretch_viewport_keep_height.gif
  • Stretch Aspect = Expand : 在拉伸螢幕時保持長寬比, 但既不保持基本寬度也不保持高度. 根據螢幕的長寬比, 視口將在水平方向(如果螢幕比基本尺寸寬)或垂直方向上變大(如果螢幕比原始尺寸高).

    ../../_images/stretch_viewport_expand.gif

小訣竅

為了以類似的自動確定的比例係數支援縱向和橫向模式,請將您的專案的基本解析度設定為 方形 (1:1長寬比)而不是矩形。例如,如果你希望以1280×720為基本解析度進行設計,但又希望同時支援縱向和橫向模式,那麼在專案設定中使用720×720作為專案的基本視窗尺寸。

為了讓使用者在運作時選擇自己喜歡的螢幕方向,記得將**Display > Window > Handheld > Orientation** 設定為 sensor (感測器).

要在運作時從腳本中配置拉伸, 請使用 get_tree().set_screen_stretch() 方法(見 SceneTree.set_screen_stretch() ).

根縮放

Shrink 設定允許你在上面的 Stretch 選項已經提供的基礎上增加一個額外的縮放係數. 預設值為1意味著不發生縮放.

例如, 如果你將 Shrink 設定為4, 並將 Stretch Mode 置於 Disabled 狀態, 那麼你的場景中的每個單元將對應於螢幕上的4×4像素.

如果 拉伸模式 設定為 canvas_items,2D 元素將相對於基本視窗大小進行縮放,然後乘以 縮放 設定。這可以公開給玩家,讓他們根據自己的喜好調整自動確定的比例,以獲得更好的可存取性。

如果**拉伸模式**設定為**視口**,則視口的解析度除以**比例**。這使得像素看起來更大並降低渲染解析度(在給定視窗大小的情況下),從而可以提高效能。

要在運作時從腳本中配置拉伸, 請使用 get_tree().set_screen_stretch() 方法(見 SceneTree.set_screen_stretch() ).

Stretch Scale Mode

Since Godot 4.2, the Stretch Scale Mode setting allows you to constrain the automatically determined scale factor (as well as the manually specified Stretch Scale setting) to integer values. By default, this setting is set to fractional, which allows any scale factor to be applied (including fractional values such as 2.5). When set to integer, the value is rounded down to the nearest integer. For example, instead of using a scale factor of 2.5, it would be rounded down to 2.0. This is useful to prevent distortion when displaying pixel art.

Compare this pixel art which is displayed with the viewport stretch mode, with the stretch scale mode set to fractional:

Fractional scaling example (incorrect pixel art appearance)

Checkerboard doesn't look "even". Line widths in the logo and text varies wildly.

This pixel art is also displayed with the viewport stretch mode, but the stretch scale mode is set to integer this time:

Integer scaling example (correct pixel art appearance)

Checkerboard looks perfectly even. Line widths are consistent.

For example, if your viewport base size is 640×360 and the window size is 1366×768:

  • When using fractional, the viewport is displayed at a resolution of 1366×768 (scale factor is roughly 2.133×). The entire window space is used. Each pixel in the viewport corresponds to 2.133×2.133 pixels in the displayed area. However, since displays can only display "whole" pixels, this will lead to uneven pixel scaling which results in incorrect appearance of pixel art.

  • When using integer, the viewport is displayed at a resolution of 1280×720 (scale factor is 2×). The remaining space is filled with black bars on all four sides, so that each pixel in the viewport corresponds to 2×2 pixels in the displayed area.

This setting is effective with any stretch mode. However, when using the disabled stretch mode, it will only affect the Stretch Scale setting by rounding it down to the nearest integer value. This can be used for 3D games that have a pixel art UI, so that the visible area in the 3D viewport doesn't reduce in size (which occurs when using canvas_items or viewport stretch mode with the integer scale mode).

常見使用場景

建議使用以下設定以更好地支援多種分辨率和縱橫比。

桌面遊戲

非像素風:

  • 將基礎視窗寬度設定為 1920、視窗高度設定為 1080。如果你的顯示器小於 1920×1080,就將 Test Width**Test Height**(測試寬度和測試高度)設定為較小的值,專案啟動時就會將視窗調小。

  • 或者如果你主要針對的是高端裝置,那麼就把基礎視窗寬度設定為 3840、視窗高度設定為 2160 。這樣你就可以提供更高解析度的 2D 素材,用更高的記憶體佔用和檔大小換取更清晰的畫面。注意,這樣做會讓未做 mipmap 的紋理在低解析度裝置上具有顆粒感,請參考 減少縮減取樣的混疊 進行操作。

  • 將拉伸模式(Stretch Mode)設定為 viewport (視圖)。

  • 將拉伸比例(Stretch Aspect)設定為 expand (擴充)。這樣可以支援多種解析度,並且能夠更好地利用較長的智慧手機螢幕(例如 18:9 和 19:9 的長寬比)。

  • 使用 佈局 功能表將 Control 節點的錨點吸附到正確的角落。

PCK 格式:

  • Set the base window size to the viewport size you intend to use. Most pixel art games use viewport sizes between 256×224 and 640×480. 640×360 is a good baseline, as it scales to 1280×720, 1920×1080, 2560×1440, and 3840×2160 without any black bars when using integer scaling. Higher viewport sizes will require using higher resolution artwork, unless you intend to show more of the game world at a given time.

  • 將拉伸模式(Stretch Mode)設定為 viewport (視圖)。

  • 將拉伸比例(Stretch Aspect)設定為 keep (保持)可以(通過新增黑條的方式)強制使用固定的長寬比。如果你想支援不同長寬比的話,也可以把拉伸模式設定為 expand (擴充)。

  • 如果選用 expand 拉伸比例,使用 佈局 功能表將 Control 節點的錨點吸附到正確的角落。

  • Set the stretch scale mode to integer. This prevents uneven pixel scaling from occurring, which makes pixel art not display as intended.

備註

viewport 拉伸模式會先以較低解析度渲染,然後拉伸到最終視窗的大小。如果你能夠接受精靈可以移動或者旋轉到“次像素”位置,或者希望有高解析度的 3D 視圖,可以把 viewport 拉伸模式換成 2d 模式。

橫屏的手機遊戲

Godot 預設使用橫屏模式,所以你無需在專案設定中調整顯示方向。

  • 將基礎視窗寬度設定為 1280,視窗高度設定為 720

  • 或者如果你主要針對的是高端裝置,那麼就把基礎視窗寬度設定為 1920、視窗高度設定為 1080。這樣你就可以提供更高解析度的 2D 素材,用更高的記憶體佔用和檔大小換取更清晰的畫面。很多裝置擁有更高解析度的顯示幕(1440p),但因為智慧手機的螢幕比較小,所以很難看出和 1080p 的區別。注意,這樣做會讓未做 mipmap 的紋理在低解析度裝置上具有顆粒感,請參考 減少縮減取樣的混疊 進行操作。

  • 將拉伸模式(Stretch Mode)設定為 viewport (視圖)。

  • 將拉伸比例(Stretch Aspect)設定為 expand (擴充)。這樣可以支援多種解析度,並且能夠更好地利用較長的智慧手機螢幕(例如 18:9 和 19:9 的長寬比)。

  • 使用 佈局 功能表將 Control 節點的錨點吸附到正確的角落。

小訣竅

為了更好地支援平板電腦和可折疊手機(其顯示器的寬高比通常接近 4:3),請考慮使用寬高比為 4:3 的基本分辨率,同時遵循此處的其餘說明。例如,您可以將基本視窗寬度設為“1280”,將基本視窗高度設定為“960”。

豎屏的手機遊戲

  • 將基礎視窗寬度設定為 720,視窗高度設定為 1080

  • 或者如果你主要針對的是高端裝置,那麼就把基礎視窗寬度設定為 1080、視窗高度設定為 1920。這樣你就可以提供更高解析度的 2D 素材,用更高的記憶體佔用和檔大小換取更清晰的畫面。很多裝置擁有更高解析度的顯示幕(1440p),但因為智慧手機的螢幕比較小,所以很難看出和 1080p 的區別。注意,這樣做會讓未做 mipmap 的紋理在低解析度裝置上具有顆粒感,請參考 減少縮減取樣的混疊 進行操作。

  • Display > Window > Handheld > Orientation 設定為 portrait (豎屏)。

  • 將拉伸模式(Stretch Mode)設定為 viewport (視圖)。

  • 將拉伸比例(Stretch Aspect)設定為 expand (擴充)。這樣可以支援多種解析度,並且能夠更好地利用較長的智慧手機螢幕(例如 18:9 和 19:9 的長寬比)。

  • 使用 佈局 功能表將 Control 節點的錨點吸附到正確的角落。

小訣竅

為了更好地支援平板電腦和可折疊手機(其顯示器的寬高比通常接近 4:3),請考慮使用寬高比為 3:4 的基本分辨率,同時遵循此處的其餘說明。例如,您可以將基本視窗寬度設為“960”,將基本視窗高度設定為“1280”。

語言規範

  • 將基礎視窗寬高設定為你想要支援的最小視窗尺寸。這不是必須的,但是可以保證你在設計 UI 時考慮較小的視窗尺寸。

  • 保持拉伸模式(Stretch Mode)為預設值 ``disabled``(禁用)。

  • 保持拉伸比例(Stretch Aspect)為預設值 ignore(忽略) (因為拉伸模式是 disabled ,所以這裡的值不會被用到)。

  • 你可以在腳本的 _ready() 函式中通過設定 OS.min_window_size 來定義視窗的最小尺寸。這樣可以防止使用者將應用視窗縮得過小,導致 UI 佈局的問題。

備註

Godot 尚未支援手動設定 2D 縮放比例,所以無法在非遊戲應用中支援 hiDPI。因此,推薦為非遊戲應用禁用 Allow Hidpi 選項,作業系統會退回到低 DPI。

支援平台

預設情況下,作業系統會認為 Godot 專案是 DPI 無關的。因為作業系統的 DPI 退回縮放比讓應用程式自己做縮放要快很多(即便用的是 viewport 拉伸模式),所以這樣做可以提高在低端系統上的性能。

不過作業系統的 DPI 退回縮放功能在全屏模式下並不好用。如果你想在 hiDPI 顯示器下得到清晰的畫面,又或者想要支援全屏,那麼推薦啟用專案設定中的 Display > Window > Dpi > Allow Hidpi

Allow Hidpi(允許 hiDPI) 僅在 Windows 和 macOS 上有效,其它平臺會忽略這個選項。

備註

Godot 編輯器本身是打開了這個選項,與 DPI 相關的。但在編輯器中運作專案時,只有在專案設定裡啟用 Allow Hidpi 才會讓專案與 DPI 相關。

減少縮減取樣的混疊

如果遊戲的基本解析度很高(如 3840×2160),當取樣降到相當低的解析度(如 1280×720)時,可能會出現鋸齒。可以通過在載入時將所有圖像縮小 2 倍來減少鋸齒的出現。這可以通過在載入遊戲資料之前呼叫下面的方法來實作。

To resolve this, you can enable mipmaps on all your 2D textures. However, enabling mipmaps will increase memory usage which can be an issue on low-end mobile devices.

處理縱橫比

一旦考慮到不同解析度的縮放, 請確保你的 user interface 也能為不同的長寬比進行縮放. 這可以使用 anchors 和/或 containers 來完成.

視場角縮放

3D相機節點的 Keep Aspect 屬性預設為 Keep Height 縮放模式(也稱為 Hor+ ). 在橫屏模式下, 這通常是桌面遊戲和手機遊戲的最佳選擇, 因為寬屏顯示器會自動使用更寬的視野.

然而, 如果您的3D遊戲打算使用縱向模式, 那麼使用 Keep Width保持寬度 稱為( Vert- )可能會更有意義. 這樣, 寬高比大於16:9(例如19:9)的智慧手機將使用 更高 的視野, 這在這裡更符合邏輯.

使用視圖埠以不同的方式縮放 2D 和 3D 元素

使用多個視圖視窗節點, 可以對不同的元素使用不同的比例. 例如, 您可以使用此選項以低解析度渲染3D世界, 同時將2D元素保持在原生解析度. 這可以顯著提高性能, 同時保持HUD和其他2D元素的清晰度.

這是通過只對2D元素使用根Viewport節點, 然後建立一個Viewport節點來顯示3D世界並使用ViewportContainer或TextureRect節點來實作的. 最終專案中實際上將有兩個視圖視窗. 與ViewportContainer相比, 使用TextureRect的一個好處是它允許啟用線性篩選. 這使得縮放的3D視圖視窗在許多情況下看起來更好.

若欲檢視範例專案,請參考作業系統示範專案: https://github.com/godotengine/godot-demo-projects/tree/master/misc/os_test