Durchlaufen der Auswahl von UI-Objekten in einer Schleife

Verifikations-Umgebung

Fenster

• Windows 11

Unity-Editor

• 2020.3.25f1

Voraussetzungen für diesen Tipp

Die folgenden Einstellungen wurden im Vorfeld als Voraussetzung für die Erklärung dieser Tipps vorgenommen.

• Einführung in das Eingabesystempaket
• Ausrichten der Kamera (2D) an der Leinwand

Referenz

• Loop-UI-Navigation mit Tastatureingaben

Bereitstellen von Beispiel-UI-Objekten

Platzieren Sie die Schaltfläche wie folgt auf der Leinwand: Das ausgewählte Objekt wird aus Gründen der Übersichtlichkeit grün angezeigt.

Sie können nur Objekte auswählen, die sich in der ausgewählten Richtung befinden.

Wenn Sie ein UI-Objekt platzieren, können Sie zunächst die Pfeiltasten auf einer Tastatur oder einem Gamepad drücken, um das UI-Objekt in der angegebenen Richtung auszuwählen. Dies ist sehr intuitiv und leicht zu verstehen, so dass Sie sich meiner Meinung nach nicht die Mühe machen müssen, die Einstellungen zu ändern.

In einem menüähnlichen Layout ist es jedoch standardmäßig nicht möglich, eine Auswahlschleife durchzuführen, z. B. "Zurück zum Anfang, wenn Sie nach unten drücken, während der Boden ausgewählt ist".

In der obigen Abbildung können Sie Button1 nicht auswählen, indem Sie nach unten drücken, während Button3 ausgewählt ist. Wenn Sie nach oben drücken, während Taste1 ausgewählt ist, können Sie natürlich nicht Taste3 auswählen.

Durchlaufen von Auswahlen

Hier erstellen wir einen Mechanismus, mit dem Sie die Auswahl endlos durchlaufen können. Im Beispiellayout können Sie Button1 auswählen, indem Sie nach unten drücken, während Button3 ausgewählt ist, und Sie können Button3 auswählen, indem Sie nach oben drücken, während Button1 ausgewählt ist.

Diese Steuerung erfolgt in einem Skript. Es handelt sich um ein Allzweckskript, das mit einer kleinen Anzahl von Beschreibungen verwendet werden kann und wie in anderen Szenen verwendet werden kann. Stattdessen gelten die folgenden Einschränkungen:

• Sie können sich nur in eine Richtung nach oben und unten bewegen.
• Gilt für alle Selectable unter dem angegebenen Objekt vorhandenen Objekte

Daher ist das Verwendungsziel auf Menüs beschränkt, die durch Scrollen nach oben und unten ausgewählt werden, aber es ist sehr nützlich, wenn Sie sich auf dieses Layout beschränken. Übrigens ist es auf oben und unten beschränkt, aber wenn Sie das Skript ein wenig modifizieren, können Sie es auf links und rechts beschränken.

Erstellen Sie ein Skript in Ihrem Projekt. Sie können es nennen, wie es beliebig ist, aber ich belasse SelectLoop es bei .

Das Skript sieht folgendermaßen aus:

using UnityEngine;
using UnityEngine.UI;  // 追加

public class SelectLoop : MonoBehaviour
{
  // 最初のフレーム更新の前に開始が呼び出されます
  void Start()
  {
    // ボタンなど選択可能なコンポーネントを取得する
    var selects = GetComponentsInChildren<Selectable>();
    for (var i = 0; i < selects.Length; i++)
    {
      var nav = selects[i].navigation;
      nav.mode = Navigation.Mode.Explicit;
      nav.selectOnUp = selects[i == 0 ? selects.Length - 1 : i - 1];
      nav.selectOnDown = selects[(i + 1) % selects.Length];
      selects[i].navigation = nav;
    }
  }

  // 更新はフレームごとに1回呼び出されます
  void Update() { }
}

Was wir tun, ist, die folgenden Einstellungen für das Schlüsselauswahlverhalten navigation vorzunehmen.

• Drücken Sie die Nach-oben-Taste, um das vorherige Objekt auszuwählen, und wählen Sie das letzte Objekt aus, um das erste Objekt auszuwählen.
• Drücken Sie die Abwärtstaste, um das nächste Objekt auszuwählen, oder wählen Sie das erste Objekt aus, wenn es sich um das letzte Objekt handelt.

Die Reihenfolge dieses Objekts (Selectable) hängt übrigens von der Reihenfolge der Hierarchie ab. Ordnen Sie sie in der Reihenfolge an, in der sie in der Hierarchie ausgewählt werden sollen.

Nachdem Sie das Skript gespeichert haben, hängen Sie es als Komponente an. Dieses Skript wird auf das angehängte Objekt Selectable angewendet, daher werden wir dieses Mal Canvas an anhängen.

Versuchen Sie, es zu verschieben, und prüfen Sie, ob Sie es mit einem Tastendruck zwischen Button1 und Button3 verschieben können.