Slate Tutorial

Development Programming & Scripting C++
1

Special thanks to iLLo and Wraiyth for getting me started. And all those in this Q/A who helped me along.

If anyone wants to add some markup to this wiki page, a table of contents, adding it to the code/tutorial categories that would be appreciated. I may do that tomorrow night if nobody else does, but I gotta say I’m beat, it’s time for me to retire. The last thing I’m doing is dropping this link in a few “help me with Slate!” type Q/As and threads and then I’m passing out.

One last thing, I’ve been working on this all day and I’m really tired. I screwed up this wiki page for a moment, posting my tutorial inside of it, but I reverted all the changes I made and it appears to be fine now, just ignore/delete the “Bleakwise” edits.

2

Thank you for this awesome tutorial!

I added it to the main pages of Tutorials and Code

If you want to change the title,

next to edit … … there’s this arrow, and it reveals a Move option

then you can move the tutorial to a new name

I wasnt sure if Hello was your final intent for the title, but if so, Hi!

3

Yes it was. I may have punctuated it wrong but the name of the tutorial is “Hello Slate!” I wanted it to show up under the “S” category of the wiki, so I reversed the ordering of the words.

4

haha,

well then

Hiii!

6

When working with widgets, it’s important to know the usage scenarios about the different types. This post will feature content from the AnswerHub and will be updated regularly (for now).

SWeakWidget

7

Just out of curiosity is the purpose of this tutorial meant to explain slate , or one way to expand to your own type of custom slate widgets? The reason why I ask is because their are predefined Slate widgets that can be build with SNew() ,and it would be good starting point before making your own. This is how editor was made if you look in Engine/Source/Editor

8

Technically, you make one widget that’s made up of a bunch of other widgets, so it’s always going to be a custom widget in a sense. This tutorial explains how to implement a very basic Slate widget. You can’t use the specific widgets from the editor because, well, they’re specific.

Also, SNew (Or SAssignNew) is always used when creating a widget, predefined or not, in this tutorial they look like this:

9

I’m happy to see the community growing fast. Thank you! :slight_smile:

10

I spent the better part of yesterday trying to figure out how to load resources (like textures) into the Slate UI. I finally figured out it with a bit of help from one very talented member of the community, Jamie Dale.

An example of what you will be able to achieve with this is in the screenshot below (it’s only all black because I’m in debug mode and have no baked lights).

@Agentlo, Ineni.RealTime is exactly correct. An example of a “master widget” (for lack of better word) is below. This is some of the code involved int he above screenshot. The rest of it can be found on the AnswerHUB, organizing it is up to you, although my tutorial provides some basic guidance, your design is ultimately your own. Personally I’m following the RTS/FPS code examples pretty close, I think it’s useful to have a code-base familiar with the community in-case I’m ever in the position to do any recruiting.



void SMyUIWidget::Construct(const FArguments& InArgs)
{
	////////////////////////////////////////////////////////////////////////////////////////////////////
	/////Create UI resources
	FMyUIResources::Initalize();	
	////////////////////////////////////////////////////////////////////////////////////////////////////
	/////Get handle on game resources
	const FSlateGameResources &GameResources = FMyUIResources::GetUIResources();

	////////////////////////////////////////////////////////////////////////////////////////////////////
	/////Get handle on slate_spell_heal Slate Brush
	const FSlateBrush *slate_spell_heal = GameResources.GetBrush(FName("spell_heal"));

	OwnerHUD = InArgs._OwnerHUD;
	ChildSlot
		.VAlign(VAlign_Bottom)
		.HAlign(HAlign_Center)
		
			SNew(SOverlay)
			+ SOverlay::Slot()
			.HAlign(HAlign_Fill)
			.VAlign(VAlign_Fill)
			
				SNew(SHorizontalBox)
				.Visibility(EVisibility::Visible)
				+ SHorizontalBox::Slot().HAlign(HAlign_Left).VAlign(VAlign_Bottom)
				
					SNew(SImage).Image(slate_spell_heal)
				]
				+ SHorizontalBox::Slot().HAlign(HAlign_Left).VAlign(VAlign_Bottom)
				
						SNew(SImage).Image(slate_spell_heal)
				]
				+ SHorizontalBox::Slot().HAlign(HAlign_Left).VAlign(VAlign_Bottom)
				
					SNew(SImage).Image(slate_spell_heal)
				]
				+ SHorizontalBox::Slot().HAlign(HAlign_Left).VAlign(VAlign_Bottom)
				
					SNew(SImage).Image(slate_spell_heal)
				]
			]
		];
}

As you can see, the only widget that is my own is SMyUIWidget, which is almost exactly how it is defined in my tutorial. All of it’s child widgets are standard Slate widgets, although they don’t have to be, I’m currently thinking of subclassing SImage to make an SAbility widget that will overload it adding the ability for designers to easily change their properties in the Blueprint Editor (a combination of components and Widgets), they also need to handle mouse/keyboard events (good reason to overload), they also need to be editable real time, such as if the player drags and drops them onto another ability widget, that can be done with a custom event and a FAbilityProperties data struct. In the longer term I’ll probably subclass SHorizontalBox also, and add some functionality there too, but first I need to continue my audit to figure out what all Epic has already done for us.

11

I was having a weird bug where my Slate Brushes would load from the editor’s “play” mode, and when launching the editor with the “-game” switch, but not when launching the game from within the editor or a game target in visual stuido.

I found out that Slate UI Brushes have to be in the
/Game/UI
directory, or sub-directory as the engine searches sub-directories recursively.

Epic staff has been very helpful.

Now I can show off my spell-bar (only created 1 image so far, i’m no artist) with pretty cooked-graphics!

1616×939 148 KB

12

Your Slate assets can go anywhere (note that fonts loaded directly from disk must currently reside somewhere in /Content/Slate in order to be packaged correctly), but I guess your FSlateGameResources was looking in /Game/UI?

13

If anyone has been following my progress on Slate and has any questions feel free to PM me. There is only one more issue I have to tackle then I’m moving onto events and writing C++ classes for the Blueprint editor. The last thing I’m going over on slate for now is the proper releasing of resources for avoidance of memory leaks/errors. Once I get this section of code complete I plan on updating the wiki with the missing info and then it will be time to move on.

After I have a grasp on writing Blueprint classes I plan to work on a blueprint/slate library, so blueprint designers can build (at least basic) Slate UIs without touching any code. Stay tuned!

14

The code I wrote was loading the resources pointed at /Game/Slate.

The problem was that the editor cooks(bakes?) Slate resources only from these directories (taken from editor.ini)



[UI]
ContentDirectories=/Game/UI
ContentDirectories=/Game/Widget
ContentDirectories=/Game/Widgets
ContentDirectories=/Engine/MobileResources

[Cooker.CleanStaticMeshMtrlSkip]
Class=UnrealEd.ActorFactory

Evidently the brushes were not being cooked (baked?). My options were eitehr 1) add /game/slate to the editor.ini list above, or 2) move resources to /Game/UI. I chose the latter, I don’t think Epic really wants us messing with the .ini files though (can cause strange bugs), so it’s recommended that Slate UI resources go in /Game/UI. The editor doesn’t require resources be cooked, so that’s why it was working with the editor and not the game.

15

Ah, I was thinking that since they were a .uasset they’d get cooked wherever, but you’re right, they wont because nothing in the editor is referencing them.

Yes, Slate asset files will need to go into one of those folders.

16

Also I wanted to point out it is possible to get widgets to display in Editor viewpoint without launching.

http://imagizer.imageshack.us/v2/xq90/20/aqbc.png

17

I admit I am struggling to get a simple menu and buttons with Slate. If you could share a bit of code and how you get it to appear in the Editor, it would be much appreciated.

18

I’d been wondering what SWeakWidget is for a while now. The explanation I got was rather eye-opening and much broader in scope/application than just Slate. I did my best to apply it to the context of the Hello Slate tutorial (@dmacesic check it out on the wiki it has code examples), hopefully I can get some confirmation if my understanding of SWeakWidget within the context of Hello Slate is correct, anyone who works with UE4 should look into it (unless you’re already a Shared Vs. Weak pointer pro).

19

I have had much time to play around with UE4 last couple days but if you have any question you can shoot me a pm.

20

@anonymous_user_188e977a could you answer dmacesic question here ? I think there are several people who would like to know how to get widgets to display in Editor viewpoint without launching, me being one of them :slight_smile:

21

Hey, thanks for the offer, but I agree that info should be shared here or on the wiki. For the moment I am getting by without Slate, but a complete example of the following is of interest to me:

  • How start a project that is a Slate Application, but with an Unreal viewport (e.g. like the actual Unreal Editor, but that is easier to understand, without the bloat). Maybe something like the SlateViewer, but with a viewport and blueprint support

  • How to make a menu in-game (MenuBar). Where is it created, how to have callbacks

  • How to make popups and dialogs

  • How to make image browser controls

Just as a start :slight_smile: