Blang0113
Blang0113

Reputation: 1

(Unreal) How can I draw on a UI image?

It's been 5 days since I started Unreal.

While studying Unreal, I'm going to make a game that invokes magic after drawing magic patterns on UI images. However, I belatedly realized that the process of drawing in Unreal is quite complicated than I thought.

enter image description here

In particular, the biggest problem is drawing at a specific location according to the coordinates of the mouse. (I've finished getting the current UV coordinates, but I didn't understand how to use UV coordinates in the material specifically. I don't know what the principle is.)

If you have time, can I ask for advice?

https://www.youtube.com/watch?v=wIfovfaf01w

I know that in order to draw in Unreal, you have to use Render Target.

However, as shown in the video above, there were only several materials for drawing on the whiteboard that existed as a 3D mesh actor, and there were no materials dealing with how to draw on the 2D UI screen like me.

Drawing on the whiteboard seems to be using 'line tracing', shooting laser and using 'casting' function. So I thought it was difficult to use that method to draw images of UI. (If you can use it as it is, I would appreciate some more advice in the comments.)

In addition, even if we found similar data, most of them were from 2014-2017, so it was difficult to apply them to current Unreal. (For example, Unreal officially recommends using Draw Material to Render Target, but we used Begin/End Draw Canvas to Render Target for all previous data.)

Currently, the materials I found on the internet are not using canvas render targets, only render targets. I want to use canvas render targets because my goal is to draw on the UI screen, but I couldn't find any information related to this.

(I've looked for several similar concepts, but they're all from 2014 to 2017, so I thought it would be difficult to apply them to the current Unreal 5 version.)

Anyone who has ever drawn on a UI similar to me, or who can implement a drawing function on a 2D UI screen, can help?


enter image description here

To see if it was implemented, the brush was fixed in black and declared several variables in DrawMagic.

IsDrawing (activated when the paint function is pressed) CanvasRender(Canvas Render Target) M_Dynamic (I created a new dynamic material instance and saved it to this variable)

Button_120 (If a button is pressed, the Clear Render Target will be activated to initialize the previous work.)

  1. Maternal

After declaring a new material called M_Brush, we made Material Domain the user interface and changed Blend Mode to Translucent.

The parameter used Vector Parameters (Vector 4), and the parameter was named "BrushParameter".

  1. Obtaining UV Coordinates

We succeeded in obtaining the UV coordinates of the mouse by dividing the current position of the mouse in the viewport by the viewport size.

The X and Y coordinates of the Make Vector part in the picture are UV coordinates, respectively.

Result

  1. As soon as you use the Draw Material to Render Target, the Canvas Render Target disappears out of the blue. I don't get it. I've tried everything, but once I add that node, the panel with the image will suddenly become transparent and I can't see it.

  2. I couldn't even implement getting a brush by recognizing mouse coordinates, let alone a picture. Doing this for 5 days makes me feel self-destructive and it's so hard... Am I not talented at coding?

Upvotes: 0

Views: 607

Answers (0)

Related Questions