[ChopChop] 2. UI로 고통받기
[2024-03-11]
UI에 힘을 쏟았다.
다음 유튜브 영상을 따라 Common UI 사용하려고 했는데 버그가 많았다.
https://www.youtube.com/live/TTB5y-03SnE?si=hpLlhLetT_p720Vt
Common UI를 적용해도 안되고 프로젝트를 재시작하면 다시 되고 그런 문제가 있었다.
이 문제를 파악하기 위해 많은 시간을 들였다. 껐다 켰다 만들었다 없앴다 튜토리얼 다시 따라 했다가…
결국 일부 기능은 내가 만들기로 했고 Widget Push 기능만 유용하게 사용했다.
Widget Push는 일시정지 메뉴와 확인 프롬프트를 띄우는데 자연스럽게 작동하게 해 주었다.
[2024-04-25]
용량을 줄이기 위해 프로젝트를 수정했다.
우선 미사용 플러그인을 해제했다. OpenImageDenoise가 48mb를 차지했다.
그리고 빌드시 Prerequisites를 미포함시켰다.
언리얼 Shipping빌드를 하면 실행파일이 2개 있다.
- Windows\[게임이름].exe
- Windows\[게임이름]\Binaries\Win64\[게임이름]-Win64-Shipping.exe
가장 상위에 있는 짧은 이름의 exe를 실행하면 공통재배포패키지를 확인하고,
이게 있으면 Shipping.exe를 실행, 없으면 Prerequisites 설치 프로그램을 실행한다.
그런데 스팀, 스토브 등 각 플랫폼에 빌드 업로드 시 재배포 가능 요소를 설정해 줄 수 있다.
나는 다음의 것을 체크했다.
- DirectX – June 2010, 스토브는 DirectX 11
- Visual C++ Redist 2022
덕분에 언리얼에서 제공하는 Prereq를 제거하여 게임의 용량을 줄일 수 있다.
참고로 ChopChop의 용량은 약 310MB이다.
[2024-08-26]
나무 팬 횟수에 따라 계절이 변경되게 했다.
그리고 계절에 따라 날씨가 무작위로 선택되게 했다.
웨이트 값을 사용해서 날씨 확률이 조정되게 했다.
계절별 웨이트를 Set로 만들어서 현재 계절에 따라 생성 가능한 날씨가 달라지게 했다.
Weight 적용과 확인에 많은 시간을 쏟았다.
[2024-08-30]
눈이 내릴 때 오브젝트에 쌓이게 했다.
재질을 수정하여 Normal +Z 방향에 눈 재질이 보이게 한 것이다.
[2024-09-22]
UI를 갈아엎었다.
나는 게임의 UI에서 다음의 기능을 원했다.
- 마우스, 키보드, 패드를 통해 UI를 탐색할 수 있어야 한다.
- 마우스, 키보드, 패드 각 버튼을 누르면 어떤 기기로 눌린 것인지 인식한다.
- 각 기기 전환 시 자연스럽게 반응해야 한다.
여기서 '반응'에 대해 살펴보자면
- 마우스 사용 시 컴포넌트의 포커스를 보여주지 않는다. 호버 상태일 때만 보여준다.
- 키보드, 패드로 변환 시 포커스 된 컴포넌트를 표시한다.
- 마우스로 변경하면 컴포넌트 포커스가 사라진다.
- 키보드, 패드로 상하좌우 움직임 시 예상했던 컴포넌트로 포커스가 이동해야 한다.
여기서 컴포넌트란 UI를 구성하는 각 요소(버튼, 콤보박스, 체크박스 등)를 말한다.
우선 UI 제작 초반기. 컴포넌트 포커스를 보여주기 위해 배경색이 바뀌게 하고 싶었다.
엔진에서 제공하는 기본 내비게이션 시스템은 포커스 된 컴포넌트 주위를 파란색 테두리로 둘러싸서 표시한다.
잘 보이지가 않는다.
문제는 이걸 변경하는 옵션이 없었다. 바꾸기 위해서는 엔진 코드를 수정해야 했다.
이건 배보다 배꼽이 커지는 문제였기 때문에 다른 방법을 찾아보다
이것에만 매몰된 것 같아 잠시 UI는 생각하지 않기로 했다.
그렇게 시간을 보내다 우연히 유튜브 영상을 보게 되었다.
https://youtu.be/kPVqewOgmNo?si=pO9bihj7Wa8FrqLR
내가 유용하게 보고 있는 Ryan Laley님의 영상이다.
이걸 못 봤다니… 가까운 곳에 답이 있어 놀랐다.
영상에서 핵심은 OnAddedtoFocusPath를 사용하는 것이다.
UserWidget이 Focus 받으면 이것이 호출되므로
이걸 통해 컴포넌트의 배경색을 변경하면 내가 원하던 UI을 만들 수 있었다.
오랫동안 고민하던 문제를 해결해서 많이 기뻤다.
[2024-09-28]
키매핑 기능을 추가했다.
키 입력은 기본 제공하는 InputKeySelector을 사용했고 여기서 얻은 정보를 바탕으로 키를 변경해 주었다.
나는 Enhanced Input을 사용 중인데 이에 맞게 기존 키를 찾아 변경하는 방법을 알아야 했다.
이 정보도 이리저리 흩어져 있어서 모으는데 시간이 걸렸다.
키 매핑 이미지를 넣을까 했는데 다음 게임에 넣어도 문제없을 것 같아서 그대로 출시했다.
글자만으로 충분히 키 구분이 가능하고 모든 버튼에 맞는 이미지를 찾는 건 그 노력에 비해 중요성이 크지 않다고 느껴졌다.
문제점으로는 안 예뻐 보인다는 것, 한눈에 키 확인이 안 된다는 것이 있겠다.
참고로 에디터에서 지원하는 언어에는 4가지가 있는데,
게임의 Culture를 변경하면 각 언어에 맞게 키에 대한 텍스트도 번역이 된다. 이건 좀 흥미로웠다.
몇몇 튜토리얼에서 키 이름을 통해 어떤 키가 눌렸는지 확인하던데, 이 언어 문제 때문에 그게 불가능했다.
[2024-09-29]
UI 내비게이션에 관한 문제가 있었다.
- 위아래 버튼을 누르면 위아래 컴포넌트로 이동한다.
- 맨 위에서 위 버튼을 누르면 맨 밑의 컴포넌트로 이동한다.
- 두 개의 다른 길이의 리스트가 좌우에 있으면 비슷한 높이에 있는 컴포넌트끼리 좌우로 이동할 수 있다.
이것들이 너무도 당연한 이야기지만 이렇게 작동하게 하는 것이 쉽지 않았다.
에셋과 튜토리얼을 찾아봐도 모든 조건을 한 번에 만족하는 것은 없었다.
여기서도 흩어진 지식을 모아 합쳐야 했다.
버튼을 눌러도 다음 컴포넌트로 이동하지 않는 문제는, UI 내비게이션을 임의로 지정해 주면 된다.
UI의 Navigation 설정에서는 특정 방향으로 이동할 때 어떻게 작동할지 설정할 수 있다.
본디 Escape라면 알아서 해당 방향에 있는 UI로 찾아가는데 내 일시정지 UI에서는 왼쪽으로 가지지 않았다.
또한 설정에서 위아래로 움직일 때 Reset버튼의 너비가 좁아서 선택이 안 되는 문제가 있었다.
문제가 있는 컴포넌트는 Navigation에서 Escape를 Custom으로 하고 함수를 만들어 원하는 컴포넌트를 Return 하면 된다.
맨 위에서 위버튼을 누르면 맨 아래로 가는 것은 각 컴포넌트를 감싸고 있는 부모의 내비게이션을 설정해 주면 된다.
VerticalBox에서 Up, Down시 Wrap 되도록 설정했다.
