Make UMG Widget fit a whole mesh? (Fallout 4 Pipboy, etc )

Development Programming & Scripting C++
1

So, im working on a 3d " journal " interface, where the UI is drawn on a plane inside the journal model. I exposed the material instance on the UMGWidgetComponent so i can grab it and apply it to my mesh instead…My problem is that while i can apply the material just fine i cant get it to make the ui Somehow " fit " inside the plane, i also tried with a few different meshes with mixed results

Left is the UMG Widget material applied to a mesh, Right is the normal result on a widget component

Applying the Material to a plane, gives fairly good results ( although with some stretching , it " stretches " the UI based on the plane scale , ideally id like the UI to not be stretched )

Using a scaled down cube works well too

And here is where the problem is. When using my own journal model . the pages have their own material slot and they are just planes… the problem is that the UI doesnt fit at all inside these

So yeah basically im trying to find a way to make the material / UI “fit” on the specific UV / Material region

2

I had a similar issue some time ago. The difference with mine was that I quickly gave up on playing around with materials, meshes and widgets because it made no sense to use it. In my case it wasn’t a journal, but a clipboard, which is basically the same in this case, since they both have planes on which we would need text to be rendered. My suggestion is that you have a material for the journal that doesn’t include any text and just create an actor from your journal’s static mesh and add a TextRender where you wish. This way you can play around with font color, size and position very easily. Also you’re probably going to need line breaks - while making the clipboard I found out that they are very similar to HTML: <br>.
I know this isn’t a solution to your problem of fitting a material or UI to a specific UV region, but it worked well enough in my case :slight_smile:
Here’s an image of the finished product:

Screenshot_40.png
Screenshot_40.png925×552 659 KB

Hope this helps,
suzi9spal

3

I can give you a very stupid and improvised idea, it’ll work but probably the pros can tell you of way better ways.

So the improvised solution here is to capture the UMG placed in world with a scene capture 2d actor, this will put the umg widget in a texture, then make a material using that texture and put it on your page. of course this will mean that you cannot use mouse input with that umg but you should still be able to use keyboard input.

Like I said its a ****** solution , but worth a trial.

4

suzi9spal:Thanks for the suggestion but since im displaying a UMG Widget i need both mouse and keyboard input, since i need interactivity

Commander Shepard:I guess that can work but again im just wondering whats going on with the Widget Material since it shows up just fine on the stock editor Plane mesh but not in mine…

5

Why can’t you put the widget component over the page? You’re displaying the widget on a flat surface, I’m not sure I see a reason to go to the trouble of trying to place it onto a custom mesh.

6

On this specific case, you are right i can just put the widget over the page, But there are other cases where i cant do this, as example for curved surfaces or a round watch-like UI / Surface im also working on

7

Ok If you are willing to get dirty with C++ code here’s what you can do

You can extend the UWidgetComponent and grab a hold to the render target texture directly

in UnrealEngine/Engine/Source/Runtime/UMG/Public/Components/WidgetComponent.h you’ll find the following



	/** The target to which the user widget is rendered */
	UPROPERTY(Transient, DuplicateTransient)
	UTextureRenderTarget2D* RenderTarget;

and in UnrealEngine/Engine/Source/Runtime/UMG/Private/Components/WidgetComponent.cpp you can find the following



void UWidgetComponent::DrawWidgetToRenderTarget(float DeltaTime)
{
..
..


	WidgetRenderer->DrawWindow(
		RenderTarget,
		HitTestGrid.ToSharedRef(),
		SlateWidget.ToSharedRef(),
		DrawScale,
		DrawSize,
		DeltaTime);

}

where UTextureRenderTarget2D can be used as a texture in some material and then you can apply the material directly to the book.

For interaction with mouse you’ll need to override

virtual TArray<FWidgetAndPointer> GetBubblePathAndVirtualCursors function in** UnrealEngine/Engine/Source/Runtime/UMG/Private/Components/WidgetComponent.cpp
**

you’ll need vector math to make input from hit like it does already, and then you’re good to go

:slight_smile: