게임 UI 를 리소스 한 장으로 굴린다

게임 화면에서는 이렇게 보인다

중세·sci-fi 프리셋 — 캐릭터 정보·인벤토리·퀘스트, 폼·격자·안내 카드, 각진 패널과 터치 조작. 프리셋을 바꾸는 것은 코드 한 줄이다.

프리셋 여섯과 바꾸는 법 →

무엇을 대신해 주는가

게임 UI 에서 시간을 가장 많이 잡아먹는 것은 버튼 모양이 아니라, 기기마다 다르게 어긋나는 것들이다. gohud 는 그 어긋남을 한곳에서 처리한다.

생김새 바꾸기 — 색뿐 아니라 모양까지

Theme 는 엔진이 그려 주는 것의 모양만 바꾼다. StyleBoxFlat 의 모서리는 둥근 것뿐이고, 조이스틱·퀵슬롯·코치마크는 코드가 직접 그리므로 테마를 아무리 갈아 끼워도 모양이 안 바뀐다. 그래서 gohud 는 테마·스킨·아이콘을 한 단위로 고르는 프리셋을 쓴다.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # 테마·스킨·아이콘이 한꺼번에

네 장 모두 같은 갤러리 화면이다. 코드는 한 줄도 다르지 않고 프리셋 이름만 바뀌었다. 버튼 모서리, 토글 모양, 목록 줄, 입력 칸 테두리가 함께 움직이는 것이 보인다.

중세 테마

medieval_dark 는 철·가죽에 고금색, medieval_light 는 양피지와 잉크 색상이다. 메뉴 프레임에는 리벳과 작은 모서리 장식을 두고 상시 HUD 는 절제했다. 각인풍 아이콘 16종이 아이템 이름을 다시 그리고, 포함된 Cinzel 글꼴은 제목·부제에만 쓴다.

두 장 모두 기본 위젯으로 만든 examples/medieval/medieval.tscn 이다. 중세 안내와 나만의 왕국 만들기 →

같은 화면, 폰에서도 데스크톱에서도

갤러리 네 장은 폰 세로다. 아래는 같은 코드를 1280×800 으로 띄운 것이다 — 본문은 읽기 좋은 폭(480dp)에서 멈춰 가운데에 서고, HUD 는 화면 구석에 남는다. 폼은 떠 있는 HUD 와 겹치지 않게 비키되, 닿지 않으면 밀지 않는다 — 넓은 화면에서 괜히 밀면 본문이 한쪽으로 치우친다.

같은 시트, 다른 생김새

에디터에서 고르려면 프로젝트 설정 → gohud → Theme → Preset, 설정 리소스에서는 GoConfig.preset 칸이다. theme·skin·icons 를 직접 채우면 그쪽이 프리셋보다 우선한다 — 프리셋을 고른 뒤 한 칸만 자기 것으로 바꿔 끼울 수 있다.

스킨 — 테마가 닿지 못하는 자리

GoSkin 은 조이스틱, 퀵슬롯 패널, 코치마크 링, 칩, 스켈레톤, 알림 상자, 분절 선택, 구분선의 모양을 맡는다. 상속해서 바꾸고 싶은 것만 덮어쓰면 나머지는 기본 모양 그대로다.

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent          # 위쪽 강조선
    return box

func draw_joystick(canvas: CanvasItem, center: Vector2, knob: Vector2,
        radius: float, knob_radius: float, ink: Color, base: Color, active: bool) -> void:
    canvas.draw_circle(center, radius, Color(base, 0.4))
    canvas.draw_circle(knob, knob_radius, ink)

셋 모두 여느 StyleBox 처럼 Theme 리소스 안에 그대로 저장된다 — 즉 테마가 모양을 바꿀 수 있다. GoSkinSciFi·GoSkinMedieval 이 함께 들어 있는 상속 예다.

위젯

부품을 표 하나로. → 위젯 하나하나 자세히 보기

기다리기, 알리기, 세기

폼과 목록

게임이 실제로 쓰는 모양

화면 위에

읽히는지는 눈대중이 아니라 잰다

"예쁘다" 는 취향이지만 "읽힌다" 는 잴 수 있다. 흐린 회색 글씨는 좋은 모니터에서 멀쩡해 보이고 한낮의 폰에서는 사라진다 — 눈으로 고르면 언젠가 반드시 그렇게 된다.

python3 addons/gohud/tools/check_contrast.py

색 짝 전부와 버튼 상태마다의 글자와 그 글자가 얹힌 패널을 여섯 테마 모두에서 WCAG 로 잰다. 반투명 색은 실제 배경에 합성한 뒤에 잰다 — 그대로 재면 화면에 보이는 것보다 좋은 비율이 나온다.

그래서 글자 색은 고르는 것이 아니라 끌어낸다 — 빌더가 팔레트 값을 출발점으로 삼아, 그 글자가 놓일 수 있는 모든 표면에서 기준을 넘길 때까지 밝기를 민다. 팔레트를 바꾸면 대비가 따라온다. 규칙과 그 뒤의 함정 →