Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Unreal Engine Basics 05 - User Interface

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 28 Anzeige

Unreal Engine Basics 05 - User Interface

Herunterladen, um offline zu lesen

Fifth chapter of the lecture Unreal Engine Basics taught at SAE Institute Hamburg.

- Understanding the difference between Unreal’s UI frameworks Slate and UMG
- Learning how to create basic and complex user interfaces in UMG
- Learning how to build a simple main menu

Fifth chapter of the lecture Unreal Engine Basics taught at SAE Institute Hamburg.

- Understanding the difference between Unreal’s UI frameworks Slate and UMG
- Learning how to create basic and complex user interfaces in UMG
- Learning how to build a simple main menu

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Unreal Engine Basics 05 - User Interface (20)

Weitere von Nick Pruehs (20)

Anzeige

Unreal Engine Basics 05 - User Interface

  1. 1. Unreal Engine Basics Chapter 5: User Interface Nick Prühs
  2. 2. Objectives • Understanding the difference between Unreal’s UI frameworks Slate and UMG • Learning how to create basic and complex user interfaces in UMG • Learning how to build a simple main menu
  3. 3. Slate & UMG • Cross-platform user interface framework for creating tool and in-game UIs  SWidget base class for all Slate widgets, prefixed with S  Declarative Syntax • Wrapped by Unreal Motion Graphics UI Designer (UMG)  UWidget base class for all UMG widgets  Higher level, and as UObjects, accounted for by the garbage collector
  4. 4. Slate Example Example taken from SLoadingScreenTestWidget::Construct SNew(SVerticalBox) +SVerticalBox::Slot() .VAlign(VAlign_Center) .HAlign(HAlign_Center) [ SNew(SThrobber) .Visibility(this, &SLoadingScreenTestWidget::GetLoadIndicatorVisibility) ] +SVerticalBox::Slot() .VAlign(VAlign_Center) .HAlign(HAlign_Center) [ SNew(STextBlock) .Text(NSLOCTEXT("MoviePlayerTestLoadingScreen", "LoadingComplete", "Loading complete!")) .Visibility(this, &SLoadingScreenTestWidget::GetMessageIndicatorVisibility) ]
  5. 5. Widget Blueprints • Derived from UUserWidget • Familiar editor  Designer  Blueprint Graph o Events, functions and variables just as with any other blueprint o Widgets can be explicitly exposed as variable from the designer window • Built-in support for UI animations • Widget blueprints can reference other widget blueprints, allowing for a very modular UI
  6. 6. Widget Blueprints Can be created and added to the viewport in your PlayerController:
  7. 7. Built-In Widgets Panels • Canvas Panel: Allows widgets to be laid out at arbitrary locations, anchored and z-ordered with other children of the canvas. • Grid Panel: Evenly divides up available space between all of its children. • Horizontal Box: Allows widgets to be laid out in a flow horizontally. • Scroll Box: Scrollable collection of widgets. • Vertical Box: Allows child widgets to be automatically laid out vertically. • Widget Switcher: Like a tab control, but without tabs. At most one widget is visible at time. • Wrap Box: Arranges widgets left-to-right. When the widgets exceed the width, it will place widgets on the next line.
  8. 8. Built-In Widgets Common • Border: Container widget that can contain one child widget, providing an opportunity to surround it with a background image and adjustable padding. • Button: Click-able primitive widget to enable basic interaction. • CheckBox: Allows you to display a toggled state of 'unchecked', 'checked' and 'indeterminable. You can use the checkbox for a classic checkbox, or as a toggle button, or as radio buttons. • Image: Allows you to display a Slate Brush, or texture or material in the UI. • ProgressBar: Simple bar that fills up. • RichTextBlock: Text widget supporting inline styles. • Slider: Shows a sliding bar with a handle that allows you to control the value between 0..1. • Text: Simple static text widget.
  9. 9. Built-In Widgets Input • ComboBox: Displays a list of options to the user in a dropdown menu. • SpinBox: Numerical entry box that allows for direct entry of the number. • TextBox: Allows the user to type in custom text. Other • (Circular) Throbber: Shows several zooming circles in a row. • Spacer: Provides padding between other widgets. • Background Blur: Can contain one child widget, applying a post-process Gaussian blur to all content beneath it.
  10. 10. Widget Properties • Appearance  Color & Opacity: Tints all child widgets.  Padding: Padding area around the content. • Interaction  IsFocusable: Allows this widget to accept focus when clicked, or when navigated to. • Behavior  TooltipWidget: Tooltip widget to show when the user hovers over the widget with the mouse.  Is Enabled: Whether this widget can be modified interactively by the user.  Visiblity: Visibility of the widget.
  11. 11. Visibility • Visible: Visible and hit-testable (can interact with cursor). (Default) • Collapsed: Not visible and takes up no space in the layout (obviously not hit-testable). • Hidden: Not visible but occupies layout space (obviously not hit- testable). • HitTestInvisible: Visible but not hit-testable (cannot interact with cursor) and children in the hierarchy (if any) are also not hit-testable. • SelfHitTestInvisible: Visible but not hit-testable (cannot interact with cursor), but doesn't affect hit-testing on children (if any).
  12. 12. Canvas Panel Slots • Anchors • Position • Size • Alignment: Pivot point of the widget. • Size To Content • Z Order: Higher values appear on top. UMG Anchors
  13. 13. Horizontal/Vertical Box Slots • Padding • Size  Auto: Only requests as much room as it needs based on the widgets desired size.  Fill: Greedily attempts to fill all available room based on the percentage value 0..1 • Horizontal Alignment • Vertical Alignment UMG Box Slot
  14. 14. Text • Color & Opacity • Font • Min Desired Width • Justification • Wrapping UMG Text Block
  15. 15. Fonts • Font Family • Typeface • Size • Outline Size & Color UMG Text Block
  16. 16. Localization • Texts are referenced by namespace & key • String Tables with texts can be imported from/exported to CSV
  17. 17. Brushes • Image • Image Size • Tint • Draw As  None: Don't do anything.  Box: Draw a 3x3 box where the sides and the middle stretch based on the margin.  Border: Draw a 3x3 border where the sides tile and the middle is empty.  Image: Draw an image, ignoring margin. • Tiling • Color & Opacity Slate Brush
  18. 18. Blueprint Event Binding • In blueprints, you can bind events in two ways:  By linking them directly to a (custom) event in your event graph  By using a Create Event node referencing another event or function o In functions, only the second option is available.
  19. 19. Button • Brushes for every state  Normal  Hovered  Pressed  Disabled • Hovered and Clicked events • Single child  e.g. text, image UMG Button
  20. 20. Creating Re-Usable Widgets • Expose public variables for specifying your parameters (e.g. button text, style) • Implement PreConstruct event in your widget to apply settings • Allows for live updates in widget designer
  21. 21. Traveling Traveling to another level can be achieved by calling Open Level: • Can specify either a level name or an IP address to travel to • May provide arbitrary options in form of a “travel URL”: DM-AwesomeMap?name=FastFragg0r • Options are automatically passed to be parsed by AGameMode::InitGame, for instance
  22. 22. Traveling Reserved built-in travel options include: • listen: Loads the map as listen server. • restart: Causes Unreal to just reload the current level. • closed: Automatically appended by the engine to signal a failed connection attempt. • failed: Automatically appended by the engine to signal a failed connection attempt. • name: Player name to be set on the PlayerState. • spectatorOnly: Join as spectator player.
  23. 23. Level Blueprints • Each level has its own dedicated level blueprint that behaves just like any other actor blueprint • Allows to directly reference actors placed in that level • There are various paradigms on how to deal with level blueprints…  Don’t use them at all  Use for inter-blueprint communication, only  Use them for everything
  24. 24. Hint! You can specify whether or not to show a mouse cursor with the Show Mouse Cursor flag of your PlayerController.
  25. 25. Assignment #5 – User Interface 1. Create an ingame HUD with a crosshair. 2. Add a health display to your HUD. 3. Bind input for showing an ingame scoreboard. 4. Create a very basic main menu level and UI.
  26. 26. References • Epic Games. Slate Overview. https://docs.unrealengine.com/en- US/Programming/Slate/Overview/index.html, February 2020. • Epic Games. UMG UI Designer User Guide. https://docs.unrealengine.com/en- US/Engine/UMG/UserGuide/index.html, February 2020.
  27. 27. See you next time! https://www.slideshare.net/npruehs https://github.com/npruehs/teaching- unreal-engine/releases/tag/assignment05 npruehs@outlook.com
  28. 28. 5 Minute Review Session • What is the difference between Slate and UMG? • How can you create a very modular UI in UMG? • What do you need to do to show your widgets ingame? • Which kinds of panels do you know? • What’s the difference between collapsed and hidden visibility? • Which UI concept facilitates creating resolution-independent UIs? • How do your globalize your game? • How can you load another map while ingame?

×