애니메이션 효과를 구현하기 위해서는 세가지 Image가 필요하다.
Background, Animation, Cur Image 가 필요하다.
여기서 백그라운드 이미지는 피 색을 7가지로 했을 경우에 curImage의 색상보다 index -1 값을 가지게 해서 마치 다음 피통을 미리 보여주는 효과를 가지게 한다.
그리고 Animation 은 피가 깍이는 효과를 애니메이션 효과를 넣어서 표현하는 것이다.
여기서 DOTween을 쓰게 되면 애니메이션을 주기위해 lerp timer를 넣어서 어쩌고 저쩌고 해서 마치 선형적으로 내려가는 듯이 보이는 효과를 주는 것을 알아서 해준다. 그래서 코드가 단순해졌다.
그리고 그 위에 현재 피통을 보여주고 피가 깍이는 순간 깍인 곳까지 바로 이동한다.
그렇게 하면 피가 깍이는 순간 바로 내려가고 내려간만큼 애니메이션 효과가 느리게 따라오면서 애니메이션 효과를 주면서 피가 깍이는 듯이 보이게 된다.
이 과정을 다른 블로그를 참조로 해서 만들었더니 대략 100줄 정도의 코드가 필요했는데 이게 Stretch 모드를 아닌 상황에서 구현이 되어 있었는데, Stretch 모드를 적용하니 먹통이 되버린 것이다...
그래서 난감했는데 제미나이에게 물어보니 DOTween을 추천해줬다. AI가 나보다 훨씬 코드를 잘 아는 이상황이 특이점이 이미 와버린듯 하다.
그래서 DOTWEEN을 적용하니 10줄로 깔끔하게 떨어져 버렸다.
아래 코드를 참조하면 된다.
public void AnimateBarWidth(float targetRatio, Color curBarColor, Color backBarColor)
{
Vector2 targetAnchorMax = new Vector2(targetRatio, mainBarRectTransform.anchorMax.y);
// -------------------------------------------------------------
// 1. [즉시 동작] 빠른 바 (mainBarRectTransform) 처리: HP 표시 및 색상 갱신
// A. 앵커를 목표 위치로 즉시 설정 (뒤쪽의 느린 바가 노출되도록)
mainBarRectTransform.anchorMax = targetAnchorMax;
// B. 빠른 바의 색상을 Presenter가 결정한 최종 색상으로 즉시 설정합니다.
if (mainBarImage != null)
{
mainBarImage.color = curBarColor;
backImage.color = backBarColor;
}
// -------------------------------------------------------------
// 2. [천천히 동작] 느린 바 (damageMarkerRectTransform) 처리: 배경 애니메이션
damageMarkerRectTransform.DOKill(true); // 이전 트윈 정리
// A. 색상 고정: 느린 바의 색상을 인스펙터에 설정된 고정 배경 색상으로 즉시 설정
// * 색상 깜빡임 로직이 모두 제거됨 *
if (damageMarkerImage != null)
{
damageMarkerImage.color = slowBarOriginalColor;
}
// B. 앵커(크기) 애니메이션 (천천히 줄어들기)
// 이 부분이 유일한 애니메이션입니다.
damageMarkerRectTransform.DOAnchorMax(targetAnchorMax, duration)
.SetEase(Ease.OutQuad);
제미나이의 도움을 받아 작성하였습니다.
댓글 없음:
댓글 쓰기