3. Actor Setup & Testing

In this final section, we add our Widget Blueprints as Widget Components to our Actors and define what happens when the player clicks on the Enter Button, checking to see if the entered text is the same as our GoalText. With everything in place, we give it a test to see the end result which prints Success to the screen if the code is correct or Wrong Code if the code is incorrect.

Steps

  1. Open the KeypadDisplay Blueprint and add a Widget component with class set to KeypadDisplayWB and Draw at Desired Size. Draw at Desired Size is a quick way to cause the render target to automatically match the desired size inside the Widget Blueprint.

    Keypad15.png

  2. Open the Keypad Blueprint and add a Widget component with class set to KeypadWB and Draw at Desired Size.

  3. Uncheck the Window Focusable option for this Widget Component. We don't want this component to take focus away from the Keypad Display widget, so this needs to be unchecked.

    Keypad16.png

  4. Also inside Keypad, add a WidgetInteraction component with Enable Hit Testing set to false. We add this WidgetInteraction component so that we don't have to get a reference to the WidgetInteraction component in the player character and we disable Hit Testing as we don't want it to generate any hover effects. WidgetInteraction components by default are set to Virtual User Index 0 when they are created and all of them communicate using the Virtual User Index ID. Since the WidgetInteraction component in the player character is also using Virtaul User Index 0, this is the same as getting a reference to it.

    Keypad17.png

  5. On the Graph of Keypad, off Event Begin Play take the Widget component and Get User Widget Object to Cast to KeypadWB.

    Keypad18.png

  6. Off the As Keypad WB pin, Set Widget Interaction and pass through the WidgetInteraction component from Step 4.

  7. Also off the As Keypad WB pin, call the Assign Enter Pressed which will create an Enter Pressed Custom Event. Now when we click on the Enter button this custom event will be called which we can use to check if the correct code was entered.

    Keypad19.png

  8. Create a Variable of the Keypad Display Actor type called TargetDisplay and set it to Editable.

    Keypad20.png

  9. Create a Variable of the Text type called GoalText, then Compile and set the Default Value to 1212.

    Keypad21.png

  10. Hold Ctrl and drag in TargetDisplay to get the Widget and User Widget Object then Cast to KeypadDisplayWB.

    Keypad22.png

  11. Off the As Keypad Display WB pin, get the Editable Text Box and GetText(Text Box) to see if it Equals Goal Text.

    Keypad23.png

  12. Add a Branch with two Print Strings where off True (use Success) and False (use Wrong Code).

    Keypad24.png

  13. Drag the Keypad and KeypadDisplay Blueprints into the level and rotate/position them as desired.

  14. In the Details panel for the Keypad Actor, set the Target Display variable to the KeypadDisplay in the level.

    Keypad25.png

  15. Play in the level.

End Result

Approach the keypad display and Right-click in it to focus on it. You can look at the buttons and Right-click on them to issue the Send Key Char command and pass through the value to the display. We are using the Right Mouse button to interact with the widgets in the level, but you could swap this to use gamepad or Motion Controller button presses as well.

While this example only prints to the screen if the correct code was entered or not, you could instead fire off some event that opens a door, spawns an enemy or any other form of gameplay releated event!