How do i create a chat UI?

i want to create a widget similar to this video:

the asset he’s selling is a lot more complicated than I need, so I just need the UI.
could someone tell me what’s the best way to recreate this UI?

guys i was able to create the phone and the background stuff but I don’t know how to create a box which the texts will just scroll up when a new message is added.

  • create a user widget that represent a text message
  • the phone widget holds a scroll box
  • when message is sent, add a child to the scroll box, align as needed + Scroll to End

So something along the lines of:

But better, ideally. Use a Size Box & wrap the text to keep the message widgets in check.

thanks for the help but how did u do the alignment so that it prints left and right? right now all I get is 1 text block and the top left.

also could u share some screen shots of both widgets? I’m still a noobie in umg

also it looks like they are being created on top of each other

You probably have a canvas in the widget:

Forgot to mention, if you do this, the text will not jump around and scroll to the bottom correctly. You may not even need a size box at this point.

guys there are a couple of problems im encountering here.

first one is that the text looks really bad and unreadable from a little bit of distance, the text looks really jagged and low quality even tho I set the draw size to the maximum amount possible. does anybody know how I can fix this?

as u can see unless I’m shoving the widget to my face noting is readable.

another problem I have is that the size of the border around the text is determined by the length of the text rather than being customizable on its own, no matter what I change in the text widget it doesn’t take effect when its added to the phone.

You’re missing a size box. Or use the Wrap Text At, as above. Also, place the text as the border child (like I did in the pic) - this way the text will demand a size from the Border which will try to conform unless something else squeezes it from the outside. And you will be able to get rid of the overlay.

I’d lean towards text wrap as it will eliminate the need to work in a Force Prepass - as the messages with different text length arrive, if you want to to see them this very frame, you may observe the text rejiggle to fit into the layout. This can be highly jarring and undesired.

Regarding quality:

It could be worse, but it could be much better, for sure…

i used a size box as parent of everything but why I’m not seeing any changes in realtime? i only see those changes at run time when its added to the widget. that’s gonna be really hard to configure.

the quality of the text still persists tho… in ur example the screen is really big but a phone shouldn’t be that big.

sorry if I ask too many question

The ui is not really a problem for me i will eventually figure it out. My biggest problem is the jagged lines around the text and the screen itself which is unacceptable.
Is this some anti aliasing problem in the engine or is it bcz of something else?

The text seems weirdly scaled or maybe its the font. The only thing I did, no size box even:

The 384x1000 at the top is just a preview so you can tell how it will look like once placed in a container. Drop a couple of those user widgets into a scroll box to get an idea how it will look like:

The 512x768 here is what I’d use in the widget component to get the same size.

If I were to preview it in the resolution you’re attempting (or thereabout):

It’s going to look weird… Those widgets are too small for this res. There’s no need to go 4k if the phone screen will occupy just a small part of the real screen estate. If the user can bring it really close to the camera, the res should go up, ofc.

Hard to tell what else could be going on with the layout. I can think of too many things that can break the layout, too many to list.

But I don’t think you can squeeze more quality out of the widget component. Perhaps with some material trickery - you’d need to rewrite what it does. If you want crisp UI, use world screen. Perhaps the user brings the phone to their face and then you switch to 2d. Perhaps you can crank up the resolution, set the fonts to very large and scale the component to 10th its size…

i tried changing the font, no effect.

i read somewhere that using a texture directly as the brush can also reduce the quality so i created a material connected the texture to final color and used the material as brush… still no improvement…

could this be a bug in the 4.27? cuz it looks like changing the anti-aliasing methods makes it even worse. so i think its rendering issue

It’s always been like that. 2d ui is crisp. 3d text is not - it’s not meant to do that kind of fine work. There might be solutions / work arounds out there - I’m not aware of any, though.


Thank u for the help i appreciate it. I will update u if i ever found a solution.

1 Like