Unityで音ゲーの開発、選曲画面でのジャケット変更

Question

初めまして、趣味で音ゲー開発を行なっている高校生です。
現在、選曲画面での曲に合わせたジャケットの変更を行うようにする実装ができなくて困っています。

こちらが現在の選曲画面の実装です。
https://gyazo.com/5b89e3b8295b0f0d070efb33938d8214

このGifの用に、ドラッグすることにより曲名の書かれたボタンがくるくると回転して摩擦によりある程度回転したら「かくっ」と回転が止まります。
これは以下の「SimpleCircleLayoutGroup」「SimpleCircleInterface」の二つのコードと追記したコードで実装しています。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class SimpleCircleLayoutGroup : UIBehaviour, ILayoutGroup
{
    // 意味: 円の半径
    // 単にこの値に数字を代入するだけでは半径が変わらないので、SetRadius()を使うこと
    [SerializeField] private float radius = 100;

    // 意味: 円をどれだけ回転させた状態であるか
    // 単にこの値に数字を代入するだけでは変わらないので、SetOffsetAngle()を使うこと
    [SerializeField] private float offsetAngle;

#if UNITY_EDITOR
    protected override void OnValidate()
    {
        base.OnValidate();
        Arrange();
    }
#endif

    // 要素数が変わると自動的に呼ばれるコールバック
    #region ILayoutController implementation
    public void SetLayoutHorizontal() { }
    public void SetLayoutVertical()
    {
        Arrange();
    }
    #endregion

    void Arrange()
    {
        if (transform.childCount > 0)
        {
            // 円形に並べるとき、それぞれのGameObjectの間は何度空けるか
            float splitAngle = 360 / transform.childCount;

            // for: 円形に整理したい、各GameObjectごとに処理
            for (int elementId = 0; elementId < transform.childCount; elementId++)
            {
                // 整理したいGameObjectを取得
                var child = transform.GetChild(elementId) as RectTransform;

                float currentAngle = splitAngle * elementId + offsetAngle; // どの角度に位置するか
                child.anchoredPosition = new Vector2(
                    Mathf.Cos(currentAngle * Mathf.Deg2Rad),
                    Mathf.Sin(currentAngle * Mathf.Deg2Rad)) * radius;  // 配置する.
            }
        }
    }

    public void SetRadius(float a)
    {
        radius = a;
        Arrange();
    }

    public float GetRadius()
    {
        return radius;
    }

    public void SetOffsetAngle(float a)
    {
        offsetAngle = a;
        Arrange();
    }

    public float GetOffsetAngle()
    {
        return offsetAngle;
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

[RequireComponent(typeof(SimpleCircleLayoutGroup))]
public class SimpleCircleInterface : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    private SimpleCircleLayoutGroup layout;
    private RectTransform layoutRect;
    /// <summary>
    /// 前フレームのマウスの位置
    /// </summary>
    private Vector2 previousPosition;
    private float acceleration;
    private bool isDragged = false;

    /// <summary>
    /// 摩擦力
    /// </summary>
    [SerializeField]
    private float drag = 0.33f;
    /// <summary>
    /// 最大の回転スピード(度/フレーム)
    /// </summary>
    [SerializeField]
    private float limit = 10f;

    void Awake()
    {
        layout = GetComponent<SimpleCircleLayoutGroup>();
        layoutRect = layout.GetComponent<RectTransform>();
    }

    void Update()
    {
        if (!isDragged)
        {
            var splitAngle = 360f / layoutRect.childCount;
            var targetAngle = Mathf.Round(layout.GetOffsetAngle() / splitAngle) * splitAngle;
            acceleration += Mathf.Clamp((targetAngle - layout.GetOffsetAngle()) * Time.deltaTime * 6f, -0.3f, 0.3f);
        }

        // accelerationは、*Time.deltaTimeでの調節を必要としない. すでに、OnDrag()でフレーム当たりの量になっているから.
        layout.SetOffsetAngle(layout.GetOffsetAngle() + acceleration);
        var delta = -(drag * Mathf.Sign(acceleration)) * Time.deltaTime * 40f; // *Time.deltaTimeすると滅茶小さくなるので、40fで大きくする.
        if (Mathf.Abs(acceleration + delta) > Mathf.Abs(acceleration)) // 最後の力を摩擦で止められたなら
            acceleration = 0f;
        else
            acceleration += delta;
    }

    void IBeginDragHandler.OnBeginDrag(PointerEventData eventData)
    {
        previousPosition = eventData.position;
        acceleration = 0f;
        isDragged = true;
    }

    public void OnDrag(PointerEventData eventData)
    {
        var currentPosition = eventData.position;

        float degree = Vector2.SignedAngle(previousPosition - (Vector2)layoutRect.position, currentPosition - (Vector2)layoutRect.position);
        degree = Mathf.Clamp(degree, -limit, limit);
        acceleration = degree;

        previousPosition = currentPosition;
    }

    /// <summary>
    /// いまは、まだ何もしない.
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDragged = false;
    }
}

下の画像のように、回転した後にこの中央に位置しているボタンによってジャケット画像用のimageのテクスチャを切り替えたいです。
これを実装しようと思い、
https://uni.gas.mixh.jp/unity/canvas-text-image.html
この記事を参考に、配列(?)index(?)でジャケット画像をリストにして、サークルの真ん中にどのボタンあるのかを取得してテクスチャを張り替えるのが一番実装しやすいのかな...とも思いましたが、どのようにサークルの真ん中に来ているボタンを取得するのか分かりません...
どのような方針で実装すれば良いのかアドバイスがいただきたいです...！

追記です。

円形の選択の実装は
https://tsubakit1.hateblo.jp/entry/2016/04/11/070637
こちらの記事を参考に↓こういった実装がしてあります。

using UnityEngine;
using UnityEngine.UI;

public class RadialLayout : LayoutGroup
{
    public float fDistance;
    [Range(0f, 360f)]
    public float MinAngle, MaxAngle, StartAngle;
    protected override void OnEnable() { base.OnEnable(); CalculateRadial(); }
    public override void SetLayoutHorizontal()
    {
    }
    public override void SetLayoutVertical()
    {
    }
    public override void CalculateLayoutInputVertical()
    {
        CalculateRadial();
    }
    public override void CalculateLayoutInputHorizontal()
    {
        CalculateRadial();
    }
#if UNITY_EDITOR
    protected override void OnValidate()
    {
        base.OnValidate();
        CalculateRadial();
    }
#endif
    void CalculateRadial()
    {
        m_Tracker.Clear();
        if (transform.childCount == 0)
            return;
        float fOffsetAngle = ((MaxAngle - MinAngle)) / (transform.childCount - 1);

        float fAngle = StartAngle;
        for (int i = 0; i < transform.childCount; i++)
        {
            RectTransform child = (RectTransform)transform.GetChild(i);
            if (child != null)
            {
                //Adding the elements to the tracker stops the user from modifiying their positions via the editor.
                m_Tracker.Add(this, child,
                DrivenTransformProperties.Anchors |
                DrivenTransformProperties.AnchoredPosition |
                DrivenTransformProperties.Pivot);
                Vector3 vPos = new Vector3(Mathf.Cos(fAngle * Mathf.Deg2Rad), Mathf.Sin(fAngle * Mathf.Deg2Rad), 0);
                child.localPosition = vPos * fDistance;
                //Force objects to be center aligned, this can be changed however I'd suggest you keep all of the objects with the same anchor points.
                child.anchorMin = child.anchorMax = child.pivot = new Vector2(0.5f, 0.5f);
                fAngle += fOffsetAngle;
            }
        }

    }
}

Answer 1

パッケージ: SwitchUIImage.unitypackage

コードはこれだけです。

using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class ScrollController : MonoBehaviour
{
    [SerializeField] RectTransform _contentContainer = default;
    [SerializeField] Image _targetImage = default;

    void Update()
    {
        var currentImage = _contentContainer.GetComponentsInChildren<Image>()
            .OrderBy(x => Vector2.Distance(this.transform.position, x.transform.position)).FirstOrDefault();

        if (!_targetImage.sprite.Equals(currentImage.sprite))
        {
            _targetImage.sprite = currentImage.sprite;
        }
    }
}

Comments

[Cyifon]

例えばこの貼り付け先のImageをアニメーションで多少左右に揺らしたりしてもいいかもしれませんね...
参考のシーンまだわざわざありがとうございます！！
頑張ります！

[Cyifon]

Scrollbar HorizontalやScrollbar Verticalは必要ないのでViewportの中に円形に配置しているボタンたちを入れてあげると配置がバグって機能しませんでした....

[bboydaisuke]

上に貼ってあるコードの意味が分かってないからそうなるんでしょう。短いのでちゃんと理解して使ってください。

[Cyifon]

だいぶ期間空いてしまって申し訳ないです。コード参考にして実装うまくいきました。ゲームも完成しました。ありがとうございます。