Custom Text Entry Box

In order to fit with the style of the rest of the UI, I needed to make my own custom Text Entry Box for the search areas in the Filter boxes on the Replay and Inventory screens.

At first I didn't know how best to make this, as the default Text Box doesn't have any hover events for the mouse, and using a button on top of this would stop it from being interactable. I could've nested the Text Box inside the button, but instead decided to use some default functions that UE4 has for UMG, namely "Event On Mouse Enter" and "Event On Mouse Leave", which trigger when the mouse enters and leave the widget, which in this case is perfect, as I want the whole thing to act like a button. I created a simple animation to play when hovering and unhovering, as well as setting the cursor to be the Text Edit Beam, because the default Text Box only changes this in the middle where the text is, instead of around it where it's padded, so changing the cursor myself adds immersion for the user.

I then decided to add a Clear button using a button widget I recently made, and so added its Clicked event to clear the text in the Text Box.

However, the cursor stays as the Text Edit Beam even when on the Clear button, so I added Hovered and Unhovered events to change the cursor again.