mirror of
https://github.com/sinbad/StevesUEHelpers.git
synced 2025-02-23 17:45:23 +00:00
86 lines
3.0 KiB
Markdown
86 lines
3.0 KiB
Markdown
|
# Rich Text Input Image Decorator
|
||
|
|
|
||
|
|
This helper class allows you to embed images of input controls into rich text
|
||
|
|
like this:
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
The UMG [Rich Text widget](https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/UMGRichTextBlock/index.html)
|
||
|
|
has two main configuration points.The first is the Text Style Set which controls the font
|
||
|
|
(mandatory: if you don't set up one of these with a Default style your text will be garbage).
|
||
|
|
|
||
|
|
The second, which is what we're interested in here, is the decorator system.
|
||
|
|
This allows you to use custom markup to insert other widgets in the rich text run.
|
||
|
|
|
||
|
|
## Setup
|
||
|
|
|
||
|
|
### Create theme
|
||
|
|
|
||
|
|
If you haven't done this already, you need to create a [UiTheme](UiTheme.md).
|
||
|
|
Follow the instructions in that linked page first; the Rich Text blocks always
|
||
|
|
use the default theme (unfortunately I haven't found a way of exposing
|
||
|
|
extra properties on decorators in the editor to allow a custom theme).
|
||
|
|
|
||
|
|
### Add decorator to Rich Text block
|
||
|
|
|
||
|
|
All you need to do next is add "RichTextInputImageDecorator" to the list of decorators
|
||
|
|
on your Rich Text block instance:
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Then you can use the `<input ... />` tag whenever you want to insert an image
|
||
|
|
related to input controls. There are various options:
|
||
|
|
|
||
|
|
## Adding input images to rich text
|
||
|
|
|
||
|
|
### Input Actions
|
||
|
|
|
||
|
|
`<input action="TheActionName"/>`
|
||
|
|
|
||
|
|
This displays the image for a bound action input, as configured in project settings.
|
||
|
|
|
||
|
|
### Input Axes
|
||
|
|
|
||
|
|
`<input axis="TheAxisName"/>`
|
||
|
|
|
||
|
|
Similarly this displays the image for a bound axis input, as configured in project settings.
|
||
|
|
|
||
|
|
### Manual Key
|
||
|
|
|
||
|
|
If you don't want to reference the input bindings and just want to display a
|
||
|
|
single key (and in this case 'key' can mean an actual keyboard key, or a gamepad
|
||
|
|
button, or any axis).
|
||
|
|
|
||
|
|
`<input key="F1"/>`
|
||
|
|
|
||
|
|
The value of the "key" attribute can be any string present in the
|
||
|
|
[EKeys enum](https://docs.unrealengine.com/en-US/API/Runtime/InputCore/EKeys/index.html).
|
||
|
|
That's not just keyboard keys, it's gamepad and mouse buttons & axes too.
|
||
|
|
|
||
|
|
## Optional Parameters
|
||
|
|
|
||
|
|
### Player
|
||
|
|
|
||
|
|
For the `action` and `axis` types, the default is to use the binding for the
|
||
|
|
first player. If you have multiple local players you can add the attribute `player="n"` where
|
||
|
|
n is 0 for the first player, 1 for the second etc.
|
||
|
|
|
||
|
|
E.g. `<input action="Fire" player="1"/>` would display an image for the Fire input
|
||
|
|
action bound for the second player.
|
||
|
|
|
||
|
|
### Width / Height
|
||
|
|
|
||
|
|
By default the size of the images is based on the line height of the font and the
|
||
|
|
aspect ratio of the image. However, if you want to override this, you
|
||
|
|
can add `width="w"` and/or `height="h"` attributes, where w/h are size
|
||
|
|
units.
|
||
|
|
|
||
|
|
E.g. `<input action="Fire" height="75"/>` will force the height to 75 units and
|
||
|
|
derive the width from that based on the aspect ratio.
|
||
|
|
|
||
|
|
It's generally best just to set the height and not the width as well, since
|
||
|
|
setting both can cause the image to be distorted if it's not the same aspect ratio.
|
||
|
|
|
||
|
|
## See Also
|
||
|
|
|
||
|
|
* [Input Image](InputImage.md)
|