Why do Blueprint Widgets have such a low resolution?

Hi, I have created a non-interactive two-year calendar widget. In the game it should appear as a relatively large calendar that you can view and consult in detail; however, for some reason, the quality of the visual, with which the widget is represented in 3D within the game, is really lousy. I do not understand it, since the letters are theoretically vector objects, they should not be pixelated in any way. Does anyone know how to give more resolution to a widget?


Best regards and thanks in advance

Hi, I have created a non-interactive two-year calendar widget.

What native widget elements is it made out of?

Can you explain what is happening in pic2? Is this a widget component? Screen space / world space? Hard to tell what’s what. How do you add it to the viewport?

Hi @Everynone The calendar is made with image frames (even without image) and text. In other words, they are not images that can be at low resolution. This widget is not intended to be interactive with the player.

In screenshot number 2 you can see a widget component in the 3D space of a blueprint actor (this is how the tutorials say it should be done apparently).

Do you think it’s my mistake or that unreal is like that?

Not a mistake.

You’re using a Widget Component in World Space - the quality will always be inferior. What you’re looking at is not vector fonts anymore. You’re looking at a texture (converted from a widget, so to speak) that was applied onto a plane - it has to be converted like this to make it work in 3d. And if you stretch / enlarge an image, you know what happens…

You can switch to Screen Space to get it super crisp, but it will not be 3d anymore.

To make the World Space widget look better:

Lower the Scale and increase Draw Size. Experiment and see how it goes.


Also:

image

This is not a great method of handling things. There’s no need to make things manually like so. Create a widget that reprenst 1 day, and then use those days widgets instead of duplicating every element.

Thank you very much @Everynone , your reply was very helpful.

I think I need to tell you a bit more about how I want to use this element. As I am making a visual novel a la “persona 5” I would like that at the end of each day the image that appears on the screen is captured and the image is placed on the corresponding day. The transition animation from one day to another would be that the camera zooms out from the day that has already passed and zooms in to the new day. At first I wanted to do this with animation inside the widget, but when I deform the calendar widget to enlarge it, it gets totally pixelated; that’s why I thought of doing this animation with a 3D camera.

Let me answer part by part.

-I put “Screen Space” but when I do it disappears; it is not invisible.

-If I didn’t have a separate image for each day I wouldn’t be able to place the screenshots on each corresponding day, would I?

It will only work outside of the editor, while you’re playing.

If I didn’t have a separate image for each day I wouldn’t be able to place the screenshots on each corresponding day, would I?

You would, and it would be 10x easier and faster. With what I am suggesting, not only will you have a seperate image, you will have an entire separate widget for every day.

The transition animation from one day to another would be that the camera zooms out from the day that has already passed and zooms in to the new day. At first I wanted to do this with animation inside the widget, but when I deform the calendar widget to enlarge it, it gets totally pixelated

You could do it in 2d / 3d, but if you’re planning to zoom in a lot, you need really large images to start with.

WoW! really? can you point me to a tutorial on how to do something like that?

Maybe it’s not worth it. I can make a calendar layout in illustrator and then convert it via svg to a 3D model, then in each box it will put a 3D plane with the texture of the screen captured image and then I wouldn’t have to worry about the resolution at all.

*By the way, I didn’t know that you could quote in the messages, now that I have seen that you have done it I have tried it too, I hope that it has gone well.

  • create a widget that represents a single day:

  • populate the calendar with those user widgets:

Expose data to configure / customise them:

You can assign data to each widget → this is the very ABC of working with UI. You use the native widgets like borders / images / text at the very granular level only, and then wrap them with user widgets; and use those as building blocks for the UI.

This way, if you want to change how a day of the week widget looks like, you only need to do it ONCE rather than 365 times for every day of the year…

Maybe it’s not worth it. I can make a calendar layout in illustrator and then convert it via svg to a 3D model, then in each box it will put a 3D plane with the texture of the screen captured image

If you export it in large enough resolution, it could work.

I wouldn’t have to worry about the resolution at all.

You will need to, you’d be still working with a widget component whose draw size dictates the resolution.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.