Hello, can someone please guide me step by step on how I can get a widget UI menu to be properly projected onto a mesh like a parchment or scroll or paper so thats its actually part of the meshes material and looks like its actually written on to the paper mesh. Like how does this widget component and render target and all this stuff actually work with a mesh and how will it actually project and work with mouse clicks. Thank you!!!
Sure thing here is how it goes.
-
Create your parchament Mesh. I created an actor with WidgetComponent and placed in world.
-
Create your parchament widget which will hold content of parhament, notes, images, etc.
-
Assign the widget into the component, configure some settings. I preffered a manual render update since parchament mostly static but if you haave animation etc inside can be timer render or on tick. Its something costly so preferred to be static.
-
Make a new material of your choice, create a texture and convert to parameter. Assign to base color and assign this material to the parchament static mesh.
-
Made a logic in Parchament BP. Simply created a dynamic material instance from the mesh and hold reference. Assigned this instance back to mesh. Created a request render update from widget which will do once render image to the texture. Delay one tick and assign current render target to, created material instance’s texture parameter.
-
It should look like this similar, now to align into the mesh depending your Mesh’es uv, render scale etc.
I aligned my text and centered in umg additionly choose custom 1024x1024 canvas to help me.
It becomes like below
- Now we don’t need the widget to be rendered in game, we can set to hidden but it will stop working rendering so you can just set scale to 0.0 , after checking the code realized that there is also an option called “Tick When Offscreen” in the widgetComponent, make sure that its enabled so it runs in the background
Results
Technically it finishes here. You can just put your scroll mesh and align the texture parameter to be exactly the uv position u want to be. Additionally as said if you have animations etc you can update renders auto with not checking “manual render” on component or with timer.
Since we did this much wanted to play a bit 
Found this banner from sketchfab, I like its vibes, its fbx and have animations so we don’t need to have cloth simulation on it for demo purposes of this (can be done on same, higher reaslism etc ofc)
Imported, changed static mesh with skeletal add animations materials briefly.
Changed BP logic to SKM
Made a redraw time
Found a gif which I think would fit nicely.
Converted it to a sprite sheet and implement inside material graph. This can be on UMG or UI domain material too. Changed mask etc quickly make a new maaterial.
Make some changes in UMG add some animation and some counter for some functionality.
Result
1 Like