How to create a tiled material for a textblock in a user control

I have a texture (Figure 1), and I created a material (Figure 2). When I applied it to a WPF TextBlock, the result was as shown in Figure 3. What I expect is the effect in Figure 4.

Since TextBlock renders text units individually, the top-left corner of each character is (0,0) and the bottom-right corner is (1,1). This causes identical tiling counts across all characters, resulting in inconsistent “density” when rendering characters of different sizes (like C vs. I).

I also tried using screen-space UV coordinates for rendering, which matched my expected visual result. However, during animations, the background no longer moves with the text elements.

How can I achieve one of the following:

1Consistent texture density across characters of different sizes()
2using screen-space UV coordinates, Background movement synchronized with text during animations?




2 Likes

there’s a node that gets the screen pixel size. i think it could help you. i don’t remember exactly the name though.
check this SceneTexelSize | ueHow
and this Material render size in UI materials - #2 by Zaratusa

Sorry, I tried the two methods you said and didn’t solve my problem, thanks

im sorry :confused: i don’t have any other ideas :confused:
maybe try a different approach.
i hope you find an alternative soon.

Are you still looking for a solution? I can suggest a few ways, but first I’ll have to ask these questions:

  1. a) What is a WPF TextBlock? Can I consider it just a regular TextBlock used in UI or a “Text” widget used in UMG?
    b) Are you using c++ to work with widgets? I mean, is c++ solution suitable for you?

  2. Is the text being displayed subject to frequent and “unpredictable” change? Because if it won’t change during the game, for example, it will just display the name of something, you can just create the text and font texture in some other program and import the image instead. Then you won’t have to worry about all these problems. Not sure if this is a suitable alternative solution for you.

  3. What kind of animation are you doing? Will you use Sequencer or something else? Will the animation itself be mostly some kind of transformation?

Thank you for your help! If you have any suggestions, I’d be happy to hear them.

a) The WPF TextBlock here refers to the UMG TextBlock in Unreal Engine.

b) No, I’m not using C++. The text doesn’t change frequently, but I prefer dynamic configuration instead of manually editing images in external programs.

The animation is similar to the opening sequence in the classic FC game Battle City. The text needs to move from the bottom of the screen to the center. So I tried using the ScreenPosition UV, but at that point the background would appear ‘static,’ with the text moving relative to the screen while the background remained stationary relative to the screen.

Ok, thanks for clarifying my questions.

Well, since you are not using C++, you will have to use screen space UV coordinates, since any solutions using “TexCoord” will require C++. The basic idea of ​​the solution is as follows:

  • To fix the main problem you mentioned, we can use a dynamic font material and provide the TextBlock position coordinates (translation) to it. Then inside the material we will do “Screen Coords” - “TextBlock Coords” to find the relative coordinates of the “Screen” to TextBlock.

It is also important to mention that here is another problem that will arise: the widget translation is not DPI dependent, although we should take it into account. To get the “correct” translation, we will need to multiply it by the DPI scale (ViewportScale). This value can then be used in the material for the steps described above. Now, here is the actual solution:

In the widget blueprint graph:

Material setup:


The logic in the blueprints can be changed. For example, you can do some checks to update the material parameter only when the TextBlock actually moves.

That’s it. Hopefully this works for you. If it doesn’t or you have any questions, feel free to ask.

Note: Keep in mind that this solution will likely only work if you control the translation of the widget.

1 Like