This post is tranlated from my Chinese version in zhihu.

Original Post

Since I learned about Unreal Engine’s Slate framework last year, slate has make me depressed for several times. Now I may understand Slate for a little bit, and here, I’m going to write some notes, this kind of thing will be forgotten after few days anyway.

1. Slate’s design philosophy

The most basic thing to learn something is not to start looking at its code directly, but to understand what it is designed for, what problem it aims to solve, and what the design philosophy is. Unrean designed slate, for clearly goals:

• User customizable
• Cross-platform
• Can be used both in gameplay and editor

OK, generally speaking, these two goals are very simple, the design of Slate comes from the examination of existing UI framework, such as Qt and ImGUI. First of all, let’s discuss about why we won’t use Qt or ImGUI?

Epic’s explanation is that Slate helps to solve the following problems:

• UI design and iteration : In fact, I don’t agree with this, I think slate may not as good as Qt or ImGUI in terms of rapidly design or iteration, for Slate is not visiable and hard to use.
• Control data flow : Usually nanifested as a binding between controls(or views in MVC) and data(or models in MVC) : Eh, this makes sense. If you have used Unreal before, you will find that UE has a lot of cunfusion in data processing. For example, STextBlock, when setting is text content, in unity, it maybe

TextBlock.SetText(“Content”);

However, it is much more complex in Unreal:

How to explain? We usually mention MVC when we talk about UI or Editor, however, Slate’s design allows you to update view without using Control in MVC. For example, if we use a STextBlock to display the frame rate, we can directly bing the View to Model through methods such as Text_Lambda. At this time, Widget itself is both control and view.

+------------+                         +--------------+
| STextBlock |                         |           {s}|
+------------+                         | Model  data   |
|            |       /--------\        +--------------+
|     o Text+<---=--+Load Data+---=----+  FrameRate   |
|            |       \--------/        +--------------+
+------------+                                         

• No need for programmers to learn additional languages : Slate uses Cpp to code directly, no need to learn other language. This point can only be said to looad at the user’s idea. For some programmers, like me, this is an advantage: I don’t like learning scripting language which is used for describes the UI, which is why I still stick to old ImGUI in Unity and firmly believe that UI Elements is bad.

2. Talk About ImGUI Again

Now Let’s talk why you should Slate instead of ImGUI. In fact, many programmers still miss ImGUI in Unreal Engine. On the Unreal Engine Market, you can still find plugins that allow UE to support ImGUI, and the are quite expensive.

RMA ImGUI – A plugin for Unreal Engine to support ImGUI

So, what are the advantages of ImGUI?

• Programmers like that the UI description is “Closer” to the code and easy to get data. Epic put quation marks on “Closer”. This description is not easy to understand. In fact, what i mean here is that the method used by ImGUI to describe UI is Cpp itself. For programmers, the truth in within the scope of the pointers, as long as the object pointer is still there, the programmers is still in control no matter what the situation is. Conversely, some UI descriptions using script languages or something else will make programmers feel out of control.
• Invalidation won’t be a problem, Just need to poll for data every frame. Needless to say, ImGUI is updated every frame.
• Easy to build interfaces programmatically. Easily use Cpp’s flow control, loops, conditions, etc.

These advantages of ImGUI make ImGUI an excellent UI framework for visual debugging. Not long ago, the development screen of GTA6 leaked, you can clearly see the console they made using IMGUI.

So what are the shortcomings of IMGUI, that is, as an excellent console UI framework, it is suitable for development teams, which means it is not suitable for use as a game UI framework that focuses on visual performance/efficiency. Don’t forget the requirements in the design principles of Slate we mentioned: it can be used in the game, and it can also provide support for the editor. The disadvantage of IMGUI is here:

• Adding animation and design is harder. Fatal, modern games will not allow UI without animation and design. For the development team, better support for animation and design is a higher priority.
• The UI is described as imperative code, so it cannot be made data-driven. I feel better about this. In my experience, this feature of IMGUI did not bring too much trouble to IMGUI.

In addition, Slate is indeed better than IMGUI in terms of performance, which is also very important for the underlying framework.

The UE document has a pretty good introduction to the Slate framework. The more you use Slate, the more rewarding you will be when you come back to this chapter.

Slate Architecture 

3. Prepare the learning environment for Slate

First of all, you need a hard disk with about 300G free storage space, and then create a source code version of the engine. That’s right, the source code version of the engine is required. If not, you can use an AHUD class instead, but it won’t be as clean as this environment.

Go to the Engine\Source\Programs directory, you can see a BlankProgram, just do it, copy and paste one, and name it SlateLearning.

Use Global Replace to Replace BlankProgram with SlateLearning, change the file name and file content

Go to the engine directory and run GenerateProjectFiles.bat

Open UE.sln with Rider or VS, you can see the prepared project. And run the project, it will print “Hello world”.