화면 위 글자와 버튼의 구조
점수, 안내 문구, 버튼처럼 게임 화면 위에 붙는 UI는 Screen 컴포넌트를 가진 엔티티 아래에 Element 컴포넌트를 가진 엔티티를 놓아 만듭니다. 이 페이지는 두 컴포넌트의 관계와 위치를 정하는 방식을 설명합니다. 직접 만드는 절차는 점수·안내 글자 바꾸기와 버튼 만들기에 있습니다.
Screen과 Element
| 컴포넌트 | 붙는 곳 | 맡는 일 |
|---|---|---|
| SCREEN | UI 묶음의 맨 위 엔티티(예: 2D Screen) | UI를 화면에 붙일지, 3D 공간에 둘지. 화면 크기가 바뀔 때 UI를 어떻게 늘릴지 |
| ELEMENT | Screen 아래의 각 엔티티 | 글자(Text), 그림(Image), 빈 묶음(Group) 가운데 하나. 위치·크기·기준점 |
| BUTTON | Image Element가 붙은 엔티티 | 누름을 받고, 마우스를 올리거나 누를 때 색을 바꿉니다 |
Element는 Screen 아래에 있어야 화면에 그려집니다. HIERARCHY + → User Interface로 만들면 이 구조가 자동으로 잡힙니다. 메뉴에는 2D Screen, 3D Screen, Button, Layout Group, Layout Child, Group Element, Text Element, Image Element, Scrollbar, Scroll View가 있습니다.
2D Screen과 3D Screen
SCREEN의 Screen Space 칸이 둘을 가릅니다. 2D Screen으로 만들면 켜져 있습니다.
- Screen Space 켜짐: 카메라와 상관없이 화면에 딱 붙습니다. 점수·버튼에 씁니다.
- Screen Space 꺼짐(3D Screen): 씬 안의 한 장소에 놓인 판이 됩니다. 머리 위 이름표나 게임 속 간판에 씁니다. 작성 대기 3D Screen 실측
화면 크기에 맞추기
새 2D Screen의 SCREEN 칸은 다음과 같습니다(2026-10-29 확인).
| 칸 | 처음 값 | 뜻 |
|---|---|---|
| Ref Resolution | 1280 × 720 | UI를 설계하는 기준 화면 크기 |
| Scale Mode | Blend | 실제 화면이 기준과 다를 때 UI를 늘리는 방식. None과 Blend가 있습니다 |
| Scale Blend | 0.5 | 가로와 세로 가운데 어느 쪽에 맞출지(0이면 가로, 1이면 세로) |
| Priority | 0 | Screen이 여럿일 때 위에 그릴 순서 |
배율 계산 실측
2026-10-29 Launch한 게임 화면(1920 × 854)에서 Screen의 배율을 읽었습니다(1회).
| 설정 | 배율 | 뜻 |
|---|---|---|
None | 1 | 화면 크기와 상관없이 기준 픽셀 그대로. 큰 화면에서는 UI가 작아 보입니다 |
Blend, Scale Blend 0 | 1.5 | 가로 비율(1920 ÷ 1280)에 맞춤 |
Blend, Scale Blend 1 | 1.186 | 세로 비율(854 ÷ 720)에 맞춤 |
Blend, Scale Blend 0.5(처음 값) | 1.334 | 두 비율의 중간(기하 평균) |
휴대폰처럼 세로가 긴 화면에서 글자가 잘리면 Scale Blend를 0(가로 기준) 쪽으로 옮깁니다. 작성 대기 휴대폰 세로 화면 실측
위치 정하기: Anchor와 Pivot
Element의 위치는 부모 영역의 어느 점에 붙을지(Anchor)와 자기 몸의 어느 점을 그 자리에 맞출지(Pivot)로 정합니다. 둘 다 0~1 비율입니다. 0, 0이 왼쪽 아래, 1, 1이 오른쪽 위입니다.
- 새 Element는 Preset
Center Anchor & Pivot으로 화면 가운데에 생깁니다(Anchor0.5네 칸, Pivot0.5, 0.5). - Preset에서
Top Left Anchor & Pivot을 고르면 왼쪽 위 모서리에 붙습니다. 점수처럼 모서리에 둘 글자에 씁니다. 화면 크기가 바뀌어도 모서리에서의 거리가 유지됩니다. Stretch를 고르면 부모 영역을 꽉 채웁니다. 반투명 배경판에 씁니다.
실측에서 Text의 Anchor를 0, 1, 0, 1, Pivot을 0, 1로(= Top Left Anchor & Pivot) 바꾸고 Position을 20, -20으로 두자, 글자가 화면 왼쪽 위 모서리에서 조금 떨어진 자리에 나왔습니다.
점수는 Enable Markup으로 색을 바꿨습니다그리는 순서와 입력
- 같은 Screen 아래에서는 HIERARCHY에서 아래에 있는 Element가 위에 그려집니다. 실측에서 나중에 만든
Button이 먼저 만든Text를 가렸습니다(1회). - 누름을 받으려면 Element의 Use Input이 켜져 있어야 합니다. Button으로 만들면 켜져 있습니다.
- UI는
UI레이어에 그려집니다. 카메라의 Layers에UI가 있어야 보입니다.
AI가 만든 게임의 UI
대회용 에디터에서 AI가 만든 7판은 모두 이 구조(Screen 아래 Text Element)로 점수를 띄웠고, HTML·CSS로 만든 UI는 없었습니다. 글자를 바꾸는 법은 점수·안내 글자 바꾸기에 있습니다. 작성 대기 현재 판 AI 게임 3판에서 다시 확인