Godot:MultipleResolutions

Godot에서 다중 해상도에 대한 현대적인 접근 방식.

짧은 요약

• 픽셀 아트 게임을 만들거라면 #Desktop game: Pixel art 항목 참조.

Base size

A base size for the window can be specified in the Project Settings under Display → Window

However, what it does is not completely obvious; 엔진은 모니터를 이 해상도로 전환하려고 시도 하지 않습니다 . 오히려 이 설정을 "디자인 크기", 즉 편집기에서 작업하는 영역의 크기로 생각하십시오. 이 설정은 2D 편집기의 파란색 직사각형 크기에 직접적으로 해당합니다.

이 기본 크기와 다른 화면 및 창 크기를 가진 장치를 지원해야 하는 경우가 종종 있습니다. Godot는 뷰포트의 크기를 조정하고 다양한 화면 크기로 확장하는 방법을 제어하는 ​​여러 가지 방법을 제공합니다.

참고

Godot는 다중 해상도에 대한 현대적인 접근 방식을 따릅니다. 엔진은 모니터의 해상도를 자체적으로 변경하지 않습니다. 모니터의 해상도를 변경하는 것이 가장 효율적인 접근 방식이지만 게임이 충돌할 경우 모니터를 저해상도에 고정시킬 수 있으므로 가장 신뢰할 수 없는 접근 방식이기도 합니다. 이것은 Windows뿐만 아니라 해상도 변경을 처리하지 않는 macOS 또는 Linux에서 특히 일반적입니다.

모니터의 해상도를 변경하면 픽셀 아트 게임의 올바른 표시를 보장하는 데 중요할 수 있는 필터링 및 종횡비 확장에 대한 게임 개발자의 제어도 제거됩니다.

게다가, 모니터의 해상도를 변경하면 모니터가 매번 해상도를 변경해야 하기 때문에 게임 안팎에서 Alt 키를 누르면 훨씬 느려집니다.

Resizing

여러 유형의 장치와 여러 유형의 화면이 있으며 차례로 픽셀 밀도와 해상도가 다릅니다. 이들 모두를 처리하는 것은 많은 작업이 될 수 있으므로 Godot는 개발자의 삶을 조금 더 쉽게 만들려고 노력합니다. Viewport 노드에는 크기 조정을 처리하는 여러 기능 이 있으며 장면 트리의 루트 노드는 항상 뷰포트 입니다.

로드된 장면은 자식으로 인스턴스화되며 get_tree().get_root() 또는 get_node("/root") 를 호출하여 항상 액세스할 수 있습니다.

어쨌든 루트 뷰포트 매개변수를 변경하는 것이 문제를 처리하는 가장 유연한 방법일 수 있지만 많은 작업, 코드 및 추측이 필요할 수 있으므로 Godot는 프로젝트 설정에서 여러 해상도를 처리하기 위해 간단한 매개변수 세트를 제공합니다.

Stretch settings

Stretch settings are located in the project settings and provide several options:

Stretch Mode

The Stretch Mode setting defines how the base size is stretched to fit the resolution of the window or screen.

아래 그림은 16×9 픽셀의 "기본 크기"를 사용하여 다양한 스트레치 모드의 효과를 보여줍니다. 크기가 16×9픽셀인 단일 스프라이트가 전체 뷰포트를 덮고 그 위에 대각선 Line2D 가 추가됩니다.

Stretch Mode = Disabled (default)

늘이지 않습니다. 장면의 한 단위는 화면의 한 픽셀에 해당합니다. 이 모드에서는 Stretch Aspect 설정이 적용되지 않습니다.

이것은 모든 화면 픽셀을 완벽하게 제어하려는 경우 좋은 옵션이며 아마도 3D 게임에 가장 적합한 옵션일 것입니다.

Stretch Mode = 2D

이 모드에서는 프로젝트 설정에서 너비와 높이로 지정된 기본 크기가 전체 화면을 덮도록 늘어납니다 (Stretch Aspect 설정 고려).

즉, 모든 것이 대상 해상도에서 직접 렌더링됩니다. 3D는 거의 영향을 받지 않지만 2D에서는 스프라이트 픽셀과 화면 픽셀 사이에 더 이상 1:1 대응이 없으므로 스케일링 아티팩트 (scaling artifacts)가 발생할 수 있습니다.

이것은 2D 아트웍의 해상도가 충분히 높고 픽셀 완벽한 렌더링이 필요하지 않은 경우에 좋은 옵션입니다.

2D 텍스처 및 글꼴에 텍스처 필터링 및 밉매핑을 활성화하는 것을 고려하십시오.

Stretch Mode = Viewport

뷰포트 스케일링은 루트 뷰포트의 크기가 프로젝트 설정의 디스플레이 섹션 에 지정된 기본 크기로 정확하게 설정 된다는 것을 의미합니다.

장면이 이 뷰포트에 먼저 렌더링됩니다. 마지막으로 이 뷰포트는 화면에 맞게 크기가 조정됩니다 (Stretch Aspect 설정 고려).

이 모드는 픽셀에 정확한 게임 (pixel-precise games)을 할 때나 성능을 향상시키기 위해 더 낮은 해상도로 렌더링할 때 유용합니다.

Viewport vs 2D

• Is there other anti-aliasing option for font ? - Godot Engine - Q&A

Viewport와 2D의 차이점은 다음의 예로 좀 더 확실히 알 수 있다.

(잘 안보이면 클릭해서 원본 이미지를 보자)

타이틀의 "MINIDUN" 텍스트는 DynamicFont를 사용하여 "나눔 스퀘어 Extra Bold"로 출력한 것이다. Viewport의 경우 Mipmap과 필터를 적용해도 글씨가 자글자글하게 보이지만 2D의 경우 부르럽게 보인다.

Stretch Aspect

두 번째 설정은 Stretch Aspect입니다.

아래 애니메이션에서 회색과 검은색 영역을 확인할 수 있습니다.

• 검은색 영역은 엔진에 의해 추가되며 그릴 수 없습니다.
• 회색 영역은 장면의 일부이며 그릴 수 있습니다. 회색 영역은 2D 편집기에서 볼 수 있는 파란색 프레임 외부 영역에 해당합니다.

Stretch Aspect = Ignore

화면을 늘릴 때 화면비를 무시합니다.

즉, 화면이 더 크거나 좁아도 원래 해상도가 화면을 정확히 채우도록 늘어납니다.

이로 인해 균일하지 않은 스트레칭이 발생할 수 있습니다.

즉, 사물이 디자인된 것보다 더 넓거나 높아 보입니다.

Stretch Aspect = Keep

화면을 늘일 때 화면비를 유지합니다. 즉, 뷰포트는 화면 해상도에 관계없이 원래 크기를 유지하고 화면의 위/아래("레터박스 (letterboxing)") 또는 측면("필러박스 (pillarboxing)")에 검은색 막대가 추가됩니다.

대상 장치의 종횡비를 미리 알고 있거나 다른 종횡비를 처리하고 싶지 않은 경우에 좋은 옵션입니다.

Stretch Aspect = Keep Width

화면을 늘일 때 가로 세로 비율을 유지합니다.

화면이 기본 크기보다 넓을 경우 왼쪽과 오른쪽에 검은색 막대가 추가됩니다 ("필러박스 (pillarboxing)").

그러나 화면이 기본 해상도보다 높으면 뷰포트가 세로 방향으로 커집니다(더 많은 콘텐츠가 아래쪽에 표시됨).

이것을 "수직으로 확장 (Expand Vertically)"이라고 생각할 수도 있습니다.

이것은 일반적으로 크기가 조정되는 GUI 또는 HUD를 만드는 데 가장 좋은 옵션이므로 일부 컨트롤을 아래쪽에 고정할 수 있습니다 (size and anchors).

Stretch Aspect = Keep Height

화면을 늘일 때 화면비를 유지합니다.

화면이 기본 크기보다 높으면 위쪽과 아래쪽에 검은색 막대가 추가됩니다("레터박스 (letterboxing)").

그러나 화면이 기본 해상도보다 넓으면 뷰포트가 수평 방향으로 커집니다(오른쪽에 더 많은 콘텐츠가 표시됨).

이것을 "수평으로 확장 (Expand Horizontally)"이라고 생각할 수도 있습니다.

이것은 일반적으로 수평으로 스크롤되는 2D 게임에 가장 적합한 옵션입니다. 예를 들면, 러너(Runner) 또는 플랫포머(Platformers)

Stretch Aspect = Expand

화면을 늘릴 때 가로 세로 비율을 유지하지만 기본 너비와 높이를 유지하지 않습니다.

화면 종횡비에 따라 뷰포트는 가로 방향(화면이 기본 크기보다 넓은 경우) 또는 세로 방향(화면이 원래 크기보다 큰 경우)으로 커집니다.

Tip

자동으로 결정된 유사한 축척 비율로 세로 및 가로 모드를 모두 지원하려면 프로젝트의 기본 해상도를 직사각형 대신 정사각형 (1:1 aspect ratio)으로 설정하십시오.

예를 들어, 기본 해상도로 1280×720을 디자인하고 싶지만 세로 및 가로 모드를 모두 지원하려면 프로젝트 설정에서 프로젝트의 기본 창 크기로 720×720을 사용합니다.

사용자가 런타임에 선호하는 화면 방향을 선택할 수 있도록 하려면 Display > Window > Handheld > Orientation 를 sensor 로 설정.

Stretch Shrink

수축(Shrink) 설정을 사용하면 위의 늘이기(Stretch) 옵션이 이미 제공하는 것 위에 추가 크기 조정 요소를 조정할 수 있습니다. "기본값 1" 은 스케일링이 발생하지 않음을 의미합니다.

예를 들어 Shrink를 4로 설정하고 Stretch Mode를 Disabled로 두면 장면의 각 단위가 화면의 4x4 픽셀에 해당합니다.

Stretch Mode가 Disabled 이외의 다른 것으로 설정 되면 루트 뷰포트의 크기는 축소 계수만큼 축소되고 출력의 픽셀은 같은 양만큼 확대됩니다.

이것은 2D 게임에는 거의 유용하지 않지만 3D 게임을 더 낮은 해상도로 렌더링하여 성능을 높이는 데 사용할 수 있습니다.

From scripts

스크립트에서 런타임 시 스트레칭을 구성하려면 get_tree().set_screen_stretch()메서드 를 사용합니다. (SceneTree.set_screen_stretch() 참조).

일반적인 사용 사례 시나리오

여러 해상도와 가로 세로 비율을 잘 지원하려면 다음 설정을 사용하는 것이 좋습니다.

Desktop game: Non-pixel art

• 기본 창 너비를 1920, 창 높이를 1080로 설정합니다. 디스플레이가 1920×1080보다 작은 경우, "테스트 너비" 및 "테스트 높이" 를 더 낮은 값으로 설정하여 프로젝트가 시작될 때 창을 더 작게 만듭니다.
• 고급형 장치(high-end devices)를 첫 번째 고려 대상으로 대상으로 하는 경우, 창 너비는 3840, 높이는 2160 로 한다. 이를 통해 더 높은 해상도의 2D 자산을 제공할 수 있으므로 더 많은 메모리 사용량과 파일 크기를 희생하면서 더 선명한 영상을 얻을 수 있습니다. 이렇게 하면 저해상도 장치에서 밉매핑되지 않은 텍스처가 거칠어지므로 다운샘플링 시 앨리어싱 줄이기 (Reducing aliasing on downsampling)에 설명된 지침을 따르십시오.
• 스트래치 모드(Stretch Mode)는 2d로 설정.
• (Stretch aspect)는 expand로 설정. 이를 통해 여러 종횡비를 지원할 수 있고 키가 큰 스마트폰 디스플레이를 더 잘 사용할 수 있습니다. (such as 18:9 or 19:9 aspect ratios).
• 레이아웃 메뉴 를 사용하여 올바른 모서리에 스냅하도록 제어 노드의 앵커를 구성 합니다.

Godot 4.0 에서는

• Multiple resolutions — Godot Engine (stable) documentation in English
• stretch mode를 canvas_items로 설정합니다.
• stretch aspect을 expand로 설정합니다.

Desktop game: Pixel art

• 기본 창(Window) 크기를 사용하려는 뷰포트 크기로 설정합니다. 대부분의 픽셀 아트 게임은 256×224 ~ 640×480 사이의 뷰포트 크기를 사용합니다.
• 짧은 개발시간 안에 더 많은 월드를 보여줄게 아니라면 뷰포트 크기가 클 수록 더 높은 해상도의 아트워크를 사용해야 합니다.
• 스트래치 모드(Stretch Mode)는 viewport를 사용.
• 단일 종횡비를 유지하기 위해 "스트레치 종횡비(Stretch Aspect)"는 keep으로 설정 (with black bars).
  • 대안으로 스트레치 종횡비를 expand로 설정하여 여러 종횡비를 지원할 수 있습니다.
• "스트레치 종횡비(Stretch Aspect)"를 expand로 설정한 경우, Layout메뉴를 사용하여 "컨트롤 노드(Control nodes)"가 올바른 모서리에 스냅하도록 설정한다.

Godot 4.0 에서는

• Multiple resolutions — Godot Engine (stable) documentation in English
• 640×480 화면 크기
• stretch mode를 viewport로 설정합니다.
• 단일 종횡비를 유지하려면 stretch aspect을 keep로 설정합니다. -> (바바이즈유 스타일)
• 여러 종횡비를 지원하도록 하려면 expend를 사용하면 된다. 이 때 레이아웃 메뉴를 사용하여 제어 노드의 앵커가 올바른 모서리에 스냅되도록 구성합니다.

Mobile game in landscape mode

Godot is configured to use landscape mode by default. This means you don't need to change the display orientation project setting.

• Set the base window width to 1280 and window height to 720.
• Alternatively, if you're targeting high-end devices primarily, set the base window width to 1920 and window height to 1080. This allows you to provide higher resolution 2D assets, resulting in crisper visuals at the cost of higher memory usage and file sizes. Many devices have even higher resolution displays (1440p), but the difference with 1080p is barely visible given the small size of smartphone displays. Note that this will make non-mipmapped textures grainy on low resolution devices, so make sure to follow the instructions described in Reducing aliasing on downsampling.
• Set the stretch mode to 2d.
• Set the stretch aspect to expand. This allows for supporting multiple aspect ratios and makes better use of tall smartphone displays (such as 18:9 or 19:9 aspect ratios).
• Configure Control nodes' anchors to snap to the correct corners using the Layout menu.

Mobile game in portrait mode

• Set the base window width to 720 and window height to 1080.
• Alternatively, if you're targeting high-end devices primarily, set the base window width to 1080 and window height to 1920. This allows you to provide higher resolution 2D assets, resulting in crisper visuals at the cost of higher memory usage and file sizes. Many devices have even higher resolution displays (1440p), but the difference with 1080p is barely visible given the small size of smartphone displays. Note that this will make non-mipmapped textures grainy on low resolution devices, so make sure to follow the instructions described in Reducing aliasing on downsampling.
• Set Display > Window > Handheld > Orientation to portrait.
• Set the stretch mode to 2d.
• Set the stretch aspect to expand. This allows for supporting multiple aspect ratios and makes better use of tall smartphone displays (such as 18:9 or 19:9 aspect ratios).
• Configure Control nodes' anchors to snap to the correct corners using the Layout menu.

Non-game application

• Set the base window width and height to the smallest window size that you intend to target. This is not required, but this ensures that you design your UI with small window sizes in mind.
• Keep the stretch mode to its default value, disabled.
• Keep the stretch aspect to its default value, ignore (its value won't be used since the stretch mode is disabled).
• You can define a minimum window size by setting OS.min_window_size in a script's _ready() function. This prevents the user from resizing the application below a certain size, which could break the UI layout.

hiDPI support

By default, Godot projects aren't considered DPI-aware by the operating system. This is done to improve performance on low-end systems, since the operating system's DPI fallback scaling will be faster than letting the application scale itself (even when using the viewport stretch mode).

However, the OS-provided DPI fallback scaling doesn't play well with fullscreen mode. If you want crisp visuals on hiDPI displays or if project uses fullscreen, it's recommended to enable Display > Window > Dpi > Allow Hidpi in the Project Settings.

Allow Hidpi is only effective on Windows and macOS. It's ignored on all other platforms.

Reducing aliasing on downsampling

If the game has a very high base resolution (e.g. 3840×2160), aliasing might appear when downsampling to something considerably lower like 1280×720. Aliasing can be made less visible by shrinking all images by a factor of 2 upon loading. This can be done by calling the method below before the game data is loaded:

VisualServer.texture_set_shrink_all_x2_on_set_data(true)

Alternatively, you can also enable mipmaps on all your 2D textures. However, enabling mipmaps will increase memory usage which may be problematic on low-end mobile devices.

Handling aspect ratios

Once scaling for different resolutions is accounted for, make sure that your user interface also scales for different aspect ratios. This can be done using anchors and/or containers.

Field of view scaling

The 3D Camera node's Keep Aspect property defaults to the Keep Height scaling mode (also called Hor+). This is usually the best value for desktop games and mobile games in landscape mode, as widescreen displays will automatically use a wider field of view.

However, if your 3D game is intended to be played in portrait mode, it may make more sense to use Keep Width instead (also called Vert-). This way, smartphones with an aspect ratio taller than 16:9 (e.g. 19:9) will use a taller field of view, which is more logical here.

Scaling 2D and 3D elements differently using Viewports

Using multiple Viewport nodes, you can have different scales for various elements. For instance, you can use this to render the 3D world at a low resolution while keeping 2D elements at the native resolution. This can improve performance significantly while keeping the HUD and other 2D elements crisp.

This is done by using the root Viewport node only for 2D elements, then creating a Viewport node to display the 3D world and displaying it using a ViewportContainer or TextureRect node. There will effectively be two viewports in the final project. One upside of using TextureRect over ViewportContainer is that it allows enable linear filtering. This makes scaled 3D viewports look better in many cases.

See the 3D viewport scaling demo for examples.

See also

• Viewport

See also

• GameProgramming
• GameProgramming:MultipleResolutions
• Pixel Perfect
• Pixel Art
• Pixel Game

Favorite site

• Multiple resolutions — Godot Engine (stable) 문서 (한국어)