UnityのUIでButtonのNavigation設定が上手くいかない

前提・実現したいこと

UIのボタンのカーソルを思った通りに動かしたいです。
しかしいくつかの障害がありうまくいかず、また考案した方法にも不安があるので相談させてくださいませ。

実現したい動きは以下の通りです。

そして、上部の五つのボタンを選択している際は、これ以上上にボタンはないので上ボタンの反応をなくしたいです。

発生している問題・エラーメッセージ

メニューのボタンのループと上ボタンの問題については最初Explicitのナビゲーションを用いることで実現できました。
しかしメニュー表示選択のボタン（上に六つ並んだ四角いボタン）からスクロール画面に表示されているグリッドに飛ぶことが不可能になったのでこの方法での実装を断念しました。

そして不可能になった理由についてですが、このスクロールはEnhancedScrollerというセルをプレハブとして設定しておきそれを使いまわすことでスクロール画面を作るという仕組みのアセットで作られています。
ゆえにシーンのヒエラルキーからExplicitに移動したいセルを指定しても下記の画像のようにMissingとなってしまうのです。

ゆえに、メニューの表示選択ボタンからセルにとぶために自動で飛べる場所を都度設定してくれるオートマチックにナビゲーションの設定を変えざるを得ず、ループと上のみを無効化することができなくなりました。

また、セルから特定のボタンに戻るという動作についても、このプレハブの仕様が壁になりました。
つまり無数に並ぶセルがすべて一つのプレハブの複製であるために、個別のセルにExplicitで移動先を設定して一番上のセルだけ特定のボタンと結びつけるというようなことができませんでした。

また、これは実際に動かした際のセルの様子です。

試したこと

上だけ停止したりループさせることをこの条件で実現するために、僕は以下のようなコードでUIを制御しようとしました。

C#
1                if(selectButtom == eqButton)
2                {//セレクトしているボタンが左端のボタンの時
3                    if(verticalKey == 1)
4                    {
5                        verticalKey = 0.0f;
6                        //上ボタン無効化。全部のボタン選択時に効力を発揮するよう置いている。
7
8                    }
9
10                    if (horizontalKey == -1)
11                    {
12                        selectButtom = systemButton;
13                        //左端でさらに左を押すと右端のボタンが選択されるようになる
14                    }
15
16                    eqWindow.SetActive(true);
17                    useWindow.SetActive(false);
18                    keyWindow.SetActive(false);
19                    magicWindow.SetActive(false);
20                    libraryWindow.SetActive(false);
21                    systemWindow.SetActive(false);
22                    //表示するUIの選択
23                }

しかしStandaloneInputModuleとEventSystemの挙動が優先されてしまうようで改善はしませんでした。（VerticalKeyに至ってはただの変数ですから当然ですね。変なコードですみません）
次に、オートマチックにした上でStandaloneInputModuleのスクリプト本体を改変し、特定の場合の上入力を無効化し、さらに左端にいるときは左入力を、右端にいるときは右入力を、それぞれ無効化して

C#
1                    if (horizontalKey == -1)
2                    {
3                        selectButtom = systemButton;
4                        //左端でさらに左を押すと右端のボタンが選択されるようになる
5                    }

このコードの効果で飛ばそうかとも思いましたがUNITYのコンポーネントをいじることへの恐怖が強くできていません。
それから上ボタンの封印については上を押している間はEventSystem自体無効化することで封印できないだろうかとも考えました。

果たしてこの方法は正しいのでしょうか。また、もっといい方法があったりするのでしょうか。

また、特定のボタンにもどる方法についてはすべてのセルを選択中に戻りたいボタン以外のボタンのButtonコンポーネントを無効化し、特定のボタンに戻ったらほかを再び有効にする方法を考え付きました。
これなら消去法でひとつのボタンに戻れるのではないかと考えた次第です。
しかしもっといい方法があればどうかご教授ください。

よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Unity 2019 3,7f1
EnhancedScroller

長々とお付き合いさせてしまいましてすみません

C#
1using UnityEngine;
2using UnityEngine.UI;
3#if UNITY_EDITOR
4//Unityエディタのみで実行したい処理を記述。実行時には無効
5using UnityEditor;
6using UnityEditor.UI;
7#endif
8
9public class HorizontalExplicitNavigationButton : Button
10{
11    [SerializeField] private Selectable selectOnLeft;
12    //左で選択するobject
13    [SerializeField] private Selectable selectOnRight;
14    //右で選択するobject
15
16    /// <inheritdoc />
17    public override Selectable FindSelectableOnUp()
18    {
19        return null;
20        //上は選択できないよう
21
22    }
23
24    /// <inheritdoc />
25    public override Selectable FindSelectableOnLeft()
26    {
27        return this.selectOnLeft;
28        //選択するオブジェクトを渡す
29    }
30
31    /// <inheritdoc />
32    public override Selectable FindSelectableOnRight()
33    {
34        return this.selectOnRight;
35        //選択するオブジェクトを渡す
36    }
37}
38#if UNITY_EDITOR
39//Unityエディタのみで実行したい処理を記述
40[CustomEditor(typeof(HorizontalExplicitNavigationButton), true)]
41//改造するエディタのスクリプトを選択
42[CanEditMultipleObjects]
43
44public class HorizontalExplicitNavigationButtonEditor : ButtonEditor
45{
46    private SerializedProperty selectOnLeftProperty;
47    //Editor上で表示できるプロパティを設定？
48    private SerializedProperty selectOnRightProperty;
49    //同上
50
51    //UIの書式というか形？外観？をButtonEditor.OnInspectorGuiから継承？
52    /// <inheritdoc />
53    public override void OnInspectorGUI()
54    {
55        base.OnInspectorGUI();
56        //カスタムエディタを作るメソッド
57        (this.target as Selectable).navigation = Navigation.defaultNavigation;
58        //Editor型のtargetオブジェクトをSelectable型にキャストし、Navigation型のdefauitNavigationに代入。
59        //つまりインスペクタにSelectable型を含むゲームオブジェクトを入れたらその情報をやり取りしてくれる？
60
61        this.serializedObject.Update();
62        //表示されるオブジェクトの形式を更新する
63        EditorGUILayout.PropertyField(this.selectOnLeftProperty);
64        EditorGUILayout.PropertyField(this.selectOnRightProperty);
65        //SelectedOnleftとRightを表示する
66        this.serializedObject.ApplyModifiedProperties();
67        //プロパティの変更を適用
68    }
69
70    //UIの書式というか形？外観？をButtonEditor.OnEnableから継承？
71    /// <inheritdoc />
72    protected override void OnEnable()
73    {
74        base.OnEnable();
75        //Objectが有効になったら起動
76        this.selectOnLeftProperty = this.serializedObject.FindProperty("selectOnLeft");
77        this.selectOnRightProperty = this.serializedObject.FindProperty("selectOnRight");
78　　　　　//UIに表示されるプロパティにselectOnLeftとRightとして選択されたものを入れる？
79    }
80}
81#endif
82
83
84

コード全体の解釈としてはボタンコンポーネントのインスペクタを改造して、さらにFindSelectableOnLeft（Right）メソッドが返す値をオーバーライドでこちらの任意のものに指定しているというような感じでしょうか？

また、こちらのHorizontalExplicitNavigationButtonEditorクラスについてですが、カスタムエディタのためのスクリプトであるということが調べた結果わかりました。
そして多くの場合別々のCSファイルに収めているようでしたが、今回はこのままの形で一つのファイルにしていてよろしいのでしょうか？
暗黙の了解で省いたということでしたら無知をお詫びいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のような案を考えてみましたが、いかがでしょうか?

右端・左端から反対の端へ飛ぶボタンについて

画面最上部の6つのボタンについては、通常のButtonコンポーネントは削除して、代わりに下記のようなコンポーネントをアタッチすることにしました。ナビゲーション方式は強制的にAutomaticに固定して、左右ナビゲーションは自前で用意したフィールドにセットされたSelectableを提示する...という方針です。また、上方向へのナビゲーションは常にnullとしてやれば上への移動を無効化できるんじゃないかと考えました。

C#
1using UnityEngine;
2using UnityEngine.UI;
3#if UNITY_EDITOR
4using UnityEditor;
5using UnityEditor.UI;
6#endif
7
8public class HorizontalExplicitNavigationButton : Button
9{
10    [SerializeField] private Selectable selectOnLeft;
11    [SerializeField] private Selectable selectOnRight;
12
13    /// <inheritdoc />
14    public override Selectable FindSelectableOnUp()
15    {
16        return null;
17    }
18
19    /// <inheritdoc />
20    public override Selectable FindSelectableOnLeft()
21    {
22        return this.selectOnLeft;
23    }
24
25    /// <inheritdoc />
26    public override Selectable FindSelectableOnRight()
27    {
28        return this.selectOnRight;
29    }
30}
31
32#if UNITY_EDITOR
33[CustomEditor(typeof(HorizontalExplicitNavigationButton), true)]
34[CanEditMultipleObjects]
35public class HorizontalExplicitNavigationButtonEditor : ButtonEditor
36{
37    private SerializedProperty selectOnLeftProperty;
38    private SerializedProperty selectOnRightProperty;
39
40    /// <inheritdoc />
41    public override void OnInspectorGUI()
42    {
43        base.OnInspectorGUI();
44        (this.target as Selectable).navigation = Navigation.defaultNavigation;
45        this.serializedObject.Update();
46        EditorGUILayout.PropertyField(this.selectOnLeftProperty);
47        EditorGUILayout.PropertyField(this.selectOnRightProperty);
48        this.serializedObject.ApplyModifiedProperties();
49    }
50
51    /// <inheritdoc />
52    protected override void OnEnable()
53    {
54        base.OnEnable();
55        this.selectOnLeftProperty = this.serializedObject.FindProperty("selectOnLeft");
56        this.selectOnRightProperty = this.serializedObject.FindProperty("selectOnRight");
57    }
58}
59#endif

これによりインスペクターの末尾に「Select On Left」、「Select On Right」が現れますので、ナビゲーションがループするよう他のボタンをセットしてやります。

常に特定のボタンへ飛ぶセル内ボタンについて

こちらについては、スクロールビュー内のオブジェクトが更新されたタイミングで、スクリプト上でナビゲーション先を繋いでやることにしました。
実験用に、EnhancedScrollerのクイックスタートガイドに沿いつつご質問者さんのスクリーンショットに似た形になるようビューを作成してみました。

まず、セル用のデータクラスは下記のように単純にstringの配列を持っているだけのものにしました。

C#
1public class ScrollerData
2{
3	public string[] Contents;
4
5	public ScrollerData(params string[] contents)
6	{
7		this.Contents = contents;
8	}
9}

セルビューは下図のように横に3つのボタンを並べており（これらボタンは先に申し上げたHorizontalExplicitNavigationButtonではなく普通のButtonです）...

セルビュー用スクリプトは下記のようになっています。contentTextsにインスペクター上で3つのボタンの内部にあるTextを参照させています。

C#
1using System.Linq;
2using EnhancedUI.EnhancedScroller;
3using UnityEngine;
4using UnityEngine.UI;
5
6public class FooCellView : EnhancedScrollerCellView
7{
8	[SerializeField] private Text[] contentTexts;
9
10	public Button[] ContentButtons { get; private set; }
11
12	public void SetData(ScrollerData data)
13	{
14		for (var i = 0; i < this.contentTexts.Length; i++)
15		{
16			this.contentTexts[i].text = data.Contents[i];
17		}
18	}
19
20	private void Awake()
21	{
22		this.ContentButtons = this.contentTexts.Select(text => text.GetComponentInParent<Button>()).ToArray();
23	}
24}

そして、スクローラーコントローラーは下記のようにしてみました。
ほとんどクイックスタートガイドの例と同じ作りですが、セルの表示・非表示が変化したタイミングでナビゲーションの接続を行う処理が加わっています。

C#
1using System.Collections.Generic;
2using System.Linq;
3using EnhancedUI.EnhancedScroller;
4using UnityEngine;
5using UnityEngine.UI;
6
7public class ScrollerController : MonoBehaviour, IEnhancedScrollerDelegate
8{
9	// ここに最上段セルからの遷移先をセットしておく（UseSetボタン?）
10	[SerializeField] private Selectable startCellNavigationTarget;
11
12	[SerializeField] private EnhancedScroller fooScroller;
13	[SerializeField] private FooCellView fooCellViewPrefab;
14	private List<ScrollerData> data;
15	private RectTransform content;
16
17	public int GetNumberOfCells(EnhancedScroller scroller)
18	{
19		return this.data.Count;
20	}
21
22	public float GetCellViewSize(EnhancedScroller scroller, int dataIndex)
23	{
24		return 96.0f;
25	}
26
27	public EnhancedScrollerCellView GetCellView(EnhancedScroller scroller, int dataIndex, int cellIndex)
28	{
29		var cellView = scroller.GetCellView(this.fooCellViewPrefab) as FooCellView;
30		cellView.SetData(this.data[dataIndex]);
31		return cellView;
32	}
33
34	private void OnCellViewVisibilityChanged(EnhancedScrollerCellView cellView)
35	{
36		// スクローラーのセル表示・非表示更新タイミングでナビゲーションを繋ぎ直す
37		this.UpdateNavigationConnections();
38	}
39
40	private void Start()
41	{
42		this.data = new List<ScrollerData>
43		{
44			new ScrollerData("Alfa", "Bravo", "Charlie"),
45			new ScrollerData("Delta", "Echo", "Foxtrot"),
46			new ScrollerData("Golf", "Hotel", "India"),
47			new ScrollerData("Juliett", "Kilo", "Lima"),
48			new ScrollerData("Mike", "November", "Oscar"),
49			new ScrollerData("Papa", "Quebec", "Romeo"),
50			new ScrollerData("Sierra", "Tango", "Uniform"),
51			new ScrollerData("Victor", "Whiskey", "X-ray"),
52			new ScrollerData("Yankee", "Zulu", "☺")
53		};
54		this.content = this.fooScroller.GetComponent<ScrollRect>().content;
55		this.fooScroller.Delegate = this;
56		this.fooScroller.cellViewVisibilityChanged = this.OnCellViewVisibilityChanged;
57		this.fooScroller.ReloadData();
58		this.UpdateNavigationConnections();
59	}
60
61	private void UpdateNavigationConnections()
62	{
63		if (this.content == null)
64		{
65			return;
66		}
67
68		// EnhancedScrollerに現在表示されているセルのインデックスを得る機能が用意されているようだが、
69		// まだ使い慣れておらずいまいち意図通りの値が得られなかったので、自前でセルビューを列挙することにした
70		var cells = this.content.Cast<RectTransform>()
71			.Select(t => t.GetComponent<FooCellView>())
72			.Where(c => c != null).ToArray();
73		for (var i = 0; i < cells.Length; i++)
74		{
75			var cell = cells[i];
76			var previousCell = i == 0 ? null : cells[i - 1];
77			var nextCell = i == (cells.Length - 1) ? null : cells[i + 1];
78			var buttonCount = cell.ContentButtons.Length;
79			for (var j = 0; j < buttonCount; j++)
80			{
81				// 上下は上下のセルの中の同じ列にあるボタンを、左右は自分のセルの中の左右のボタンを繋げる
82				// ただし、自分のセルが画面上に表示されているセルのうち最上段ならば、上方向の遷移先として
83				// startCellNavigationTargetをセットすることにする
84				// また、左右の端も反対側の端と繋げてループするようにしてみた
85				var button = cell.ContentButtons[j];
86				var previousButton = previousCell == null ? null : previousCell.ContentButtons[j];
87				var nextButton = nextCell == null ? null : nextCell.ContentButtons[j];
88				var navigation = button.navigation;
89				navigation.mode = Navigation.Mode.Explicit;
90				navigation.selectOnUp = previousCell == null ? this.startCellNavigationTarget : previousButton;
91				navigation.selectOnDown = nextButton;
92				navigation.selectOnLeft = cell.ContentButtons[((j - 1) + buttonCount) % buttonCount];
93				navigation.selectOnRight = cell.ContentButtons[(j + 1) % buttonCount];
94				button.navigation = navigation;
95			}
96		}
97	}
98}

実行してみたところ、ナビゲーション矢印が下図のように接続されました。

投稿2020/06/27 07:41

Bongo

総合スコア10811

cushionA

2020/06/27 10:48

回答ありがとうございます。返信が大変遅れてしまい申し訳ありません。基底クラスから専用のボタンを自作するという発想はまさに目から鱗だったのですが、今現在の僕にはコードの意味を理解しかねる部分も多いです。なので本来ならいろいろ調べつつ理解して返信しようとしたのですが、なかなか難しかったです。また、お恥ずかしながら英語力とコーディング技術の欠如によりEnhancedScrollerのクイックスタートガイドをあまり理解できず、ほぼブラックボックスのような形で扱っていたのでセルの話についても理解しているとは言えません。しかしこれほどの素晴らしく高度な作例を示していただいたのですから、こちらを分析すれば僕も制作の幅を広げられるであろうことは間違いないものと思います。よって心から感謝を申し上げるとともにベストアンサーにもなっていただきたく思うのですが、もし差し支えなければですがもう少しコードについてお聞かせ願えませんでしょうか？申し訳ございません。本来紐解くのは僕がやるべきことですので図々しいお願いです。お断りの言葉すら必要ありませんのでなにも気にすることなくスルーなさってください。最後にもう一度、画期的な手法を懇切丁寧に解説していただいたことに最大の感謝を申し上げます。ありがとうございました。

Bongo

2020/06/27 14:01

いえいえ、ご不明点がありましたらなるべくお返事いたしますので、お気になさらずにコメントください。今回の実験は上部の6ボタンとスクローラーしかない単純なUIで試しただけですので、他にいろいろなUI要素がある状況での挙動については見落としている部分があるかもしれません。おかしな挙動がありましたら、可能であれば直してみようと思います。

cushionA

2020/06/27 14:43

大変ありがたいお心遣いに心より感謝申し上げます。まず自分なりにコードについて調べながら文意をとらえてコメントをつけてみたものを質問文に追加いたしますので、差し支えなければ正しく理解できているか見ていただけませんでしょうか。また、少し質問もあるのでそちらもご覧いただければ幸いです。 EnhancedScrollerについてはクイックスタートガイドをDeepL翻訳に助けてもらいながら今から理解してみようと思います。何度もお手数をおかけしまして申し訳ありません。

Bongo

2020/06/27 16:10

追記いただいたHorizontalExplicitNavigationButtonEditorの件ですが、おっしゃる通り別のソースファイルに記述するのが普通なんじゃないかとは思います。今回単一のソースファイルにエディター用コードを書いたのは、特にそうしなければならない理由があったわけではなく、単に「ソースコードの量も少ないのでメインのコンポーネントと関係の深いエディターコードも一緒にまとめてしまってもさほどごちゃごちゃしないだろう」と思っての気まぐれです。エディターコードを単一のソースファイルにしてEditorフォルダに入れてしまう方式なら「#if UNITY_EDITOR」でいちいち分岐する必要もありませんので、むしろそっちの方がすっきりしたかもしれません。これに関してはどちらでもお好みの方法でかまわないと思います。追記いただいたコードのコメントも拝見しましたが、適切な内容かと思います。私の認識ですと、エディター用コードを書くときの基本的戦略として「コンポーネントの方の状態を書き換えて、変更をコンポーネントと対応するSerializedObjectに反映させる」というパターンと「SerializedObject上に記録されたデータをダイレクトに書き換えて、変更をコンポーネントに反映させる」というパターンがあるようです。今回は両者が入り混じった形になっていて、navigationは前者の方式、selectOnLeftとselectOnRightは後者の方式にしたつもりです。これも必ずしもこうでなければならない理由はなく、「navigationは構造体なので、後者の方式で構造体内部へ潜り込んでデータを書き換えるよりは、前者の方法で単純にNavigation.defaultNavigationを代入してしまった方が楽そうだ」、「selectOnLeftとselectOnRightはprivateにしたので（これも気まぐれです）普通の方法ではコンポーネント上のフィールドにアクセスすることはできず、こっちは逆に後者の方法でSerializedObject側を書き換えた方が楽そうだ」と思ってのことです。これもやはりご質問者さんの好みに応じて自由に作っていただいてかまわないと思います。

cushionA

2020/06/27 16:42 編集

丁寧かつプラスアルファの情報まで添えたわかりやすい解説に感謝いたします。コードを分けるかどうかという質問については重箱の隅をつつくようなものになってしまって申し訳ありません。実はカスタムインスペクタという概念に触れたことすら初めてで、どう扱っていいのか分からなかったこともあり過敏になってしまいました。失礼をお許しください。それからボンゴ様の設計思想についても教えていただけたことも助かりました。つまりは部品（SerializedObject）を土台（コンポーネント）に合わせて変えるか、あるいはその逆かということでしょうか？確かに上記の例の場合構造体をいじるよりは土台の方を変えてさっとそれに見合う部品をはめ込んだほうが便利に思えますね。納得いたしました。たくさん新しい概念を獲得できた、実りあるやり取りでした。まだまだ未熟ですが少し視野が広がったように思います。大変なお手間をかけてしまいましたが、この度のBongo様のご助力に感謝いたします。

cushionA

2020/06/27 16:53 編集

それから、良ければですが海外のアセット（DotweenやEnhancedScrollerなど）に習熟するにあたってコツなどあればなにか助言をいただけませんでしょうか。クイックスタートやsampleSceneを見たりしてもなかなか理解できません。 playMakerのように専用の掲示板があったりするとそちらで質問したりもできるのですが、中々そういうアセットも少ないです。やはり英語力を磨き、またコードへの理解を高めて使い方を覚えるのが一番なのでしょうか。この期に及んでしつこく、厚かましい質問ではありますが、貴重な機会ですので食い下がることをお許しいただければと思います。一言でもなにかお言葉をいただければ嬉しいです。もちろん近道なんてないということでしたら厳しく甘えるなと一言教えてくださいませ。もう夜も深いので明日でも明後日でも都合のつく時に返信なさってください。そしてもちろんスルーしても全く問題ありません。ありがとうございました。

Bongo

2020/06/28 01:28

確かに、制作元の出しているマニュアルやサンプルだけだと使い方を掴みづらい場合も多いですね。私の場合ですと、制作元以外にも使用例の紹介記事が多いものはとっつきやすく感じます。その観点ですとDOTweenは使っている方がけっこう多くて参考情報が豊富でしょう。それと比べるとEnhancedScrollerは使用例が少なく残念ではありますが、そういったものは実験用のシーンを作ってシンプルな条件で挙動を試してみるのがいいんじゃないかと思います。ソースコードまで読めるアセットなら実装がどうなっているか追うことができてはかどるでしょう。コンパイル済みのプラグインとしてしか提供されていないものだとやっかいではありますが、マネージドプラグインならデコンパイルして実装を調べる手もあるでしょうね。私の環境にはReSharper（https://www.jetbrains.com/resharper/ ）をインストールしてあるのですが、これにはソースコード中のクラスやメソッドから実装に飛ぶ際に、飛んだ先がデコンパイル可能ならソースコードを復元して表示してくれる機能がありまして、助けになることも多いですね。私は使用経験がないのですが、ReSharperと同じくJetBrainsが出しているdotPeek（https://www.jetbrains.com/decompiler/ ）なんてものもあるようですので、試してみてもいいかもしれません（参考:DLL をデコンパイル - エディター拡張入門 http://49.233.81.186/decompile_dll.html ）。

cushionA

2020/06/28 04:10 編集

最後の最後まで大変丁寧な説明をしていただきありがとうございます。なるほど。使用例を調べ、また分かりやすい環境で動かして理解を深めるのですね。そしてBongo様のおっしゃられた通りソースコードも読んでみようと思います。それから、ソースコードを復元して読むという発想は僕にはなかったので助かりました。さいわいまだそういう厄介なツールは使ったことがないのですが、この先そういったものに触れたとき必ず役に立つものと思います。使用ツールまで示していただいて、参考記事まで添えていただいてありがとうございました。質問の本筋にはあまり関係のない質問にも関わらず根気よく付き合ってくださったことに感謝いたします。本当に助かりました。教えていただいたことを活かして頑張ります！

行動規範の内容に同意します