Loop through the selection of UI objects

Verification environment

Windows

• Windows 11

Unity Editor

• 2020.3.25f1

Prerequisites for this tip

The following settings have been made in advance as a prerequisite for the explanation of these tips.

• Introducing the Input System Package
• Align the camera (2D) with the canvas

reference

• Loop UI navigation with keystrokes

Deploying Sample UI Objects

Place the button on the Canvas as follows: The selected object is displayed in green for clarity.

You can only select objects that are in the selected direction.

When you place a UI object, you can initially press the arrow keys on a keyboard or gamepad to select the UI object in the specified direction. This is very intuitive and easy to understand, so I don't think you need to bother changing the settings.

However, in a menu-like layout, it is not possible to perform a selection loop operation such as "return to the top when you press down while the bottom is selected" by default.

In the figure above, you cannot select Button1 by pressing down while Button3 is selected. Of course, if you press up while Button1 is selected, you will not be able to select Button3.

Loop through selections

Here, we will create a mechanism that allows you to loop through the selections endlessly. In the sample layout, you can select Button1 by pressing down while Button3 is selected, and you can select Button3 by pressing up while Button1 is selected.

This control is done in a script. It is a general-purpose script that can be used with a small number of descriptions and can be used as it is in other scenes. Instead, the following restrictions apply:

• You can only move up and down in one direction.
• Applies to all Selectable existing under the specified object

Therefore, the target of use is limited to menus that are selected by scrolling up and down, but it is very useful if you limit yourself to that layout. By the way, it is limited to the top and bottom, but if you modify the script a little, you can make it limited to the left and right.

Create a script in your project. You can name it anything, but I'll SelectLoop leave it as .

The script looks like this:

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() { }
}

What we are doing is making the following settings for the key selection behavior navigation .

• Press the up key to select the previous object, and select the last object to select the first object.
• Press the down key to select the next object, or select the first object if it is the last object.

By the way, the order of this object (Selectable) depends on the order of the hierarchy. Arrange them in the order you want them to be selected in the hierarchy.

After saving the script, attach it as a component. This script will be applied to in the attached object Selectable , so this time Canvas we will attach to .

Try moving it and see if you can move it between Button1 and Button3 with a keystroke.