UGTK / Toolkit / Ui Module / Keyboard System Completed

Keyboard System

Summary

A system that provides the user with an on-screen keyboard that is highly customizable. It allows typing, deleting, using uppercase for letters, and organizing characters into categories, enabling the display of special symbols and other character sets as desired.

Modules Dependencies

The Keyboard System module does have external dependencies within the UGTK. It use HorizontalAutoResize and VerticalAutoResize.

Setup

To set up the Keyboard System, follow these steps:

Add InputFieldCompatibleWithKeyboard prefab;

Choose the way you want to have the keyboard in the scene:

Keyboard Default Setup

Add Keyboard - 16-9 prefab;

Keyboard Vertical Screen Setup

Add Keyboard - 9-16 prefab;

Keyboard with unknown screen ratio

Add KeyBoardPlaceholder prefab

Testing Scene

Open KeyboardScene in the module's Scene/ folder: one input field in the middle of an otherwise empty scene.

What to do, in order:

Enter Play Mode and click the field. The keyboard rises from the bottom on the field's own onSelect, so nothing needs wiring: any TMP_InputField carrying Mn_TextInputFieldWithKeyboard summons it.
Type with the on-screen keys, including a backspace. Above, the field fills as you go.
Switch to .?123 and back, then try accented characters and an apostrophe.
Select a field near the bottom of the screen and check the keyboard does not cover it.

Step 3 is where trouble starts downstream: a font missing those glyphs shows a rectangle, and an unescaped apostrophe breaks a query on the server. At a desk the physical keyboard bypasses this system entirely, so the path that ships is never the path you exercise by hand.

Step 4 is not hypothetical, and the demo scene shows it: the field sits just above the keyboard's top row and ends up half covered by it. Whatever raises the keyboard in your game should also move the focused field clear of it - the keyboard reports its own height for exactly that.

Technical Info

The following are the main scripts and workflow of the Keyboard System:

Scripts:

Mn_Keyboard: This component is responsible for managing the keyboard UI, from opening and closing it to sending the characters to the input field.
KeyboardBridge: This static class is used to bridge the communication keyboard and whoever wants to indirectly communicate with it.
Mn_KeyboardButton: Generic button used to interact with the keyboard.
Mn_KeyboardCharacterButton: A button that sends a character to the keyboard when clicked.
Mn_KeyboardBackCharacterButton: A button that sends a backspace signal to the keyboard when clicked.
Mn_KeyboardCapsButton: A button that toggles the keyboard's character size between capital and small.
Mn_KeyboardCategoryButton: Button to change the category of the keyboard.
SO_KeyboardCategory: The asset itself represents the category of the keyboard.
Mn_KeyboardOfSpecificRatio: Component that instantiates a keyboard based on the screen ratio.
Mn_TextInputFieldWithKeyboard: Component that allows a TMP_InputField to summon the keyboard when selected and receive input from it.