West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
Download as PPTX, PDF•3 likes•2,114 views
The document introduces the Slate UI Framework, detailing its design principles and features, including its C++ construction, platform agnosticism, and extensive widget library. It discusses UI customization, input handling, and a declarative syntax for efficient widget composition. Additionally, it covers tools for visual debugging and upcoming improvements like optimizations and the Unreal Motion Graphics (UMG) editor.
![// Example custom button (some details omitted)
class STextButton
: public SCompoundWidget
{
public:
SLATE_BEGIN_ARGS(SMyButton )
{ }
// The label to display on the button.
SLATE_ATTRIBUTE(FText, Text)
// Called when the button is clicked.
SLATE_EVENT(FOnClicked, OnClicked)
SLATE_END_ARGS()
// Construct this button
void Construct( const FArguments& InArgs );
};
// Button implementation (some details omitted)
void STextButton::Construct ( const FArguments& InArgs )
{
ChildSlot
[
SNew(SButton)
.OnClicked(InArgs._OnClicked)
[
SNew(STextBlock)
.Font(FMyStyle::GetFontStyle(“TextButtonFont"))
.Text(InArgs._Text)
.ToolTipText(LOCTEXT(“TextButtonToolTip", “Click Me!"))
];
];
}](https://image.slidesharecdn.com/slate1-150419140237-conversion-gate01/85/West-Coast-DevCon-2014-The-Slate-UI-Framework-Part-1-Introduction-8-320.jpg)
West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
- 1. The Slate UI Framework Part 1: Introduction Gerke Max Preussner [email protected]
- 2. UE1, UE2 and UE3
- 4. Slate Design & Principles Overview Features Concepts Tools Architecture • Written entirely in C++ • Platform agnostic (works on mobile and consoles, too!) • SlateCore module provides low-level functionality • Slate module contains library of common UI widgets • Does not require Engine or Editor modules Current Use Cases • Unreal Editor • Standalone desktop applications • Mobile applications • In-game UI
- 5. Slate Design & Principles Overview Features Concepts Tools Styling • Customize the visual appearance of your UI • Images (PNGs and Materials), Fonts, Paddings, etc. • Customizable user-driven layouts Input Handling • Keyboard, mouse, joysticks, touch • Key bindings support Render Agnostic • Supports both Engine renderer and standalone renderers Large Widget Library • Layout primitives, text boxes, buttons, images, menus, dialogs, message boxes, navigation, notifications, dock tabs, list views, sliders, spinners, etc.
- 7. Slate Design & Principles Overview Features Concepts Tools Declarative Syntax • Set of macros for declaring widget attributes • Avoids layers of indirection Composition • Compose entire widget hierarchies in a few lines of code • Uses fluent syntax for ease of use • Preferred over widget inheritance • Any child slot can contain any other widget type • Makes it very easy to rearrange UIs in code
- 8. // Example custom button (some details omitted) class STextButton : public SCompoundWidget { public: SLATE_BEGIN_ARGS(SMyButton ) { } // The label to display on the button. SLATE_ATTRIBUTE(FText, Text) // Called when the button is clicked. SLATE_EVENT(FOnClicked, OnClicked) SLATE_END_ARGS() // Construct this button void Construct( const FArguments& InArgs ); }; // Button implementation (some details omitted) void STextButton::Construct ( const FArguments& InArgs ) { ChildSlot [ SNew(SButton) .OnClicked(InArgs._OnClicked) [ SNew(STextBlock) .Font(FMyStyle::GetFontStyle(“TextButtonFont")) .Text(InArgs._Text) .ToolTipText(LOCTEXT(“TextButtonToolTip", “Click Me!")) ]; ]; }
- 9. Slate Design & Principles Overview Features Concepts Tools Widget Inspector • Visually debug and analyze your UI • Can jump directly to widget code in Visual Studio or XCode UDK Remote • iOS app for simulating touch devices on your PC • Remote server is a plug-in (enabled by default) • Primarily used for game development
- 11. Demo
- 12. Demo
- 13. Going A Little Deeper State Updates Widget Roles Anatomy Attributes Polling instead of Invalidation • Avoids duplicate state data • Exception: Non-trivial data models (use caches instead) • Performance depends on number of visible widgets
- 14. Going A Little Deeper State Updates Widget Roles Anatomy Attributes Fundamental Widget Types • SCompoundWidget – Can have nested child widgets • SLeafWidget – Does not contain child widgets • SPanel – Base class for layout panels Special Widgets • SWidget – Root base class for all widgets (do not inherit!) • SNullWidget – Empty default widget User Widgets • More efficient in terms of compile time
- 15. Going A Little Deeper State Updates Widget Roles Anatomy Attributes Common Interfaces • Arguments – Widget parameters that do not change • Attributes – Parameters that are polled • Event handlers – Usually named ‘OnSomeEvent’ Common Internals • ComputeDesiredSize() - Calculates widget’s desired size • ArrangeChildren() - Arranges children within allotted area • OnPaint() – Draws the widget
- 16. Going A Little Deeper State Updates Widget Roles Anatomy Attributes Common Attributes • Enabled state, Visibility, Hit testability • Tooltip Widget, Tooltip Text, Cursor Style • Horizontal & Vertical Alignment , Padding Attributes Can Be: • Constants, i.e. IsEnabled(false) • Delegate bindings, i.e. IsEnabled(this, &SMyWidget::HandleIsEnabled)
- 17. Upcoming Features Slate Optimizations • Decreased impact on compilation time • Split built-in widget library into multiple modules Unreal Motion Graphics (UMG) • Artist friendly WYSIWYG editor • 2D transformation and animation with Sequencer • Blueprint integration • Better styling system
- 18. Questions? Documentation, Tutorials and Help at: • AnswerHub: • Engine Documentation: • Official Forums: • Community Wiki: • YouTube Videos: • Community IRC: Unreal Engine 4 Roadmap • lmgtfy.com/?q=Unreal+engine+Trello+ http://answers.unrealengine.com http://docs.unrealengine.com http://forums.unrealengine.com http://wiki.unrealengine.com http://www.youtube.com/user/UnrealDevelopmentKit #unrealengine on FreeNode
Editor's Notes
- #2: Prepared and presented by Gerke Max Preussner for West Coast MiniDevCon 2014, July 21-24th Email [email protected] in case of comments, questions or suggestions or visit our AnswerHub at http://answers.unrealengine.com
- #3: In previous versions of Unreal Engine we used different third party UI frameworks, such as MFC, wxWidgets, Windows Forms and WPF. All these user interfaces were complicated, cluttered and not very customizable. In Unreal Engine 4 we have drastically changed how we approach user interfaces. We want our programs to be more intuitive, customizable, extensible and modern.
- #4: The result of this effort is our own UI framework called Slate. Here you can see a screenshot of the latest Unreal Editor, which is entirely done in Slate.
- #5: Slate is written entirely in C++ and runs on all platforms supported by Unreal Engine 4. We used it for the Unreal Editor, standalone desktop applications and tools, as well mobile apps. It can also be used for in-game UI, but I will talk about that in the second part of this presentation. Slate used to be just one C++ module, but we recently split it into two, and we may split up further in the near future.
- #6: The appearance of widgets can be styled with a C++ based style system. We are currently working on making it better as part of UMG. The core of Slate takes care of all user input and translates it into events that your application can consume. Slate can render its UI with the Engine and without. Of course, Slate also comes with a large library of common UI widgets.
- #7: We have a special application called Slate Viewer. It is a great way to learn about Slate. It shows the look and feel of all the different built-in widget types. It also demonstrates the built-in tab docking framework and the many different ways to create layouts.
- #8: The two main concepts in Slate programming are Declarative Syntax and Composition. Declarative syntax is our way for creating UI widgets in C++ code. It is very compact and easy to read. Other UI frameworks heavily rely on widget inheritance, but Slate uses composition instead.
- #9: Here is a simple contrived example of these two concepts. On the left we declare a new button widget using Slate’s declarative syntax. The first macro declares an attribute for the button text, and the second macro declares an event delegate for when the button is clicked. There are several other macros available for declaring other types of widget attributes. On the right we see the button’s construction code. Notice that STextButton inherits from SCompoundWidget, one of the fundamental widget types, and we use composition to populate the button’s content. In this case we are simply wrapping an SButton widget that contains an STextBlock as its content, and we forward any widget arguments that may have been passed in.
- #10: We also have a couple tools to help you develop your Slate based user interfaces. Slate comes with a cool visual debugging tool called Widget Inspector – I will demo it shortly. There is also an app for iOS that allows you to simulate touch input while developing your game or application on a desktop PC.
- #11: You can get the UDK Remote app for iOS on the Apple App Store. We will soon rewrite this app in Slate, so it also works on Android.
- #12: [Widget Reflector Demo]
- #13: With a little bit of practice you will be able to visualize in your mind what Slate code will look like when rendered. On the top left we see the Color Picker widget. Below is the Widget Reflector with focus on the Color Wheel widget inside the color picker. Notice how all three representations show the same hierarchical relationships (blue, red, green boxes).
- #14: For updating its UI, Slate uses Polling instead of Invalidation. This avoid duplication of UI state data. It also means you have to be careful about the amount of work you are doing inside callback delegates. You can see in example for the color wheel that all properties are bound to delegates. The non-event delegates will be executed every tick.
- #15: Although we mostly use composition for creating new widgets, SlateCore defines three truly fundamental widget types that are meant to be inherited. Most of your custom widgets will inherit from SCompoundWidget, or SLeafWidget if they have no children. Child slots must always contain a valid widget. SNullWidget is used to fill empty slots. User widgets were recently added and are still somewhat experimental.
- #16: Widgets share a common anatomy. A widget’s appearance is usually controlled with Arguments and Attributes. You can also use setter and getter functions if you prefer. All widgets contain functions to compute their desired size, arrange their child widgets (if any) and paint themselves.
- #18: We continue to make improvements to Slate. The biggest and most anticipated upcoming feature is Unreal Motion Graphics. I will talk about it in the second part of this talk, so if you want to know more, please stay in the room.
- #19: The easiest way to learn more about Slate is to check out our extensive online documentation, which is available for free to everyone. Are there any questions right now?