[TIL] 14주차 1일 DOTween

 

플레이어 제작을 어느정도 마치고

UI제작에 참여했다.

 

스킬슬롯 UI를 만들었는데

DOTween을 이용하여 만들었다.

 

DOTween은 일종의 에디터 에셋인데 원래는 코루틴으로 여러 연산을 통해서 만들어야하는

UI의 쿨타임 표시, 부드러운 움직임 등을 편하게 만들어주는 에셋이다.

 

public class SkillUI : UIBase
{
    Player player;
    Sprite icon;
    Image image;
    SkillUI skillUI;
    public List<PlayerSkillSO> skillList;
    public List<Image> skills;
    public GameObject firstSlot;
    public GameObject secondSlot;

    private float skillSwapSpeed = 0.5f;
    private bool isSwap = false;

    private Vector3 firstSkillSlot;
    private Vector3 secondSkillSlot;

    private void Start()
    {
        skillUI = GetComponent<SkillUI>();
        player = GameManager.Instance.Player;
        image = GetComponent<Image>();
        icon = image.sprite;
        skillList = player.playerEquipSkill;
        firstSkillSlot = firstSlot.transform.position;
        secondSkillSlot = secondSlot.transform.position;
        OnSkillUpdate();
    }

    public void OnSkillUpdate()
    {
        for (int i = 0; i < skillList.Count; i++)
        {
            skills[i].GetComponent<Image>().sprite = skillList[i].SkillIcon;
        }

    } 

    public void SkillSlotMover()
    {
        if(!isSwap)
        {
            secondSlot.transform.DOMove(firstSkillSlot , skillSwapSpeed).SetEase(Ease.InOutQuad);
            firstSlot.transform.DOMove(secondSkillSlot , skillSwapSpeed).SetEase(Ease.InOutQuad);
            isSwap = true;
            secondSlot.transform.SetAsLastSibling();
        }
        else
        {
            secondSlot.transform.DOMove(secondSkillSlot, skillSwapSpeed).SetEase(Ease.InOutQuad);
            firstSlot.transform.DOMove(firstSkillSlot, skillSwapSpeed).SetEase(Ease.InOutQuad);
            isSwap = false;
            firstSlot.transform.SetAsLastSibling();
        }
        
    }
}

전체코드

 

DOTween을 쓰려면 using DG.Tweening;을 써야한다.

 

내가 오늘 사용한 함수는

transform.DOMove인데 

transform.DOMove( Vectro3 도착 위치 , float 걸리는 시간 )

을 써주면 된다.

이것만으로 코루틴을 사용한 UI 애니메이션을 만들 수 있다.