250304 TIL - 팀 프로젝트에서 UI 제작 및 연동, 아이템 머티리얼 작업

오늘의 계획

1. 사망 UI 제작 및 플레이어 연동

2. 승리 UI 제작 및 전용 레벨 제작

3. 아이템 이펙트 추가 등 아이템의 가시성 증가를 위한 작업

4. 로딩에서 사운드 추가

 

1. 사망 UI 제작 및 플레이어 연동

사망 UI는 기존에 제작해 두었던 일시정지 UI를 재활용하기로 했다.

다만, 사망 시에는 좀 더 다른 레이아웃을 갖기를 원했다.

 

다음의 조건을 충족하기를 바랬는데, 사망이 명확히 보이길 바랬기 때문이다.

- 사망을 안내하는 제목?이 가운데에 위치할 것.

- 사망이니만큼 배경도 좀 더 빨갛게

- 플레이어의 마우스가 재시작 혹은 게임 종료만 클릭할 수 있도록 할 것.

재활용하되, 머티리얼의 수정이 좀 필요했다.

다른 것들은 그냥 Size Box를 조절하는 것 정도로 가능했으나 머티리얼은 로직의 추가가 필요했다.

기존 로직에 Multiply 노드와 If 노드를 추가해서 변수에 따라 빨간색이 곱해진 어두운 배경이 나오도록 수정했다.

2. 승리 UI 제작 및 전용 레벨 제작

승리 UI는 기존에 만들어 두었던 하얀색 배경의 머티리얼을 활용했다.

 

레이아웃에서 고려해야 했던 점은 다음과 같았다.

- 하얀색 배경을 사용한다. 따라서 글자는 검정색 혹은 다른 잘 보이는 색상을 사용해야 한다.

- 승리는 파란색으로 표기한다. 대부분의 경우 유저에게 보기 좋은 느낌을 주기 위해서 빨간색 대신 사용하는 것으로 보인다.

- 우리 게임에서는 다음과 같은 정보를 GameInstance에서 보관하고 있으므로 해당 정보를 표기할 수 있게 텍스트를 만들고 변수로 설정할 수 있는 함수가 필요하다.

1. 플레이 타임

2. 처치한 몬스터 수

3. 발사한 탄알 수

4. 몬스터에게 입힌 피해량

5. 몬스터에게 받은 피해량

6. 플레이어의 피격 횟수

7. 플레이어의 회피 횟수

위 정보들을 바탕으로 만들어낸 UI 레이아웃

- 재시작 시 아예 메인 메뉴로 돌아가도록 기존과 다르게 재시작 버튼을 구성했다. 게임을 끝냈기 때문이다.

- 각종 값을 설정해주는 함수. 시간의 경우 좀 더 복잡한 형태의 변환이 필요하기 때문에 별도로 Collapse Node로 처리했다.

3. 아이템 이펙트 추가 등 아이템의 가시성 증가를 위한 작업

아이템이 레벨에 드랍되었을 때 다음과 같은 문제가 있었다.

 

1. 물과 같은 표면 아래에 드랍되는 경우, 피직스로 인해 바닥에 떨어져 보이지 않는다.

 

2. Emmisive가 동작하는 범위가 너무 작고 값이 작아서 발광이 보이지 않는다.

 

3. 1과 2를 해결하더라도 바닥에 아이템이 떨어지기 때문에 유저의 눈에 띄지 않는다.

 

1의 경우 아이템이 몬스터의 Location에서 스폰되기 때문에 해당 위치에서 스폰되고 난 다음에 이동하지 않도록 Mobility를 Static으로 전부 바꾸는 방식으로 해결했다.

 

2의 경우 기존 머티리얼에서 R,G,B 채널에서 몇가지 별도의 Subtract, Multiply, Clamp 노드를 활용한 로직을 통해서 Emmisive가 작동할 부분을 넓혀주고 선명도를 증가시켰다.

마젠타 색상이 있는 원본 텍스처에서 힌트를 얻어 요리조리 테스트 해보면서 어떤 부위가 나올 수 있는지 테스트했다.

Multiply의 Output이 Emmisive Color Input에 들어갈 최종 값이 된다.

3의 경우 별도의 Niagara 이펙트를 추가하여 디아블로 스타일로 아이템이 드랍되었을 때, 하늘로 빛이 나오도록 컴포넌트를 추가하여 해결했다.

4. 로딩에서 사운드 추가

메인 메뉴 레벨, 일반 몹 레벨, 보스 레벨에서는 BGM이 적용되어 있지만 아직 로딩 레벨에서는 적용되어 있지 않았기에 해당하는 BGM을 찾아 Play Sound2D 노드를 이용하여 레벨 블루프린트에 추가해 주었다.