Unity XR Plugin Framework: UI System / Keyboard Interface

by Jennifer Wang (2022)

  1. Add EventSystem

    • Hierarchy -> XR -> UI EventSystem

  1. 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.