To create new input friendly UI elements you need to rember that your new element class must inherit from WBP_GenericInputHandler, or from a class that already inherit from it.

Create From Existing Elements

This is the most common case, where you want to create a customized version of an existing element. Just remember to always inherit from a Generic class, never from Basic classes if you want to learn more about elements types follow this post.

For example let’s say you want to create a button with a new style for your game, to have a reference of how it’s done you could search the basic class of that element, in this case the WBP_BasicButton asset (remember, it contains the visual style of the button, all the logic is inside WBP_GenericButton).

First off you need to inherit from the WBP_GenericButton, if you want to learn how to correctly inherit from a class follow this post.

After that you can start making the style of your button in the designer widget

when you are happy with it you’ll need to add some basic logic

there you need you specify which visual elements change and how, when cenrtain things happens, for example you need to specify the Selection, Unselection, Click, Activation, Deactivation and so on, to do that look in the function section of the graph

what you need to do is to override those function that we said before, to do that just click the Override button before the +Function button, here you’ll find all the functions that you can override from your class hirerarchy (in this case WBP_GenericInputHandler->GenericElement->GenericButton->YourCustomButton)

let’s override for example the Select function, in the WBP_BasicButton the logic is very simple

never delete the Parent node in an overriden function, it runs the logic in the parent class

use its return value to know what to do, in this example when Select is called it means that something want to select your button, but there are certain policies to respect to select your button, if those policies are all respected then the return value will be true and you can specify what to to, otherwise you can return false as the parent node did

in the case of WBP_BasicButton the selection consist in playing an animation

same thing is done for the Unselect function.

---

Create A Whole New Element

Let’s say you need a UI element that is not contained in the plugin, to create it you need to understand in which category it falls (if you want to learn more about elements types follow this post).

For example let’s assume we want an input friendly Elements Switcher, which can contains other elements but can show only one at a time, because it can contains other widgets, this means that it is a Elements Manger so you’ll need to inherit from WBP_GenericElementsManager (if you want to learn how to correctly inherit from a class follow this post)

Open you widget after you’ve created it, the first thing to do to make sure it can contain other elements it to add a named slot

which will be exposed in the hierarchy when you use your Elements Switcher in the Hierarchy of a widget.

After that you need to add the logic of your switcher, to do that open the Graph Editor

the first part to add is to specify to the parent classes which is your Named Slot, to do that override the function called GetElementsPanel

in this case you can delete the parent node because it is a NULL reference

replace it with the contet of your named slot

after that you can override functions like Next and Previous if you want to look at examples seach for these assets: WBP_GenericList and WBP_GenericGrid

Then you could configure the inputs & actions relations look a this post to learn more