저번 시간에는 물체에 적용하는 물리적 현상 중력이나 충돌 등에 관한 부분을 처리하는
콜라이더, 트리거, 콜리전에 대해 알아보았습니다.
이번 시간에는 UI에를 통해 인터페이스를 생성해 보고 UI 시스템을 구성하는 시간을 갖아보도록 하겠습니다.
Unity 2D 물리 레퍼런스에 대해 알아보자
저번 시간에는 3D 모델이나 오디오 파일, 이미지 등 외부에서 생성한 파일을 가져올 수 있는 에셋과캐릭터, 배경화면 등 애니메이션 설정 가능한 애니메이션 클립, 컨트롤러에 대해 알아보았었
tangent0426.tistory.com
텍스트
텍스트 개요
| UI(사용자 인터페이스) | |
| 개요 | UI 시스템을 통해 사용자 인터페이스를 신속히 직관적으로 만들 수 있음 Unity UI 안에는 다양한 Unity UI 시스템의 주요 기능이 있음 |
| 캔버스(Canvas) | 캔버스는 Canvas 컴포넌트가 있는 게임 오브젝트이며 모든 UI 요소는 반드시 어떤 캔버스의 자식 |
| 기본 레이아웃 (Image) | 이 섹션에서는 UI 요소를 서로 간 비교하거나 캔버스와 비교하여 배치하는 방법에 대해 설명 |
| 비주얼 컴포넌트 (GUI) | UI 시스템의 도입과 함께 GUI 특화 기능을 생성할 수 있도록 해 주는 새 컴포넌트가 추가 |
| 상호작용 컴포넌트 |
이 섹션에서는 마우스 및 터치 이벤트 등과 같이 키보드나 컨트롤러를 사용하여 이루어지는 상호작용을 처리하는 UI 시스템의 컴포넌트에 대해 설명 |
| 캔버스(Canvas) | |
| 개요 | 모든 UI 요소는 Canvas 안에 위치, 캔버스는 Canvas 컴포넌트가 있는 게임 오브젝트이며 모든 UI 요소는 반드시 어떤 캔버스의 자식 자동으로 캔버스를 생성 이 때 이 UI 요소는 이 캔버스의 자식으로서 생성 |
| 요소 그리기 순서 | 캔버스에 있는 UI 요소는 계층 구조에 나타나는 것과 동일 순서로 그림 첫 번째 자식이 처음으로 그려지고, 두 번째 자식이 그 다음으로 그려지는 식 두 UI 요소가 겹쳐지면 나중에 그려지는 것이 먼저 그려진 것의 위에 나타나게 됨 |
| 렌더 모드 (Render Mode) |
스크린 공간 - 오버레이(Screen Space – Overlay)이 모드에서는 UI 요소가 화면에서 씬 위에 렌더링 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경 |
| 스크린 공간 - 카메라(Screen Space – Camera) - Screen Space - Overlay 와 유사하지만 이 렌더링 모드에서 Canvas 는 지정된 Camera 앞에 지정된 거리에 배치 |
|
| 월드 공간(World Space) - 캔버스는 씬 에 있는 다른 오브젝트처럼 동작 캔버스의 크기는 사각 트랜스폼을 사용하여 수동으로 설정할 수 있으며 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 생성 |
| 기본 레이아웃(Image) | |
| 개요 | GameObject -> UI -> Image 메뉴에서 이미지를 생성하고 섹션을 참고하여 직접 테스트해 볼 수 있음 |
| 사각영역 툴 (Rect Tool) |
모든 UI 요소는 레이아웃을 구성하기 위해 사각형으로 표현 사각영역 툴은 Unity의 2D 기능 및 UI 모두를 위해 사용 어떤 UI 요소를 선택하면 사각형 내부 아무 곳이나 클릭하고 드래그 하여 이동 |
| 사각 트랜스폼 (Rect Transform) |
사각 트랜스폼에는 일반 트랜스폼처럼 포지션, 회전, 스케일이 있지만, 사각형의 크기를 지정하기 위한 폭과 높이도 있음. |
| 피벗 (Pivot) |
회전, 크기, 스케일 수정은 피벗을 중심으로 일어나며 따라서 피벗의 포지션은 회전, 크기 조절, 스케일의 결과에 영향을 미침 |
| 앵커 (Anchor) |
사각 트랜스폼에는 anchors 라고 하는 레이아웃 컨셉이 포함됨 앵커는 씬 뷰에 네 개의 작은 삼각형 손잡이 모습으로 표시되며 앵커 정보 역시 인스펙터에 나타남 사각 트래스폼의 부모 역시 사각 트랜스폼인 경우, 자식 사각 트랜스폼은 여러 방식으로 부모 사각 트랜스폼에 고정될 수 있음 |
| 비주얼 컴포넌트(GUI) | |
| 개요 | UI 시스템의 도입과 함께 GUI 특화 기능을 생성할 수 있도록 해 주는 새 컴포넌트가 추가 이 섹션에서는 생성할 수 있는 새로운 컴포넌트의 기본적인 사항에 대해서 다룸 |
| 텍스트 (Text) |
Text 컴포넌트는 레이블이라고도 하며 표시할 텍스트를 입력하기 위한 텍스트 영역을 가지고 있음 폰트, 폰트 스타일, 폰트 크기, 해당 텍스트의 리치 텍스트 여부 등을 설정 |
| 이미지 (Image) |
이미지에는 Rect Transform 컴포넌트와 Image 컴포넌트가 있음 타겟 그래픽 필드 아래에서 Image 컴포넌트에 스프라이트(2D 그래픽 오브젝트)를 적용할 수 있고, 컬러는 컬러 필드에서 설정할 수 있음 |
| 로우 이미지 (Raw Image) |
Image 컴포넌트는 스프라이트를 사용하지만 Raw Image는 텍스처(테두리 등 없음)를 사용 로우 이미지는 필요한 경우에만 사용해야 하며, 그 외 대부분의 경우에는 이미지를 사용하는 것이 적합 |
| 마스크(Mask) | 마스크는 눈에 보이는 UI 컨트롤의 자식 요소의 외형을 수정하는 방식 |
| 효과 (Effects) |
비주얼 컴포넌트에는 단순 드롭 섀도우 또는 아웃라인 등의 다양한 단순 효과도 적용 효과는 카메라, 게임 오브젝트, 광원 및 기타 게임 요소에 적용 Unity 에디터에서 사용 가능한 시각 효과에 대한 정보를 제공 |
텍스트 예제
이미지(Image) 예제 및 로우 이미지(Raw Image)생성 및 텍스쳐 삽입합니다.
Hierarchy 창에서 ‘+’를 클릭하여 UI -> 이미지(Image), 로우 이미지(Raw Image) 생성합니다.
예제 : Inspector 창에서 Source Image 안에 이미지 추가하여 위 슬라이드 씬처럼 실행합니다.
텍스트 개요
| 상호작용 컴포넌트 | |
| 개요 | 섹션에서는 마우스 및 터치 이벤트 등과 같이 키보드나 컨트롤러를 사용하여 이루어지는 상호작용을 처리하는 UI 시스템의 컴포넌트에 대해 설명 |
| 공통 기능 | 대부분의 상호작용 컴포넌트는 사용자가 선택할 수 있다는 공통점을 가지고 있음 키보드나 컨트롤러를 사용하여 다른 항목을 선택할 수 있도록 기능을 공유 |
| 버튼 (Button) |
버튼은 사용자가 이 버튼을 클릭하고 놓으면 작업을 시작하도록 설계 버튼 컨트롤은 사용자의 클릭에 반응하고, 액션을 시작하거나 확인하는 데 사용 |
| 토글 (Toggle) |
토글은 현재 토글이 켜짐/꺼짐 중 어느 상태인지를 결정하는 Is On 체크박스를 가지고 있음 이 값은 사용자가 해당 토글을 클릭할 때마다 변하며 그에 따라 체크 마크가 표시.사라짐 |
| 토글 그룹 (Toggle Group) |
토글 그룹은 상호 배타적인 토글을 그룹화하기 위해 사용 동일 그룹에 속한 토글은 한 번에 하나만 선택할 수 있도록 제약이 걸리게 됨 즉 토글 중 하나를 선택하면 자동으로 다른 토글은 선택 해제 |
| 입력 필드 (Input Field) |
입력 필드는 사용자가 텍스트 요소의 텍스트를 수정할 수 있도록 하기 위해 사용 텍스트 콘텐츠가 변경되었을 때 수행할 동작을 정의하기 위한 UnityEvent, 그리고 사용자가 편집을 마쳤을 때 수행할 동작을 정의하기 위한 또 다른 UnityEvent를 가지고 있음 |
| 스크롤 사각 영역(Scroll Rect) |
공간을 많이 차지하는 콘텐츠를 작은 영역에 표시해야 할 때 스크롤 사각 영역을 활용 스크롤 사각 영역(Scroll Rect)은 콘텐츠를 스크롤하는 기능을 제공 일반적으로 스크롤 사각 영역은 마스크와 함께 사용하여 스크롤 사각 영역 중 유일하게 스크롤 가능한 콘텐츠가 보이는 스크롤 뷰를 생성 |
텍스트 예제
버튼 생성, 버튼을 클릭 시에 Consol 창에 뛰우는 예제를 만들어 봅시다.
Project창에서 오른쪽 마우스 키를 눌러 메뉴창을 나타내어 오브젝트를 생성할 수도 있음
Hierarchy 창에서 ‘+’를 눌러 UI -> Button - TextMeshPro로 생성합니다.
Hierarchy 창에서 ‘+’를 눌러 Visual Scripting -> Script Graph으로
스크립트 생성 및 버튼 객체 안에 Script Machine 추가합니다.
이벤트 유닛으로 오브젝트 버튼을 생성하고 클릭 시 이벤트를 활성화시켜주는 유닛입니다.
콘솔 창에 로그를 올려주게 만드는 유닛입니다.
슬라이드 생성 및 스크롤바 생성
Hierarchy 창에서 ‘+’를 눌러 UI -> Slider, Scrollbar를 추가합니다.
다음에는 씬에 대한 개요와 예제를 해보도록 하겠습니다.
읽어주셔서 감사합니다.^^
'Unity > Unity 2D' 카테고리의 다른 글
| [Unity 2D]장애물 피하기 게임 (1) (9) | 2024.10.09 |
|---|---|
| Unity 2D 텍스트와 씬에 대해 알아보자(2) (0) | 2024.09.12 |
| Unity 2D 물리 레퍼런스에 대해 알아보자 (1) | 2024.09.10 |
| Unity 2D Asset(에셋) 및 애니메이션에 대해 알아보자 (2) | 2024.09.09 |
| Unity 2D 블록코딩을 이용한 조건문 및 반복문에 대해 알아보자 (2) (1) | 2024.09.05 |