ue-ui-umg-slate

Name: ue-ui-umg-slate
Author: quodsoler

654installs39forks

How to install ue-ui-umg-slate?

quodsoler/unreal-engine-skills/ue-ui-umg-slate

$npx -y skills add quodsoler/unreal-engine-skills --skill ue-ui-umg-slate

Installs into the current project.

Summary

Use this skill when working with UMG, UI, widget, UserWidget, Slate, HUD, BindWidget, Common UI, menu, or UMG binding in Unreal Engine. See references/widget-types.md for widget type reference and references/common-ui-setup.md for Common UI plugin setup. For Slate in editor tools

Files · 1

View on GitHub

SKILL.md

1	# UE UI: UMG, Slate, and Common UI
2
3	You are an expert in Unreal Engine's UI systems (UMG, Slate, and Common UI).
4
5	## Context Check
6
7	Read `.agents/ue-project-context.md` to determine: which UI plugins are enabled (CommonUI, MVVM), target platforms (affects input method), whether this is multiplayer (widget ownership per player), and existing UI base class conventions.
8
9	## Information Gathering
10
11	Before writing UI code, confirm: UI type (HUD, full-screen menu, modal, in-world WidgetComponent), input requirements (mouse, gamepad, keyboard), target platforms, and widget lifecycle (persistent, transient, or pooled).
12
13	---
14
15	## 1. UUserWidget in C++
16
17	```cpp
18	// MyWidget.h
19	UCLASS()
20	class MYGAME_API UMyWidget : public UUserWidget
21	{
22	GENERATED_BODY()
23	protected:
24	virtual void NativeConstruct() override; // Bind delegates here — BindWidget refs valid
25	virtual void NativeDestruct() override;
26	virtual void NativeTick(const FGeometry& MyGeometry, float InDeltaTime) override;
27	};
28
29	// MyWidget.cpp
30	void UMyWidget::NativeConstruct()
31	{
32	Super::NativeConstruct();
33	if (PlayButton)
34	PlayButton->OnClicked.AddDynamic(this, &UMyWidget::HandlePlayClicked);
35	}
36	```
37
38	### Lifecycle and GC
39
40	```cpp
41	// Creation — always pass the owning PlayerController for player-UI
42	UMyWidget* Widget = CreateWidget<UMyWidget>(GetOwningPlayer(), MyWidgetClass);
43	Widget->AddToViewport(0); // ZOrder: higher = on top. Roots the widget (won't GC).
44	Widget->AddToPlayerScreen(0); // Split-screen: ties to a specific player's viewport region
45	Widget->RemoveFromParent(); // Un-roots — may be GC'd if no UPROPERTY holds it.
46
47	UPROPERTY() TObjectPtr<UMyWidget> CachedWidget; // Strong ref keeps alive after RemoveFromParent
48
49	// Visibility
50	Widget->SetVisibility(ESlateVisibility::Collapsed); // Not drawn, takes no space
51	Widget->SetVisibility(ESlateVisibility::Hidden); // Not drawn, takes space
52	Widget->SetVisibility(ESlateVisibility::Visible); // Drawn, receives input
53	// HitTestInvisible: drawn, passes input through; SelfHitTestInvisible: children receive input
54	```
55
56	---
57
58	## 2. BindWidget Pattern
59
60	```cpp
61	UCLASS()
62	class MYGAME_API UMyWidget : public UUserWidget
63	{
64	GENERATED_BODY()
65	protected:
66	UPROPERTY(meta=(BindWidget)) // Required — compiler warning if absent in UMG BP
67	TObjectPtr<UButton> PlayButton;
68
69	UPROPERTY(meta=(BindWidgetOptional)) // Optional — always null-check before use
70	TObjectPtr<UTextBlock> SubtitleText;
71
72	UPROPERTY(meta=(BindWidgetAnim), Transient) // Transient is required for anim bindings
73	TObjectPtr<UWidgetAnimation> IntroAnim;
74
75	UPROPERTY(meta=(BindWidget)) TObjectPtr<UTextBlock> ScoreText;
76	UPROPERTY(meta=(BindWidget)) TObjectPtr<UImage> PlayerAvatar;
77	UPROPERTY(meta=(BindWidget)) TObjectPtr<UProgressBar> HealthBar;
78	UPROPERTY(meta=(BindWidget)) TObjectPtr<UListView> ItemList;
79	UPROPERTY(meta=(BindWidget)) TObjectPtr<UScrollBox> ContentScroll; // Scrollable container
80	};
81	```
82
83	Name must match the UMG Blueprint widget name exactly (case-sensitive). Always null-check optional bindings.
84
85	---
86
87	## 3. Widget Interaction
88
89	### UButton (Button.h)
90
91	```cpp
92	// Delegates: OnClicked, OnPressed, OnReleased, OnHovered, OnUnhovered
93	PlayButton->OnClicked.AddDynamic(this, &UMyWidget::HandlePlayClicked);
94	PlayButton->OnHovered.AddDynamic(this, &UMyWidget::HandlePlayHovered);
95	PlayButton->SetColorAndOpacity(FLinearColor(1.f, 0.8f, 0.f, 1.f));
96	PlayButton->SetIsEnabled(false);
97	// UE5.2+: WidgetStyle, ColorAndOpacity, ClickMethod direct access deprecated — use setters
98	```
99
100	### UTextBlock (TextBlock.h)
101
102	```cpp
103	// SetText wipes any Blueprint binding on Text
104	ScoreText->SetText(FText::Format(NSLOCTEXT("HUD", "ScoreFmt", "Score: {0}"), FText::AsNumber(Score)));
105	ScoreText->SetColorAndOpacity(FSlateColor(FLinearColor::White));
106	ScoreText->SetTextTransformPolicy(ETextTransformPolicy::ToUpper);
107	ScoreText->SetTextOverflowPolicy(ETextOverflowPolicy::Ellipsis);
108	```
109
110	### UImage (Image.h)
111
112	```cpp
113	PlayerAvatar->SetBrushFromTexture(AvatarTexture, /bMatchSize=/false);
114	PlayerAvatar->SetBrushFromMaterial(IconMaterial);
115	UMaterialInstanceDynamic* MID = PlayerAvatar->GetDynamicMaterial();
116	MID->SetScalarParameterValue(TEXT("Opacity"), 0.5f);
117	PlayerAvatar->SetBrushFromSoftTexture(SoftTextureRef, false); // Async stream
118	PlayerAvatar->SetColorAndOpacity(FLinearColor(1.f, 1.f, 1.f, 0.5f));
119	```
120
121	### UProgressBar (ProgressBar.h)
122
123	```cpp
124	HealthBar->SetPercent(CurrentHealth / MaxHealth); // 0.0–1.0
125	HealthBar->SetFillColorAndOpacity(FLinearColor(0.f, 1.f, 0.f, 1.f));
126	LoadingBar->SetIsMarquee(true); // In

People who liked this also viewed

6 picks

Type

ue-ui-umg-slate

654installs39forks

View on GitHub

How to install ue-ui-umg-slate?

quodsoler/unreal-engine-skills/ue-ui-umg-slate

$npx -y skills add quodsoler/unreal-engine-skills --skill ue-ui-umg-slate

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# UE UI: UMG, Slate, and Common UI
2
3	You are an expert in Unreal Engine's UI systems (UMG, Slate, and Common UI).
4
5	## Context Check
6
7	Read `.agents/ue-project-context.md` to determine: which UI plugins are enabled (CommonUI, MVVM), target platforms (affects input method), whether this is multiplayer (widget ownership per player), and existing UI base class conventions.
8
9	## Information Gathering
10
11	Before writing UI code, confirm: UI type (HUD, full-screen menu, modal, in-world WidgetComponent), input requirements (mouse, gamepad, keyboard), target platforms, and widget lifecycle (persistent, transient, or pooled).
12
13	---
14
15	## 1. UUserWidget in C++
16
17	```cpp
18	// MyWidget.h
19	UCLASS()
20	class MYGAME_API UMyWidget : public UUserWidget
21	{
22	GENERATED_BODY()
23	protected:
24	virtual void NativeConstruct() override; // Bind delegates here — BindWidget refs valid
25	virtual void NativeDestruct() override;
26	virtual void NativeTick(const FGeometry& MyGeometry, float InDeltaTime) override;
27	};
28
29	// MyWidget.cpp
30	void UMyWidget::NativeConstruct()
31	{
32	Super::NativeConstruct();
33	if (PlayButton)
34	PlayButton->OnClicked.AddDynamic(this, &UMyWidget::HandlePlayClicked);
35	}
36	```
37
38	### Lifecycle and GC
39
40	```cpp
41	// Creation — always pass the owning PlayerController for player-UI
42	UMyWidget* Widget = CreateWidget<UMyWidget>(GetOwningPlayer(), MyWidgetClass);
43	Widget->AddToViewport(0); // ZOrder: higher = on top. Roots the widget (won't GC).
44	Widget->AddToPlayerScreen(0); // Split-screen: ties to a specific player's viewport region
45	Widget->RemoveFromParent(); // Un-roots — may be GC'd if no UPROPERTY holds it.
46
47	UPROPERTY() TObjectPtr<UMyWidget> CachedWidget; // Strong ref keeps alive after RemoveFromParent
48
49	// Visibility
50	Widget->SetVisibility(ESlateVisibility::Collapsed); // Not drawn, takes no space
51	Widget->SetVisibility(ESlateVisibility::Hidden); // Not drawn, takes space
52	Widget->SetVisibility(ESlateVisibility::Visible); // Drawn, receives input
53	// HitTestInvisible: drawn, passes input through; SelfHitTestInvisible: children receive input
54	```
55
56	---
57
58	## 2. BindWidget Pattern
59
60	```cpp
61	UCLASS()
62	class MYGAME_API UMyWidget : public UUserWidget
63	{
64	GENERATED_BODY()
65	protected:
66	UPROPERTY(meta=(BindWidget)) // Required — compiler warning if absent in UMG BP
67	TObjectPtr<UButton> PlayButton;
68
69	UPROPERTY(meta=(BindWidgetOptional)) // Optional — always null-check before use
70	TObjectPtr<UTextBlock> SubtitleText;
71
72	UPROPERTY(meta=(BindWidgetAnim), Transient) // Transient is required for anim bindings
73	TObjectPtr<UWidgetAnimation> IntroAnim;
74
75	UPROPERTY(meta=(BindWidget)) TObjectPtr<UTextBlock> ScoreText;
76	UPROPERTY(meta=(BindWidget)) TObjectPtr<UImage> PlayerAvatar;
77	UPROPERTY(meta=(BindWidget)) TObjectPtr<UProgressBar> HealthBar;
78	UPROPERTY(meta=(BindWidget)) TObjectPtr<UListView> ItemList;
79	UPROPERTY(meta=(BindWidget)) TObjectPtr<UScrollBox> ContentScroll; // Scrollable container
80	};
81	```
82
83	Name must match the UMG Blueprint widget name exactly (case-sensitive). Always null-check optional bindings.
84
85	---
86
87	## 3. Widget Interaction
88
89	### UButton (Button.h)
90
91	```cpp
92	// Delegates: OnClicked, OnPressed, OnReleased, OnHovered, OnUnhovered
93	PlayButton->OnClicked.AddDynamic(this, &UMyWidget::HandlePlayClicked);
94	PlayButton->OnHovered.AddDynamic(this, &UMyWidget::HandlePlayHovered);
95	PlayButton->SetColorAndOpacity(FLinearColor(1.f, 0.8f, 0.f, 1.f));
96	PlayButton->SetIsEnabled(false);
97	// UE5.2+: WidgetStyle, ColorAndOpacity, ClickMethod direct access deprecated — use setters
98	```
99
100	### UTextBlock (TextBlock.h)
101
102	```cpp
103	// SetText wipes any Blueprint binding on Text
104	ScoreText->SetText(FText::Format(NSLOCTEXT("HUD", "ScoreFmt", "Score: {0}"), FText::AsNumber(Score)));
105	ScoreText->SetColorAndOpacity(FSlateColor(FLinearColor::White));
106	ScoreText->SetTextTransformPolicy(ETextTransformPolicy::ToUpper);
107	ScoreText->SetTextOverflowPolicy(ETextOverflowPolicy::Ellipsis);
108	```
109
110	### UImage (Image.h)
111
112	```cpp
113	PlayerAvatar->SetBrushFromTexture(AvatarTexture, /bMatchSize=/false);
114	PlayerAvatar->SetBrushFromMaterial(IconMaterial);
115	UMaterialInstanceDynamic* MID = PlayerAvatar->GetDynamicMaterial();
116	MID->SetScalarParameterValue(TEXT("Opacity"), 0.5f);
117	PlayerAvatar->SetBrushFromSoftTexture(SoftTextureRef, false); // Async stream
118	PlayerAvatar->SetColorAndOpacity(FLinearColor(1.f, 1.f, 1.f, 0.5f));
119	```
120
121	### UProgressBar (ProgressBar.h)
122
123	```cpp
124	HealthBar->SetPercent(CurrentHealth / MaxHealth); // 0.0–1.0
125	HealthBar->SetFillColorAndOpacity(FLinearColor(0.f, 1.f, 0.f, 1.f));
126	LoadingBar->SetIsMarquee(true); // In

People who liked this also viewed

6 picks

Type