SlideShare a Scribd company logo
The Slate UI Framework
Part 1: Introduction
Gerke Max Preussner
max.preussner@epicgames.com
UE1, UE2 and UE3
West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
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
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.
West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
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
// 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!"))
];
];
}
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
West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
Demo
Demo
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
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
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
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)
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
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

More Related Content

What's hot

Intro to unreal with framework and vr
Intro to unreal with framework and vrIntro to unreal with framework and vr
Intro to unreal with framework and vr
Luis Cataldi
 
猫でも分かるUMG
猫でも分かるUMG猫でも分かるUMG
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
Hong-Gi Joe
 
Unreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop SlidesUnreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop Slides
Merlin Cheng
 
Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話
Unity Technologies Japan K.K.
 
『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について
『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について
『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について
KLab Inc. / Tech
 
Unity
UnityUnity
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
historia_Inc
 
West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
Gerke Max Preussner
 
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
Unity Technologies Japan K.K.
 
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
エピック・ゲームズ・ジャパン Epic Games Japan
 
ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例
ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例
ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例
エピック・ゲームズ・ジャパン Epic Games Japan
 
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
 
UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法
エピック・ゲームズ・ジャパン Epic Games Japan
 
The Basics of Unity - The Game Engine
The Basics of Unity - The Game EngineThe Basics of Unity - The Game Engine
The Basics of Unity - The Game Engine
OrisysIndia
 
UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)
UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)
UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)
エピック・ゲームズ・ジャパン Epic Games Japan
 
テストを書こう、Unity編
テストを書こう、Unity編テストを書こう、Unity編
テストを書こう、Unity編
Hiroto Imoto
 
Editor Utility Widgetで色々便利にしてみた。
Editor Utility Widgetで色々便利にしてみた。Editor Utility Widgetで色々便利にしてみた。
Editor Utility Widgetで色々便利にしてみた。
IndieusGames
 
SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-
SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-
SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-
祐稀 平良
 
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
Gerke Max Preussner
 

What's hot (20)

Intro to unreal with framework and vr
Intro to unreal with framework and vrIntro to unreal with framework and vr
Intro to unreal with framework and vr
 
猫でも分かるUMG
猫でも分かるUMG猫でも分かるUMG
猫でも分かるUMG
 
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
 
Unreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop SlidesUnreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop Slides
 
Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話
 
『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について
『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について
『禍つヴァールハイト』モバイルにおけるプレイヤー最大100体同時表示可能なグラフィックス最適化について
 
Unity
UnityUnity
Unity
 
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
 
West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
West Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
 
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
 
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
 
ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例
ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例
ロボット好き集まれ!こいつ、動くぞ。星と翼のパラドクス開発事例
 
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
 
UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法
 
The Basics of Unity - The Game Engine
The Basics of Unity - The Game EngineThe Basics of Unity - The Game Engine
The Basics of Unity - The Game Engine
 
UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)
UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)
UE4のローカライズ機能紹介 (UE4 Localization Deep Dive)
 
テストを書こう、Unity編
テストを書こう、Unity編テストを書こう、Unity編
テストを書こう、Unity編
 
Editor Utility Widgetで色々便利にしてみた。
Editor Utility Widgetで色々便利にしてみた。Editor Utility Widgetで色々便利にしてみた。
Editor Utility Widgetで色々便利にしてみた。
 
SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-
SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-
SceneCapture2Dを使って壁の向こうを見る -気になるあの娘の部屋の壁-
 
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
 

Viewers also liked

East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
Gerke Max Preussner
 
Plug-ins & Third-Party SDKs in UE4
Plug-ins & Third-Party SDKs in UE4Plug-ins & Third-Party SDKs in UE4
Plug-ins & Third-Party SDKs in UE4
Gerke Max Preussner
 
West Coast DevCon 2014: Build Automation - Epic’s Build Tools & Infrastructure
West Coast DevCon 2014: Build Automation - Epic’s Build Tools & InfrastructureWest Coast DevCon 2014: Build Automation - Epic’s Build Tools & Infrastructure
West Coast DevCon 2014: Build Automation - Epic’s Build Tools & Infrastructure
Gerke Max Preussner
 
East Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
East Coast DevCon 2014: Programming in UE4 - A Quick Orientation for CodersEast Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
East Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
Gerke Max Preussner
 
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
Gerke Max Preussner
 
East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
Gerke Max Preussner
 
West Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
West Coast DevCon 2014: Programming in UE4 - A Quick Orientation for CodersWest Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
West Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
Gerke Max Preussner
 
UE4 Twitch 2016 05-05: Unreal Message Bus Overview
UE4 Twitch 2016 05-05: Unreal Message Bus OverviewUE4 Twitch 2016 05-05: Unreal Message Bus Overview
UE4 Twitch 2016 05-05: Unreal Message Bus Overview
Gerke Max Preussner
 
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
Gerke Max Preussner
 
East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
Gerke Max Preussner
 
West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
Gerke Max Preussner
 
West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
Gerke Max Preussner
 
GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++
Gerke Max Preussner
 

Viewers also liked (13)

East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
 
Plug-ins & Third-Party SDKs in UE4
Plug-ins & Third-Party SDKs in UE4Plug-ins & Third-Party SDKs in UE4
Plug-ins & Third-Party SDKs in UE4
 
West Coast DevCon 2014: Build Automation - Epic’s Build Tools & Infrastructure
West Coast DevCon 2014: Build Automation - Epic’s Build Tools & InfrastructureWest Coast DevCon 2014: Build Automation - Epic’s Build Tools & Infrastructure
West Coast DevCon 2014: Build Automation - Epic’s Build Tools & Infrastructure
 
East Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
East Coast DevCon 2014: Programming in UE4 - A Quick Orientation for CodersEast Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
East Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
 
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
 
East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
East Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
 
West Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
West Coast DevCon 2014: Programming in UE4 - A Quick Orientation for CodersWest Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
West Coast DevCon 2014: Programming in UE4 - A Quick Orientation for Coders
 
UE4 Twitch 2016 05-05: Unreal Message Bus Overview
UE4 Twitch 2016 05-05: Unreal Message Bus OverviewUE4 Twitch 2016 05-05: Unreal Message Bus Overview
UE4 Twitch 2016 05-05: Unreal Message Bus Overview
 
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...
 
East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
East Coast DevCon 2014: Game Programming in UE4 - Game Framework & Sample Pro...
 
West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
West Coast DevCon 2014: Extensibility in UE4 - Customizing Your Games and the...
 
West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
West Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
 
GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++
 

Similar to West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction

Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...
Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...
Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...
Lviv Startup Club
 
The Art of Tizen UI Theme Technology in Various Profiles
The Art of Tizen UI Theme Technology in Various ProfilesThe Art of Tizen UI Theme Technology in Various Profiles
The Art of Tizen UI Theme Technology in Various Profiles
Daniel Juyung Seo
 
Overview of Adroid Architecture.pptx
Overview of Adroid Architecture.pptxOverview of Adroid Architecture.pptx
Overview of Adroid Architecture.pptx
debasish duarah
 
Introduction to Android Development.pptx
Introduction to Android Development.pptxIntroduction to Android Development.pptx
Introduction to Android Development.pptx
asmeerana605
 
1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)
Hafiz Ammar Siddiqui
 
Windows game development with Unity 5
Windows game development with Unity 5Windows game development with Unity 5
Windows game development with Unity 5
Jiri Danihelka
 
Introduction to Android (before 2015)
Introduction to Android (before 2015)Introduction to Android (before 2015)
Introduction to Android (before 2015)
Chien-Ming Chou
 
Creating great Unity games for Windows 10 - Part 1
Creating great Unity games for Windows 10 - Part 1Creating great Unity games for Windows 10 - Part 1
Creating great Unity games for Windows 10 - Part 1
Jiri Danihelka
 
iOS Game Development With UIKit
iOS Game Development With UIKitiOS Game Development With UIKit
iOS Game Development With UIKit
Martin Grider
 
Radu vunvulea building and testing windows 8 metro style applications using ...
Radu vunvulea  building and testing windows 8 metro style applications using ...Radu vunvulea  building and testing windows 8 metro style applications using ...
Radu vunvulea building and testing windows 8 metro style applications using ...
Radu Vunvulea
 
Embedded system introduction
Embedded system introductionEmbedded system introduction
Embedded system introduction
RajalakshmiSermadurai
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
Can Elmas
 
Unity - Game Engine
Unity - Game EngineUnity - Game Engine
Unity - Game Engine
Geeks Anonymes
 
DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04
DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04
DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04
Aritra Sarkar
 
Maemo 6 UI Framework
Maemo 6 UI FrameworkMaemo 6 UI Framework
Maemo 6 UI Framework
Peter Schneider
 
Selenium in the palm of your hand: Appium and automated mobile testing
Selenium in the palm of your hand: Appium and automated mobile testingSelenium in the palm of your hand: Appium and automated mobile testing
Selenium in the palm of your hand: Appium and automated mobile testing
Isaac Murchie
 
Lesson 2 - Understanding Operating System Configurations
Lesson 2 - Understanding Operating System ConfigurationsLesson 2 - Understanding Operating System Configurations
Lesson 2 - Understanding Operating System Configurations
Gene Carboni
 
Is it possible to write cross-native apps in 2020 ?
Is it possible to write cross-native apps in 2020 ?Is it possible to write cross-native apps in 2020 ?
Is it possible to write cross-native apps in 2020 ?
Chris Saez
 
Electron - Google I/O Extended Cuiabá
Electron - Google I/O Extended CuiabáElectron - Google I/O Extended Cuiabá
Electron - Google I/O Extended Cuiabá
Victor Hugo S. Nunes
 
Why is EFL used on Tizen?
Why is EFL used on Tizen?Why is EFL used on Tizen?
Why is EFL used on Tizen?
Ryo Jin
 

Similar to West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction (20)

Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...
Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...
Шлигін Олександр “Розробка ігор в Unity загальні помилки” GameDev Conference ...
 
The Art of Tizen UI Theme Technology in Various Profiles
The Art of Tizen UI Theme Technology in Various ProfilesThe Art of Tizen UI Theme Technology in Various Profiles
The Art of Tizen UI Theme Technology in Various Profiles
 
Overview of Adroid Architecture.pptx
Overview of Adroid Architecture.pptxOverview of Adroid Architecture.pptx
Overview of Adroid Architecture.pptx
 
Introduction to Android Development.pptx
Introduction to Android Development.pptxIntroduction to Android Development.pptx
Introduction to Android Development.pptx
 
1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)
 
Windows game development with Unity 5
Windows game development with Unity 5Windows game development with Unity 5
Windows game development with Unity 5
 
Introduction to Android (before 2015)
Introduction to Android (before 2015)Introduction to Android (before 2015)
Introduction to Android (before 2015)
 
Creating great Unity games for Windows 10 - Part 1
Creating great Unity games for Windows 10 - Part 1Creating great Unity games for Windows 10 - Part 1
Creating great Unity games for Windows 10 - Part 1
 
iOS Game Development With UIKit
iOS Game Development With UIKitiOS Game Development With UIKit
iOS Game Development With UIKit
 
Radu vunvulea building and testing windows 8 metro style applications using ...
Radu vunvulea  building and testing windows 8 metro style applications using ...Radu vunvulea  building and testing windows 8 metro style applications using ...
Radu vunvulea building and testing windows 8 metro style applications using ...
 
Embedded system introduction
Embedded system introductionEmbedded system introduction
Embedded system introduction
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
 
Unity - Game Engine
Unity - Game EngineUnity - Game Engine
Unity - Game Engine
 
DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04
DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04
DuinOS controlled Rover with MATLAB 2009 and Android GingerBread - 2012-11-04
 
Maemo 6 UI Framework
Maemo 6 UI FrameworkMaemo 6 UI Framework
Maemo 6 UI Framework
 
Selenium in the palm of your hand: Appium and automated mobile testing
Selenium in the palm of your hand: Appium and automated mobile testingSelenium in the palm of your hand: Appium and automated mobile testing
Selenium in the palm of your hand: Appium and automated mobile testing
 
Lesson 2 - Understanding Operating System Configurations
Lesson 2 - Understanding Operating System ConfigurationsLesson 2 - Understanding Operating System Configurations
Lesson 2 - Understanding Operating System Configurations
 
Is it possible to write cross-native apps in 2020 ?
Is it possible to write cross-native apps in 2020 ?Is it possible to write cross-native apps in 2020 ?
Is it possible to write cross-native apps in 2020 ?
 
Electron - Google I/O Extended Cuiabá
Electron - Google I/O Extended CuiabáElectron - Google I/O Extended Cuiabá
Electron - Google I/O Extended Cuiabá
 
Why is EFL used on Tizen?
Why is EFL used on Tizen?Why is EFL used on Tizen?
Why is EFL used on Tizen?
 

Recently uploaded

Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
dream girl
 
ERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in CoimbatoreERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in Coimbatore
Nextskill Technologies
 
UMiami degree offer diploma Transcript
UMiami degree offer diploma TranscriptUMiami degree offer diploma Transcript
UMiami degree offer diploma Transcript
attueb
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
neshakor5152
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
quanhoangd129
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
Hotel Management Software Development Company
Hotel Management Software Development CompanyHotel Management Software Development Company
Hotel Management Software Development Company
XongoLab Technologies LLP
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
kiara pandey
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
aadhiyaeliza
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
902basic
 
09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching
quanhoangd129
 
TEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with YouTEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with You
marcofolio
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
quanhoangd129
 
06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching
quanhoangd129
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
6m9p7qnjj8
 
B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024
vmsdeptcom
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
singhlata50dh
 
How to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at ScaleHow to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at Scale
Anchore
 

Recently uploaded (20)

Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
 
ERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in CoimbatoreERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in Coimbatore
 
UMiami degree offer diploma Transcript
UMiami degree offer diploma TranscriptUMiami degree offer diploma Transcript
UMiami degree offer diploma Transcript
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
Hotel Management Software Development Company
Hotel Management Software Development CompanyHotel Management Software Development Company
Hotel Management Software Development Company
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
 
09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching
 
TEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with YouTEQnation 2024: Sustainable Software: May the Green Code Be with You
TEQnation 2024: Sustainable Software: May the Green Code Be with You
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
 
06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
 
B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024B.Sc. Computer Science Department PPT 2024
B.Sc. Computer Science Department PPT 2024
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
 
How to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at ScaleHow to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at Scale
 

West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction

  • 1. The Slate UI Framework Part 1: Introduction Gerke Max Preussner max.preussner@epicgames.com
  • 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

  1. Prepared and presented by Gerke Max Preussner for West Coast MiniDevCon 2014, July 21-24th Email max.preussner@epicgames.com in case of comments, questions or suggestions or visit our AnswerHub at http://answers.unrealengine.com
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. [Widget Reflector Demo]
  12. 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).
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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?