Customize Lyra Options Menu : add new tabs with a CommonUI animated widget switcher UE5

in this tutorial I'll show you how to customize your options menu so that you can reorder tabs you can add icons to your button tabs and you can also add extra widgets to your settings as an example this is what my options menu looks like in my current project it's been really useful for showcasing just a controller layout and still having all that nice functionality that comes out of the box with Lyra especially with languages and especially with the video settings and colorblind mode the settings menu is available through when you play the game in editor or in a package game so there it is let's go ahead and find where that widget is actually so you can actually navigate to tools debug and then the widget reflector is this really nice tool that I've touched on a little bit in my other videos uh it's a nice way to get to the widget that you're looking at so I'm gonna pick the hit testable widget so what we're looking at is the Lyra settings screen and then I'm going to press escape and then I can just click on it to open it okay and this is our widget for our settings screen okay I'm going to just stop this simulation and so this is our tab list so it's just called top settings tab and it's a widget itself uh it's a horizontal tab list and let's actually go ahead and right click on that just to find the references and okay so we have logic for on the when the tab is selected we navigate to the setting uh and we have logic two register all the tabs so that they get the title and the button okay so let's just search for register top level tab find references so yeah this is where your Tabs are are constructed so whenever that widget is constructed it registers these tabs and those are all the names the the setting Dev name that are set up in in the code so yeah you can remove a settings tab here you can reorder them so for now we're just going to test let's say removing the gameplay collection so let's say you have a game that doesn't have any localization support uh so the gameplay section only has the languages let's just say we just want to reorder all of these so I'm going to stop this and unhook the gameplay collection I could actually remove this execution pin and then if I want the mouse and keyboard level tab to be first the GamePad one to be first let's just rehook these and now we have a different order so I'll keep this one here because it's great when games handle localization yeah so I'm going to just play and then when you look at the options you'll see that you only have these options and they're all reordered next part I want to cover how you can optionally add icons to your tabs or you could even just have no text and just the icon showing up whenever you register your top setting tab there is an option for an icon brush but it's not hooked into anything so let's go ahead and fix that uh so uh we can so this is a slate brush structure uh so inner function uh we are just going to add an input so that we can optionally add the icon per tab so I'm just going to search for Icon brush oh all right brush it's a slate brush okay so I'm going to search for a slate brush Okay so optional icon okay and then we can hook that into the icon brush Okay so now it's possible to set up an optional icon um so I'm just going to drag that out and we can make a slate brush uh I just care about the size of the icon but you could you can make it as intricate as you want or with any settings you want so I'm just going to make a brush from the texture uh and I'm going to make all my icons be 40 by 40. so I'm going to choose very arbitrary icons so let's say for the keyboard and mouse uh let's just have a key uh so oh no let's just search for the mouse uh so that looks good okay I'm just gonna make some space okay I'm just going to copy this and then the GamePad I'm just going to choose the d-pad so d-pad this one's good and then video there's not really one that really represents this uh so I'm just going to choose something arbitrary so icon I'm just going to choose this and then our audio I'm not sure if we have a sound icon so icon uh you know what I'll use the icon warning for the sound and I'll using I'll use the Ability Dash icon for the other one so Dash yeah that should be good save and you'll notice that when you play they won't show up right away because we actually need to set up uh our button to be ready to receive and set what uses that icon so I'm just going to stop this okay so we need to find where the button tab is being spawned and which one it is so in a register top level tab this is the button that will be spawned with this information or this tab descriptor so I'm just going to browse to it and make this small open it okay so this is the tab button that spawned so we actually want to add a image over here so um and put it horizontally with the text and so I'm just going to go ahead and create a horizontal box and put the text in it and then let's add an image for our icon okay okay so our image we can Center it vertically and let's add a spacer so that it has some some room to breathe uh so spacer all right okay and both of these can start collapse just in case we don't actually have a a icon for this so that the text looks good still um so I'm going to just go to add the visibility and then let's just set that to collapse for now okay inner spacer I'm just going to give it five pixels of padding okay so there's actually a nice function we can override to receive or whenever you set the tab label info so you can click the drag down for interfaces and then under tap button double click on the set tab label info and it'll it'll pretty much override that function so from the tag descriptor drag it out let's break this so we can get the icon okay so the icon brush uh there it is so if if there is a brush image I will make sure to show that image so if it is valid so if that icon is valid uh I think I forgot to mark them as variables so this I'll just call this one icon spacer and is a variable the image I'll just call it an icon and this one is already a variable so that's good okay so then the icon spacer set visibility and then this one is uh I think not his hit testable because you're pressing the button not just this item and this graphic uh in okay and I will do the same we can we can have both of them go in this uh and it will execute it will set the visibility for both of them uh but before we set the visibility I'm just going to set the icon Okay so set image texture okay so we can set the brush from texture or technically we could just we could just get the let's just recombine these structure pin and then get the image from it or let's break it and let's get the image from this okay and then you can set the brush from that data so just in case you had said all the settings that we saw here in the brush itself you can do that instead of just setting the texture so yeah we have the image and we have the visibility okay and then if I press play and I get to my options you'll notice that it only shows the icons and also it looks to be vertically stacked maybe so let's go to our desire and here so maybe the horizontal box needs what the settings had uh on the button text block so probably to fill horizontally and vertically okay so there's problem one fix okay so let me just okay so it looks nice vertically okay and one other thing is if you don't if you just want the icons you can let go of the spacer and you you don't even need it but if you actually want the text that logic is set up in code so we will actually need to call the parent function so right here you can right click and add a call to the parent function and that will actually take care of setting the text but optionally you could also set that text logic here because at this point you do have the tab text uh but yeah we're just going to call the functionality that was already there and we're just appending or we're just adding to the functionality and and supporting icon brushes okay so now if we play oh options there you go now you have the icon and the text and it looks pretty nice all right so my first thought when wanting to add a tab with the controller mapping was to just register a new top level tab so then if I drag that out you can add another execution pin so insert execution pin before so it's nice because you don't have to rewire all the all of this so and then let's just duplicate this and then controller but then I found really quick when you play this and you open the main menu it crashes immediately because this setting collection doesn't exist um so I in this video I'll just show a workaround for that but first I I really want to just go over how the game settings are populated and that it's it doesn't actually swap the widget it just filters out information which I found really interesting uh so if you want to go that route you can add a Dev settings or Dev setting collection I still haven't fully dived into that uh but Let's do let's double click that and let's double click register Dynamic tab and I didn't have a project file available yet so I will say yes okay so first of all I was really curious to know where these were being set up um so I'm just going to go through it by just searching for this reference um so I saw that it was over on these two so I'm just going to open this in find tools okay um so I could see that it initializes this setting and it gives it the name video so if you ever want to update the name of those tabs you can do so in this file and all the other files that you find that set the display name so it would be nice if this was some kind of configuration so if someone does find that there's a configuration for this please share in the comments um but yeah so in my case I just wanted to add a screen that has an image so I didn't want to go through the whole process of creating a new game setting collection I just wanted to add one texture uh One widget so yeah just to show how this actually works so this collection is initialized okay and who calls this so so this is in the game setting registry so I'm going details but I honestly I I'm not that familiar with the game settings but it's good to know how it filters all that widget information so yeah on it on initialize it registers these settings it gets it ready but what happens when you click on the tabs uh so for that I was searching for I I stumble on navigate to settings okay so navigate to settings I saw that it was called uh I it was called when you the tab is selected so then if you double click that it will navigate to that function so and then navigate to settings all it does it it gets this Dev name that we gave it right here when we register all these settings okay and let's navigate inside so I just press F12 so it's interesting because all it does it it finds the setting by the dev name so essentially all this does is that it filters all the settings that have to do with this setting um and it just gets that setting panel so the setting panel is right here so it takes us uh it calls this function set filter state on this setting panel so let's go see what that looks like uh so that just refreshes the settings list so essentially from my understanding is that whenever you click one of the tabs and it has a Dev name and a Dev setting all it does is it refreshes the settings panel just to show the relevant information for that Dev setting so yeah for for my purposes it was very much Overkill so the next part I'm gonna actually go over how to add your own custom tabs or how I went on about doing that okay so let me just minimize this and maximize that window okay what we actually want to do is we want to add another tab to the top of this but not not a Dev setting and so let's go ahead and navigate over here and then instead of Regis register top level tab uh we're going to just add a tab so top setting tabs oh foreign so I'm just going to register tab okay and then we can choose the Lyra tab button base and the cotton widget will not put anything here and then this one will just be called controller okay so let's delete that one because it crashes anyways uh and then let's compile and then the tab index will be at zero it'll just be the first tab that we have okay and then in our designer let's add another widget that would essentially just replace the settings panel when this one is when the first one is pressed so let's go ahead and create our widget so I'm just gonna minimize this uh let's actually find where the settings tab is so we can have a nice spot for our widgets so I'm just going to click on that settings panel and then browse to it uh yeah and then this setting panel is just a common user widget uh but yeah it is also a game setting panel and so I'm just going to right click user interface widget blueprint and then let's just choose a common user widget okay and then I'll call this one just W underscore settings custom one so this will be your first custom page or I guess I could just call it settings controller okay because I I want to cover over having more than one custom widget next okay and then I'm just going to cheat a little bit and just copy over the the Border just so that I have all the information I need so oh yeah so I right clicked on it and just copy and then in the settings controller I will right click and paste all right and then I'm just going to make it look nice and have the right also be the same padding or I guess alternatively I could have just had those two here okay and then I'm gonna compile save and I can delete this list view settings and I'm just going to put an image inside so image and yeah this brush is okay or we could choose anything really if it was a white placeholder it could okay so what place placeholder sure okay so this is my first or this uh this is my image um so I'm just going to add some text too just to make it clear that this is uh the first Custom Image or the controller mapping so I'm just going to add a an overlay oh okay and then I'm gonna right click on my image and then wrap with an overlay okay and I'm just gonna make the image fill all this space and now I can add my text so I'm just going to drag in my common text I've got Center Dot and I'm just going to write this one controller screen custom widget one so not exactly the most exciting widget but you could put whatever you want on this widget okay and then in our in our Lyra settings screen we're going to add this one right under the settings panel so settings oh whoops wrong one so I'm going to search for controller uh yeah and then I'm going to drag that in right under the settings panel okay and I'm just going to maximize this so we can actually see so what this one does it just fills all the space so I will have the same setting here okay but this one will start uh it will just start collapsed okay so in our graph let's add some logic so that when you're not a Dev setting let's just go ahead and show that widget so on Tab selected we have to find a way to know that it's not a Dev setting so we're going to actually keep track of that in a array so let's make an array of name so that we have a reference for all the ones that are Dev names so go ahead and create a new variable and then let's change the type to name okay and then this one I will just call uh Dev setting names and let's update that one to be in Array all right and then I'm going to make five because we have five so one two three four five and then let's just go ahead and copy paste all these setting names okay so Gamepad collection Video Collection audio collection and the gameplay collection which for now only has the localization settings or the languages settings so you could also rename that one to the languages if you'd like in the code um yeah and then so whenever this happens we can check if this array contains that type ID so if it contains so if it contains that item then we want to go ahead and navigate to the setting which is just filtering out that information and updating the game settings widget okay and then if it's false then we actually want to show our a newly added settings controller which is also a variable so I'm going to just paste that and then get that variable or pretty much get that widget and then set the visibility to non-hit testable okay and we actually want to hide our game settings or well this one here so that we don't have both showing up at the same time so the settings panel is what is called uh for some reason they don't show up here unfortunately so you have to kind of right click settings panel okay so get setting panel so this one will set the visibility to be collapsed okay and then we want to do the opposite here we want to set all right let's let's duplicate this one and we want to set our settings controller to be collapsed whenever it's a Dev setting so I'm just going to move this stuff over and Surround it okay so let's see what happens when we play okay so it looks like I use the wrong button class so I will go ahead and fix that so I'm going to stop this so the problem it's nice because it told me exactly what what happened so Lara base button is not a it's it's just abstract it's not something you can spawn so I'm going to navigate to our register Tab and I could just copy the one that is here so it's just the Lara button tab so I'm going to navigate to it and then if I go back to our event graph I can just click this button so it will choose whatever I have selected which is nice okay so compile save and let's see if that works now okay so if I go to options all right or beautifully awful looking one is here okay so there you go okay so another thing I forgot is that I need to actually show the tab or show the content whenever the settings names is set up so I'm going to just duplicate the first one also okay okay so the settings panel let's make it non-hit testable so that is the default that I saw that it's using so self only okay and then let's try that all right so when I play options there you go now we have our widget it doesn't have its title okay so what happened is that it registers this tab but it doesn't set the title or anything so the function we actually want is register Dynamic tab and then we can split the structure and let's choose the same icon then the GamePad collection has and just save some time so Lyra tab button or I think it's just Lara button tab okay that's why so it's Lyra button tab and then I'll call this one controller and then the tab descriptor tab text that will show up is controller and that's pretty much it I'm going to delete this all right and let's see what that does so now when I escape options ah now it shows up with the icon and everything okay so the next part of this video I'm going to cover so now we have an extra tab with the widget but it's not exactly scalable uh let's say if you want to add more custom tabs so the next part of this video we're actually going to replace this widget with an animated widget Switcher okay so let's stop navigate to the designer tab and then under our settings controller let's right click on that and then replace and then you can replace it with the common animated Switcher okay and then let's compile that all right and I will rename this one to just extra tabs Switcher and compile save it's just the extra tab switcher and let's delete the old references and let's save and then the same thing for this one here okay and now I can pause and everything but our switcher doesn't really do anything yet but we actually need to initialize that switcher to be connected to this tab list so what we want to do is I'll just just navigate to the graph and then in the functions tab you can click on override and then it's on initialized okay so just as good measure I'm just going to add the call to the parent function just in case that was doing some logic that I need and then we're going to reference the top settings tab so that's our tab or tabs right here okay and then we can call set linked Switcher uh Sue first we're going to get this value here and set it to here so what this does is that as soon as the this widget is initialized it will it will pretty much go in this tab and it will get all the registered tabs and their content and it will populate the switcher and whenever we have the switcher be visible we will see the associated widget to the tap so at the moment we don't have any content actually in our setup in our tab descriptor content type so so for the for the Lara tabs we're going to just create an empty one because we're just going to pretty much hide the widget Switcher and for the other one we we need to actually set up what we want it to be um so actually for a controller let's just select our uh controller settings controller so the the widget we created and then for everything else we could actually set up an empty widget so I'm just going to navigate to our controller and I'm just going to duplicate it and have a pretty much like an empty screen so I'm just going to navigate and then duplicate this and then settings page placeholder maybe Place folder okay and then I'm going to delete this and the overlay so it's just empty so this would make it so that it animates nicely from nothing to the controller page and so in the Lyra screen Lyra settings screen let's just set that content for that placeholder okay so settings page placeholder okay and another point I want to make is that we register we register this tab dynamically right here but another spot where you can set up the the content or the tabs is in the pre-registered tabs in Array info so you could have at all the index indices it follows that you could have you could Define your your widgets here so I'm actually going to go ahead and Define two tabs just to show how that works put in controller and then the text is controller the icon brush I can the icon brush is just the d-pad I guess I'll just choose to deep ad down and okay that looks pretty good and then it's just a Lyra button tab and then the content type is just the controller okay and then I'm actually going to duplicate that controller just so we have an example for an extra tab so this one will be extra settings or settings extra okay and then this one I'll just change the color to be maybe something green not not too hard on the eyes and then I will just call this one custom widget two or I'll just update the text so we can see uh which which tab it is and which content it is uh yeah so let's navigate back to the Lyra settings screen and then I will add that one as extra and we'll call it extra settings and then the icon brush I'll just put nothing just to show that that still works and then Lara button tab and then the contact type will just be extra so settings extra okay so now that we have these free pre-registered tab info we can actually remove this connection or we could have just duplicate this depending on how you're setting up your tabs and what order you want them to be in so the order is easier to set when you make it in the construction because these already these don't have like their their index is not exactly clear they're just added one after the other yeah so let's go ahead and play and see what happens sweet okay so we have our controller widget for extra settings and then we have our mouse and keyboard and you'll see that you hit this enter Because the there's a uh because the register tab uh logic that we have it doesn't actually set the content even though the content is set up in our register uh top level tab so this is the next thing we're going to address it doesn't fully crash the game but it will in a package game so yeah so in in that case if you don't want to do any C plus plus you're more you're better off just adding them manually like we did in the last uh step but yeah this will work and yeah it looks pretty good right so so let's double click on register Dynamic tab okay and then you can get the code off of my GitHub repo and yeah let's just paste it over this function here so the issue is that the created tab content widget is not actually set so it's not ever created because the the descriptor so the contact type is set here but we're never using it to actually create the tab so I'm just going to paste all that code in all of this logic pretty much comes from the setup tabs function which is using the pre-registered tab info array that we just set up or we just made use of pretty much this code path wasn't being hit if you're registering dynamically um so yeah so this logic is here if you want to have a look I'm just going to go back to where I was um so yeah so whenever you register this Dynamic tab if there is a uh content type in the dynamic tab is null which would be true we just create a new widget and broadcast that we create a new widget and so let's keep in mind that this widget will not really be shown but if you want that behavior then it's great that this is here because it actually does uh like it used to actually call register tab but with the empty or null created tab widget so this just fixes this but it might also be intended Behavior depends in what other ways you want to use a Lyra tab list widget if you want to use that tab content type okay so after pasting this code and again I just surrounded this just to show that these are the changes I have um for future large updates so I'm going to go ahead and close my project and I'm going to run from here so I'm just going to make sure development editor and this is my project that I created and let's go ahead and debug this or run all right so make sure to have the output log open just to see what's going on so if you don't have your output log open you can navigate to window and then just click on the output log yeah so let's go ahead and play okay and then let's go to options okay no more problem but the last part that I've seen and would like to have your help with is that since the widget switcher is collapse I think it stops updating so it updates to the empty or the default widget and then it doesn't animate to the new one I think because the previous one wasn't visible so how I fixed it is basically I just made sure that the animation length was Zero but it would really be nice to just get this nice animation going um so I'm just going to stop this and I'm going to navigate to the uh Lyra settings sitting screen okay and then in the extra tab switcher I'm going to change this transition duration to zero which makes me sad okay I'm just going to maximize this so f11 and then alt P to play so when I quit when I press Escape options uh now it works as intended but it doesn't have this nice animation that we had previously before we had the settings that are using Dev settings I actually have a content so we saved a crash but we lost some nice smoothness um so yeah definitely if anyone has any insights on the animation or animated widget switcher that would be lovely uh yeah and as you can see if you're settings names run long uh it ends up not really fitting here so it might be good to just use icons or choose words that are shorter and you again you have to keep in mind localization and different languages and their length of their words so yeah the animated widget switcher was a nice solution just to be able to scale any new widget that I would like to have in my settings menu and also just to learn more about that common UI feature and it's been nice not having to have logic or unique Logic for any time something is pressed to hide unhide specific widgets and the animated widget switcher was perfect for this case um so yeah this is more of my learning about common UI and customizing what's already there in Lara so yeah thanks for watching

Channel: NanceDevDiaries

Views: 2,351

Keywords: Game dev, UE5, Lyra starter project, Animated Switcher, CommonUI

Id: ABtbckH6Qak

Length: 44min 42sec (2682 seconds)

Published: Thu Aug 10 2023