Using Input Name

InputName is a specialized modal used for naming characters (actors). It replaces the standard RPG Maker MZ name input scene with a modern, React-based interface.

Files

• menus/src/components/InputName.tsx

• menus/src/util/NameInputLayouts.ts (Keyboard layouts)

• Provider is mounted in menus/src/index.tsx

Overview

Unlike InputNumber, InputName is typically triggered by the RPG Maker engine when a "Name Input Processing" event occurs. However, it can also be used imperatively if needed.

The interface includes:

• Actor Portrait: Displays the face of the actor being named.

• Dynamic Keyboard: Supports multiple character sets (Latin, Japanese, Russian) provided by the engine.

• Visual Feedback: Shows the current name and the maximum character limit.

API Usage

The useInputName() hook provides access to the naming API.

import { useInputName } from './components/InputName';

const MyComponent = () => {
    const inputName = useInputName();

    const onRenameActor = (actor) => {
        inputName.show({
            context: {
                actor: actor,
                maxLength: 10
            },
            charSets: {
                LATIN1: Window_NameInput.LATIN1,
                // ... other charsets from the engine
            },
            actions: {
                onInputOk: (name) => actor.setName(name),
                onInputCancel: () => console.log("Cancelled")
            }
        });
    };
};

Character Sets and Layouts

The keyboard layout is generated dynamically based on the provided character sets. The NameInputLayouts.ts utility handles:

• Mapping raw strings from RPG Maker into a KeyGrid layout.

• Automatically identifying system buttons like Page (to switch charsets) and OK.

• Adding standard keys like Space, Backspace, and Cancel to the grid.

Input Behavior

• Navigation: Uses the standard InputContext for arrow key navigation and OK/Cancel.

• Switching Pages: Clicking the Page (or equivalent localized) button cycles through available character sets (e.g., switching from Latin to Japanese Hiragana).

• Backspace/Space: Dedicated buttons for text editing.

Styling

The modal uses Tailwind CSS classes for layout and can be further customized in InputName.tsx. The actor portrait is rendered using the img/faces/ folder from the RPG Maker project.