I’m coming back to something that’s been puzzling me for a while and I finally want to get rid of that unwanted behavior.
See, text in Unreal seems to automatically rescale depending on the window size. It’s easy to test, just write a Text in the middle of a Widget, scroll with your mouse, and you’ll soon see that the font more or less adapts but the end result can vary wildly.
It can be a real problem when a word sticks out too much in unwrapped mode OR creates a whole new line in wrapped mode. It often messes up my UI.
I’ve tried wrapping with SizeBoxes or ScaleBoxes to no avail.
The chosen font doesn’t matter.
It’s not a resolution problem (my game is locked to 1920x1080).
It’s not a DPI problem I think (mine is completely linear, see below)
No it’s purely a “window size” problem and I have no idea how to solve this.
Thanks in advance for any suggestion! I’m too young to pull all my hair out like that. It really looks like a problem that SHOULD have a basic solution since all games want to have consistent text UI in theory, don’t they?
That’s mostly a matter of opinion.
Web design principles preach the exact opposite:
Every device has its own standard.
I suggest you test with some lorem ipsum. The line break can change if there are line breaks.
A continuous string is always going to be problematic since in almost everything the white space is used as a break…
But in video games I don’t remember seeing text UI jumping around depending on the window size. I agree for web interfaces I wouldn’t bat an eye but for a video game it feels… weird to me.
I would like a behavior such as: if the window size gets bigger or smaller (keeping the same resolution for simplicity sake) the text should always end at the same position relative to the textbox border.
In this example the text takes up 80% of the textbox’s width, and even when the window size changes and it resizes the text still takes up 80% of the width.
I don’t know if I’m clear enough.
I suppose there might be limitations due to how Fonts work and maybe change size in increments of X, but visual changes should hopefully not be as dramatic as the first captures I posted in this thread.
First of, unreal works by default like you want it to.
Scaling the whole thing up or down to fit.
Mind you, it’s done badly so it isn’t pixel perfect. This is most noticeable with grid items.
Anchors should always be top left. And your component needs to be given the proper fixed with values.
If you do that, it will be forced to scale up and down as a whole.
Arguably not the best behavior when pixels matter. You have no control of the distortion introduced via scaling.
Zooming in and out is not the way to test different sizes.
There are controls on the top right - though when testing I just launch a level in an external process in windowed mode, and resize manually. So I know what it looks like…
Worth noting that most end users only see the game at 1 res.
Meaning you’d have no idea how stuff scales or changes between mobile and desktop in 99% of cases.
On top of the mobile ui often having to be completely different.
The Canvas panel is wrapped in a SizeBox with Width 1920 and Height 1080, which itself is wrapped in a ScaleBox. This allows my widget to keep the same resolution whatever the window size.
Then put the text on the top right so that it exactly ends at the canvas right border.
Now playing with the “resolution handle” at the bottom right you should see the text going all over the place like I don’t want it to.
Thanks for your answer.
Yes, like I said it “kinda” does the job but not in a satisfying way imo. This is very noticeable with Texts.
1/ Anchors won’t matter in this case since the whole widget is wrapped in a sizebox wrapped in a scalebox, hence the resolution never changes so the anchors are never needed.
2/ Zooming in and out is not the best way to test indeed, but it works in this case and shows the problem I wanted to point out. Playing with the bottom right arrows also shows the problem, and resizing manually during a playsession shows it as well.
3/ In my case I’ve locked my game to 16/9 so this is not a matter of resolution. Even if I resize my window manually the widget will stay at 16/9. However, the font WILL get smaller and smaller as I shrink the window or bigger if I expand it, and in the process it sometimes doesn’t align properly with my UI or creates new lines if the text is wrapping automatically and becomes “too large”.
Interesting. But because of 2 that’s why it’s happening.
If you are trying to keep the text anchored to the top right, setting it up with the anchor on the top right should fix the issue permanently…
If you are trying to have the whole thing expand, I prefer top left and math.
The alternative is center anchor and loose sizing which will indeed cause spacing.
That said, if you share a project to test with your specific setup, we can give it a go and figure out who it is that causing the overflow…
You have to anchor your text to whatever corner you want it to be in.
The problem might be that it’s anchored to the top-left, then you manually move it to the right, and when you resize the resolution, its cutting off the right side of your text because it’s anchored on the left.
If you anchor it to the right side, it wont cut off on the right.
This might be an issue where you need to just play with all the settings to achieve what you’re looking for.
Scale box has “Stretch” and “Stretch Direction” and SizeBox has a bunch of settings you can mess with.
ugmoe, You did not understand the essence of the issue. I found that the problem is not with the slot, but with the text or font itself. Changing the size or resolution is just an example. I’m having this problem when I use the same button class with different text.
i suffering with that too ,
and i just come up with the worst Solution in the planet :
just convert your text to image using an image editor software with an alpha background and use that image in the image widget as a text
"if you don’t want to edit the text at runtime of course "
