유니티 UI 기초 강좌 노트
1. UI 개요
- UI (User Interface): 게임 화면에서 사용자와 상호작용하는 요소.
- UI 좌표계
- 월드 좌표계: 3D 공간.
- 스크린 좌표계: 화면에 표시되는 2D 평면.
2. UI 생성 과정
- UI 메뉴 접근:
- Hierarchy 창에서 우클릭 → UI → 선택.
- 기본적으로 Canvas와 EventSystem이 생성됨.
- 2D 모드 활성화 권장 (카메라 뷰가 평면으로 보임).
- Canvas:
- 게임 UI의 기본 컨테이너.
- Canvas Scaler로 화면 해상도에 따라 크기 자동 조정 가능.
3. 텍스트 컴포넌트
- 텍스트 속성:
- 텍스트 입력: 한글 지원 가능.
- 폰트 설정: 원하는 폰트로 변경 가능하나, 라이선스 확인 필요.
- 색상 및 크기 조정:
- Font Size: 크기 설정.
- Line Spacing: 행간 조절.
- Overflow 옵션:
- Wrap: 텍스트를 감싸기.
- Overflow: 넘친 텍스트 표시.
4. 이미지 컴포넌트
- 이미지 삽입:
- Source Image에 원하는 이미지 추가.
- Sprite로 설정해야 사용 가능.
- 이미지 크기 조정:
- Set Native Size: 원본 크기로 조정.
- Preserve Aspect: 비율 유지.
- Image Type:
- Simple: 기본 확장.
- Sliced: 모서리를 유지하며 확장.
- Tiled: 반복 패턴으로 채우기.
- Filled: 퍼센티지로 이미지 채우기.
5. 버튼 컴포넌트
- 구조:
- 버튼 기본 구조: 이미지 + 텍스트 포함.
- Interaction:
- Normal/Highlighted/Pressed Colors: 상태에 따른 색상 설정.
- OnClick 이벤트:
- 버튼 클릭 시 실행할 함수를 연결.
- Public 함수만 선택 가능.
- 슬라이스 기능:
- 버튼 이미지가 크기에 따라 깨지지 않도록 조정.
6. UI 정렬 및 고정
- Rect Transform:
- Canvas 내부의 UI 요소는 Rect Transform 사용.
- 앵커(Anchor) 설정으로 위치 고정:
- 해상도 변화에도 일정 위치 유지.
- Pivot: 중심점 설정.
7. UI 최적화 팁
- 순서 관리:
- Hierarchy 상단에 위치한 요소가 우선적으로 그려짐.
- UI 배치:
- 필요에 따라 겹치거나 배경 이미지를 추가 가능.
- 디자인 가이드:
- 사용자에게 가독성이 좋은 크기, 색상, 정렬을 사용.
8. 버튼 이벤트 예제
- 스크립트 연결:
- Button OnClick 설정:
- 버튼 → OnClick → 오브젝트와 함수 연결.
public void Jump() { transform.localScale = new Vector3(1.2f, 1.2f, 1.2f); }
9. 해상도 대응
- Canvas Scaler:
- Scale with Screen Size: 화면 크기에 따라 UI 비율 자동 조정.
- Reference Resolution: 기준 해상도 설정.
