*`Health_Bar` and `Health_Text` are **bold** because they have their `Is Variable` flag enabled*
 |  |  *Example of that hierarchy as a diagram* ### 5.2 User Widget Animation Every User Widget is able to create custom animations using the widgets within that User Widget via **Sequencer**. You can create these animations inside the Widget Designer and you’re able to modify things relating to that widget specifically such as render transform, widget visibility, etc. You can also modify properties of widgets such as material parameters, runtime values within the widget, etc.  \ *Example of the animation designer in UMG* If a User Widgets **Tick Frequency** is set to **Never** instead of **Auto** in the class defaults then it will never run animation’s because for an animation to play at all, the user widget needs to be able to tick that animation and if the user widgets ability to tick is turned off(by setting its tick frequency to never) then it will not tick the animation object. ### 5.3 User Widget Events Every user widget has built in events that you can implement and add your own functionality from; - **Pre Construct**: This occurs both in editor in the designer and before the widget is actually created, similar to the Construction Script found on Actors. ```c++ virtual void UUserWidget::NativePreConstruct() { // Call BP version PreConstruct(IsDesignTime()); } ```  - **On Initialized**: This occurs only once at runtime when the non template instance is created(when you spawn a user widget). ```c++ virtual void UUserWidget::NativeOnInitialized() { // Bind any input delegates that may be on this widget to its owning player controller if(APlayerController* PC = GetOwningPlayer()) { UInputDelegateBinding::BindInputDelegates(GetClass(), PC->InputComponent, this); } OnInitialized(); } ```  - **Construct**: This can occur multiple times on a single user widget because it is based on when it is Constructed to the screen (Add to Viewport or Add to Player Screen). So if you're removing the widget from parent and re-adding it later then it's recommended not to put first time initialization code in this but instead put that in “On Initialized”. ```c++ virtual void UUserWidget::NativeConstruct() { // Call BP version Construct(); UpdateCanTick(); } ```  - **Destruct**: Occurs when this widget is no longer on screen, can be called multiple times as its the inverse of Construct where it occurs when this widget is removed from parent. ```c++ virtual void UUserWidget::NativeDestruct() { StopListeningForAllInputActions(); // Call BP version Destruct(); } ```  - **On Paint**: Occurs when this widget is painted every frame, different from Tick as it is meant to handle Paint Context information. ```c++ virtual int32 UUserWidget::NativePaint(const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled ) const { // If BP implemented the function if ( bHasScriptImplementedPaint ) { FPaintContext Context(AllottedGeometry, MyCullingRect, OutDrawElements, LayerId, InWidgetStyle, bParentEnabled); // Call BP version OnPaint( Context ); return FMath::Max(LayerId, Context.MaxLayer); } return LayerId; } ```  - **Tick**: This will occur every frame that this widget is on screen, it will not tick if the widget is not being shown(even if it still exists, the only thing that matters is that it is being shown then its ticking). ```c++ virtual void UUserWidget::NativeTick(const FGeometry& MyGeometry, float InDeltaTime) { //... // If BP implemented the function in the event graph if (bHasScriptImplementedTick) { // Call BP version Tick(MyGeometry, InDeltaTime); } } ```  - **On Animation Started**: Occurs when an widget animation starts playing, it will give you that widget that started playing in case you need to check against it or use it later. (For Blueprint users; recent versions of Unreal require animation finished events to be in the event graph while prior ones allow for them to show up as overridable functions) ```c++ virtual void UUserWidget::OnAnimationStartedPlaying(UUMGSequencePlayer& Player) { // Call BP version OnAnimationStarted(Player.GetAnimation()); BroadcastAnimationStateChange(Player, EWidgetAnimationEvent::Started); } ```  - **On Animation Finished**: Occurs when an widget animation finishes playing, it will give you that widget finished playing in case you need to check against it or use it later. (For Blueprint users; recent versions of Unreal require animation finished events to be in the event graph while prior ones allow for them to show up as overridable functions) ```c++ virtual void UUserWidget::OnAnimationFinishedPlaying(UUMGSequencePlayer& Player) { // This event is called directly by the sequence player when the animation finishes. // Call BP version OnAnimationFinished(Player.GetAnimation()); BroadcastAnimationStateChange(Player, EWidgetAnimationEvent::Finished); if ( Player.GetPlaybackStatus() == EMovieScenePlayerStatus::Stopped ) { StoppedSequencePlayers.Add(&Player); if (AnimationTickManager) { AnimationTickManager->AddLatentAction(FMovieSceneSequenceLatentActionDelegate::CreateUObject(this, &UUserWidget::ClearStoppedSequencePlayers)); } } UpdateCanTick(); } ```  - **On Focus Received**: (If you're having trouble finding it in Blueprint, it has to return an Event Reply struct so you have to override it in the functions list and not in the event graph) Occurs when focus is given to this User Widget(only this widget). It requires that you return an Event Reply struct which you can choose to either return Handled or Unhandled. ```c++ virtual FReply UUserWidget::NativeOnFocusReceived( const FGeometry& InGeometry, const FFocusEvent& InFocusEvent ) { // Call BP version and return what BP returns return OnFocusReceived( InGeometry, InFocusEvent ).NativeReply; } ```   - **On Added to Focus Path**: Occurs when this widget or a child widget within this User Widget is added to the focus path(or focused) and wasn’t previously part of it. ```c++ virtual void UUserWidget::NativeOnAddedToFocusPath(const FFocusEvent& InFocusEvent) { // Call BP version OnAddedToFocusPath(InFocusEvent); } ```  - **On Focus Lost**: Occurs when this User Widget(only this widget) loses focus. ```c++ virtual void UUserWidget::NativeOnFocusLost( const FFocusEvent& InFocusEvent ) { // Call BP version OnFocusLost( InFocusEvent ); } ```  - **On Removed from Focus Path**: Similar to On Focus Lost except it can occur when a child widget within this User Widget or this widget itself is no longer part of the focus path. ```c++ virtual void UUserWidget::NativeOnRemovedFromFocusPath(const FFocusEvent& InFocusEvent) { // Call BP version OnRemovedFromFocusPath(InFocusEvent); } ```  **[⬆ Back to Top](#table-of-contents)** ## 6.0 Common Widgets There is a large amount of commonly used widgets in Unreal Engine, at its basic core elements. \ Most/All of your UI that used UMG/Slate will probably be built from a combination of these widgets: - **Text Block** *[Leaf Widget]*: Handles displaying static text that can be changed at runtime by setting it to another text value. TextBlock widgets allow for a custom font to be used(including its typeface if the font has any others), customizing its text size, letter spacing(also known as kerning), its outline settings(this will offset the rendered text), apply materials to the letters themselves, add a shadow offset(this will offset the rendered text), set its justification(how the text is aligned), etc. \  - **Rich Text Block** *[Leaf Widget]*: Works similarly to TextBlock widgets but allows for the use of custom images, glyphs, multiple fonts, etc to be used within the same text value at once. \  - **Image** *[Leaf Widget]*: Handles displaying either a texture or a material that uses the UI domain to display it. \  - **Border** *[Compound Widget]*: Can only have 1 child widget. Displays child widget in front of this widget, basically an Image widget that can have a child. \  - **Button** *[Compound Widget]*: Can only have 1 child widget. Displays that child in front of this widget, can be interacted with and focused. Returns when it is clicked/pressed/released/hovered/unhovered. You can also set its click(mouse button) method, touch(touch screen’s) method, and press(keyboard & gamepad) method. \  - **Check Box** *[Leaf Widget]*: Handles displaying a specific image/material depending on what state the check box is in, it can be clicked(or set to a specific state) and meant to show if something is on/off. \  - **Progress Bar** *[Leaf Widget]*: Handles displaying an image/material in front of this widget via a scaled 0-1 fill percentage value via its Bar Fill Type & Bar Fill Style. - Fill Types: - **Left to Right**: Fills the progress bar from left to right. \
\
*Masked Version* \
\
*Scaled Version*
- **Right to Left**: Fills the progress bar from right to left. \
\
*Masked Version* \
\
*Scaled Version*
- **Fill from Center**: Linearly fills the progress bar on both X and Y from the center towards the edges. \
\
*Masked Version* \
\
*Scaled Version*
- **Fill from Center Horizontal**: Linearly fills the progress bar on the X axis from the center towards the edges. \
\
*Masked Version* \
\
*Scaled Version*
- **Fill from Center Vertical**: Linearly fills the progress bar on the Y axis from the center towards the edges. \
\
*Masked Version* \
\
*Scaled Version*
- **Top to Bottom**: Fills the progress bar from top to bottom. \
\
*Masked Version* \
\
*Scaled Version*
- **Bottom to Top**: Fills the progress bar from bottom to top. \
\
*Masked Version* \
\
*Scaled Version*
- Fill Styles:
- **Mask**: The progress bar's fill image is masked out based on the fill percentage and fill type.
- **Scale**: The progress bar's fill image is scaled and stretched/squished based on the fill percentage and fill type.
- **Slider** *[Leaf Widget]*: Similar to the progress bar except it is interactable and you can change the orientation of it from horizontal to vertical and set its step size(for keyboard/gamepad presses). \
- **Editable Text** *[Leaf Widget]*: A field for the user to be able to type in one line of text, allows for hint text and can be set to read only, is password(so it only shows a dot instead of the actual text), as well as being able to adjust settings on it like a normal text block widget. \
- **Editable Text(Multi-Line)** *[Leaf Widget]*: Same as Editable Text widget except the user can type in multiple lines of text instead of one. \
- **Text Box** *[Leaf Widget]*: Same as Editable Text except it is wrapped with an image/material behind the text. \
- **Text Box(Multi-Line)** *[Leaf Widget]*: Same as Editable Text(Multi-Line) except it is wrapped with an image/material behind the text. \
- **Spin Box** *[Leaf Widget]*: Displays a number(can be set to allow decimals or not) that the user can input or use the mouse and interact with it to slide and increase/decrease the number. \
- **Combo Box(String)** *[Leaf Widget]*: A drop down box widget that displays a string(NOT TEXT, so its not localizable) value when selected and displays its options as well. \
- **Invalidation Box** *[Compound Widget]*: Can only have 1 child widget. This will control when that child widget is invalided for its layout/geometry passes, very useful for performance optimization. *Can't really use a picture for this because it wraps entirely around the widget and is invisible*.
- **Retainer Box** *[Compound Widget]*: Can only have 1 child widget. This will render a material over its child widget and only its child widget so it will not render that material over background space that the child widget does not occupy with its render. \
For example if you wrap a Text Block with a Retainer Box, the material will only apply over the text and not the space between each letter. \
 \
*The retainer box's hierarchy in the designer* \
 \
*The retainer box's material* \
 \
*The retainer box at runtime(when running play in editor)*
- **Throbber** *[Leaf Widget]*: Displays an image/material in a specific animated pattern. Useful for showing something is loading. \
- **Circular Throbber** *[Leaf Widget]*: A version of the throbber that moves the images/materials in a circle. \
- > *A note from the author; “Please change the throbber’s image with something other than the default image in your final products if possible. I'm tired of seeing the default throbber in full release products, you can do better! Thank you.”*
- **Spacer** *[Leaf Widget]*: This widget does not have a visual representation and it just provides padding and space between other widgets, recommended to use this rather than padding within slots if your UI design is changing constantly to make rapid iteration easier.
- **Background Blur** *[Compound Widget]*: Can only have 1 child widget. Basically an image widget with its child rendered behind it, and blurs the rendered result of that child widget using Gaussian Blur. \
Recommended to use this with proper clipping area’s setup otherwise use a custom material to make it easier for artists to modify. \
- **Input Key Selector** *[Leaf Widget]*: Allows for the user to press an input while focusing this widget and it will display what input that is. \
- **Canvas Panel** *[Panel Widget]*: This is the default widget found in newly created User Widgets, allows for the designer to place child widgets at arbitrary locations, anchored and z-ordered with other children of this canvas. \
It uses absolute layout for its placement so it's good for on screen indicators that follow a specific in-world object or something that can move around the entire screen. \
- **Horizontal Box** *[Panel Widget]*: Allows for its child widgets to be laid out in a horizontal flow moving from left to right with 0 index as the farthest left and its last widget being farthest right. \
- **Vertical Box** *[Panel Widget]*: Works the same as horizontal boxes except it lays out its children in a vertical flow moving from top to bottom, with 0 index as the farthest top widget and its last widget being the farthest bottom widget. \
*Vertical Box and Horizontal Box do not scroll, to allow for that you would have to use a scroll box widget or something similar.* \
- **Scroll Box** *[Panel Widget]*: Works the same way as the vertical box AND the horizontal box(has to be set to either vertical or horizontal) but allows them to be scrollable. Does not support virtualization. \
- **Size Box** *[Compound Widget]*: Can only have 1 child widget. Allows for this widget to specify the desired size of its child widget(since not all widgets will report a desired size because they are dependent on their own child widgets). \
- **Scale Box** *[Compound Widget]*: Can only have 1 child widget. Allows for this widget to have its child scaled to fit a constrained size on this box's allotted area. \
 \
*In this example the scale box is resizing the image to fit uniformly*
- **Overlay** *[Panel Widget]*: Displays widgets stacked on top of each other based on their index within the child widgets. This widget is extremely useful to quickly overlay a widget over another widget quickly. \
 \
*The text and the image are children of the overlay widget*
- **Grid Panel** *[Panel Widget]*: Allows child widgets to automatically be placed in a grid like pattern resembling a table that retains the width of every column. \
*This grid has been configured to fill the space between each column and row, yours may look different depending on how you configured it*
- **Uniform Grid Panel** *[Panel Widget]*: Basically the grid panel but it will evenly divide up available space between all of its children. \
- **Widget Switcher** *[Panel Widget]*: This will only display one of its child widgets at a time via its child index but it will load all of them(not good for main pages, just smaller stuff) and initialize, construct all of them when the widget switcher is loaded, initialized, constructed.
- **Safe Zone** *[Compound Widget]*: Can only have 1 child widget. This widget is special where it will apply padding to the top/bottom/left/right sides of its child widget inwards to account for what device this widget is being shown on,
so for example on some mobile devices with a notch on one side, the safe zone will account for that and add padding to its child widget so it does not get cut off by the notch, as well as accounting for tv’s with extra pixels under the bezel,
projectors having extra columns of pixels hidden behind the black border, etc. A good example is for certain phones that have a notch(you know which ones I’m talking about), the safe zone will pad out that side of the screen for you so your widgets are not being covered by the notch.
> You can also use some helpful debug console commands for simulating the safe zone on PC in the editor located
> in [Debug Console Commands](#debug-console-commands) of the [Development & Debug Tools for UMG/Slate](#dev-debug-tools) section.
 \
*In this example we wrapped a canvas panel with a save zone so it pushes the canvas away from the area of the screen that would be inaccessible due to the screen's notch or operating system*
**[⬆ Back to Top](#table-of-contents)**
## 7.0 Common Widget Functionality
Each widget has its own functionality and use while still containing a common functionality across all the widgets such as:
- **Accessibility**: Each widget will listen to the project’s default settings for accessibility, these settings can be overridden for each widget and can affect its own children, \
going over accessibility is out of scope for this document but here is an official Epic approved course going over it: \
[Epic Approved Course for Introduction to Accessible Design](https://www.unrealengine.com/en-US/onlinelearning-courses/introduction-to-accessible-design-with-unreal-engine). \
- **Override Accessible Defaults**: When enabled will override the default accessibility behavior and text for this widget.
- **Can Children be Accessible**: Flag to know if children of this widget should be as distinct accessible widgets.
- **Accessible Behavior**: Setting for whether or not this widget is accessible, including how to describe it. When using the "custom" option, you're able to enter in your own accessible text.
- **Accessible Summary Behavior**: Setting for how to describe this widget when it's being presented via a summary of a parent widget. When using the "custom" option, you're able to enter in your own accessible text.
- **Tool Tip Text**: A tool tip text widget that is either using the default widget or your own custom one, to show when the user hovers over the widget with the mouse. \
- **Is Enabled**: Flag to know if this widget is enabled/disabled and if it can be modified interactively by the user. \
- **Visibility**: The render visibility and interactivity visibility of the widget.
- **Visible**: Renders the widget and allows it to be intractable with the cursor.
- **Collapsed**: Does not render, not interactable, and takes up no space in the layout.
- **Hidden**: Does not render and is not interactable but occupies layout space.
- **Not Hit-Testable/Hit Test Invisible(Self & All Children)**: Does render the widget but cannot be interacted with and does not allow its children to be interactable.
- **Not Hit-Testable/Hit Test Invisible(Self Only)**: Does render the widget but only this widget cannot be interacted with. \
- **Render Opacity**: The render opacity of this widget and does affect its children’s opacity as well. 0 = Invisible, 1 = Fully Visible. \
- **Render Transform**: Each widget has a render transform, which can affect the collision shape of the widget, but not override the original layout and paint information. \
Think of it like it’s a modifier to the original transform information but it does not change its layout.
- **Translation**: The X and Y location offset.
- **Scale**: The X and Y scale of the widget.
- **Shear**: The X and Y shear of the widget, also known as skew.
- **Angle**: The rotation of the widget. You only need 1 axis to rotate on in a 2D space but it can go between -180 and 180 degrees.
- **Pivot**: The pivot offset of the widget that controls the location for where transforms are applied from. \
The actual value is a normalized amount starting at 0.5 on X/Y to be the center of the widget, 0.0 = Left/Top and 1.0 = Right/Bottom directions. \
- **Is Volatile**: This flag when set to true will mark this widget as non-cacheable so it always has to update its layout and geometry collision, it is defaulted to false because it is not commonly used but it is exposed in case you need it.
- **Clipping**: This is in regards to layout and geometry information where you can specify how the widget is clipped, \
this does not batch together clipping spaces so this can have a performance cost depending on how many overlapping and clipping widgets you have on screen. \
- **Inherit**: This clipping space does not allow the widget to clip its children, but this widget and all its children inherit the clipping area of the last widget that was clipped above it. \
 \
*In this example there is a `Scroll Box` widget with its clipping set to `Inherit` and it is a child of a `Canvas Panel` widget that has its clipping set to `Clip to Bounds`.*
- **Clip to Bounds**: This clipping space clips to the bounds of this widget, it intersects those bounds with any previous clipping area from above it. \
 \
*In this example there is a `Scroll Box` widget with its clipping set to `Clip to Bounds` so its child widgets which are `Button`'s will be intersected when they go out of bounds of the `Scroll Box`*
- **Clip to Bounds - Without Intersecting(Advanced)**: This clipping area clips to its bounds as well but it does **NOT** intersect with any existing clipping geometry, it will always push its own new clipping state. \
Allowing this widget to render outside the bounds of the hierarchy that does clip it. This will **NOT** allow you to ignore the clipping zone that is set to *"Always"* though. \
 \
*In this example there is a `Scroll Box` widget with its clipping set to `Clip to Bounds` and one of its child widgets has its clipping set to `Clip to Bounds - Without Intersecting(Advanced)`*
- **Clip to Bounds - Always(Advanced)**: This clipping area clips to bounds as well and it always intersects those bounds with any previous clipping area. \
This clipping area **CANNOT** be ignored, it will always clip its children. Useful for hard barriers in the UI where you never want animations or other effects to break into/out of that region. \
 \
*In this example there are 3 main widgets; \
`Canvas Panel` with its clipping set to `Clip to Bounds - Always(Advanced)` \
`Scroll Box` within `Canvas Panel` with its clipping set to `Clip to Bounds` \
`Button` within `Scroll Box` with its clipping set to `Clip to Bounds - Without Intersecting(Advanced)`*
- **On Demand(Advanced)**: This clipping area clips to its bound when its Desired Size is larger than the allocated geometry in the layout. \
If it does occur where it needs to be clipped, then it will be treated like *“Always”*. According to the source code, this mode was primarily added for Text for when it is placed inside a container that eventually is resized to not be able to support the length of the text. \
 \
*In this example we have a `Vertical Box` widget with clipping set to `Inherit` and a custom `Textblock` widget from Epic's Common UI Plugin that has its clipping set to `On Demand(Advanded)` so the text can scroll and be clipped properly(this example is also found in Epic's Context Examples project in the Common UI example map)*
- **Navigation**: This is where you would add your navigation hooks for what widget to navigate to when using Unreal’s focusing framework. You can set these at runtime in Blueprint and in C++. \
Please refer to the [Unreal's Focusing System](#unreals-focusing-system) section for a more detailed explanation of the navigation flow. \
- **Escape**: This navigation type will navigate to either another widget or try to reach any other widget and escape out of the bounds of this widget when navigated out in that direction. \
- **Stop**: Navigation stops when trying to navigate out of this widget in that direction. \
- **Wrap**: Navigation will attempt to wrap to the opposite bounds of this widget(for example in a vertical box, navigating to the bottom widget and having a wrap setting for down on the last widget will send navigation to the top widget of the vertical box). \
- **Explicit**: Navigates to a specifically chosen widget when navigating out of this widget in that direction. \
 \
*You can only select other widgets that have their name edited in the editor when selecting it in the designer, otherwise in code you can just provide the widget itself regardless of if its been renamed or not.*
- **Custom**: Allows you to override what widget to navigate to using a function that can either return a widget or no widget(simulating the *“Stop”* navigation type). Intended for when navigating **FROM** or out of this widget to another widget in that specific direction. \
- **Custom Boundary**: Allows you to override what widget to navigate to using a function that can either return a widget or no widget(simulating the *“Stop”* navigation type). Intended for when navigating **TO** this widget from another widget in that specific direction, \
so if the direction is Left and you have it set to Custom Boundary then when you navigate from another widget to this one and it was a Left direction then it will run this function that it's bound to. \
- **Flow Direction**: For localization, allows you to set the flow direction of this widget regarding whether it is from left to right, or right to left. \
Only certain widgets actually use it but it is in all widgets in case you want to add your own functionality based on flow direction. For example text widgets can flip from left to right/right to left depending on its flow direction and the language that specifies its flow direction to that.
- **Inherit**: Inherits the flow direction set by the parent widget.
- **Culture**: Begins laying out widgets using the current cultures layout direction preference, flipping the directionality of flows.
- **Left to Right**: Forces a Left to Right layout flow.
- **Right to Left**: Forces a Right to Left layout flow. \
**[⬆ Back to Top](#table-of-contents)**
## 8.0 UMG in relation to Levels/Worlds
### 8.1 HUD Actors
HUD Actors are actors that are only spawned into the level by the Game Mode(I do not recommend spawning them manually unless you are overriding Game Mode functionality and know what you're doing).
These actors do not replicate, are hidden by default, and are only spawned per local player controller(to account for split screen) and does not spawn on dedicated servers.
The purpose of HUD Actors has changed with the release of Unreal Engine 4(it has stayed the same for Unreal Engine 5) from how it was in Unreal Engine 3 where it used to be the main source of functionality for UI elements in a level for a player,
but with the release of UMG and Slate this caused HUD actors to become manager objects for UMG/Slate UI elements rather than driving every aspect of the UI's functionality but they are completely optional to how you want to architect your code.
#### 8.1.1 HUD Drawing
HUD Actors are tied to a specific player controller and have debug mode information, as well as the functionality to manually draw UI elements to the screen.
Here is the list of drawable UI elements:
- Text: Draws a string on the viewport canvas.
- Line: Draws a 2D line on the viewport canvas in 2D screenspace.
- 2D Line: Draws a 2D line on the viewport canvas using pixel coordinates(which can be less accurate than screenspace due to how Unreal uses Slate Units).
- 3D Line: Tells the debug line drawing system for the world to draw a line in world space.
- Rect: Draws an untextured quad(square/rectangle) on the viewport canvas.
- Texture: Draws a textured quad(square/rectangle) on the viewport canvas.
- Texture Simple: Draws a textured quad(square/rectangle) assuming 1:1 texel density on the viewport canvas.
- Material: Draws a material-textured quad(square/rectangle) on the viewport canvas.
- Material Simple: Draws a material-textured quad(square/rectangle) on the viewport canvas but assumes UV's are (0.0, 0.0) and (1.0, 1.0).
- Material Triangle: Draws a material-textured triangle shape on the viewport canvas.
> A important note is that the way that the HUD Actor draws images and other UI elements is by skipping a few steps of how UMG does it by directly getting the canvas and telling it to draw items.
#### 8.1.2 HUD HitBoxes
An interesting feature that HUD Actors have is they have the ability to know if portions of the screen are moused over/clicked/pressed and released.
The way they do this is by using a class called `FHUDHitBox`.
`FHUDHitBox` is a C++ only class that has these properties:
- Coords `FVector2D`: Coordinates of top left of the hit box.
- Size `FVector2D`: Size of the hit box.
- Name `FName`: The name of the hit box.
- bConsumesInput `boolean`: Does not consume actual input from the game.
- True: Prevents hit checks to other hit boxes.
- False: Allows the hit check to pass through to other hit boxes.
- Priority `int32`: The priority of the hit box(could also be considered the Z-Order). Higher hit boxes are given priority first.
The benefits of using a `FHUDHitBox` is that the HUD has mouse events that work with it, each event provides the name of the HitBox:
- Click: Occurs when a hit box is clicked on.
- Release: Occurs when a hit box is no longer clicked.
- Begin Cursor Over: Occurs when a hit box is moused over.
- End Cursor Over: Occurs when a hit box no longer has a mouse over it.
The HUD Actor essentially has an array of HUD HitBoxes that can be added/removed at runtime. The array is a public variable in all HUD Actors but can only be accessed in C++:
`HitBoxMap`(I know it says map but its not a map array). \
There is two ways of adding a HitBox:
- Calling `AddHitBox` and feeding in the parameters to create a `FHUDHitBox` class inside the function.
- Manually creating the `FHUDHitBox` class and adding it to the `HitBoxMap` array.
To remove a HitBox you can simply remove it from the `HitBoxMap` array.
### 8.2 Widget Components
Widget Components are `UMeshComponent`'s(actor components that are primitive components that can render a mesh)
that basically creates a procedural static mesh in the world with its texture being the widget's drawn texture(you can access that render target using `GetRenderTarget`).
> Widget Components DO NOT TICK on Dedicated Servers. \
> This is obvious since most of the functionality of the component is updating rendering of the User Widget. \
> The component also deals with collision based on the User Widget, so if the widget is not spawning on Dedicated Servers then the component's collision will not work properly.
An important performance impact of using widget component's is that each widget component is a render target being updated on the component's tick. \
So if you have 100 widget component's at high resolutions then that's 100 render targets being updated every frame(you can have the component tick when drawn but that still takes up GPU memory). \
To avoid these kinds of GPU memory impacts, here are some common situations and solutions(THESE ARE NOT THE ONLY WAY TO SOLVE THESE ISSUES, THESE ARE JUST RECOMMENDATIONS FROM MY OWN EXPERIENCE):
- Situation 1: Large amount of images or progress bars that are above NPC's head's
- Solution: Using static mesh components with materials with a texture parameter for the image, and a material for creating the progress bar either via a texture or math based approach(recommend looking up SDF's with Unreal for examples).
- Situation 2: Rendering indicators through the world but scales as the player's camera moves closer/farther from the indicator's location.
- Solution: Creating a material to ignore the depth pass, in recent versions of Unreal Engine there is also a boolean to skip the motion blur pass but you can do this by modifying the engine in previous versions. You can do this with either static mesh components or particle systems drawing the static mesh, profile and come to your own conclusions.
For building materials to work with Widget Components, here are texture parameters that work automatically with Widget Components:
- `SlateUI`: Inputs the widget's Render Target.
- `TintColorAndOpacity`: Inputs the widget component's TintColorAndOpacity property.
- `OpacityFromTexture`: Inputs the widget component's OpacityFromTexture property.
An important aspect to remember is that while this is a component it does actually create a User Widget. \
To access the User Widget you can use `GetUserWidgetObject`(you can also use `GetSlateWidget` to get the `SWidget` that it is tied to).
> You cannot use `GetUserWidgetObject` in an actor's construction script due to the widget only being valid from `BeginPlay`.
By default it gets the first local player from the game instance:
```c++
if (UWorld* LocalWorld = GetWorld())
{
UGameInstance* GameInstance = LocalWorld->GetGameInstance();
check(GameInstance);
return GameInstance->GetFirstGamePlayer();
}
```
This can be changed by calling `SetOwnerPlayer` and inputting a `ULocalPlayer`.
For getting the 2D plane widget space location from a world location on the widget component you can use `GetLocalHitLocation` which calculates it out by doing these math operations:
> 1. By converting the world location into relative space of the widget component using `InverseTransformPosition`
> 2. Builds a simple 2D location with X-axis being the relative location's negative Y-axis and relative location's negative Z-axis for the 2D Y-axis.
> 3. Offsets(adds) the 2D X-axis by the current draw size's X-axis * Pivot's X-axis.
> 4. Offsets(adds) the 2D Y-axis by the current draw size's Y-axis * Pivot's Y-axis.
> 5. Caches a normalized location of the 2D location divided by the current draw size.
> 6. Updates the 2D location's Y-axis to be the current draw size's Y-axis * normalized location's Y-axis, this is to account parabola distortion.
#### 8.2.1 Widget Interaction Components
For being able to interact with widget component's there is the Widget Interaction Component that is \
meant to simulate user inputs and mouse pointer(or virtual finger tip) inputs as a laser pointer style of interacting with widget.
Each widget interaction component has a virtual user associated with it that handles providing input to slate widgets. \
When activated the component will create an actual `FSlateUser` to simulate input and such. \
By default the engine will use Slate User index 8(the maximum allowed amount of slate users) instead of 0 and increments up from there, \
allowing for slate users and virtual users to not have conflicts.
Widget Interaction Components will trace on tick to determine what widget its interacting with. \
Here is the order of the tick frame for the component to figure out the component its line tracing against in `UWidgetInteractionComponent::TickComponent`:
> 1. `UWidgetInteractionComponent::SimulatePointerMovement`
> 1. Check if we can even hit test by checking `bEnableHitTesting`
> 2. Check if the component is able to send input in `CanSendInput`
> 1. If the slate application is initialized & if the virtual user has been setup.
> 3. `UWidgetInteractionComponent::DetermineWidgetUnderPointer`
> 1. Cache the previously hovered widget component.
> 2. `UWidgetInteractionComponent::PerformTrace`
> 1. Line trace based on the type of `InteractionSource`:
> - World: Multi-Line Trace by `TraceChannel` in the forward direction of the interaction component's location, \
> ignores any components in the owning actor so it doesn't hit itself(excluding widget components).
> - Mouse: Multi-Line Trace by `TraceChannel` from the mouse position deprojected from screen to world.
> - Center Screen: Multi-Line Trace by `TraceChannel` from the viewport's center position deprojected from screen to world.
> - Custom: Uses `CustomHitResult`'s properties which can be set at runtime. \
> An important note about this struct is in the first tick frame it might not have been set yet since Blueprint tick might occur after this is called. \
> You can set it in BeginPlay and will have been setup ahead of time for that first tick frame.
> 2. If we're not using the custom `InteractionSource` type then filter through invisible widgets.
> 3. Gets the hit widget component and feeds in the hit result, from there the widget component will return the 2D hit location in widget space.
> 4. Finds the `FWidgetPath` from the returned widget space hit location.
> 5. Returns the trace result of `PerformTrace`.
> 3. Tell the newly hovered widget component to redraw.
> 4. Iterate through an arranged list of widgets from the retrieved widget path from the trace and update these flags based on the final widget:
> - `bIsHoveredWidgetInteractable`: If the widget is interactable.
> - `bIsHoveredWidgetFocusable`: If the widget is keyboard focusable.
> - `bIsHoveredWidgetHitTestVisible`: If the widget is hit testable.
> 5. If the newly hovered widget component is different from the previously hovered widget component then tell that previous component to redraw. And broadcast `OnHoveredWidgetChanged` for other systems.
> 6. Return widget path from the trace.
> 4. Notify the slate application(to send to the rest of the engine) that an input is being simulated on that widget or if we're not hovering anything anymore then tell it that the pointer has moved off that old widget.
#### 8.2.2 How Widget Components are Rendered
For drawing a user widget to a `UTextureRenderTarget2D` the general process of it that Widget Component's do(along with extra work because it is a component and thus has to provide a scene proxy and such);
is by creating a `FWidgetRenderer` and then getting the slate widget from the user widget and having the widget renderer draw it as a texture. \
Here is example code of using the widget renderer to create a texture from a `UUserWidget`(there are multiple implementations of `FWidgetRenderer::DrawWindow` & `FWidgetRenderer::DrawWidget`so this is one of the ways):
```c++
bool UExampleFunctionLibrary::DrawWidgetToTarget(UTextureRenderTarget2D*& DrawnWidgetRenderTarget,
UUserWidget* WidgetToRender, const FVector2D DrawSize, const float DeltaTime)
{
// Reset the variable for Blueprint users to avoid reusing previous calls
DrawnWidgetRenderTarget = nullptr;
// Are we using a valid widget to grab from for the render target
if(!IsValid(WidgetToRender))
{
UE_LOG(LogExampleFunctionLibrary, Error, TEXT("UExampleFunctionLibrary::DrawWidgetToTarget: Inputted NULL WidgetToRender"));
return false;
}
// Make sure we're using a valid draw size
if(DrawSize.X <= 0 || DrawSize.Y <= 0)
{
UE_LOG(LogExampleFunctionLibrary, Error, TEXT("UExampleFunctionLibrary::DrawWidgetToTarget: Inputted INVALID DrawSize(%s)"), *DrawSize.ToString());
return false;
}
// Create the render target object using the user widget as the outer object(as a safety measure)
DrawnWidgetRenderTarget = NewObject| Source File(.cpp) | Header File(.h) |
```c++
void AMyPlayerController::BeginPlay()
{
Super::BeginPlay();
// Valid check that slate application initialized
if(FSlateApplication::IsInitialized())
{
// Depending on your version of Unreal Engine,
// you may need to just do "FSlateApplication::Get().FocusChangingDelegate" instead of using a function to get it
// Bind for when focus changes, if you're having issues with this then I recommend learning about Unreal's delegate framework
// or looking at the slate application's header and source file regarding the focus changing delegate
FSlateApplication::Get().OnFocusChanging().AddUObject(this, &AMyPlayerController::FocusChanged);
}
}
void AMyPlayerController::FocusChanged(const FFocusEvent& FocusEvent, const FWeakWidgetPath& OldFocusedWidgetPath,
const TSharedPtr |
```c++
UCLASS()
class MYGAME_API AMyPlayerController : public APlayerController
{
GENERATED_BODY()
protected:
// AActor interface
virtual void BeginPlay() override;
// ~AActor interface
/**
* Occurs when a Slate User changes widget focus.
* @param FocusEvent The type of focus event that occured.
* @param OldFocusedWidgetPath The previously focused widget's path in the widget tree.
* @param OldFocusedWidget The previously focused slate widget.
* @param NewFocusedWidgetPath The widget path of the slate widget we're going to focus.
* @param NewFocusedWidget The slate widget we're going to focus.
*/
virtual void FocusChanged(const FFocusEvent& FocusEvent,
const FWeakWidgetPath& OldFocusedWidgetPath,
const TSharedPtr |
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Launch/FEngineLoop/) | LaunchEngineLoop.h | LaunchEngineLoop.cpp | This is the heart of the entire Unreal Engine application, recommend only looking but not touching. | | [Multiple] | SharedPointer.h | SharedPointerInternals.h | This is where Epic's Shared(Smart) Pointer Framework is located, also recommend taking a look at `SharedPointerTesting.ini` for example's of using Shared Pointers. | | `FSlateApplication`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Slate/Framework/Application/FSlateApplication/) | SlateApplication.h | SlateApplication.cpp | | | `FHittestGrid`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/SlateCore/Input/FHittestGrid/) | HittestGrid.h | HittestGrid.cpp | | | `SWidget`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/SlateCore/Widgets/SWidget/) | SWidget.h | SWidget.cpp | | | `UWidget`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/UMG/Components/UWidget/) | Widget.h | Widget.cpp | | | [Multiple] | DeclarativeSyntaxSupport.h | [None] | Holds all the declarative syntax macros for Slate to use such as SNew, SLATE_ARGUMENT, etc. Extremely important file to study. | | `SUserWidget`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/SlateCore/Widgets/SUserWidget/) | SUserWidget.h | SUserWidget.cpp | | | `UUserWidget`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/UMG/Blueprint/UUserWidget/) | UserWidget.h | UserWidget.cpp | | | `FNavigationConfig`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Slate/Framework/Application/FNavigationConfig/) | NavigationConfig.h | NavigationConfig.cpp | This is where most of the Navigation related types are, this includes structs and enums. | | [Multiple] | SlateEnums.h | [None] | This is where most of the Slate related Enum Types are. | | `TAttribute`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Core/Misc/TAttribute/) | Attribute.h | [None] | | | `TSlateAttribute`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/SlateCore/Widgets/TSlateAttribute_FText_EInvalidat-/) | SWidget.h & SlateAttribute.h | | While this is declared in `SWidget.h`, it is actually explained in `SlateAttribute.h` | | [Multiple] | InputCoreTypes.h | InputCoreTypes.cpp | This is where most of the Input related types are, this includes structs and enums. | | `FInputEvent`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/SlateCore/Input/FInputEvent/) | Events.h | Events.cpp | This is where the hierarchy of `FInputEvent` types are located. | | `SGameLayerManager`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Engine/Slate/SGameLayerManager/) | SGameLayerManager .h | SGameLayerManager .cpp | | | `UGameViewportClient`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Engine/Engine/UGameViewportClient/) | GameViewportClient.h | GameViewportClient.cpp | | | [Multiple] | UnrealClient.h | UnrealClient.cpp | This one is interesting because it holds manager objects for the viewport's rendering and some of its functionality at the same time.
This is also where screenshots are processed(including ones with/without UI). | | `FSceneViewport`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Engine/Slate/FSceneViewport/) | SceneViewport.h | SceneViewport.cpp | This is where our viewport's slate widget is essentially housed. | | `IInputProcessor`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Slate/Framework/Application/IInputProcessor/) | IInputProcessor.h | [None] | This is the base interface class for Input Pre Processors, you would inherit from this class if you were making one. For an example of how to set one up, lookup FAnalogCursor. | | `FAnalogCursor`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Slate/Framework/Application/FAnalogCursor/) | AnalogCursor.h | AnalogCursor.cpp | | | `FSlateUser`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Slate/Framework/Application/FSlateUser/) | SlateUser.h | SlateUser.cpp | | | `ULocalPlayer`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Engine/Engine/ULocalPlayer/) | LocalPlayer.h | LocalPlayer.cpp | This also holds `FLocalPlayerContext` which is useful for passing around to UI and other objects to have context to the local player, its player controller, game instance, world, etc. | | `UWidgetLayoutLibrary`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/UMG/Blueprint/UWidgetLayoutLibrary/) | WidgetLayoutLibrary.h | WidgetLayoutLibrary.cpp | | | `USlateBlueprintLibrary`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/UMG/Blueprint/USlateBlueprintLibrary/) | SlateBlueprintLibrary.h | SlateBlueprintLibrary.cpp | As a heads up, the script name is also written as "SlateLibrary" in case you have trouble finding it. | | `UWidgetBlueprintLibrary`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/UMG/Blueprint/UWidgetBlueprintLibrary/) | WidgetBlueprintLibrary.h | WidgetBlueprintLibrary.cpp | As a heads up, the script name is also written as "WidgetLibrary" in case you have trouble finding it. | | `UUserinterfaceSettings`
[Documentation](https://docs.unrealengine.com/latest/INT/API/Runtime/Engine/Engine/UUserInterfaceSettings/) | UserinterfaceSettings.h | UserinterfaceSettings.cpp | This is also where the render focus rule and a few other data types that you find in those settings are declared. | **[⬆ Back to Top](#table-of-contents)**