🎡 Unity 룰렛 뽑기 시스템 구현하기 (ScriptableObject + UI)

오늘은 Unity에서 룰렛 형식의 뽑기 시스템을 직접 구현해봤다.
아이템 데이터는 ScriptableObject로 관리하고, 룰렛 칸은 UI로 자동 생성되도록 했다.

✅ 구현 목표

• 룰렛 원판 위에 아이템 정보가 UI로 표시되고

• 버튼을 누르면 룰렛이 회전하면서 아이템을 랜덤으로 뽑고

• 각 아이템은 지정한 확률에 따라 뽑히도록 구성

🧩 데이터 구성 – ScriptableObject

아이템 정보는 GachaItemData라는 ScriptableObject로 만들고,
이 안에 이름, 확률, 아이콘, 설명을 저장했다.

[CreateAssetMenu(fileName = "NewGachaItem", menuName = "Gacha/Item")]
public class GachaItemData : ScriptableObject
{
    public string itemName;
    public float probability;
    public Sprite icon;
    [TextArea] public string description;
}

그리고 GachaDatabase 라는 ScriptableObject에서
이 아이템들을 배열로 모아서 관리했다.

🌀 룰렛 UI 배치 – GachaWheelUI.cs

GachaWheelUI 스크립트에서는 원판 위에 각 아이템 정보를 담은 UI(Sector)를 자동으로 생성한다.

void CreateWheelSectors()
{
    int itemCount = gachaDatabase.items.Length;
    float segmentAngle = 360f / itemCount;

    for (int i = 0; i < itemCount; i++)
    {
        var item = gachaDatabase.items[i];
        GameObject sector = Instantiate(sectorPrefab, wheelParent);

        RectTransform rt = sector.GetComponent<RectTransform>();
        rt.anchorMin = rt.anchorMax = new Vector2(0.5f, 0.5f);
        rt.pivot = new Vector2(0.5f, 0f); // 중심 아래쪽
        rt.localPosition = Vector3.zero;
        rt.localScale = Vector3.one;

        float angle = -segmentAngle * i - (segmentAngle / 2f);
        rt.localRotation = Quaternion.Euler(0, 0, angle);

        // UI 설정
        rt.Find("Icon").GetComponent<Image>().sprite = item.icon;
        rt.Find("NameText").GetComponent<TextMeshProUGUI>().text = item.itemName;
        rt.Find("ProbabilityText").GetComponent<TextMeshProUGUI>().text = $"{item.probability}%";
        rt.Find("DescriptionText").GetComponent<TextMeshProUGUI>().text = item.description;
    }
}

여기서 중요한 건 RectTransform의 Pivot과 Anchor 설정이다.
(0.5, 0)로 설정하면 중심 기준으로 바깥쪽으로 펼쳐지듯 배치된다.

🎯 룰렛 회전 로직 – GachaWheel.cs

룰렛 회전은 GachaWheel 스크립트에서 처리했다.
버튼을 누르면 확률에 따라 아이템을 하나 선택하고,
해당 칸 범위에 맞춰 룰렛을 돌린다.

IEnumerator Spin()
{
    isSpinning = true;

    GachaItemData selectedItem = GetRandomItem();
    int itemCount = gachaDatabase.items.Length;
    int index = System.Array.IndexOf(gachaDatabase.items, selectedItem);

    float segmentAngle = 360f / itemCount;
    float minAngle = index * segmentAngle;
    float maxAngle = minAngle + segmentAngle;
    float targetAngle = Random.Range(minAngle, maxAngle);

    float startAngle = wheel.eulerAngles.z;
    float endAngle = 360f * Random.Range(5, 7) + targetAngle;
    float duration = 4f;
    float elapsed = 0f;

    while (elapsed < duration)
    {
        elapsed += Time.deltaTime;
        float t = elapsed / duration;
        float eased = Mathf.SmoothStep(0, 1, t);
        float angle = Mathf.Lerp(startAngle, endAngle, eased);
        wheel.eulerAngles = new Vector3(0, 0, angle);
        yield return null;
    }

    Debug.Log($"획득 아이템: {selectedItem.itemName}");
    isSpinning = false;
}

이때 룰렛은 5~7바퀴 + 해당 아이템 각도 만큼 회전해서
시각적으로 그럴듯하게 돌아간다.
SmoothStep을 써서 회전이 자연스럽게 감속되며 멈춘다.

🎲 확률에 따른 아이템 뽑기

확률은 probability 필드에 따라 가중치 방식으로 구현했다.

GachaItemData GetRandomItem()
{
    var items = gachaDatabase.items;
    float total = items.Sum(i => i.probability);
    float rand = Random.Range(0, total);
    float sum = 0;

    foreach (var item in items)
    {
        sum += item.probability;
        if (rand <= sum)
            return item;
    }

    return items.Last(); // fallback
}

📌 구현하면서 알게된 점

• RectTransform에서 Pivot, Anchor, Rotation이 UI 배치에 매우 중요하다

• 룰렛처럼 회전 기반 UI는 Sector 중심이 정확히 바늘과 맞아야 시각적으로 어색하지 않음

• ScriptableObject를 활용하면 아이템 추가/수정이 매우 유연해진다

• 확률형 뽑기 시스템을 만들 때는 단순한 랜덤이 아닌 확률 가중치 로직이 필요하다

💡 다음에 해보고 싶은 개선

• 아이템 등급에 따라 시각적 효과 다르게 주기 (에픽은 번쩍 번쩍 ✨)

• 뽑기 결과 팝업창 추가 (Get!)

• 여러 개 동시에 뽑는 10연 뽑기 시스템

• 룰렛 애니메이션 연출 더 자연스럽게 (사운드, 떨림 등)

🔚 마무리

이번 작업을 통해 UI 배치와 애니메이션, ScriptableObject의 유용함을 다시 한번 체감했다.
룰렛 UI를 직접 구성하면서 각도 계산과 UI 정렬이 얼마나 중요한지도 알게 됐다.