23. [UE5] UI Interaction(Widget)

1. UI와 Interaction

1. Interaction

• Event가 발생한다는 것은 사용자의 의지 반영 X → Action
• 사용자의 의지가 반영된다는 것은 게임에 Input을 준다는 것 → 메인 캐릭터의 움직임
• UI(User Interface)로 사용자의 의지가 반영된 액션을 취할 수 있도록 함 → UI Input

2. UI / HUI / UMG

• UI : User Interface
• HUD : Head Up Display → 게임 진행과 상관없이 계속 UI가 떠있는 것
• UMG : Unreal Motion Graphic → 언리얼 엔진에서 사용할 수 있는 UI 애니메이션의 제작이 가능

3. Widget Blueprint

COMMON	PANEL
border / button / Check Box / Image / Text	Canvas Panel / Horizontal Box / Vertical Box

 

ANCHOR

• 고정해놓은 기준점

 

4. Widget 화면 띄우는 법

HUD(평면에 붙는 UI)	공간에 객체로 배치(공간에 붙는 UI)
Viewport에 UI를 표시 UI Viewport 에 붙은 상태로 표현 사용하는 노드 함수 Create Widget Add to Viewport	BP에 Component(Widget)로 추가 UI 사이즈에 맞춰서 Draw Size를 설정

 

---

 

2. Widget 만들기(평면에 붙는 UI)

1) 게임 시작 메뉴 UI 이론

• UI 폴더를 만들어 Level 파일을 생성해 LV_Widget 만들기
• Widget 블루프린트 만들기 → User Widget 클릭(WBP_Basic01)
• 총 2개의 파일 생성( LV_Widget  / WBP_Basic01)

 

 

• Canvas Panel로 기본 패널을 얹기
  • Hierachy에 넣어주거나 그래프에 드래그해서 넣으면 됨 → 포함관계, 계층구조를 확실하게 해야 함
• 임의로 UI를 만들고 화면에 띄우기 → Open Level Blueprint에서 프로그래밍
• Event BeginPlay, Create Widget 노드 사용 → Class : WBP_Basic 01연결
  • 기존에 만든 것을 불러오는 Open이 아닌 왜 Create? : Widget Blueprint를 화면에 띄우게 하려면 겉에 포장을 하나 생성 → WBP 가공
  • 노드 이름이 왜 Contruct NONE? : 클래스를 연결하면 Create WBP Basic 01 Widget으로 바뀜
  •  

 

 

• Add to Viewprot(Widget을 Viewport에 띄워줌) 노드 생성
• UI가 공간에 있는 것 같이 느껴지지 않고, 창문에 붙은 것처럼 느껴짐
  • Viewport는 공간을 바라보는 창문같은 것인데 UI가 여기에 붙은 경우임
  • HUD : 게임 진행과 상관없이 계속 떠 있는 것

 

 

• HUD는 화면의 해상도를 고려해서 만들어야 함
• 해상도 변경은 Screen Size(기준 해상도, 고정 해상도X)
• 화면에 어떻게 보여줄 지에 대한 표시 방법은 Fill Screen / Custom / Desired (대체적으로 Fill Screen과 Custom 사용)

Fill Screen 

• 해상도가 작거나 크면 그에 맞게 항상 전체로 채워줌. 비율을 유지하기는 하지만 비율 외의 화면은 채우지 않음 

 

 

Custom

• 가로, 세로를 직접 설정할 수있고, 대체적으로 크기를 유지하려고 하며 비율이 바뀌면 화면이 채워지지 않음

 

 

2) 게임 시작 메뉴 UI 실습

• 콘텐츠가 시작이 되면 보이는 플레이/종료 기능의 UI 제작
• 레벨을 새로 만들어 UI만 있도록 구성 → 공간 사용 X, HUD로 사용(대부분의 방식)
• Content Browser 안에서 새로운 레벨을 생성 → 라이트 등 아무것도 없음(LV_Start)
• UI 폴더도 만들어 Widget Blueprint 생성(WBP_Start)

 

 

• 기본적인 영역 생성을 위해서 패널을 꺼내기
  • Canvas Panel → 화살표로 사이즈 지정 가능
  • 해상도는 세 가지만 기억하기
    • 1920 *1080(FHD/1K)
    • 2560 * 1440(QHD)
    • 3840 * 2160(UHD/4K)

 

 

• 배경으로 쓸 이미지를 ContentBrowser에 넣기
• Palette내 Panel에서 Image를 Canvas Penel 하위에 넣기 → 이미지 사이즈 때문에 정중앙에 배치하려고 함
• Canvas의 Size X, Y를 Image의 Size X, Y와 맞춰줌
• Image의 Position X, Y를 0으로 맞추고, Alignment를 0.5로 맞추면 이미지가 정중앙에 배치됨

 

 

• 배치를 돕고 전체 위치를 잡을 때 쉽게 작업할 수 있도록 또 하나의 패널을 넣음
• 그 중 목록처럼 연결된 형태로 정리될 수있도록 하는 것 → Horizontal Box / Vertical Box
• Vertical Box 추가 및 정중앙 배치 → Position XY : 0, Alignment : 0.5
• Vertical Box 내 버튼이 많을 경우 다음의 Anchor 사용

 

 

• Button을 만들자. 일단 COMMON에서 Button 1개 넣기 → Play 만들고 Quit 복사
• Vertical Box 사이즈 설정 → 배치는 편하고 위치는 불편하고
• Canvas Panel은 각각의 요소에 앵커를 사용할 수 있도록 함(부모요소)

 

 

• Button 스타일을 변경해보자 
  • Normal : 기본
  • Hovered : 마우스 커서 닿음
  • Pressed : 마우스 버튼 누름
• Button Border는 Image 안 Material이 필요함 → 적용하기 위한 UI에서 사용하기 좋은 머티리얼을 만들기 
  • Alpha는 0 → 1
• Material을 적용하고 Margin을 0.1로 바꾸면 적용된 것이 보임
• Tint 값이 덮어씌워지기 때문에 다시 컬러 설정

 

 

• Level Blueprint를 열어서 UI를 연결 후 플레이하면 실행됨

 

 

• 텍스트 효과 지정해주기
• 텍스트의 Appearance에서 Padding 사이즈도 수정하면서 자간 값도 수정하기

 

 

• Hovered와 Pressed 수정(마우스가 닿고, 눌렸을 때 상태)
• 세 상태를 모두 똑같이 하면 변화가 없어 보임
• Tint 값을 변경해 상태를 구분함

 

 

• 텍스트 컬러를 바꾸는 기능은 없어 직접 기능을 만들어야 함 → 블루프린트 프로그래밍이 필요
• Bind가 있으면 그 항목에 블루프린트 함수의 프로그래밍 기능을 연결할 수 있다는 것
• 원래는 Return node가 기본적으로 지원되지 않지만 반환되는 값은 Color and opacity → 자동으로 적용됨 (기능만 만들어 주면 됨)

 

 

• 버튼에 마우스가 올라갔을 때를 알아야 함
• 왜 Button Play를 가져와 Is Hovered와 연결해 적용했는가? → Hover 되었는 지를 체크하기 위해서(마우스에 닿았는가 아닌가)
• 결과에 따라 어떤 값의 색상을 넣어줘야 하는가 →  참인 경우에는 텍스트 스타일 설정
• 실행 흐름을 분기시키는 Branch
• Promote to Varaiable로 변수화 시켜주기 → Variables 연결
  • Hovered Color : 마우스를 댔을 때
  • Normal Color : 마우스를 뗐을 때

 

 

• 변수의 컬러 변경하기
• 전체 노드 확인
• 테두리와 함께 텍스트 컬러가 바뀌는지 확인

 

 

• Button_Play를 복제해서 버튼 하나 추가
• 간격을 넓히기 위해 두 개의 버튼의 Padding top/bottom 값 10씩 주기

 

 

• Quit의 텍스트 색이 바뀌지 않아 아까의 방식으로 Create Binding 
• WBP를 전용으로 만들어야 하기 때문에 아까의 것을 그대로 쓸 수 없음
• 우리가 만들었던 노드를 복제해서 가져오기(시작/리턴 빼고 중간 노드들)

 

 

3) 버튼에 대한 이벤트 추가하기(Quit 종료)

• Quit 버튼을 누르고 + on Clicked 누르기
• Quit Game 노드 연결 → Quit 버튼을 누르면 화면이 종료되면서 윈도우 화면이 보임

 

 

4) 버튼에 대한 이벤트 추가하기(Play 게임 시작)

• 레벨에서 플레이 할 Blueprint Character를 Auto Posess Player 0으로
• 레벨 블루프린트의 Event Play, On actor Begin Overlap의 실행핀 연결

 

 

• Play 버튼을 누르고 On Clicked 클릭
• Open Level(by Object Reference) 노드와 레벨만 연결하면 됨 
  • Open Level(by Name) / Open Level(by Object Reference)는 무슨 차이?
  • 이름을 직접 입력해 찾는 것과 목록으로 선택하는 것의 차이

 

---

2. Widget 만들기(공간에 붙는 UI)

1) InGame UI 만들기(Resume, Quit)

• Widget Blueprint 만들기
  • 배경판 : 블러, 이미지
  • 버튼 : Vertical Box(중앙 배치) → x : 300 / y : 200, Button을 Vertical Box 하위에 위치
• 버튼 추가하기
  • Appearance → Image에 Material을 넣을 수 있음
  • Material Domain → User Interface, 흰색 컬러 넣기
  • 버튼 Padding Top, Botton 10씩 넣기
• 버튼 컬러 변경
  • Normal : 흰색 / Border / 0.1
  • Hovered : 파랑 / Border / 0.1
  • Pressed : 파랑 / Border / 0.1
• 텍스트
  • Padding 10 / 자간 50 / 사이즈 32

 

 

• UI는 Level Blueprint, Blueprint Class에 작성 가능하지만 Actor는 안됨 →  Input을 받을 수 없기 때문
• Level Blueprint는 전체적인 것을 관할하기 때문에 UI도 이 쪽에 넣기
• WBP_InGame을 Q키를 누르면 열고자 하는 Level Blueprint로 메뉴창을 띄워줄 것
  • 가장 많이 쓰는 인터랙션 키는 q, e → wasd 기준으로 가까운 키임
• 게임 시작 이후 지속적으로 입력을 받아야 하는 것들은 Input Action / Input Mapping Context가 필요하지만 한 번만 누르는 건 노드에서 찾아 사용하기 
  • Q를 누를 때마다 Hello가 출력

 

 

• Q노드와 UI 관련 노드 연결
  • Create Widget
  • Add to Viewport
• Q를 누르면 메뉴 UI가 뜨지만 마우스 화살표가 보이지 않고, 움직이면 뒷 공간이 움직이는 상태

 

 

• Widget Blueprint에서 기능 연결하기
  • Quit → Quit Game 노드 연결
  • Resume →  Remove From parent 노드 연결(self : 자기 자신을 부모로부터 제거)
    • 현재 뷰포트가 Widget의 부모로 되어있기 때문에 그 안의 위젯을 안보이게 하겠다는 것
    • Widget이 뷰포트에 들어가 있는 상태(Add to Viewport) → 관계
• 이제 Resume을 누르면 창이 닫히고, Quit을 누르면 게임이 꺼짐

 

 

• 마우스 커서가 이동하는 것 = Focus가 이동
• UI가 뜨면 focus가 게임 공간에서 UI로 이동되어야 함
• Level Blueprint에서 마우스 커서가 메뉴에서 보이게끔 진행
• Controller가 마우스를 소관하기 때문에 Show Mouse Cursor도 Controller에서 나옴
• Controller를 먼저 노드로 가지고 와야 함 → Get Player Controller
• Mouse Cursor를 제어하기 위해 Set Show Mouse Cursor / Boolean 타입, True로 만들어야 보임

 

 

• 메뉴에 Mouse Cursor가 보이지만 배경이 아직 움직임 → focus가 되지 않았음
• 이 상태로 UI를 클릭하려고 하면 focus가 이동함
• UI로 focus가 이동하도록 해야 함 → Set Input Mode UI Only
  • Input mode는 마우스
  • Set Input Mode UI Only는 한 번 가공된 것이 필요함 → Create Widget 연결

 

 

• 메뉴를 닫으면 wasd가 입력이 안돼 Game Mode로 Focus가 다시 이동되지 않음
• UI Only를 하면 키보드가 작동하지 않은 상황이 발생하기도 함 
  • Set Input Mode UI Only / Game And UI / Game Only 인지 선택을 할 필요가 있음
  • 문제 발생 : 작동은 되지만 Mouse focus가 게임으로 돌아가지 않음
• 키보드의 Input을 받는 것이 Level Blueprint와 Widget Blueprint 모두 되지만, focus는 Game에 있어야 함
• Set Input Mode UI Only를 사용할 것이고 기존의 문제를 해결해야 함

 

 

2) UI가 표시되었을 때 Game 상태와 연관성 체크

1. UI 표시

2. Focus UI의 이동

3. Game의 Character의 Input을 정지

4. UI에서 마우스 선택

---

4-1. UI에 제시된 키 입력

5-1. 3번 상태 유지

6-1. Keyboard Input은 동작 가능

---

7. Game Mode로 Focus가 다시 이동

 

 

 

3) E를 눌렀을 때 열리는 문

• 다가가면 자동으로 문이 열리던 BP_Door의 노드 → Pawn으로 만드는 것이 좋다

 

 

• UI 폴더에 가서 Widget Blueprint(WBP_Door) 만들기
• HUD는 Fill Screen, 현재는 공간에 배치할 것이여서 Desired
• Horizontal Box 사용 

 

 

• 문구 작성 후 'E'는 Border 하위에 넣고, text에는 padding 값 넣기
• 모든 텍스트, border를 중앙정렬
• BP_Door에 이 Widget이 보이도록 Widget Component를 생성하고, Widget Class에 해당 Widget을 선택하고, Draw at Desired Size 체크

 

 

• Blueprint로 글씨를 넣으면 뿌옇고 뭉툭하게 보임
  • Aliasing(계단 현상) : 이미지를 확대하면 깨지는 현상
  • Anti-Aliasing : 픽셀과 픽셀 사이에 중간색 픽셀을 넣음
• 엄청 크게 만든 후 Blueprint 내에서 사이즈를 줄이는 방법도 있음 : 60pt로 놓이고 사이즈를 줄임
• 3D Mesh로 만들어서 불러오기

 

 

• 평상시에는 안보이지만 다가가면 문구가 보이도록 하기
• Visible 체크 해제 후 Blueprint로 제어
• Widget를 Graph에 끌어오고, Set Visibility 노드 연결, New Visibility 체크

 

 

• 'E'를 누르면 문이 열리고, 멀리 떨어지면 UI가 사라지도록 하기
• Event ActorBeginOverlap 노드가 필요함
• 앞으로 다가가면 UI가 생기고 멀어지면 없어짐

 

 

• E를 눌러 문이 열리도록 하려면 키보드 인풋을 받을 수 있도록 해야 함
• BP_Door는 블루프린트 Actor라서 키보드 input을 받을 수 없음
  • 해결 방법 3가지 → Pawn으로 만들기 / 다른 곳으로 옮기기 / 뭔가를 만들어 보기
  • 다른 곳에서 키보드 인풋을 받기로 함 → Level Blueprint에서 감지하고 동작은 BP_Door에서 함
  • 연결 방법 중 이벤트로 연결해주는 방법이 있음 → 사용자가 만드는 이벤트(Custom Event)
• BP_Door에 Custom Event 노드 생성 연결

 

 

• 직접 만든 이벤트이기 때문에 함수를 직접 만들어 불러와야 함
• Level Blueprint에서 불러와야 할 노드를 만듦(E키를 누르면 문이 열리는)
• 이벤트 도어의 대상(BP_Door)을 Taret에 연결
• 해결 사항
  • 문 앞까지 안가고 E를 눌러도 문이 열림
  • 문이 닫히지 않음

 

 

• 문 앞에 도달해쓴가에 대한 Boolean 참 거짓의 흔적을 남겨놓기 → 변수를 만들어 값을 저장하기
• Interaction 변수로 상황을 체크 → True면 문 앞에서 누름 / False면 문 앞에서 누른게 아님
• 문 앞에서 누른게 맞다면 문 열기 실행, 다시 나오면 문이 닫힘

전체 노드

 

• 문 앞쪽까지 UI가 보이도록 복사해서 위치를 바꿔주고 노드 연결(잠깐 보이도록 Visibility 체크했다가 다시 끄기)
• Door Component 하위에 Widget을 넣으면 문이 열릴 때 UI가 따라감