鳩の溜まり場

猫か鳩になりたい

一番中央に近いものが自動で真ん中にくるあのUI作ってみた【Unity】

Unity

これ作る

経緯

中身は簡単だけど素直に嬉しかったので書きます。

環境

  • Unity 2017.4.6f1

インターン中のプロジェクトで開発したので，会社からの制限でバージョン鬼古いですが，たいした機能使ってないので差し支えないと思います。

やり方

まずはScroll View

Horizontalだけにして，Contentには最低でもデバッグできる程度にオブジェクト設置します。

hierarchy.png

ContentにはContent Size FitterとHorizontal Layout Groupをアタッチして適宜設定。

content.png

これで横スクロールできているかと思います。できてなかった場合他の方の記事を参考にどうにかこうにか横スクロールができる状態まで作ってください！

一番中央に近いものが真ん中にくるアルゴリズム

手書きの方が説明しやすいので，メイン部分は汚いですが手書きのものをみてください。

このアルゴリズムはプログラム内で，先ほどの画像にあるヒエラルキー上でいうとScrollbar Horizontalが保持しているScrollbar.valueを直接書き換えて実装してます。 このvalueを計算して求めてあげようという話です。 前提知識として，Scrollbar.valueは0.0f ~ 1.0fがレンジです。

sample.png

黄色い枠で書かれた部分がサンプルコードのタッチしたか否かの中にあるif文に反映されてます。 計算量を抑えたり、可読性のために変数に代入してますが，計算の仕組みとしてはかわりません。

書いててよくわからなくなってきたのでサンプルコードと照らし合わせてください。

public class Sample : MonoBehaviour
{
    [SerializeField] Transform content;
    [SerializeField] Scrollbar scrollbar;

    float oneEquallyDividedValue;

    void Start()
    {
        oneEquallyDividedValue = 1f / (content.childCount - 1);
    }

    void Update()
    {
        // 自動で近いものを真ん中に
        // ユーザーが画面に触ってないか(デバッグ用にマウスも含む)
        if (0 == Input.touchCount && !Input.GetMouseButton(0))
        {
            float value = scrollbar.value;
            float remainder = value % oneEquallyDividedValue;
            if (remainder <= oneEquallyDividedValue / 2)
            {
                scrollbar.value -= remainder;
            }
            else
            {
                scrollbar.value += oneEquallyDividedValue - remainder;
            }
        }
    }
}

お詫び

だいぶ雑になっちゃったので需要あればいつか書き直します。