Unreal

[Unreal] 6월 11일 수업정리

k-codestudy 2025. 6. 11. 11:49

오늘은 UI 작업에 대한 수업을 들었다.

 

위젯 생성 후 설정

위젯 블루프린트 생성 ( w-uiMain )
UI 작업 ( 예시 )

  • 보더 : 하나의 자식 위젯을 포함할 수 있는 컨터이너 위젯. 테투리 이미지와 조정 가능한 패딩으로 둘러쌀 수 있는 기회를 제공함.
    즉, 보더 위에 다른 위젯이나 UI들을 배치하여 옮기는 그런 배치 개념이 존재하지 않는다.
    보더의 경우 중요한 포인트는 마우스, 키보드의 이벤트를 받을 수 있다는 점이다 ( 이미지는 그저 그림을 띄우는 것, 물론 보더도 가능 )
  • 캔버스 패널 - 위젯을 임의 위치에 패치하고, 앵커를 설정하며, 캔버스의 다른 자손과 Z 순서를 조정할 수 있도록 해 주는 디자이너 친화적 패널이다. 참고로 Z 순서를  수동 변경할 수는 있어도 위젯은 목록 순서대로 랜더링 되므로, Z순서에 의존하기보다는 목록의 순서를 변경하는 것이 좋다. 

즉 우리는 기본적으로 [ 캔버스 패널 - 보더 - 캔버스 패널 ] 이것이  가장 기본적인 UI 배경화면 세팅인 것이다. 

이후 추가 하고 싶은 부분이 있으면 보더 - 캔버스를 추가한 다음 그 안에 버튼, 프로세스 바 등등을 추가하면 된다.

디테일 패널

  • 앵커 : 캔버스 패널에 UI 위젯 위치를 설정하는 데 사용된다. 앵커는 다양한 화면 크기와 종횡비 설정을 지원을 한다. 최소(X, Y) 및 최대 (X, Y) 앵커 파라미터와 오프셋 파라미터로 각 위젯의 위치가 결정된다.  ( 현재 앵커 설정은 전체화면에 화면을 꽉 채운 것이다 )
  • Tint : 색 설정이 아닌 이미지나 데이터가 있으면 그 데이터에 틴트 값을 곱셈한 것을 적용 ( 알아보기 쉽게 0, 0, 0, 0.1로 설정 )
  • Padding : 디테일 패널 - 보더를 둔 후 확대를 해보면 간격이 떨어져 있을 것이다. 이것을 설정하는 곳이 패딩이다.

이벤트 바인드 호출 시 뜨는 창 ( 디테일 패널 맨 하단에 존재 ) , 현제 Mouse Down에 바인딩을 한 것

  • 이벤트 핸들러 : 바인드를 처음 한 경우 컴파일을 누르게 되면 경고가 뜨게 되는데 이 경고의 의미가 핸들을 가져갔는지 안 가져갔는지 알려달라는 경고이다. ( 우리가 패널 - 보더 - 패널 이런 식으로 되어있는데 핸들을 어디까지 들어가서 호출이 되고 있는가? 에 대해 알려달라는 이야기이다.) 
  • 즉 true, false의 경우가 아닌 메시지 후킹이 어디에서 사용이 되고 있는가라고 이해하는 것이 좋을 거 같다. ( handled이 어디에 있는지 )
  • 그렇기에 마우스 커서가 움직이는 것을 handled이 메시지 후킹으로 게임에 마우스 커서가 영향을 주는는 것을 먹어버리는 식으로 막는 것이 가장 쉬운 방법이다.
  • 추가 방법은 보더 - 디테일 패널 맨 하단에 이벤트라고 존재 -> 원하는 기능에 바인드를 걸어 사용

 

UI 작업

우리는 UI를 한번 생성한 후 백업을 하여 띄우기, 끄기 이런 식으로 할 예정이다.

중요한 부분은 누가 UI를 들고 있냐 인데, 기본적으로 컨트롤러에 UI의 영향을 받기에 컨트롤러에 저장을 해 두는 것이 베스트이다.

우리는 컨트롤러 분리를 하지 않았기에 그냥 캐릭터에 진행할 예정이다.

begin - 시퀀스 - create Widget 호출 (w-uiMain) - 변수 승격 ( 백업, m-uiMain )

  • 키보드 I -> flip flop -> A : m-uiMain -add to viewport ( UI를 화면에 띄움 ) B : m-uiMain - remove from parent ( UI를 화면에서 지움 )

버그 존재 :

  1. UI 쪽 버튼을 누르게 되면 화면고정이 되어야 하지만 고정되지 않고 화면이 따라서 움직임
  2. UI를 동작하게 되면 멈추긴 하는데 그 상태로 UI를 끄게 되면 화면은 움직이지 않고 마우스도 바로 사라지지 않음
  3. 이때 화면이 안 움직여지며 한번 클릭을 해야 움직여진다.

수정 : 

  • get player Controller -> show Mouse Cursor ( UI를 켜면 true, 끄면 false )
  •  TPS : 마우스커서가 뜨는 위치는 크로스에서 시작해야 함 ( 화면 가운데에 떠야 함, 고정 )
    get Player Controller -> set mouse Postion : get viewport size / (플로트) 2 -> 구조체 핀 분할 후 각각 X, Y에 연결 
  • get Player Controller -> set Input Mode Game and UI / set Input Mode Game Only 사용 
    ( UI Only는 절대 사용하지 말 것,  UI Only를 사용하게 되면 UI 쪽에서 모든 컨트롤러의 입력을 먹게 되어 UI를 끄지 못하는 상황이 발생한다. 이것을 해결하기 위해서 UI에서 끄는 기능을 추가해야 한다. 즉, 2중 작업을 해야 하기에 사용하지 말자 )
  • 클릭 후 드래그 하면 화면이 움직여지는데 이것은 위에 보면 버튼 다운에 바인드를 추가하여 막음 ( 위에 handled 부분 ) 

상호작용 -> is Focusalbe

버튼에 문제가 존재한다. 

실행을 하고 버튼을 클릭한 후 스페이스를 누르게 되면 캐릭터가 점프를 하지 않고 버튼이 클릭이 되는 것을 알 수 있을 것이다.

이 기능이 포커싱이라는 기능이다. 즉, 커서를 누르게 되면 포커스가 넘어가는 기능인 것이다.

언리얼은 기본적으로 디폴트 값이 포커스가 On이기에 하나하나 일일이 꺼주는 작업을 해야 함 
버튼이 문제 -> 버튼을 클릭을 한 후 스페이스를 누르면 버튼이 클릭이 될 거임 -> 포커싱이라는 기능 -> 커서를 누르게 되면 포커스가 넘어가는 기능이 있음 

실행

 

간단 요약  ( 기본적인 UI 초기 세팅 )

1. 위젯을 만든다

2. 배경에 보더를 추가한다

3. 마우스 클릭 이벤트 바인드를 생성한 다음 handled 리턴

4. UI 띄울 때 모드 세팅 ( 마우스커서 띄우기, 좌표 맞춤 )

5. UI 끌 때 모드세팅  ( 마우스커서 끄기 )

6. 위젯에 포커서 세팅가능한 UI들은 전부 끈다