Language:
Page Info
Skill Level:

2. Widget Blueprint Setup

Choose your OS:

In this step, we create the layout of our interactive UI Widgets and script what happens when clicking a button.

Steps

  1. Open the KeypadDisplayWB and replace the Canvas Panel in the Hierarchy with a TextBox wrapped with a Size Box.

    Keypad04a.png

  2. For the Size Box, set to Desired on Screen and override the Width and Height to 100x50.

    Keypad04.png

  3. For the Text Box, set Hint Text to 1212 and adjust the Font Size to 28.

    Keypad05.png

    For example, the player must use the keypad to enter the text 1212 to signal a successful entry but you could use any value you wish.

  4. Open the KeypadWB and set the Hierarchy up to create 3 Buttons with the text 0, 1 and 2 on them as shown below.

    Keypad06.png

    You may also want to press F2 on each of the Buttons in the Hierarchy to change their names to reflect which button they are.

  5. Add a second Horizontal Box containing two Buttons with text on them, one set to Del the other set to Ent.

    Keypad07.png

    Our keypad will only have three numerical buttons and two others for deleting (Del) or committing (Ent) entries.

  6. Hold Ctrl and select each of your Buttons, then set the Is Focusable option to False for each.

    Keypad08.png

    In order for our setup to work, we need to ensure that no other widgets we interact with will take focus away from the Keypad Display widget. If we left these set to true, when we go to click on a button, focus will be taken away from the Keypad Display and shifted to the button preventing us from passing the key press and value over to the Keypad Display.

  7. On the Graph, add OnClicked Events for each of the Buttons.

    Keypad09.png

  8. Create two Variables, a String type called CharToSend and a WidgetInteractionComponent called WidgetInteraction.

    Keypad10.png

  9. Hold Alt and drag in CharToSend and connect to the OnClicked Events then set the variable value as shown.

    Keypad11.png

  10. Hold Ctrl and drag in WidgetInteraction then off it Send Key Char and connect CharToSend and the OnClicked Events.

    Keypad12.png

    We use the Send Key Char function here as Text Boxes in Slate do not get Keys sent directly to them, for example, they don't recognize that the A key was pressed so send A through.Instead, they listen for Send Char, that way the lower level system operating code can do things like determining if Shift was held down while pressing the A key or if Caps Lock was on while pressing A.

  11. Off the Del OnClicked Event, use the Press and Release Key set to Backspace from the WidgetInteraction variable.

    Keypad13.png

  12. Create an Event Dispatcher called EnterPressed and call it from OnClicked(Ent).

    Keypad14.png

End Result

Our Widget Blueprints are set up to display our keypad and keypad display, next we will add them as Widget Components to our Actor Blueprints so that we can have them appear inside our level. By the end of the next step, we should be able to test out our system and interact with both elements during gameplay.