Environment- and Device-specific Setup Guide

Due to NOA Debugger being built with uGUI, configuration may be required to operate it, depending on the environment or device used.

This document explains how to use NOA Debugger with various devices and platforms, such as the new Input System, UI Toolkit, Gamepad, and XR environments.

Using New Input System

If the project's Active Input Handling is set to Input System Package (New), NOA Debugger will use the new Input System.

If it is set to Both or Input Manager (Old), the legacy Input Manager will be used.

If you use the new Input System, please attach InputSystemUIInputModule to the EventSystem on the scene to detect input events. If you are using the old Input Manager, you will need StandaloneInputModule.

// Retrieve the EventSystem in the scene
var eventSystem = EventSystem.current;
if (eventSystem.GetComponent<InputSystemUIInputModule>() == null)
{
    eventSystem.gameObject.AddComponent<InputSystemUIInputModule>();
}

// Configure custom action events if any
var inputModule = eventSystem.GetComponent<InputSystemUIInputModule>();
inputModule.actionsAsset = // InputActionAsset;

input-system-ui-input-module

Using with UI Toolkit

Since NOA Debugger is built with uGUI, it can coexist with UIs created with UI Toolkit.

To ensure NOA Debugger is always displayed on top, please set the SortOrder of the UI Document to a lower value than that of NOA Debugger.

Note: The default SortOrder value set for NOA Debugger's Canvas is 1000.

ui-document

Using a Gamepad

NOA Debugger does not support uGUI navigation.

However, you can use the Gamepad for operation by taking advantage of the VirtualMouseInput provided by the InputSystem.

For detailed instructions on using VirtualMouseInput, please check the Unity official documentation.

Please note that the steps described are just an example, and if you are already using VirtualMouse, integrate it with your existing processes.

Preparing VirtualMouse

Create a dedicated Canvas for operating the VirtualMouse with the following settings:

  • Set RenderMode to Overlay
  • Set SortOrder to a value higher than NOA Debugger
  • Set the CanvasScaler's UI Scale Mode to Constant Pixel Size

gamepad-canvas

Create a cursor operated by VirtualMouse and Stick as a child element of the Canvas.
Feel free to configure the various actions for VirtualMouse.

The following settings are recommended for the actions:

  • Stick Action: Left Stick [Gamepad]
    • Moving the left stick will move the cursor.
  • Left Button Action: Button South [Gamepad]
    • Pressing the bottom button of the four action buttons on the right side of the Gamepad will select the uGUI UI.
  • Scroll Wheel Action: Right Stick [Gamepad]
    • Operating the right stick will scroll through the uGUI scroll area.

virtual-mouse

Operating NOA Debugger with a Gamepad

This is a sample code to display the NOA Debugger when the Select button on the Gamepad is pressed.

It is recommended to activate the VirtualMouse created earlier only when the NOA Debugger is visible.

[SerializeField]
private GameObject _virtualMouse = null;

void Start()
{
    // Hide the trigger button
    NoaDebug.SetTriggerButtonActive(false);
}

private void Update()
{
    // When the Select button is pressed, display the NOA Debugger and enable the VirtualMouse.
    if (Gamepad.current.selectButton.wasPressedThisFrame)
    {
        NoaDebug.IsDebuggerVisible ? NoaDebug.Hide() : NoaDebug.Show();
        _virtualMouse.SetActive(NoaDebug.IsDebuggerVisible);
    }
}

Using in XR Environments

In XR environments, it is recommended to handle NOA Debugger within a 3D space.

Additionally, to interact with uGUI in 3D space, please attach a TrackedDeviceGraphicRaycaster to the Canvas of NOA Debugger.

// Display the tool in world coordinates
NoaDebug.EnableWorldSpaceRendering();

// Get a reference to the top-level Transform of the tool
Transform noaDebuggerRoot = NoaDebug.RootTransform;

// Change the tool's position, rotation angle, and scale
noaDebuggerRoot.localPosition = Vector3.zero;
noaDebuggerRoot.localEulerAngles = Vector3.zero;
noaDebuggerRoot.localScale = new Vector3(0.00264f, 0.00264f, 0.00264f);

// Change the tool's layer
noaDebuggerRoot.gameObject.layer = 0;

// Attach TrackedDeviceGraphicRaycaster to allow interaction with uGUI from XR controllers
noaDebuggerRoot.gameObject.AddComponent<TrackedDeviceGraphicRaycaster>();

xr-environments

Using in WebGL Environments

Common Issues

The countermeasures for each issue are just examples. The appropriate countermeasures may vary depending on the environment and other conditions, so resolution is not guaranteed.

Clipboard Not Working

The clipboard may not work depending on the browser, browser settings, or the display hierarchy of the application.

For more details, please check MDN web docs - Clipboard API and review security considerations and browser compatibility.

Settings Are Not Saved

NOA Debugger uses IndexedDB to retain the startup button and floating window position information, as well as NoaPrefs settings.

Due to several restrictions in IndexedDB based on the application environment or conditions, NOA Debugger may not function correctly.

For example, in Safari, if the application is within an iframe and the domain within the iframe is third-party, IndexedDB cannot be used.

For more details, please check MDN web docs - IndexedDB API.

Download Does Not Start When Download Button Is Pressed

This could be due to the Content-Security-Policy.

Check if the proper directive in the HTTP response header contains the data scheme.

The example below shows the case where the application is embedded in an iframe and functions properly, confirming that data: is in frame-src.

content-security-policy:
child-src *;connect-src *;default-src *;font-src *;frame-src * data:;img-src *;manifest-src *;object-src *;style-src 'self'

For more details, please check MDN web docs - Content Security Policy (CSP).

Text Input Causes Screen Zoom on iOS Safari

In iOS Safari, when text is entered into input fields smaller than 16px, the screen automatically zooms in.

To prevent this zoom behavior, apply the following style to set the text size in input fields to 16px or larger.

input[type="text"]
{
    font-size: 16px;
}
input[type="number"]
{
    font-size: 16px;
}