Unity XR Plugin Framework: UI System / Keyboard Interface
by Jennifer Wang (2022)
Requirements
Add EventSystem
Hierarchy -> XR -> UI EventSystem
Add UI Canvas
Hierarchy -> XR -> UI Canvas
Resize Canvas to dimensions appropriate for your keyboard
3. Add TextMeshPro Button as a child to Canvas
Hierarchy -> UI -> Button - TextMeshPro
if you see a TMP Importer, click Import TMP Essentials
Under Button, select its child
4. Add TextMeshPro InputField as a child to Canvas
Hierarchy -> UI -> Input Field- TextMeshPro
5. Create a C# Script in Assets
Left click -> Create -> C# Script
6. Create the Script "Keyboard" and paste in the following code
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;
public class Keyboard : MonoBehaviour{
private TMP_InputField inputField;
public void SetInputField(TMP_InputField field){
inputField = field;
Debug.Log(inputField.text);
}
public void InsertChar(string c){
inputField.text += c;
}
public void DeleteChar(){
if (inputField.text.Length > 0){
inputField.text = inputField.text.Substring(0, inputField.text.Length - 1);
}
}
}
7. Create the Script "KeyboardButton" and paste in the following code
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;
public class KeyboardButton : MonoBehaviour{
Keyboard keyboard;
TextMeshProUGUI buttonText;
void Start(){
keyboard = GetComponentInParent<Keyboard>();
buttonText = GetComponentInChildren<TextMeshProUGUI>();
if (buttonText.text.Length == 1){
NameToButtonText();
}
}
public void NameToButtonText(){
buttonText.text = gameObject.name;
}
}
8. Drag and drop Keyboard script to the inspector view of Canvas
9. Drag and drop KeyboardButton script to the inspector view of Button
10. Add the Keyboard.InsertChar function to On Click () in the inspector view of Button
Click the plus button under On Click
Drag the Canvas to the field that says "None (Object)"
Select Keyboard.InsertChar as a function
Keyboard -> InsertChar
11. Go to InputField and add the Keyboard.SetInputField function to the On Select in the inspector view
Click the plus button under On Select
Drag the Canvas to the field that says "None (Object)"
Select Keyboard.SetInputField as a function
Drag InputField itself to the field that says "None (TMP_InputField)"
12. You should now be able to click the button in VR and see the changes reflected in the input field. Duplicate the button and alter its text under its child Text (TMP) until you are satisfied with the buttons in the keyboard.