[멋사 로켓단 인턴쉽] 10일차 - Result UI & Effect

목차

---

멋쟁이사자처럼 로켓단 인턴쉽

25.08.20

회의록

>> 안건

• 업무 업데이트
  • 질문 혹은 피드백 요청

>> 회의 내용

• 정기미팅
  • 게임플레이 영상 전달
  • 토스API와 앱등록, itch.io 업로드 관련 안내, 기타일정 안내

- 인게임 밸런싱

• DAY 변경에 따른 난이도 변화 기존 요소
  • DAY 수가 오르는 데 걸리는 시간 : 2분
  • 장애물 처리 난이도(처리횟수 증가) : 5일마다 처리횟수 1증가
  • 장애물 등장 확률 : Day * 5 (%) (1일마다 5%증가)
  • 일과시간 실시간 감소주기 : Time.deltaTime으로 줄이고 있음
  • 서류 처리 시 일과시간 증감수치 : 감소는  Day * 5 / 증가는 Day 값대로
• DAY 변경에 따른 난이도 변화 변경계획
  • DAY 수에 따라 난이도 단계 추가 : 5일 단위로 난이도 업, 최대 3단계 (10일부터 최고난도, 도달까지 1분30초 소요)
  • DAY 수가 오르는 데 걸리는 시간 : 10초
  • 장애물 처리 난이도(처리횟수 증가) : 난이도에 따라 처리횟수 1증가 (1 / 2 / 3)
  • 장애물 등장 확률 : 난이도에 따라 등장 확률 증가 (5% / 20% / 40%)
  • 일과시간 실시간 감소주기 : 난이도에 따라 정해진 시간 당 1씩 줄어들도록, (1초 / 0.6초 / 0.2초)
  • 서류 처리 시 일과시간 증감수치 : 난이도에 따라 조정 (감소는 3 / 7 / 12, 증가는 1 / 3 / 5)

▶ 세세한 수치는 QA를 하면서 다듬기로 하다.

 

게임 결과창 수정

>> UI Image 적용

: 게임 결과창 배경 및 퇴근 버튼에 팀원 분께서 만들어주신 UI Image를 적용하고 그에 맞게 UI에 있는 Text들의 위치 조정

--> Rayout Group의 Spacing과 Padding 등의 수치를 조절하여 위치를 조정

 

>> 모든 Score값을 float으로 바꾸면서 결과창에 나오는 SCORE 점수도 소수점이 안 나오도록

: 현재 콤보 수에 따라 점수의 배율이 1.1배와 같이 float 값으로 배수가 되어 올라야하는데, score 값이 int라서 제대로 적용되고 있지 않는 문제를 발견했다. 따라서 모든 score 값을 float 값으로 바꾸게 되었는데, 그러다보니 결과창에 나오는 SCORE 점수도 소수점이 함께 출력되는 문제가 발생했다.

--> SCORE 점수를 출력할 때는 소수점 아래는 표시되지 않도록 수정 ("N0"을 사용하여 천 단위 이상은 콤마로 단위를 표시하도록)

 

- 작성한 코드

// Score Count Up
seq.Append(DOTween.To(() => 0, x => scoreText.text = x.ToString("N0"), resultData.Score, 1.5f);

 

>> 점수가 다 나온 뒤에 퇴근하기 버튼이 나오도록

: 점수가 오르는 중에 퇴근하기 버튼을 누를 수 있기 때문에 점수가 다 나온 뒤에 퇴근하기 버튼이 나오도록 수정

--> SetActive를 결과창이 나올 때 false로 세팅한 후, 점수가 다 나오고나서 true로 전환

 

- 적용한 모습

 

>> New Record시, Text가 아니라 Image로 변경

: New Record시, 나타나는 Text를 팀원 분께서 만들어주신 Image로 변경하고 그에 맞게 NewRecord 효과를 변경

--> 원래는 글자가 나타나서 깜빡이는 효과였지만 만들어주신 Image가 포스트잇의 형태기 때문에 포스트잇이 나타나서 착! 붙는 느낌으로 DOTween을 활용하여 효과를 변경

 

- 작성한 코드

<hide/>
// New Record 시, 효과
private void ShowNewRecordEffect()
{
    newRecordImage.gameObject.SetActive(true);
    
    // 초기화 (작고 안 보이는 상태)
    newRecordImage.color = new Color(1f, 1f, 1f, 0f);
    newRecordImage.rectTransform.localScale = Vector3.zero * 0.8f;
    
    Sequence seq = DOTween.Sequence();
    // Fade In + Scale Up
    seq.Append(newRecordImage.DOFade(1f, 0.5f));
    seq.Join(newRecordImage.rectTransform.DOScale(1.2f, 0.3f).SetEase(Ease.OutBack));
    // 살짝 튕기면서 원래 크기로
    seq.Append(newRecordImage.rectTransform.DOScale(1f, 0.2f).SetEase(Ease.OutBack));
    // 착! 강조
    seq.Append(newRecordImage.rectTransform.DOScale(0.95f, 0.1f).SetEase(Ease.InQuad));
    seq.Append(newRecordImage.rectTransform.DOScale(1f, 0.15f).SetEase(Ease.OutQuad));
}

 

- 적용한 모습

 

>> 퇴근하기 버튼을 눌렀을 때 FadeOut 효과 추가

: 퇴근하기 버튼을 눌렀을 때 곧바로 Title로 가는 것이 아니라 화면 전체가 서서히 검은색이 되면서 Fade Out 된 다음 Title로 이동하도록 구현

--> ResutlUI에 새로 Panel을 만든 뒤, 퇴근하기 버튼을 누르면 CanvasGroup의 Alpha가 1이 되도록 코드 작성

 

- 버그 발생 및 해결

: 분명 'FadeOutPanel'의 Anchor를 stretch로 설정했음에도 아래 사진과 같이 일부분만 가려지는 버그가 발생했다.

--> 알고보니 아래 사진과 같이 ResultUI의 부모 Canvas인 PopupUICanvas에서 ResultUI가 stretch로 설정되어 있지 않았다.

(좌) 버그 발생 상황 / (우) 문제가 된 부분

 

▶ PopupUICanvas의 ResultUI를 stretch로 설정하여 버그 해결

(좌) 변경한 설정 / (우) 버그가 해결된 모습