Populating the Server List

I've had a Server List screen for a while now and needed to populate it with servers as a proof of concept. This was as easy as making a Structure and a Data Table and doing the same method I did as the Replays and Inventory Screens. It worked great, except for when I then needed to call their indexes so that I could choose which server to join. I hadn't done this kind of thing before, and I thought it was a simple case of plugging the For Each Loop's Index into my Clicked event. But that would only use the last index of the table. This is because the Clicked event is called after everything is created on the screen, which means that the current index of the loop is the last one, making it impossible for me to get anything other than the last one with this method. I then instead decided to create my own Index variable in the Structure, and use that. This worked, but it also meant I'd need to set it for each row, and if there's a lot of rows, then it would be extremely time-consuming to do, so I wanted an easier way. I then thought of comparing another variable instead of the index to decided which is selected, but this meant that there was only one possible variable for this, the server name. It's also only possible if multiple servers can't have the same name, which they shouldn't, but even then, it's long and not optimal.

I then tried incrementing my own Index variable in the server button widget in Event Construct, but this only set it to 1 as it only happened once (it started as 0). I asked my tutors about it but to no avail, and I then asked online on the Unreal Slackers Discord server to find a solution, which I knew there was one, I just didn't know what it was.

As a sort of last attempt type thing I randomly decided to plug the loop index into the function that sets my button's index variable, and used the button's index in the Clicked event, and this worked perfectly. The reasoning behind this is that the loop sets the button's variables for each one it creates, which is how the text and other components are set, with a function that's called in the loop. By adding the button's Index variable to this function and setting it to the loop's Index, each time a button is created from the Data Table, that specific button's index is set the current loop index, like its other variables, and this happens for each button, so they all have their intended indexes from the loop. I then just use this in the Clicked event instead of the loop's Index and Bob's your uncle, I can tell the engine what to do for each index in the table.

The only problem with the buttons now is that the icons don['t change colour like the text does. At the moment, I have absolutely no idea why, as they're called in the same functions as the text, use the same colours and everything. The only thing I can think of is the white background is in front of them, however after making the background transparent, I found that when the button is selected, I found that the icons just disappear instead of change colour.

"Asia wooo" should have a square in the "Has Mods" column

After dragging the slider of the Set Color and Opacity node for the icons and playing the game, they turned black completely fine. It seems UE4 has a bug with setting colours through these nodes, as when you set them without changing the colour in them first, they end up being transparent like the alpha is 0. I knew about this a while ago, but didn't check this node for some reason, so was left frustrated for a while.

Another problem arose with this way of doing things. Because I was calling the selected function only when the button was focused (something I did on the Tick event mind you), it would unselect when not focused, which meant clicking the button to join the server would make the server unselect. This kept the index, so it only mattered visually, but it still mattered.

I investigated into how to create radio buttons with an array, and found this tutorial by Tefel Dev, which was extremely helpful and worked amazingly. I used it and now I can set the selected state without the need for focus on the button or not as it works like a List Box in something like WPF. I will certainly be investigating this method in other projects to try and streamline it, and together with my Blueprint animations, I can try and make a plugin that contains all these helpful additions without needing to make them all from scratch in every project.

The way things are set up now though, is that there are no animations, and I wanted it to have animations to fit with the rest of the theme, so I added animations. However things went a little off as I needed to only play them in certain places with certain restrictions, one of those being that I couldn't have a deselect animation because it didn't work like my tab implementation does. When one button is clicked, every other button plays the deselect animation. it actually looks quite funny:

So I decided that limitations were fine, and settled on this:

It works fine, and that's where I will leave it, unless I find a solution. I then quickly created some simple icons to round off the screen: