11. UI

MOON·2022년 7월 22일

C UI Unity image

유니티_3D_SpaceShooter

목록 보기

11/11

유니티 UI 구현 형태

유니티 Ver 4.6 NGUI 개발자가 참여해 UGUI를 개발하게 되었음
유니티에서의 UI는 3가지 형태로 제공됨

IMGUI(Immediate Made GUI)
UI Toolkit
Unity UI(UGUI)

IMGUI

IMGUI는 코드를 이용해 UI를 표시하는 방법으로 개발 과정에서 간단한 테스트용으로 사용됨
OnGUI함수는 Update()함수와 마찬가지로 매 프레임마다 호출되므로 테스트가 끝나면 주석 및 삭제하도록 한다.
스크립트 생성 : IMGUIDemo.cs

하이어라키 뷰에서 빈 오브젝트 생성 : IMGUIDemo -> 스크립트 적용

UI Toolkit

Unity UI는 게임 오브젝트 기반이기 때문에 화면상의 위치나 정렬등을 수정할 때 일일이 수작업으로 수정해야 하는 단점이 있다.
현재 개발중임 : UXML(Unity XML), USS(Unity Style Sheet)을 이용하여 디자인
Window - UI Toolkit

Unity UI

UI 리소스 준비
01.Scenes에서 새로운 씬을 생성 : MainScene
Resource / Textures 폴더에 있는 Menu 폴더를 04.Images 폴더로 드래그한다.

Canvas 객체

Canvas를 하나 만든다.
Hiererchy뷰 - UI - Canvas

Canvas 개념
Canvas 객체는 Canvas 컴포넌트를 자체 포함하고 있는 게임 오브젝트임
모든 UI 항목(UI Element)은 반드시 Canvas객체의 하위에 위치해야 함

Rect Transform 컴포넌트를 가짐
Canvas 객체의 하위로 차일드 함
EventSystem 객체도 자동 생성
EventSystem 객체는 시스템에서 발생하는 키보드, 조이스틱, 스크린 터치 등의 입력 정보를 Canvas하위에 있는 UI 항목에 전달하는 역할을 담당

Canvas 컴포넌트는 Render Mode에 따라 3가지 옵션에 따라 화면 배치 방식을 다음과 같이 정의할 수 있다.
Screen Space - Overlay : 일반적인 방법
Screen Space - Camera : 카메라를 하나 더 두어 입체적으로 구현
World Space : VR에서의 HUD 같은 UI 구현

Rect Tansform 컴포넌트

Rect Transform
UI에 최적화 된 Transform
Panel : UI 항목을 그룹화 함
Canvas 하위로 Panel 추가

anchoredPosition 속성

anchoredPosition (자체 실습)
앵커 포인트 기준에서 상대적으로 얼만큼 떨어져 있는가에 대한 속성 지정

Image 컴포넌트

04.Images/Menu/SF Window를 Image 컴포넌트의 Source Image속성에 연결

Panel의 위치와 앵커프리셋을 적용

Image 컴포넌트의 Image Type : Sliced
SF Window 텍스쳐를 선택후 Sprite Editor를 누름

Unity 2D Sprite Editor 오류가 발생할 경우
매뉴 - Window - Package Manager
Packages:Unity Registry 선택

Slice 옵션
이미지의 크기를 조절해도 외곽선의 뭉개짐이나 깨짐이 없도록 설정
9개의 영역으로 나누어짐

RowImage 컴포넌트

RowImage 컴포넌트
배경이나 애니메이션이 필요없는 정적인 이미지를 표시할 때 사용
Canvas 객체 아래에다 RowImage 컴포넌트 추가

RowImage 컴포넌트 : 이미지 연결
05. Models/SkyBox Volume 2/DeepSpaceGreenWithPlanet/upImage

RowImage 컴포넌트
Z-Order 적용
Panel를 맨 밑으로 이동 (예전 버전에는 Transform Soring 이라는것이 지원되었음)

RowImage 컴포넌트
이미지를 캔버스 영역을 모두 가리워지도록 넓힌다.
Panel 색상의 알파값을 255로 설정 -> 눈에 잘 띄는 색상으로 변경

Button 컴포넌트

Pannel 밑에다 새로운 버튼을 추가한다. (UI-Button)

Button 컴포넌트의 Transition속성을 Animation 으로 지정
Button의 Animator컴포넌트 추가
07. Animation폴더/Controller폴더/아래에 “Button”으로 저장한다

Button컴포넌트에 정의된 Trigger이름과 동일한 이름으로 애니메이터와 애니메이션 클립이 자동 생성
Animator: Button
Animation Clip : Diabled / Highlighted / Normal / Pressed / Selected

Button 애니메이션 컨트롤러를 더블클릭하면 Button의 5가지 상태에 맞는 스테이트가 만들어져 있음
5개의 Trigger타입의 변수가 만들어져 있음

마우스가 Button 위에 위치 했을 때 롤 오버(Roll Over:약간 커짐) 애니메이션 구현
1) Hierarchy 뷰에서 버튼 선택
2) 메뉴 - Window - Animation - Animation 선택
3) Normal -> Highlighted 로 변경
4) 왼쪽 상단의 녹화 버튼을 누른다(녹화 모드:실행화살표가 빨간색으로 변함)

마우스가 Button 위에 위치 했을 때 롤 오버(Roll Over:약간 커짐) 애니메이션 구현
5) Add Property -> Scale (+) 클릭
6) 끝 프레임 - 마우스 오른쪽 버튼 - Delete Key
7) 스케일 값을 모두 1.1로 바꾼다.
8) 녹화 버튼을 클릭하여 녹화 모드에서 빠져 나온다.

실행하여 결과 화면을 확인한다. 마우스를 버튼 위로 갈때 버튼이 애니메이션 되는지를 확인한다.

Button의 Navigation 기능 추가
버튼이 여러개 있을 경우 버튼 사이의 이동을 정함
버튼을 복사한 뒤 이름을 변경(아래와 같이)
Button - Start, Button - Options, Button - Shop
Button의 이미지는 Button - Trimmed로 설정하고 색상은 패널색과 비슷하게 설정(11F5F5)

게임이 실행되자 마자 첫번째 버튼이 선택되도록 하는 작업
EventSystem의 First Selected 속성에 Button - Start를 드래그 함

Button 이벤트 함수 지정
Button 이벤트는 버튼을 클릭했을 때 어떤 작업을 수행할 수 있게 하는 기능
빈 게임오브젝트 생성 : UIMgr
새로운 스크립트 생성 : UIManager
새로 생성한 UIManager를 UIMgr에 미리 추가해 둔다.

public 함수로 OnButtonClick()을 작성후 클릭시 문자를 출력하게 한다.

UIMgr 게임오브젝트를 Button - Start의 On Click 이벤트의 오브젝트 항목에 연결
오브젝트가 연결되면 클래스안의 이벤트 함수를 등록할 수 있다.

Text 컴포넌트
3개의 버튼의 텍스트를 수정함 ( START/OPTION/SHOP)
Text / Font Size / Color 값을 수정

스크립트에서 버튼 이벤트 처리하기

UIManger 수정

using문에 UI, API를 선언한뒤 할당할 버튼들을 변수로 선언한다.
Start함수로 Start버튼 효과를 낼 예정이다.
= () => 이러한 형식도 함수로 이벤트를 연결한다.

UIManger게임오브젝트에 노출된 변수에 각각 3개의 버튼을 추가한다.

이제 실행하면 Console창에 결과값이 나온다.

TextMesh Pro

TextMesh Pro는 원래 에셋 스토어에서 판매되는 유료 에셋으로서 유니티사에서 정식으로 인수한 패키지임
TextMesh Pro 는 여러가지 텍스트 렌더링 기법으로확대 툭소시 글자의 외곽선이 뭉개지거나 해상도가 떨어지지 않는 장점이 있다.
VR/AR 콘텐츠 제작시 Unity UI 의 Text대신에 TextMesh Pro를 많이 사용한다.
window - TextMesh Pro - Import TMP Essential Resources 를 선택

T하이어라키 뷰에서 Canvas를 선택 한 후 왼쪽 위의 (+) 버튼을 클릭 한 후 UI - Text - TextMesh Pro 메뉴를 선택
하이어라키 뷰의 Canvas 하위에 Text(TMP)가 생성, 씬 뷰의 중앙에 New Text 라고 표시된다.
Text(TMP)를 선택 한 후 Ctrl키를 누른 상태에서 앵커 포인트를 Left-Top으로 설정

Margins 속성을 전부 5로 설정
Text Align 설정
Text
Text Style : Titel
Text Size : 50

생명 게이지 구현

MainScene은 저장하고 PlayScene를 로드함
[GameObject]-[UI]-[Canvas] 객체를 하나 만든다.
Canvas를 선택한 후 인스펙터 창에서 Canvas Scaler의 UI Scale Mode속성을 Scale With Screen Size로 설정
Canvas 아래에 Panel를 하나 추가 이름을 Panel - Hpbar로 수정
Shift키를 누른 상태에서 앵커 포인트를 Top - Left로 설정하고 사이즈를 적당하게 줄인다.

“Panel-Hpbar”에 적용된 이미지를 “04.Images/Menu/Button-Tab”으로 변경
색상 : (0, 255, 255, 255)Cyan 으로 변경

“Panel-Hpbar”를 선택 후 마우스 오른쪽 버튼 -> UI - Text - TextMesh Pro 선택
Text(TMP) UI 속성을 아래와 같이 적용

“Panel-Hpbar”를 선택하고 마우스 오른쪽 버튼 ->UI-Image 추가
Image의 이름을 Image-Hpbar로 수정
Source Image를 ‘04.Images/Menu/hpBar”를 연결
가로와 세로 크기를 적당하게 조절
Image Type 을 Filed로 변경
Fill Method 를 Horizontal로 변경
HP_BAR 라는 태그 지정