's UMG Tutorial: Create a Scrollable List of Buttons From a Dynamic Array

Community Community & Industry Discussion
1

Dear Community,

In entirely BP tutorial I show you how you can make a scrollable list of clickable buttons from a String array on key press from the Character BP!

You can run any BP code you want when any of the buttons are pressed!

The power of what I am sharing with you is that you can so easily add new entries by simply adding another string to the String Array, either in defaults or during runtime!

Because the foundation of my UMG setup is a dynamic array, my tutorial is showing you how to make Dynamic UMG elements, that could be based on user input or runtime game conditions!

I show the entire setup here, with lots of pictures!

Many thanks to Nick Darnell and the rest of Epic for UMG!

[FONT=Comic Sans MS]:heart:

RamaUMGTitle.jpg
RamaUMGTitle.jpg1280×960 252 KB

2

easy to read ,
will help me a lot when I will learn UMG thank you so much

3

Hi,

To add to our Doc’s Team has recently updated and added some documentation for UMG and using it for different functionality! Make sure to have a look at ! :slight_smile:

.unrealengine.com/latest/INT/Engine/UMG/index.html

4

Thank you ( and like you : thank you Epic for UMG too.)

5

I added your link to my wiki, thanks for the letting me know !

https://wiki.unrealengine.com/UMG,_Create_Scrollable_List_of_Clickable_Buttons_From_Dynamic_Array#Related_Tutorials

Let me know how you like it !

Hee hee!

You’re welcome!

And thanks again Epic, for everything!

:slight_smile:

6

Looks great ! Man I love UMG, the visual editor is awesome, I need to do some more work with it soon. Thanks for the tutorial! :slight_smile:

7

Hi!
In the function CreateButtonAndSetText, I can’t seem to set the output variable type to Object, can’t even see that in the list. Any pointers on how to fix ?

8

You’re welcome , great to hear from you!

Yea UMG is amazing!

if you go to the function node and click to add a new output variable, you can then type in the word “Object” into the search filter

I admit it too me a while to find it too! I had to end up using the method I describe just above, of using a search filter.

The search filter method definitely works!

Here’s a pic!

efa0ff24104348c6fa689b8687cc84910d018958.jpeg
efa0ff24104348c6fa689b8687cc84910d018958.jpeg1273×903 177 KB

[FONT=Comic Sans MS]:heart:

9

Aha!
Thank you very much :slight_smile:

10

Hee hee!

:slight_smile:

11

I actually asked a question earlier on the forum but I believe is actually close to what I am looking for. I am trying to install an image border around my Hud using the widget blueprint section. I already have a decent blueprint thanks to a tutorial I found. I found a section that says image and a place where i can install an image, I have already gotten the checkered box to show up in game, just need to replace that with an image. I assume it’s something to do with the blueprint.

Untitled.png
Untitled.png1200×526 114 KB

and here is the blueprint (I don’t need the floats yet, I will plug those in later.)

Edit: sorry wrong blueprint and i plugged one in just to show where it would be going, I believe the object return value needs to go into my hud interface somewhere but I can not for the life of me figure out where

widget blueprint accurate.png
widget blueprint accurate.png1330×692 70.1 KB

12

**
Right Click->User Interface->Slate Brush Asset**

Hi there!

Have you created a Slate Brush yet for your image?

Right click in content browser -> Slate Brush

then open that asset, and you can set the image, please note you can tile the image if you want

Then go back to your Widget BP and now you can apply the image!

Let me know if that works!

13

Yes that work, but i was under the impression that black worked as a transparency. Am I wrong? because I have a black background for the bar, thinking that that would be invisible to the player.

14

If you import a Texture2D that uses an Alpha channel (32 bit TGA file), then you will get transparency in the Slate Brush in UE4 :slight_smile:

15

lol, thank you, I had kinda figured out how to do that, I sort of have a habit of asking questions and then as soon as I ask the question on here I find the answer. we imported an alpha from photo shop and it worked out fine. It looked weird before I created a slate brush, but when I did, It looked like a normal alpha. but I do have one question, mostly because you seem to be the only one answering my questions about the widget blueprint editor and you know what your doing, I had created the blueprint and saved yesterday, I came back and my blueprint was gone (I know I saved). So after trying to find it and being unsuccessful, I decided to draw up a new one, but for some reason I cannot find the Add To Viewport node anywhere? Any ideas why?

16

Where are you trying to Add To Viewport? Try in Level Blueprint or in your My Character BP !

Also I think a lot of is going to be vastly improved in the near future when 4.5 comes!

:heart:

17

**New UMG Node for my Victory BP Library

Get All Widgets of Class

Ideal for UMG Level Transitions**

I needed node for Solus and so I am now sharing it with you!

The was that I could not save a reference to my new widget because it is loaded and then a level change occurs which resets all my HUD variables.

So I needed to access the widget after it was created dynamically, not relying on stored references within the HUD class.

I also did not want to have to store a reference to it in my Game Instance class cause then that leads to garbage collection issues.

I had to make the node for my own use and I have tested it as working in Solus!

**Now you can retrieve an array of any type of UMG widget instances in your game at any time!
**


**Victory BP Library Download**

https://wiki.unrealengine.com/File:VictoryPlugin.zip

C++ Code

Here’s what my C++ for node looks like!



void UVictoryBPFunctionLibrary::GetAllWidgetsOfClass(UObject* WorldContextObject, TSubclassOf<UUserWidget> WidgetClass, TArray<UUserWidget*>& FoundWidgets)
{
	//Prevent possibility of an ever-growing array if user uses  in a loop
	FoundWidgets.Empty();
	//~~~~~~~~~~~~
	 
	if(!WidgetClass) return;
	if(!WorldContextObject) return;
	 
	UWorld* const World = GEngine->GetWorldFromContextObject(WorldContextObject);
	if(!World) return;
	//~~~~~~~~~~~
	
	for(TObjectIterator<UUserWidget> Itr; Itr; ++Itr)
	{
		if(Itr->GetWorld() != World) continue;
		//~~~~~~~~~~~~~~~~~~~~~
		
		if(Itr->IsA(WidgetClass))
		{
			FoundWidgets.Add(*Itr);
		}
	}
}




**Pic**

![GetAllWidgetsOfClass.jpg|1280x960](upload://k3rJSJemWVjAQ9p7eXZQVNYeJAl.jpeg)

Enjoy!
18

Bump for those who have not seen !

19

Hey , is there a way to implement in C++? I extended UserWidget to my C++ project and all I would like to do is add buttons to my ScrollBox via C++.

Best

20

Rather than trying to use UMG in C++ I’d recommend taking advantage of BlueprintImplementable Events to tell UMG whatever you want it to do from C++!

way you can do all the button creation logic in C++, and just send the parameters to BP / UMG to build and initialize the buttons.

Wiki on BP Implementable Events
https://wiki.unrealengine.com/Blueprints,_Empower_Your_Entire_Team_With_BlueprintImplementableEvent

:slight_smile: