diff --git a/Resources/RichTextInputImageExample.gif b/Resources/RichTextInputImageExample.gif new file mode 100644 index 0000000..a8a765d Binary files /dev/null and b/Resources/RichTextInputImageExample.gif differ diff --git a/Resources/richtextdecoratorconfig.png b/Resources/richtextdecoratorconfig.png new file mode 100644 index 0000000..ba89225 Binary files /dev/null and b/Resources/richtextdecoratorconfig.png differ diff --git a/doc/InputImage.md b/doc/InputImage.md index 355ada1..9023683 100644 --- a/doc/InputImage.md +++ b/doc/InputImage.md @@ -39,3 +39,7 @@ that. This is an optional link to a [UiTheme](UiTheme.md) you want to use for this InputImage. If blank, the default UiTheme is used. + +## See Also + + * [Rich Text Input Decorator](RichTextInputDecorator.md) \ No newline at end of file diff --git a/doc/RichTextInputDecorator.md b/doc/RichTextInputDecorator.md new file mode 100644 index 0000000..ca085e7 --- /dev/null +++ b/doc/RichTextInputDecorator.md @@ -0,0 +1,86 @@ +# Rich Text Input Image Decorator + +This helper class allows you to embed images of input controls into rich text +like this: + +![Rich Text Decorator Example](../Resources/RichTextInputImageExample.gif) + +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: + +![Decorator Configuration](../Resources/richtextdecoratorconfig.png) + +Then you can use the `` tag whenever you want to insert an image +related to input controls. There are various options: + +## Adding input images to rich text + +### Input Actions + +`` + +This displays the image for a bound action input, as configured in project settings. + +### Input Axes + +`` + +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). + +`` + +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. `` 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. `` 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) \ No newline at end of file diff --git a/doc/Widgets.md b/doc/Widgets.md index e557349..537a422 100644 --- a/doc/Widgets.md +++ b/doc/Widgets.md @@ -17,6 +17,13 @@ Several custom widgets are supplied to assist with some common challenges: display the image for an associated bound control, based on the currently active input method. Dynamically switches as input method changes. +* [Rich Text Input Decorator](RichTextInputDecorator.md) + + A decorator for Rich Text controls that allows you to use markup like + `` in your text to inline an image of + the input control which is bound to that input action right now. + Again this dynamically switches as input method changes. + * [Menu System](Menus.md) A couple of classes to make it easy to create multi-level on-screen menus