15강해상도와 스케일링

문제 — 세상에는 화면 비율이 너무 많다#

여러분이 지금 이 글을 읽는 기기만 봐도 그렇습니다.

같은 게임이 이 전부에서 그럴듯해 보여야 합니다. 그리고 폴드는 한 기기 안에서 비율이 바뀝니다. 게임이 돌아가는 도중에요.

1) 기준 해상도 정하기#

프로젝트 설정 → Display → Window → Size

어떤 값을 넣어야 할까요?

2) Stretch Mode — 어떻게 늘릴 것인가#

프로젝트 설정 → Display → Window → Stretch → Mode

3) Aspect — 비율이 다르면#

프로젝트 설정 → Display → Window → Stretch → Aspect

안전 영역(Safe Area)#

폴드나 노치가 있는 폰에서는 화면의 일부가 물리적으로 가려집니다. 카메라 홀, 곡면 가장자리, 접히는 부분, 제스처 바 등.

func _ready() -> void:
	var safe := DisplayServer.get_display_safe_area()
	var full := DisplayServer.screen_get_size()
	print("전체 ", full, " / 안전 ", safe)

픽셀아트가 뭉개지는 이유#

픽셀아트를 넣었는데 흐릿하게 나온다면 원인은 셋 중 하나입니다.

원인 1 — 텍스처 필터가 부드럽게 되어 있다#

프로젝트 설정 → Rendering → Textures → Canvas Textures → Default Texture Filter → Nearest 로 바꾸세요.

기본값 Linear는 확대할 때 픽셀 사이를 섞어서 흐리게 만듭니다. 사진에는 좋지만 도트에는 최악입니다.

개별 노드마다 바꾸려면 인스펙터의 CanvasItem → Texture → Filter 를 Nearest로.

원인 2 — 정수배가 아닌 확대#

320×180을 1366×768 화면에 맞추면 배율이 4.27배입니다. 픽셀 하나가 4.27픽셀이 되어 어떤 픽셀은 4칸, 어떤 픽셀은 5칸이 됩니다. 울퉁불퉁해집니다.

해결: Stretch → Scale Mode 를 integer 로 설정. 4배만 적용하고 남는 부분은 검은 띠로 둡니다. 선명함을 택하고 화면을 조금 포기하는 것입니다.

원인 3 — 소수점 위치#

캐릭터가 x = 100.3 에 있으면 픽셀이 반 칸 걸쳐서 흐려지거나 떨립니다.

# 프로젝트 설정에서 한 번에
# Rendering → 2D → Snap 2D Transforms to Pixel   ✓
# Rendering → 2D → Snap 2D Vertices to Pixel     ✓

Display → Window → Size
  Viewport Width  = 384
  Viewport Height = 216
Display → Window → Stretch
  Mode   = viewport      (또는 canvas_items)
  Aspect = keep          (또는 expand)
  Scale Mode = integer
Rendering → Textures → Canvas Textures
  Default Texture Filter = Nearest
Rendering → 2D
  Snap 2D Transforms to Pixel = on
  Snap 2D Vertices to Pixel   = on

실습 — 여러 비율에서 확인하기#

1) 창 크기를 바꿔가며 보기#

실행 중인 창의 크기를 마우스로 늘였다 줄였다 해보세요. Aspect 설정을 바꿔가며 각각 어떻게 반응하는지 봅니다.

2) 코드로 비율 실험#

extends Node

# 폴드 두 화면을 흉내 내는 크기
const PRESETS := {
	"폴드 커버(접음)": Vector2i(412, 960),
	"폴드 메인(펼침)": Vector2i(880, 900),
	"일반 폰": Vector2i(390, 844),
	"PC 16:9": Vector2i(1280, 720),
	"울트라와이드": Vector2i(1720, 720),
}

var _keys: Array = PRESETS.keys()
var _i := 0

func _unhandled_input(e: InputEvent) -> void:
	if not e.is_action_pressed("ui_accept"):
		return
	_i = (_i + 1) % _keys.size()
	var name: String = _keys[_i]
	DisplayServer.window_set_size(PRESETS[name])
	print("→ ", name, " ", PRESETS[name])

스페이스를 누를 때마다 창 크기가 바뀝니다. 각 크기에서 UI가 잘리거나 겹치지 않는지 확인하세요.

3) 화면 경계 표시하기#

기준 해상도의 경계를 그려두면 무엇이 잘리는지 한눈에 보입니다.

extends Node2D

const BASE := Vector2(1280, 720)

func _draw() -> void:
	# 기준 해상도 영역
	draw_rect(Rect2(Vector2.ZERO, BASE),
		Color(0, 1, 0, 0.6), false, 2.0)
	# 안전 영역(가장자리 10%)
	var m := BASE * 0.1
	draw_rect(Rect2(m, BASE - m * 2.0),
		Color(1, 1, 0, 0.4), false, 2.0)

다음 강의 — 화면이 정리됐으니 캐릭터가 살아 움직일 차례입니다. 애니메이션과 상태 머신을 봅니다.