[개발 일기] 스테이지 선택 화면 만들기

development diary

When: 1학년 8월 15일

 

Developed: 스테이지 선택 UI

• 프로젝트 : 전생했더니 카드를 던지게 된 건에 대하여 / 탈주닌자 동아리
• 소요 시간 : 약 4일
• 설명 : 스테이지를 선택할 때의 UI를 어떤 식으로 해야 식상하지 않고 쉽게 원하는 스테이지에
  들어갈 수 있을까 생각해 보다가 마우스를 많이 움직이지 않으려면 한 화면에 스테이지를
  모두 담는 것이 좋을 것 같다고 생각했고, 마침 스테이지가 많은 게임이 아니었기 때문에
  5개의 스테이지를 한 화면에 담는 방식으로 제작하게 되었습니다. 하지만 정적인 UI보다는
  완성도를 더욱 높일 수 있게 깔끔함과 생동감을 챙길 수 있는 동적인 UI를 만들어 보고 싶었기
  때문에 고민을 해보다 평행 사변형 모양의 버튼이 대각선으로 날아오는 연출을 사용하면
  좋을 것 같아 그렇게 만들게 되었습니다. 버튼이 화면을 꽉 채우는 크기이기 때문에
  버튼 안에 여러 정보를 넣을 수 있었는데, 글자를 많이 넣기보다는 스테이지의 콘셉트를
  미리 볼 수 있게 해주는 그림을 넣는 것이 좋을 것 같다고 생각했고,
  맵도 찍어야 했기에 맵의 미리 보기 그림을 그려 스테이지 안에 넣을 수 있게 하였습니다.
  포토샵으로 12도만큼의 각도를 가진 평행 사변형을 그려서 Mathf를 사용해
  12도 각도로 날아올 수 있게 하였습니다. 하지만 만들 때 소수점을 빼는 것이 계산하기 편할 것
  같아 빼서 만들었더니 계산한 값이 생각한 위치와 조금 차이가 나 하드코딩을 조금 추가하게
  되었습니다. 동적이게 만들되, UI의 기본적인 목적을 잊지 않게 조절하는 것이 어려웠던 것
  같습니다.
• 사용한 코드 : (링크) 
• 코드 설명 :
  • 사각형 움직임: 이 코드는 DOTween을 이용해 오른쪽으로 12도 만큼 기울어진 평행 사변형이
    하늘에서 왼쪽으로 12도 방향으로 날아와 원하는 위치로 이동하는 코드입니다. 
  • 이벤트 호출: 코루틴을 이벤트로 전부 호출하는 코드를 짰는데 StartCoroutine을 사용하면 
    Invoke를 해도 한 가지의 코루틴만 호출된다는 것을 깨닫고 처음에는 void로 한 다음
    void 메서드 안에서 코루틴을 호출하는 방식으로 했는데, 검색을 해보니 GetInvocationList
    라는 메서드를 이용해 대리자를 구독하는 메서드들을 배열로 반환하는 메서드가 있다는 
    것을 알아서 그것을 이용해 foreach 문으로 모든 코루틴을 호출하는 코드를 짜게 되었습니다.
• gif : 

 

 

Result: UI를 만들다 보니 조금 욕심이 나서 봤을 때 시각적으로 좋은 UI를 만들고 싶어 져서 시간을 들여 만들어 보았는데, 멋지게 만드는 것도 어렵지만, 스테이지를 선택하는 UI라는 것을 계속 생각하며 멋에 치중되지 않게 만드는 것이 어려웠던 것 같습니다.
딱 봤을 때 어떤 스테이지인지 조금 알려주어 기대감을 주게 하고 싶었는데 목적은 달성한 것 같아서 만족하고 있습니다.