Odin Inspector와 DOTween으로 만든 캐릭터 선택창 예제

오늘은 오딘 인스펙터와 두트윈을 가지고 캐릭터 선택같은 느낌의 예제를 만들어보려고 한다.

 

최종프로젝트에서 가능하다면 ? 오딘으로 몇가지 만들어보고싶은 툴들이 있어서 연습할 겸 해보자

 

그냥 활용만 해보는 것이기에 혹시나 따라한다면 좀 더 효율적으로 바꿔주시면 감사하겠습니다...

 

우선 캐릭터 데이터를 담아줄 오딘의 ? ScriptableObject 클래스를 만들어준다.

(뭐라고 해야하지 하여튼 오딘형식의 ?)

 

using Sirenix.OdinInspector;
using UnityEngine;

[CreateAssetMenu(fileName = "CharacterData", menuName = "Game/CharacterData")]
public class CharacterData : ScriptableObject
{
    [PreviewField(50, ObjectFieldAlignment.Center)]
    [Tooltip("캐릭터의 아이콘")]
    public Sprite characterIcon;

    [Tooltip("캐릭터의 이름")]
    public string characterName;

    [TextArea]
    [Tooltip("캐릭터 설명")]
    public string description;
}

 

그리고 예제로 사용할 데이터 몇가지를 만들어놓자.

 

그리고 캐릭터 매니저(오딘)를 만들어주고 에디터에서도 빈 GameObject를 만들고 아래의 스크립트를 컴포넌트로 추가해주자

 

using Sirenix.OdinInspector;
using System.Collections.Generic;
using UnityEngine;

public class CharacterManager : MonoBehaviour
{
    [TableList]
    [Tooltip("캐릭터 데이터")]
    public List<CharacterData> characters;
}

 

컴포넌트에 추가했다면, 위에서 만든 데이터들을 인스펙터 창에서 TableList에 넣어주자

 

이제 UIAnimationController스크립트를 만들고 캔버스에 컴포넌트로 추가하고 자식으로 이미지(아이콘을 표시할것임)와 텍스트(이름을 표시할것임)를 만들어주고 필드에 컴포넌트를 연결하자

using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class UIAnimationController : MonoBehaviour
{
    public Image characterImage;
    public Text characterNameText;
    public Transform characterModel;

    public void PlaySelectAnimation(Sprite icon, string name)
    {
        characterImage.sprite = icon;
        characterImage.color = new Color(1, 1, 1, 0);
        characterImage.DOFade(1, 0.5f);

        characterNameText.text = name;
        characterNameText.rectTransform.DOScale(Vector3.one * 1.2f, 0.2f).SetLoops(2, LoopType.Yoyo);

        characterModel.DORotate(new Vector3(0, 360, 0), 1, RotateMode.FastBeyond360).SetEase(Ease.OutBack);
    }
}

 

마지막으로 아래의 스크립트를 작성해주고~

 

public class CharacterSelector : MonoBehaviour
{
    public CharacterManager characterManager;
    public UIAnimationController uiAnimationController;

    public void SelectCharacter(int index)
    {
        var selectedCharacter = characterManager.characters[index];
        uiAnimationController.PlaySelectAnimation(selectedCharacter.characterIcon, selectedCharacter.characterName);
    }
}

 

필요한 참조는 알아서 해주자.. 그리고

 

SelectCharacter에 원하는 인덱스 값을 넣어주면 작동을 한다.

 

작동영상은 아래와 같다.

 

 

진짜 참 해보면서 느낀건데 너무 간단하게 멋진 결과를 만들어낼 수 있는것같다.

이런 툴을 활용해서 상상하는걸 쉽게 만드는게 유니티의 장점인것같다.

 

너무 코드에 설명을 안적었나 ? 하고 위로 올라갔는데 설명할게 없다;