UMG Warping Text Possible?

Hi there. I was thinking of making something like this for my player health bar however I could not figure out if this is doable. Basically what I have is this:

And what I’m trying to achieve is:

Is there any way to warp text around image like this in the UMG editor? I doubt it but maybe there are some workarounds I can use? Really appreciate any help. Have a great day/night! :smiley:

You’d definitely be able to do this in a material. You could prerender the UI to a render target, then make a material that takes that render target and warps it in that shape you want to match the circle shape.

I can imagine some kind of fancy math and trig you have to do to warp the UV’s of the texture onto that circle shape.

1 Like

Hey, appreciate it! I will try and see if I can set that up, I suck at materials x)

Have a good day, and thanks for the tip.

Hi, I could not figure how to do this out! I’m super new to materials. :sweat_smile: Could you please elaborate on how I can achieve this effect? Or any tutorials etc. on this subject? Appreciate it mate.

The texture sample node takes a Texture Coordinates pin.

By default this is the UV’s of the 3D mesh that come in, or in the case of UMG it’s a super simple rectangle with (0,0) being top left, (1,1) being top right.

You can try to remap that (0,0) to (1,1) space into a warped rainbow shape. I don’t know the math off the top of my head either, but there’s gotta be some kind of trig going on.

Like maybe there are 2 virtual circles, one for the outside, and one for the inside. The bottom of the texture maps to parts of the inner circle arc and the top to the outer.

So like the U coordinate would map to different points along the arc, while the V coordinates would map to different radius distances between the inner and outer circle.

1 Like

It’s not letting me edit with an image:

image

1 Like

Hi, thanks a lot on clarifying! I will try some stuff out and update here if I could ever figure this out =)

Do you need any text there (that can be changed during runtime). Or this is text that you want to put there during design of UI.

If this is for ui design then jsut make bitmap in app like AFFINITY designer (imo better than photoshop) or gimp or inkscspe.

I think that doing such thing now (that warped text) is waste of time for prototype, and low quality for shipping game. So one way or another you do not need this solution to be dynamic (for any text and in runtime).

It won’t be dynamic, no. It will be used for UI design, and it will just be “Health”. I believe what you’re saying fits more into what I’m trying to achieve. I will see if I can make it work! Appreciate the tip. :smile:

Edit: OK, my brain stopped working for a second. It is actually going to be dynamic since I want to display the value of the health, not text, so for example 100/100 and it changes on damage received. So I guess this won’t work as intended!

What about single digit custom widget, you split your number/text into single characters, then place them on circle around health bar.
Like this:

  • create widget that displays single character from string, make it int variable to set which character from string is displays
  • in widget align it to center (horizontally), and make it above pivot so it is on same radius as hp bar/circle. So you can snap all those custom widgets to center of hp bar circle. then rotate them by some step.
  • make that custom widget read some string from owner or player controller, or hook them all to dispatcher that updates hp.

And you done, digits will not be distorted you will not have troubles with pixelization or antialiasing etc.

1 Like

That’s a lot simpler, and a great way to do it! Thanks a lot for helping out. I will definitely try doing it like so. Have a great day/night!