# Slate Tutorial **URL:** \ **Category:** C++\ **Tags:** unreal-engine\ **Created:** [March 24, 2014, 7:13am UTC](https://forums.unrealengine.com/t/slate-tutorial/732 "2014-03-24T07:13:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 24, 2014, 7:13am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/1 "2014-03-24T07:13:51Z")
> **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)** > > After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — https://unrealcommunity.wiki/! You will be able to find content from... Special thanks to iLLo and Wraiyth for getting me started. And all those in this Q/A who helped me along. > **[Slate Link Errors](https://forums.unrealengine.com/questions/16546/slate-link-errors.html)** > > That is 76 unresolved external symbols, Do I really need to define 76 virtual functions to create a simple little widget? //File: MyUIWidget.h #pragma once #include "MyHUD.h" #include "Slate.h" class SMyUIWidget : public SCompoundWidget {... 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. > **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)** > > After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — https://unrealcommunity.wiki/! You will be able to find content from... ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [March 24, 2014, 7:49am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/2 "2014-03-24T07:49:38Z")
> [@Bleakwise;4337](#): > > [A new, community-hosted Unreal Engine Wiki - Announcements - Epic Developer Community Forums](https://wiki.unrealengine.com/Slate!,_Hello) > > Special thanks to iLLo and Wraiyth for getting me started. And all those in this Q/A who helped me along. > [Slate Link Errors - UI - Epic Developer Community Forums](https://answers.unrealengine.com/questions/16546/slate-link-errors.html) > 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. > [A new, community-hosted Unreal Engine Wiki - Announcements - Epic Developer Community Forums](https://wiki.unrealengine.com/Get_Involved#Adding_New_Pages) 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! ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 24, 2014, 10:52pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/3 "2014-03-24T22:52:32Z")
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. ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [March 24, 2014, 11:26pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/4 "2014-03-24T23:26:05Z")
haha, well then Hiii! ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 25, 2014, 3:43am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/6 "2014-03-25T03:43:41Z")
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 > **[What are some general use-cases for the SWeakWidget type?](https://forums.unrealengine.com/questions/17757/sweakwidget.html)** > > //SWeakWidget.h /\*\* \* Weak widgets present a piece of content without owning it. \* e.g. A tooltip is owned by the hovered widget but displayed \* by a floating window. That window cannot own the tooltip \* and must therefore use an... ---
**Author:** ![Agentleo](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Agentleo](https://forums.unrealengine.com/u/Agentleo)\ **Post date:** [March 25, 2014, 7:00am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/7 "2014-03-25T07:00:18Z")
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 ---
**Author:** ![anonymous\_user\_d44e7f33](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_d44e7f33](https://forums.unrealengine.com/u/anonymous_user_d44e7f33)\ **Post date:** [March 25, 2014, 11:05am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/8 "2014-03-25T11:05:46Z")
> [@Agentleo;5302](#): > > 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 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: > [@](#): > > ChildSlot > .VAlign(VAlign\_Fill) > .HAlign(HAlign\_Fill) > > ``` > SNew(SOverlay) > + SOverlay::Slot() > .VAlign(VAlign_Top) > .HAlign(HAlign_Center) > > SNew(STextBlock) > .ShadowColorAndOpacity(FLinearColor::Black) > .ColorAndOpacity(FLinearColor::White) > .ShadowOffset(FIntPoint(-1, 1)) > .Font(FSlateFontInfo("Veranda", 16)) > .Text(FText::FromString("Hello, Slate!")) > ] > ]; > > ``` ---
**Author:** ![chiefGui](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/chiefgui/32/612858_2.png) [@chiefGui](https://forums.unrealengine.com/u/chiefGui)\ **Post date:** [March 25, 2014, 11:29am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/9 "2014-03-25T11:29:24Z")
I’m happy to see the community growing fast. Thank you! 🙂 ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 26, 2014, 5:04am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/10 "2014-03-26T05:04:52Z")
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. > **[Loading a texture from C++](https://forums.unrealengine.com/questions/17910/loading-a-texture-from-c.html)** > > I can’t seem to figure out how this is done, I have some code in play, but it cannot find the asset. static ConstructorHelpers::FObjectFinder MyObj(TEXT("/Game/Spells/spell\_heal")); Now, you’re probably wondering, “does he have that asset in his... 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). ![](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/d/0/fd03f8f6e9768b4a4aaf1ea6e71b0a0dd4fe54bc.png) @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. ```auto 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. ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 27, 2014, 4:44pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/11 "2014-03-27T16:44:39Z")
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! ![](https://d3kjluh73b9h9o.cloudfront.net/original/4X/9/7/b/97bf2452310025eb0399f26d03946698d2d1b979.jpeg) ---
**Author:** ![Jamie\_Dale](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/jamie_dale/32/1165413_2.png) [@Jamie\_Dale](https://forums.unrealengine.com/u/Jamie_Dale)\ **Post date:** [March 27, 2014, 4:52pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/12 "2014-03-27T16:52:58Z")
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? ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 27, 2014, 4:54pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/13 "2014-03-27T16:54:09Z")
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! ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 27, 2014, 4:57pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/14 "2014-03-27T16:57:23Z")
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) ```auto [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. ---
**Author:** ![Jamie\_Dale](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/jamie_dale/32/1165413_2.png) [@Jamie\_Dale](https://forums.unrealengine.com/u/Jamie_Dale)\ **Post date:** [March 27, 2014, 5:06pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/15 "2014-03-27T17:06:10Z")
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. ---
**Author:** ![Agentleo](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Agentleo](https://forums.unrealengine.com/u/Agentleo)\ **Post date:** [March 27, 2014, 8:11pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/16 "2014-03-27T20:11:45Z")
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](https://imageshack.com/i/0kaqbcp) ---
**Author:** ![Andargor](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Andargor](https://forums.unrealengine.com/u/Andargor)\ **Post date:** [March 28, 2014, 6:44pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/17 "2014-03-28T18:44:29Z")
> [@Agentleo;7397](#): > > Also I wanted to point out it is possible to get widgets to display in Editor viewpoint without launching. 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. ---
**Author:** ![anonymous\_user\_0dc1700e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0dc1700e](https://forums.unrealengine.com/u/anonymous_user_0dc1700e)\ **Post date:** [March 31, 2014, 2:52am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/18 "2014-03-31T02:52:15Z")
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). > **[What are some general use-cases for the SWeakWidget type?](https://forums.unrealengine.com/questions/17757/sweakwidget.html)** > > //SWeakWidget.h /\*\* \* Weak widgets present a piece of content without owning it. \* e.g. A tooltip is owned by the hovered widget but displayed \* by a floating window. That window cannot own the tooltip \* and must therefore use an... ---
**Author:** ![Agentleo](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Agentleo](https://forums.unrealengine.com/u/Agentleo)\ **Post date:** [March 31, 2014, 4:06am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/19 "2014-03-31T04:06:02Z")
> [@dmacesic;8013](#): > > 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. 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. ---
**Author:** ![anonymous\_user\_783f00c9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_783f00c9](https://forums.unrealengine.com/u/anonymous_user_783f00c9)\ **Post date:** [March 31, 2014, 7:22am UTC](https://forums.unrealengine.com/t/slate-tutorial/732/20 "2014-03-31T07:22:57Z")
@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 🙂 ---
**Author:** ![Andargor](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Andargor](https://forums.unrealengine.com/u/Andargor)\ **Post date:** [March 31, 2014, 9:23pm UTC](https://forums.unrealengine.com/t/slate-tutorial/732/21 "2014-03-31T21:23:17Z")
> [@Agentleo;9365](#): > > 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. 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 🙂 [Next page](https://forums.unrealengine.com/t/slate-tutorial/732.md?page=2)