카드 애니메이션 만들기 1

지금 카드의 움직임은 부모의 위치로 바로 이동되기 때문에 부자연스럽고 뚝뚝 끊어져보인다. 이를 해결하기 위해 실제 오브젝트와 비주얼을 분리하고, 실제 오브젝트의 위치과 비주얼을 실시간으로 보간하여 자연스러운 움직임을 만들어보기로 했다.

일단 테스트를 해보자

일단 테스트를 해봤다. 하얀 네모를 만들어서 카드를 계속 따라다니게 해봤음.

public class CardVisual
{
	[SerializeField] private Card parent;
    [SerializeField] private float followSpeed = 5.0f;
    
    private void Update()
    {
        transform.position = Vector3.Lerp(transform.position, parent.transform.position, followSpeed * Time.deltaTime);
    }
}

뚝뚝 끊어지던 움직임에서 연속적이고 부드러운 움직임으로 바뀌었음. 괜찮은거 같으니 진행시켜!

기획이 완벽하지 않으면 해야할 일은 두배가 된다

비주얼과 카드를 나누기로 결정했으니 카드를 뽑을때 이미지를 불러오던 코드도 비주얼쪽으로 옮겨줘야한다. 또 드래그시 최상단의 카드의 부모를 바꿔 가장 앞에 보이게 해놨던 코드도 이쪽으로 옮겨줘야함. 괜히 해놨잖아? 여기서 기획의 중요성을 또 한번 느끼고 간다. 미리미리 만들걸 구상해놓자.

public class CardVisual : MonoBehaviour
{
    [SerializeField] private Card parent;
    [SerializeField] private float followSpeed = 5.0f;
    [SerializeField] private Image Image;
    private bool initialized;
    private Sprite frontImage;
    private Sprite backImage;
    
    public void Initialize(CardData cardData, Card card)
    {
        initialized = false;
        Image = GetComponent<Image>();
        parent = card;
        GetImage(cardData);
        initialized = true;
    }


    private void GetImage(CardData card)
    {
        if (card.type != CardType.Joker)
        {
            frontImage = ResourceManager.Instance.Load<Sprite>($"Cards/{card.suit.ToString()}{(int)card.value}");
        }
        else
        {
            frontImage = ResourceManager.Instance.Load<Sprite>($"Cards/JockerRed");
        }

        Image.sprite = frontImage;
    }

    private void Update()
    {
        if(initialized)
        {
            FollowParentObject();
        }
    }

    private void FollowParentObject()
    {
        transform.position = Vector3.Lerp(transform.position, parent.transform.position, followSpeed * Time.deltaTime);
    }

    private void OnPointerEnter()
    {

    }

    private void OnPointerExit()
    {

    }
}

간단하게 초기화만 가능한 카드비주얼 컴포넌트를 만들어주고, 생성과 풀링은 카드매니저에 때려박아버렸다. 부드럽게 움직이긴 함. 근데 다시 계층구조 손보러 가야됨;; 히드라인가? 하나를 잘라내면 머리가 두개 생김