6강그리기 순서와 렌더링

2D에는 깊이가 없다. 순서만 있다#

3D는 카메라로부터의 거리를 계산해서 가까운 것이 앞에 보입니다. 2D는 그런 게 없습니다. 그냥 나중에 그린 것이 위에 덮입니다.

그래서 2D에서 "앞뒤"는 전부 그리는 순서를 어떻게 정하느냐의 문제입니다.

규칙 1 — 씬 트리의 순서#

기본 규칙은 아주 단순합니다.

Main
├─ Background    ← 가장 먼저 그림 (제일 뒤)
├─ Ground
├─ Enemy
└─ Player        ← 가장 나중에 그림 (제일 앞)

씬 독에서 노드를 위아래로 끌어 순서를 바꾸면 그리기 순서가 바뀝니다. 대부분의 정렬 문제는 여기서 해결됩니다.

규칙 2 — z_index#

트리 순서를 바꾸기 곤란할 때가 있습니다. 그럴 때 z_index로 강제로 끌어올립니다.

z_index = 10  # 기본은 0. 클수록 앞에 온다. 음수도 가능

• 범위는 -4096 ~ 4096
• 같은 부모 안에서만 비교됩니다(기본값 기준)
• z_as_relative 가 켜져 있으면 부모의 z에 더해집니다(기본 켜짐)

# res://z_layers.gd  (오토로드로 등록)
const BG      := -100
const GROUND  := 0
const ACTOR   := 10
const EFFECT  := 50
const UI_WORLD := 90

규칙 3 — Y-sort (탑다운 게임의 핵심)#

탑다운(위에서 내려다보는) 게임에서는 아래쪽에 있는 것이 앞에 보여야 자연스럽습니다. 캐릭터가 나무보다 아래에 서 있으면 나무 앞에, 위에 서 있으면 나무 뒤에 가려져야 합니다.

이걸 매 프레임 z_index로 계산하려면 골치 아픕니다. Godot에는 기능이 있습니다.

설정 방법

1. 캐릭터·나무·상자를 모두 담고 있는 부모 노드(예: World)를 선택
2. 인스펙터에서 Ordering → Y Sort Enabled 체크
3. 끝

규칙 4 — CanvasLayer (UI는 세계 밖에 있다)#

카메라가 움직이면 세계의 모든 것이 같이 밀려납니다. 그런데 체력바나 점수는 화면에 고정되어야 합니다.

CanvasLayer는 카메라의 영향을 받지 않는 별도의 레이어를 만듭니다.

Main
├─ World      (Node2D)      ← 카메라가 비추는 세계
│   ├─ Player
│   └─ Enemies
└─ HUD        (CanvasLayer) ← 화면에 고정
    ├─ HealthBar
    └─ ScoreLabel

CanvasLayer도 layer 번호가 있어서 여러 개를 쌓을 수 있습니다.

드로우 콜 — 왜 많으면 느려지는가#

여기서부터는 "왜 게임이 느려지는가"의 뿌리입니다. 비개발자도 감각은 잡아두면 좋습니다.

같은 텍스처를 쓰는 스프라이트들은 하나로 묶여(batching) 한 번에 보내집니다. 그래서 실무에서 이런 최적화가 나옵니다.

• 텍스처 아틀라스 — 여러 그림을 큰 이미지 한 장에 모아 붙인다. → 같은 텍스처이므로 한 번에 그려진다.
• 머티리얼 통일 — 셰이더나 블렌드 모드가 다르면 배칭이 끊긴다.
• z_index 남발 자제 — 순서가 뒤섞이면 배칭이 끊긴다.

실습 — 순서를 직접 뒤집어 보기#

1) 겹쳐 놓기#

Sprite2D 세 개를 조금씩 겹치게 배치하고 이름을 A, B, C로 둡니다. 인스펙터의 Modulate 색을 각각 빨강·초록·파랑으로 바꾸면 구분하기 좋습니다.

씬 독에서 C를 A 위로 끌어 올려보세요. 화면에서 앞뒤가 바뀝니다.

2) 코드로 순서 바꾸기#

extends Node2D

@onready var sprites: Array[Node] = [$A, $B, $C]
var _top := 0

func _unhandled_input(event: InputEvent) -> void:
	if event.is_action_pressed("ui_accept"):  # 스페이스바
		# 누를 때마다 다음 스프라이트를 맨 앞으로.
		for i in sprites.size():
			sprites[i].z_index = 0
		sprites[_top].z_index = 10
		_top = (_top + 1) % sprites.size()

3) Y-sort 체험#

1. Main(또는 스프라이트들의 부모)에서 Y Sort Enabled 를 켭니다.
2. 스프라이트들을 위아래로 흩어 놓습니다.
3. 하나를 드래그해 위아래로 움직이면 자동으로 앞뒤가 바뀝니다.

# 캐릭터를 마우스로 끌어 Y-sort를 확인하는 코드
extends Sprite2D

var _drag := false

func _unhandled_input(event: InputEvent) -> void:
	if event is InputEventMouseButton:
		if event.button_index == MOUSE_BUTTON_LEFT:
			_drag = event.pressed
	elif event is InputEventMouseMotion and _drag:
		global_position = get_global_mouse_position()

P1 정리 — 여기까지가 강좌의 뼈대입니다. 프레임, delta, 좌표, 그리기 순서. 앞으로 나오는 모든 것이 이 넷 위에 얹힙니다.

다음 강의 — P2로 들어갑니다. 이제 플레이어가 조작합니다. 입력부터 봅니다.