SlideShare a Scribd company logo
The Slate UI Framework
Part 2: Game UI & Unreal Motion Graphics
Gerke Max Preussner
max.preussner@epicgames.com
Current In-Game UI Features
HUD Canvas
VP Widgets
Game Menus
FCanvas
• Low-level C++ API for drawing directly to the screen
• Has been part of Unreal Engine for many years
• All functions are in FCanvas class
• DrawText(), DrawTexture(), DrawTile(), etc.
• Use AHUD.Canvas to access the canvas object
HHitProxy
• Provides basic interaction support for FCanvas
• Create one hit proxy per interactive object
• Hit proxy ID is sent to GPU for per-pixel hit tests
Current In-Game UI Features
HUD Canvas
VP Widgets
Game Menus
UGameViewportClient
• Allows usage of Slate widgets inside game view port
• Use all features of Slate (except SWindow)
• Add/RemoveViewportWidgetContent()
Things to keep in mind
• All added widgets will be layered on top of each other (SOverlay)
• Widgets should use TWeakObjPtr for UObject references
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
Current In-Game UI Features
HUD Canvas
VP Widgets
Game Menus
The Hard Way
• Use FCanvas to draw your own menus
• Not recommended
The Custom Way
• Use HUD Widgets to create any menu layout
The Lazy Way
• Use GameMenuBuilder for paged menus
• FGameMenuPage - Single menu page
• FGameMenuItem - An option in a menu page
• Can be customized and styled
• Mostly used for settings screens
Unreal Motion Graphics
Overview
Scripting
Upcoming
One UI Solution To Rule Them All
• Built on top of Slate
• Adds real-time animation and transformation to widgets
• Integrated with Blueprints
• WYSIWYG Editor for artists and designers
• No programming required (unless you want to)
• Not officially released yet, but already in the code base
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
Unreal Motion Graphics
Overview
Scripting
Upcoming
Adding Behavior to your UI
• Designers should not have to write code!
• Blueprints allow scripting of UI
• You can still use C++ as well, but probably won’t
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
Unreal Motion Graphics
Overview
Scripting
Upcoming
Currently working on:
• Materials!
• 2D Transforms
• Style assets
• Special effects
• In-game 3D UI
• Workflow polish
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
Arbitrary 2D Transforms
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
Ad

More Related Content

What's hot (20)

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: 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: 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
 
Future of unreal
Future of unreal Future of unreal
Future of unreal
Ning Hu
 
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: The Slate UI Framework (Part 1) - Introduction
West Coast DevCon 2014: The Slate UI Framework (Part 1) - IntroductionWest Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
Gerke Max Preussner
 
From Unity3D to Unreal Engine 4
From Unity3D to Unreal Engine 4From Unity3D to Unreal Engine 4
From Unity3D to Unreal Engine 4
Martin Pernica
 
Endless runner game in unreal engine 4
Endless runner game in unreal engine 4Endless runner game in unreal engine 4
Endless runner game in unreal engine 4
Vasilis Kamakaris
 
Unreal Engine 4 Introduction
Unreal Engine 4 IntroductionUnreal Engine 4 Introduction
Unreal Engine 4 Introduction
Sperasoft
 
Unreal Engine (For Creating Games) Presentation
Unreal Engine (For Creating Games) PresentationUnreal Engine (For Creating Games) Presentation
Unreal Engine (For Creating Games) Presentation
Nitin Sharma
 
Alexey Savchenko, Unreal Engine
Alexey Savchenko, Unreal EngineAlexey Savchenko, Unreal Engine
Alexey Savchenko, Unreal Engine
White Nights Conference
 
2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014
2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 20142D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014
2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014
Murat Gürel
 
Developing Success in Mobile with Unreal Engine 4 | David Stelzer
Developing Success in Mobile with Unreal Engine 4 | David StelzerDeveloping Success in Mobile with Unreal Engine 4 | David Stelzer
Developing Success in Mobile with Unreal Engine 4 | David Stelzer
Jessica Tams
 
East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
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
 
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
 
Game Programming - Cloud Development
Game Programming - Cloud DevelopmentGame Programming - Cloud Development
Game Programming - Cloud Development
Nick Pruehs
 
Options for Entity interaction - Unite Copenhagen 2019
Options for Entity interaction - Unite Copenhagen 2019Options for Entity interaction - Unite Copenhagen 2019
Options for Entity interaction - Unite Copenhagen 2019
Unity Technologies
 
【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド
【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド
【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド
Unite2017Tokyo
 
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: 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: 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
 
Future of unreal
Future of unreal Future of unreal
Future of unreal
Ning Hu
 
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: The Slate UI Framework (Part 1) - Introduction
West Coast DevCon 2014: The Slate UI Framework (Part 1) - IntroductionWest Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
West Coast DevCon 2014: The Slate UI Framework (Part 1) - Introduction
Gerke Max Preussner
 
From Unity3D to Unreal Engine 4
From Unity3D to Unreal Engine 4From Unity3D to Unreal Engine 4
From Unity3D to Unreal Engine 4
Martin Pernica
 
Endless runner game in unreal engine 4
Endless runner game in unreal engine 4Endless runner game in unreal engine 4
Endless runner game in unreal engine 4
Vasilis Kamakaris
 
Unreal Engine 4 Introduction
Unreal Engine 4 IntroductionUnreal Engine 4 Introduction
Unreal Engine 4 Introduction
Sperasoft
 
Unreal Engine (For Creating Games) Presentation
Unreal Engine (For Creating Games) PresentationUnreal Engine (For Creating Games) Presentation
Unreal Engine (For Creating Games) Presentation
Nitin Sharma
 
2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014
2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 20142D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014
2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014
Murat Gürel
 
Developing Success in Mobile with Unreal Engine 4 | David Stelzer
Developing Success in Mobile with Unreal Engine 4 | David StelzerDeveloping Success in Mobile with Unreal Engine 4 | David Stelzer
Developing Success in Mobile with Unreal Engine 4 | David Stelzer
Jessica Tams
 
East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
East Coast DevCon 2014: Concurrency & Parallelism in UE4 - Tips for programmi...
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
 
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
 
Game Programming - Cloud Development
Game Programming - Cloud DevelopmentGame Programming - Cloud Development
Game Programming - Cloud Development
Nick Pruehs
 
Options for Entity interaction - Unite Copenhagen 2019
Options for Entity interaction - Unite Copenhagen 2019Options for Entity interaction - Unite Copenhagen 2019
Options for Entity interaction - Unite Copenhagen 2019
Unity Technologies
 
【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド
【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド
【Unite 2017 Tokyo】VRコンテンツを気持ちよくプレイさせるためのUI実装ガイド
Unite2017Tokyo
 

Similar to West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics (20)

Unity - Game Engine
Unity - Game EngineUnity - Game Engine
Unity - Game Engine
Geeks Anonymes
 
iOS Game Development With UIKit
iOS Game Development With UIKitiOS Game Development With UIKit
iOS Game Development With UIKit
Martin Grider
 
ProjectsSummary
ProjectsSummaryProjectsSummary
ProjectsSummary
ChenHan Tsai
 
Metodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en GamingMetodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en Gaming
Globant
 
Lecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR ProgrammingLecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR Programming
Kobkrit Viriyayudhakorn
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 gamesW3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 games
Changhwan Yi
 
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
gamifi.cc
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
Unity Technologies Japan K.K.
 
Delta Engine @ CeBit 2011
Delta Engine @ CeBit 2011Delta Engine @ CeBit 2011
Delta Engine @ CeBit 2011
Karsten Wysk
 
Unity workshop
Unity workshopUnity workshop
Unity workshop
fsxflyer789Productio
 
Unity 3 d
Unity 3 dUnity 3 d
Unity 3 d
Punjab University Lahore
 
Vido game and kinect
Vido game and kinectVido game and kinect
Vido game and kinect
Mohammed Abd El-Sattar
 
Develop Games With Cocos Creator - A Game Engine By Cocos
Develop Games With Cocos Creator - A Game Engine By CocosDevelop Games With Cocos Creator - A Game Engine By Cocos
Develop Games With Cocos Creator - A Game Engine By Cocos
Luke Stapley
 
Maemo 6 UI Framework
Maemo 6 UI FrameworkMaemo 6 UI Framework
Maemo 6 UI Framework
Peter Schneider
 
Game development -session on unity 3d
Game development -session on unity 3d Game development -session on unity 3d
Game development -session on unity 3d
Muhammad Maaz Irfan
 
Impactjs lightening talk.key
Impactjs lightening talk.keyImpactjs lightening talk.key
Impactjs lightening talk.key
Yi-Fan Liao
 
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
 
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
FELGO SDK
 
Native Code is Dead AKA Cross Platform Development with Unity3D
Native Code is Dead AKA Cross Platform Development with Unity3DNative Code is Dead AKA Cross Platform Development with Unity3D
Native Code is Dead AKA Cross Platform Development with Unity3D
Ralph Barbagallo
 
IEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architecture
IEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architectureIEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architecture
IEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architecture
Sebastien Kuntz
 
iOS Game Development With UIKit
iOS Game Development With UIKitiOS Game Development With UIKit
iOS Game Development With UIKit
Martin Grider
 
Metodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en GamingMetodologías de desarrollo de software en Gaming
Metodologías de desarrollo de software en Gaming
Globant
 
Lecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR ProgrammingLecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR Programming
Kobkrit Viriyayudhakorn
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 gamesW3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 games
Changhwan Yi
 
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
Developing applications and games in Unity engine - Matej Jariabka, Rudolf Ka...
gamifi.cc
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
Unity Technologies Japan K.K.
 
Delta Engine @ CeBit 2011
Delta Engine @ CeBit 2011Delta Engine @ CeBit 2011
Delta Engine @ CeBit 2011
Karsten Wysk
 
Develop Games With Cocos Creator - A Game Engine By Cocos
Develop Games With Cocos Creator - A Game Engine By CocosDevelop Games With Cocos Creator - A Game Engine By Cocos
Develop Games With Cocos Creator - A Game Engine By Cocos
Luke Stapley
 
Game development -session on unity 3d
Game development -session on unity 3d Game development -session on unity 3d
Game development -session on unity 3d
Muhammad Maaz Irfan
 
Impactjs lightening talk.key
Impactjs lightening talk.keyImpactjs lightening talk.key
Impactjs lightening talk.key
Yi-Fan Liao
 
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
 
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Scre...
FELGO SDK
 
Native Code is Dead AKA Cross Platform Development with Unity3D
Native Code is Dead AKA Cross Platform Development with Unity3DNative Code is Dead AKA Cross Platform Development with Unity3D
Native Code is Dead AKA Cross Platform Development with Unity3D
Ralph Barbagallo
 
IEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architecture
IEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architectureIEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architecture
IEEE VR-SEARIS 2014 Keynote - MiddleVR - Philosophy and architecture
Sebastien Kuntz
 
Ad

Recently uploaded (20)

How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...
How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...
How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...
Egor Kaleynik
 
Meet the Agents: How AI Is Learning to Think, Plan, and Collaborate
Meet the Agents: How AI Is Learning to Think, Plan, and CollaborateMeet the Agents: How AI Is Learning to Think, Plan, and Collaborate
Meet the Agents: How AI Is Learning to Think, Plan, and Collaborate
Maxim Salnikov
 
Solidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license codeSolidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license code
aneelaramzan63
 
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AIScaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
danshalev
 
Exploring Code Comprehension in Scientific Programming: Preliminary Insight...
Exploring Code Comprehension  in Scientific Programming:  Preliminary Insight...Exploring Code Comprehension  in Scientific Programming:  Preliminary Insight...
Exploring Code Comprehension in Scientific Programming: Preliminary Insight...
University of Hawai‘i at Mānoa
 
Download YouTube By Click 2025 Free Full Activated
Download YouTube By Click 2025 Free Full ActivatedDownload YouTube By Click 2025 Free Full Activated
Download YouTube By Click 2025 Free Full Activated
saniamalik72555
 
Adobe Photoshop CC 2025 Crack Full Serial Key With Latest
Adobe Photoshop CC 2025 Crack Full Serial Key  With LatestAdobe Photoshop CC 2025 Crack Full Serial Key  With Latest
Adobe Photoshop CC 2025 Crack Full Serial Key With Latest
usmanhidray
 
Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025
mu394968
 
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest VersionAdobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
usmanhidray
 
Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...
Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...
Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...
Eric D. Schabell
 
Revolutionizing Residential Wi-Fi PPT.pptx
Revolutionizing Residential Wi-Fi PPT.pptxRevolutionizing Residential Wi-Fi PPT.pptx
Revolutionizing Residential Wi-Fi PPT.pptx
nidhisingh691197
 
Top 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docxTop 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docx
Portli
 
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfMicrosoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
TechSoup
 
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Dele Amefo
 
FL Studio Producer Edition Crack 2025 Full Version
FL Studio Producer Edition Crack 2025 Full VersionFL Studio Producer Edition Crack 2025 Full Version
FL Studio Producer Edition Crack 2025 Full Version
tahirabibi60507
 
Download Wondershare Filmora Crack [2025] With Latest
Download Wondershare Filmora Crack [2025] With LatestDownload Wondershare Filmora Crack [2025] With Latest
Download Wondershare Filmora Crack [2025] With Latest
tahirabibi60507
 
Shift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software DevelopmentShift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software Development
SathyaShankar6
 
Adobe Illustrator Crack | Free Download & Install Illustrator
Adobe Illustrator Crack | Free Download & Install IllustratorAdobe Illustrator Crack | Free Download & Install Illustrator
Adobe Illustrator Crack | Free Download & Install Illustrator
usmanhidray
 
Adobe After Effects Crack FREE FRESH version 2025
Adobe After Effects Crack FREE FRESH version 2025Adobe After Effects Crack FREE FRESH version 2025
Adobe After Effects Crack FREE FRESH version 2025
kashifyounis067
 
EASEUS Partition Master Crack + License Code
EASEUS Partition Master Crack + License CodeEASEUS Partition Master Crack + License Code
EASEUS Partition Master Crack + License Code
aneelaramzan63
 
How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...
How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...
How Valletta helped healthcare SaaS to transform QA and compliance to grow wi...
Egor Kaleynik
 
Meet the Agents: How AI Is Learning to Think, Plan, and Collaborate
Meet the Agents: How AI Is Learning to Think, Plan, and CollaborateMeet the Agents: How AI Is Learning to Think, Plan, and Collaborate
Meet the Agents: How AI Is Learning to Think, Plan, and Collaborate
Maxim Salnikov
 
Solidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license codeSolidworks Crack 2025 latest new + license code
Solidworks Crack 2025 latest new + license code
aneelaramzan63
 
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AIScaling GraphRAG:  Efficient Knowledge Retrieval for Enterprise AI
Scaling GraphRAG: Efficient Knowledge Retrieval for Enterprise AI
danshalev
 
Exploring Code Comprehension in Scientific Programming: Preliminary Insight...
Exploring Code Comprehension  in Scientific Programming:  Preliminary Insight...Exploring Code Comprehension  in Scientific Programming:  Preliminary Insight...
Exploring Code Comprehension in Scientific Programming: Preliminary Insight...
University of Hawai‘i at Mānoa
 
Download YouTube By Click 2025 Free Full Activated
Download YouTube By Click 2025 Free Full ActivatedDownload YouTube By Click 2025 Free Full Activated
Download YouTube By Click 2025 Free Full Activated
saniamalik72555
 
Adobe Photoshop CC 2025 Crack Full Serial Key With Latest
Adobe Photoshop CC 2025 Crack Full Serial Key  With LatestAdobe Photoshop CC 2025 Crack Full Serial Key  With Latest
Adobe Photoshop CC 2025 Crack Full Serial Key With Latest
usmanhidray
 
Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025Avast Premium Security Crack FREE Latest Version 2025
Avast Premium Security Crack FREE Latest Version 2025
mu394968
 
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest VersionAdobe Photoshop Lightroom CC 2025 Crack Latest Version
Adobe Photoshop Lightroom CC 2025 Crack Latest Version
usmanhidray
 
Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...
Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...
Mastering Fluent Bit: Ultimate Guide to Integrating Telemetry Pipelines with ...
Eric D. Schabell
 
Revolutionizing Residential Wi-Fi PPT.pptx
Revolutionizing Residential Wi-Fi PPT.pptxRevolutionizing Residential Wi-Fi PPT.pptx
Revolutionizing Residential Wi-Fi PPT.pptx
nidhisingh691197
 
Top 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docxTop 10 Client Portal Software Solutions for 2025.docx
Top 10 Client Portal Software Solutions for 2025.docx
Portli
 
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdfMicrosoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
Microsoft AI Nonprofit Use Cases and Live Demo_2025.04.30.pdf
TechSoup
 
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Salesforce Data Cloud- Hyperscale data platform, built for Salesforce.
Dele Amefo
 
FL Studio Producer Edition Crack 2025 Full Version
FL Studio Producer Edition Crack 2025 Full VersionFL Studio Producer Edition Crack 2025 Full Version
FL Studio Producer Edition Crack 2025 Full Version
tahirabibi60507
 
Download Wondershare Filmora Crack [2025] With Latest
Download Wondershare Filmora Crack [2025] With LatestDownload Wondershare Filmora Crack [2025] With Latest
Download Wondershare Filmora Crack [2025] With Latest
tahirabibi60507
 
Shift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software DevelopmentShift Left using Lean for Agile Software Development
Shift Left using Lean for Agile Software Development
SathyaShankar6
 
Adobe Illustrator Crack | Free Download & Install Illustrator
Adobe Illustrator Crack | Free Download & Install IllustratorAdobe Illustrator Crack | Free Download & Install Illustrator
Adobe Illustrator Crack | Free Download & Install Illustrator
usmanhidray
 
Adobe After Effects Crack FREE FRESH version 2025
Adobe After Effects Crack FREE FRESH version 2025Adobe After Effects Crack FREE FRESH version 2025
Adobe After Effects Crack FREE FRESH version 2025
kashifyounis067
 
EASEUS Partition Master Crack + License Code
EASEUS Partition Master Crack + License CodeEASEUS Partition Master Crack + License Code
EASEUS Partition Master Crack + License Code
aneelaramzan63
 
Ad

West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics

  • 1. The Slate UI Framework Part 2: Game UI & Unreal Motion Graphics Gerke Max Preussner [email protected]
  • 2. Current In-Game UI Features HUD Canvas VP Widgets Game Menus FCanvas • Low-level C++ API for drawing directly to the screen • Has been part of Unreal Engine for many years • All functions are in FCanvas class • DrawText(), DrawTexture(), DrawTile(), etc. • Use AHUD.Canvas to access the canvas object HHitProxy • Provides basic interaction support for FCanvas • Create one hit proxy per interactive object • Hit proxy ID is sent to GPU for per-pixel hit tests
  • 3. Current In-Game UI Features HUD Canvas VP Widgets Game Menus UGameViewportClient • Allows usage of Slate widgets inside game view port • Use all features of Slate (except SWindow) • Add/RemoveViewportWidgetContent() Things to keep in mind • All added widgets will be layered on top of each other (SOverlay) • Widgets should use TWeakObjPtr for UObject references
  • 6. Current In-Game UI Features HUD Canvas VP Widgets Game Menus The Hard Way • Use FCanvas to draw your own menus • Not recommended The Custom Way • Use HUD Widgets to create any menu layout The Lazy Way • Use GameMenuBuilder for paged menus • FGameMenuPage - Single menu page • FGameMenuItem - An option in a menu page • Can be customized and styled • Mostly used for settings screens
  • 7. Unreal Motion Graphics Overview Scripting Upcoming One UI Solution To Rule Them All • Built on top of Slate • Adds real-time animation and transformation to widgets • Integrated with Blueprints • WYSIWYG Editor for artists and designers • No programming required (unless you want to) • Not officially released yet, but already in the code base
  • 17. Unreal Motion Graphics Overview Scripting Upcoming Adding Behavior to your UI • Designers should not have to write code! • Blueprints allow scripting of UI • You can still use C++ as well, but probably won’t
  • 19. Unreal Motion Graphics Overview Scripting Upcoming Currently working on: • Materials! • 2D Transforms • Style assets • Special effects • In-game 3D UI • Workflow polish
  • 22. 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 In the previous talk I introduced you to the Slate UI framework in Unreal Engine 4. I will now introduce you to additional features that are being built on top of Slate.
  • #3: While our previous presentation mainly focused on building UI for the Editor and standalone applications, this talk will be about game UI. The most common type of in-game UI is the Head-Up Display. The Engine currently provides two mechanisms to generate HUDs: Canvas and HUD Widgets.
  • #4: A better way for creating in-game UI is to use viewport widgets. The game’s viewport client has an API that allows for adding and removing regular Slate widgets. Since all UI is usualy displayed inside the game’s window, the use of SWindow is generally discouraged (unless you really want to open external windows from your game).
  • #6: And here is what the virtual joystick looks like in game. Notice the two circles at the bottom left and right, which can be used to control player movement on a mobile device.
  • #7: Another important type of game UI are in-game menus for settings or game controls. You can use either of the two techniques just mentioned, or you can leverage the new GameMenuBuilder to get up and running quickly. Most of our own in-game Uis are currently built with viewport widgets.
  • #8: So far we have talked about in-game UI that is entirely written in C++ and is, for the most part, rather static. We are currently building a new tool set on top of Slate that will add a much more artist centric workflow and provide cool features, such as UI animations and transformations. This tool set is called Unreal Motion Graphics. Let’s take a sneak peek at what we have in store for you…
  • #9: This is a screenshot of an early version of UMG.
  • #10: In the center you see the Preview Area. This is where you build and rearrange your user interface. You can select and modify various parts of your UI.
  • #11: The panel in the lower left shows the structural view of the UI you are creating. The currently selected widget is shown here as well.
  • #12: On the right is the Details panel. It shows the properties of the selected widget and allows you to modify them.
  • #13: The panel at the bottom is called the Sequencer. It lets you animate all properties of a widget over time. You can move the scrubber to preview how the animation behaves.
  • #14: Here it is in motion.
  • #15: In the upper left you can see the Widget Library. UMG ships with a large number of reusable widget types that you can drag and drop into your Preview Area. Of course, you can also create your own widgets and add them to the library.
  • #16: Here it is in motion.
  • #17: You can preview your user interface within your game at any time in the Level Editor. Simply hit the Play In Editor button, and your game and its user interface will be simulated in the Editor’s view port.
  • #18: I have shown you how to build a user interface with UMG, but how do we add some actual behavior to it? Unreal Engine uses a visual scripting system called Blueprints for a lot of scripting tasks. UMG is tightly integrated with Blueprints as well and gives designers full control over their UI’s behavior. It allows you to build interactive experiences without writing a single line of C++, C# or JavaScript.
  • #19: Here is an example of a simple Blueprint graph that is bound to the Click event of a button.
  • #20: We still have a lot of work to do to polish the workflow and make it fun. One thing we are working on right now is support for Engine Materials in your UI. On the right you can see a Material we built for a circular progress bar…
  • #21: … and this is what the result looks like.
  • #22: UMG will also support arbitrary 2D transformation, such as rotation, translation, scale and shear. You will also be able to arrange and layer your UI in 3D inside your game world. That will bring us one step closer to the IronMan and Minority report style interfaces.
  • #23: Make sure to check out our extensive documentation on the internet!