[TIL 24.04.17] 인게임 UI 개선 + 코드 리팩토링

오늘은 UI 작업과 클린코드로 바꾸기 위주로 했다. 

 

목   차

 

---

UI 변경

더 깔끔한 UI로 바꾸어 사용자가 보기 편하게 했다. 필요한건 추가하기도 했다. 그리고 배경화면에 쓸 이미지를 찾아오고 인게임 화면은 내가 직접 바꿨다.

아웃라인과 쉐도우 변경

스타트 씬에서는 Pause 버튼, 제목, 스타트 버튼, 그리고 가운데에 계속 바뀌는 카드 3개에 각각 Outline 컴포넌트와 Shadow 컴포넌트를 추가해 깔끔한 UI를 만들었다.

 

Main씬에서는 일부는 Outline을 추가해주었지만, 일부는 그림자만 넣는 편이 더 깔끔해서 Shadow만 있다. 마찬가지로 Pause버튼도 추가해주었고, 끝 판넬의 요소들에도 필요한 요소를 추가해주었다.

 

대기중 화면 배경색은 흰색인 편이 더 깔끔한 것 같아 흰색으로 바꾸어주고 네모반듯한 모습이 심심해서 Shadow에 색을 입히고 투명도를 낮추어 모양을 바꾸어주었다.

 

시간을 가시적으로 보여주는 UI 추가

시간이 비었을 때 보이는 TimeEmpty와 찼을 때 보이는 TimeFull 이미지를 사용했다. 그리고 Image에서 Image Type을 Filled로 바꾸고, Fill Method를 Horizontal로 바꾸고, Fill Origin을 Left로 한다. 이제 image.fillAmount를 스크립트에서 조정해주면 UI 이미지도 같이 변하게 된다. 이걸 (현재 시간 / 총 시간) 으로 계산을 한 후 .fillAmount 함수에 대입해주면 정상적으로 시간 바가 줄어드는 것을 확인할 수 있다.

 

---

 

그 외 구현들.

MBTI 카드 UI 만들기

인터넷에 적절한 이미지를 가져와서 크기를 맞추기만 하면 되는 간단한 작업이다. Image 파일 이름을 활용할 수 있게 기존에 쓰던 이름과 같은 규칙으로 했다.

TryBox 움직이는 애니메이션 통일

일종의 Bug 픽스에 가깝다. 시간초과일 때는 EndText가 먼저 나오고 아닐 때는 TryBox 애니메이션이 먼저 움직이는 데다가 개인 컴퓨터 성능에 따라 애니메이션이 재생되는 중에 끊기는 일도 있었다. 그래서 애니메이션을 작동시키는 함수를 Coroutine 함수 안으로 옮기고 지연 시간을 적절히 조정했다. 하는 김에 마지막 카드가 뒤집히는 중간에 EndPanel이 뜨는 문제도 해결했다.

LevelScene 개편.

조원 "이승영"님이 Level2에서 카드 나눠주는 개수를 16장에서 24장으로 늘려주셨다. 하지만 조원끼리 QA를 하면서 Level2를 한번에 클리어한 사람이 나밖에 없는 난이도 조절 문제(?)가 있어서 내가 Level3, 4를 MainScene과 동기화할 겸 해서 다시 만들었다. "박재균"님이 Build Settings에서 Index를 불러와서 Scene을 실행하도록 하셨는데 나는 이 기능에 미숙해 재균님한테 배워서 Scene 조정을 마쳤다.

---

 

마무리

오늘 드디어 맨땅의 헤딩을 해대던 Git에 대한 강의를 들었다. 이미 헤딩을 통해 알아낸 내용이 대부분이라 아쉬우면서도 우리 조가 올바른 방향으로 나아가고 있다는 사실에 뿌듯함을 느꼈다. 유록 매니저님이 잠깐 언급하셨던 Pull Request에 관한 내용이 없어서 약간 아쉬울 뻔했으나 친히 조로 찾아오셔서 직접 Pull Request하는 법을 알려주셨다.

 

이제 내일은 서로의 코드를 공유하면서 설명해주는 시간과 발표 준비를 하는 시간을 가질 것이다. 자꾸 더 나은 게임을 만들고 싶은 욕심이 생기지만, 발표를 하려면 내가 구현하지 않은 부분까지 완벽하게 이해를 해야 할요를 느꼈기에 추가적인 기능은 거의 없을 예정이다.