West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
•Download as PPTX, PDF•
4 likes•1,978 views
Overview of the Unreal Motion Graphics (UMG) framework in Unreal Engine 4. Presented at West Coast Unreal Engine DevCon 2014 in San Francisco and Seattle.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics
Similar to West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Motion Graphics (20)
Recently uploaded
Recently uploaded (20)
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 max.preussner@epicgames.com
- 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
- 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 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.
- 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.
- 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).
- 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.
- 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.
- 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…
- This is a screenshot of an early version of UMG.
- 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.
- 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.
- On the right is the Details panel. It shows the properties of the selected widget and allows you to modify them.
- 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.
- Here it is in motion.
- 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.
- Here it is in motion.
- 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.
- 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.
- Here is an example of a simple Blueprint graph that is bound to the Click event of a button.
- 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…
- … and this is what the result looks like.
- 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.
- Make sure to check out our extensive documentation on the internet!