Unity UI

장현태입니다·2025년 5월 12일

UI

User Interface : 플레이하는 유저와 소통하는 수단
UI요소 생성시 event System, Canvas생성된다(1회)
이 때 canvas - 평면의 도화지 라고 해석할 수 있고,
ui는 canvas의 자식이어야 한다.

canvas

render Mode - 도화지를 어디에 둘것인지
overlay - canvas와 게임을 별도로 지정(게임창 기준으로 UI그려짐)
camera - Canvas를 카메라를 기준으로 지정(카메라 회전 위치 이동시 카메라를 따라 이동)
월드를 기준으로 하기때문에 게임에 영향이 있음
world space - 월드를 기준으로 ui를 오브젝트처럼 사용가능

canvas Scaler
Constant pixel size - pixel에 따라 ui만들어줌(화면에 따라 달라짐)
Scale With Screen Size - 비율에 따라 ui만들기 (퍼센트로 ui보여줌)

Rect Transform

width, Height - UI크기(Pixel)

Anchors(기준점) - anchor를 기준으로 posX,Y의 위치를 지정
(화면마다 ui 보여지는게 달라지기 때문에 고정이 필요시 anchor를 바꿔줘야함)
stretch : 앵커의 비율에 따라 화면 비율에 따라 ui보여줌(파란색)

Pivot - ui를 의 기준위치(ui요소의 기준점을 정하고 변경.조절가능

shift - anchor기준점위치
Alt - ui요소 기준점위치

Font

Unity에서 일반 TextMeshPro에서 한글 폰트를 사용할 수 없다 그러기에 Font를 저장하고 에셋으로 바꾸어서 사용해야하는데
window -> textMesh Pro -> font asset creator ->source font file : 폰트넣기 -> auto sizeing
-> padding : 5 -> packing Meghod : fast
-> atlas resolution : 4096 * 4096(2048 or 4096)
character set : custom Range-> character sequence로 폰트를 저장하여 사용하면 된다.

UI의 자식 객체를 정렬시키고 싶은경우

LayOut Component에서 Grid Layout Group, Vertical Layout Group, Horizontal Layout Group을 사용해서 자식들을 정렬시킬 수 있다.

Grid layout group : 자식들의 위치와 크기 고정시키고 해당 컴퍼넌트에서 조절한다.

부모의 크기를 조절하고 싶을경우 : content size Filter - vertical(or horizontal) - minsize
자식의 크기를 자동으로 조절하고 싶을경우 : content size Filter
부모와 자식의 크기를 조절할 수 있는 content size filter를 사용해서 객체의 수마다 또는 객체가 커짐에 따라 자동으로 크기를 조정해줄 수 있다.

layout element : grid layout group에서 특수한경우(예외적인 설정) 따로 설정해줄 수 있다 (ignore layout 체크시 자유롭게 됨)

UI연동

MVC,MVP,MVVM

MVC (model view Contoller)
사용자 인터페이스(ui)를 개발할 때 흔히 사용되는 일련의 디자인패턴

소프트웨어의 논리적인 부분, 데이터, 프레젠테이션을 분리데이터(model), 논리(controller), 표현(view) 따로 만들자!
모델 - 데이터, 뷰 - 인터페이스, 컨트롤러 - 로직
View -> user -> Controller -> Model -> View
user가 조작하는건 controller뿐

Model : hp,maxHp를 가지고 set에서 hp가 변경이 될 때마다 UI Script의 함수를 호출한다

PlayerController에서 동작을 수행하고

UI에서 함수 호출을하여 View를 실행한다
Controll -> model -> view : MVC

MVP (Model View Presenter) - 유니티에서는 더 추천

-> view를 매번 만들필요가 없다
mvc 런타임에 모델 데이터에서 발생하는 변경사항을 갱신하는 별도의 코드가 필요(뷰 마다 코드필요)
->PlayerHpTextview 필요

MVC의 controller -> presenter, 뷰에서 controller역할을 함

view -> presenter -> model -> presenter -> view

ex)
버튼누름 -> 중개자 -> 모델변화 -> 영향받은 모델 갱신-> 중개자 -> view에 전달
(핵심은 view와 model분리)

MVP의 경우 중개자를 통해 View를 연결하므로 Canvas에 Script를 적용한 후 중개자 -> View를 실행한다(controll

Model : Health, PlayerRigid를 사용해서 변수와 set에 변수가 변경 될 때마다 event를 생성하도록 구현

View : PlayerRigidUI, HealthUI를 사용해 UI를 지정하고 이벤트가 실행될 때 ui에 영향을 주도록 이벤트를 구독,취소 하도록한다.

플레이어없이 작동하기 번거로워 컨트롤러도 작성하였다

Presenter의 canvas에 UI오브젝트를 넣고 영향을 받을 player를 지정한다

플레이어에선 model을 지정하고

다음과 같이 입력 -> model -> Presenter -> view -> Presenter -> model -> 출력 하는 형식으로 나오는걸 볼 수 있다.

실습 : 플레이어 점프,체력을 출력하는 ui와 mvp형태로 구현, 채팅창 구현

(위의 스크립트와 같지만 한번 더 올림)

Controller : 플레이어의 움직임과 싱글턴의 이벤트호출

Model : Player Health,rigid의 변수와 set을 통해 이벤트함수 호출

Presenter : 이벤트 구독 및 취소

싱글턴을 통해 하나의 채팅창을 구현 chat open,close 이벤트 구독

엔터 입력시(PlayerController에 구현) inputfield의 텍스트를 복사해서 인스턴스화로 textParent자리에 chatText를 생성하여 inst에 넣고, inst의 text에 inputfield.text를 복사하여 넣어은다음 inputField의 텍스트를 빈 공간으로 지정한다

if문의경우 빈공간일경우에 EnterText함수가 실행 될 경우 싱글턴의 이벤트함수(OnChatClose)를 호출하도록 구현하였다.