Creating a Selection Widget in Unreal C++

hey there in this video we will do something different I will show you an overview of how to create selection widget using C++ and blueprints such a selection widget is quite useful for uis like game settings where you can change a multitude of settings with different options it's also often used in character creation for example where you can quickly swap out body parts to create your own personal character and for this video we will focus on the selection widget and in the next video we will go one step further and use the witchet to create the settings menu so let's start with the C++ class create a new C++ class and please make sure to inherit from new common user widget for this video I will use a common UI but it should also work fine if you don't use common UI and just inard from user widget Comm UI makes a lot of things easier especially if you want to support controllers for your game in the U class add two specifiers the blue printable and the blueprint type blue printable will allow us to create new blueprint classes based on our C++ class so we can actually add our UI elements to the widget and blueprint type will allow us to use variables based on this class we need a couple of functions for our widget first of all we need a Constructor of course and we need to override the native construct function in user widgets native construct is basically the C++ equivalent of the blueprints construct event then for our selection widget we need to add some way to to add and remove selection options in this case I created functions for clearing adding and setting the current selection here you can also see that we are using a select option struct I didn't talk about structs yet but structs are a powerful way to manage data by grouping related variables inside one container with this you need to create a new file NC selection option. will have of course a struct which is of the same name but for un real just remember to use the f as a prefix if you see an F as a prefix you will always know that this is a struct and not a class and because we use a struct in this case we need to also use a UST struct specifier and we use blueprint type in order to create also variables and yeah so actually what we are doing in the selection option is we are creating a new variable for the label okay if you have created the selection option struct then you can actually use it also as a parameter here as you can see for the add option then we have two more functions these are the functions for the left and right buttons that's why they also need to be blueprint callable so we can call them from the witchet and these are essentially for selecting the previous option and selecting the next option delegates like I mentioned in another video are basically a way to create events so in this case we have declared a one parum delegate which is called on selection change which takes a in parameter for the index and we declare a variable on selection change uh which uses this delegate so our parent widget will then know okay the selection has changed maybe I need to do something for example in the game settings whenever you change the shadow quality or any other setting the event will be broadcast to the game settings widget and the widget will then save and apply the new setting then we have the on navigation function we will we use the on navigation function as a custom navigation rule for our widget this will allow us to override the behavior for the left and right errow key on the keyboard and also similarly the behavior of the controller when navigating left and right instead of navigating to the next widget we will then call our select previous and select next functions navigation rules are therefore a great way to implement support for keyboard and controller navigation then we have the update current selection which is basically just doing a update to the label and then we have three variables so these variables are actually quite easy so we have the array of selection options then we have a pointer to our label and here we also have some really cool magic as we use the bind widget meta specifier this specifier is key to using C++ classes for UI widgets as you can add your variable in C++ and unreal will bind the variable to the widget in the blueprint widget editor automatically please keep in mind that um I'm using you common text blook here but you can also use U text block if you are not using the common UI and then the last variable is of course the current selection okay let's take a look at the selection base in the Constructor we are primarily focused on initialization we first set the current selection to the first element and then make the widget focusable the focusable property is crucial for enabling controller in keyboard interaction with your UI additionally we set the visibility state to visible as widgets are by default set to a non- hitable state this setting allows your widget to be visible and interactable with a mouse but controller use would be ineffective as it would not be able to focus on your widget unfortunately we need to set the visibility State using set visibility internal the alternative set visibility function is a virtual function and as a general rule you should avoid using virtual functions inside a Constructor the other option would be to directly set the visibility variable but this approach is deprecated and is slated to be moved to a private section in an upcoming update of unreal okay then we have the native construct function in the native construct function we are basically only um checking if the options are zero if this is the case then we just um lock a message that we didn't provide any options and return then we update our current selection to show the um first label so the update function as you can see just sets the label text to the current selected label also the select previous and select next functions are very easy we just pretend to do navigation to the left or right and therefore combine the same functionality for mouse keyboard and controller okay back to the native construct function here you can see that we create a navigation delegate which is basically a struct holding a pointer to our function which we want to call if the event occurs so we are holding a pointer to the on navigation function and what we are basically doing is just telling unri okay we want to use a navigation custom rule for the left and for the right navigation and we want to call this event delegate whenever this navigation occurs so they can clear function is very easy we just reset all the options then we have the add option function which is very important to add options the add option function is basically just adding to the array and then updating the current selection to show a label if you aim to update the selection programmatically in the future then implementing this update function becomes essential we will require this function in the next tutorial when we initialize the game settings UI specifically it will be used to load the current game settings and for instance sets the shadow quality to its previously saved State and we are checking the index if it's uh out of bounds and if it's out of bounds then this check function will crash the application so this is just for development purposes to really check if we are using the correct indices then we are just setting the current selection to be the index and update the label again next we tackle the most complex function in this video the on navigation function initially we check if the navigation parameter is limited to left or right as it should never be top or bottom this serves as a sanity check to ensure we haven't made any errors in the custom navigation routes the select change calculation depends on the direction if it's left we decrease the index by one if it's right we increase the index by one after updating the current selection we update our label again and we finally broadcast our event to the parent widget to say okay hey our selection has changed finally we must return this widget as a result of the on navigation function this step is crucial because we have handled the navigation internally and do not want to shift the focus to another widget in our UI okay and that's it already for the uh C++ class now we can actually Implement our blueprint widget and we are just doing it by compiling all the changes and going to the editor okay basically all you need to do is right click inside the folder and you use user interface and widget blueprint and then you can just search for your selection component so I called it selection base uh just use it as a base class and then just name your uh blueprint widget so I call it selection two in this case and um instead of continuing with this uh widget I would just show you how I created it inside here okay so here we are as you can see I've used a horizontal box as a container and then just dropped two buttons here one is the previous button and the other one is the next button to um go through the options and inside of these buttons I've set images for the arrow left and also an image for the arrow right for the label I initially placed the size box and configured both the minimum and maximum desired width to 250 pixels this ensures space for the text while also preventing size changes if the text is smaller than 250 pixels I've chosen this approach for a consistent and Visually appealing appearance across all game setting witchet avoiding the odd look that could result from varying sizes due to different text lengths then we have a uh text Block in this case I have used the common text block but like I said if you're not using the common UI you can also use a just normal text block make sure to call it label uh so the um bind widget specifier is is really working you can actually verify easily if the C++ class actually found your label and if the uh bind widget functional enity um worked in order to do this you just go to the bind widget window and then just open the uh widget drop down and you will see your common text label and if everything worked and your label is bound to the C++ class then there should be a check mark here and it should say the widget is bound okay nice so for the um design everything is set up now we just need to go to the event graph because we have a couple of events I actually added two events for the previous and next this is for the buttons if we click on the previous button then we call the select previous function of our C++ class and likewise for the next function um I can also show you so this is the onclick functionality here and also likewise for the previous it's the onclick functionality here then we have our on Focus lost and on Focus received so on Focus received you can overwrite these functions by clicking here overwrite function and then just choose on Focus received and on Focus lost this is not uh possible in this case because it's already overwritten but it would show up here the unfocus receive function applies a new style whenever the player Focus is on the widget this is a great aspect of the common UI as it allows you to assign style assets to your widgets and alter the AP perience with just a simple function call I've configured This Ti to change the text color but it also offers the flexibility to add underlines or use completely different fonts similarly to the onfocus received event the onfocus Lost event applies a default style whenever the widget loses focus and the player shifts attention to another widget however if you're not utilizing the common UI framework you unfortunately can't use the style Assets in such case for standard text blocks you would need to use the set color and opacity function to adjust the appearance okay nice we have set up everything and actually we are already done with the selection um I can now show you how to use it actually um let's check it in our pause menu maybe I can just drop it in here and show it to you so we have our DC UI I've got a dcui selection and yeah there it is then we can add options so let's say we have two options here and call it one two three for example and just compile save and then play as you can see it's possible to select widgets using the keyboard when the widget is focused the textile changes accordingly by using the right arrow key we can navigate through the options and it even cycs back to the beginning if we reach the end similarly if you use the left Arrow key it will loop back to the end of the options array allowing us to seamlessly switch between options using both the left and right arrow keys we are done with first part of this tutorial and have successfully designed the selection widget as I mentioned at the beginning the next tutorial will then focus on the game settings widget I hope you found this tutorial useful if you like this video please give it a thumbs up and consider subscribing to the channel for more content like this don't forget to hit the Bell icon to get notifications for upcoming videos thanks for watching and I'll see you in the next one

Channel: Scripted Adventure

Views: 987

Keywords: unreal, ue5, c++, cpp, gamedev, unreal engine, game development, programming, user widget, blueprint, ui, ux

Id: Rvw-YCEyUTI

Length: 14min 14sec (854 seconds)

Published: Tue Mar 19 2024