[UWP] uwp platform ttf font rendering problem

[zhengy]

On uwp platform, ttf font looks thicker. When the font color is modified, the edges of the font will appear obviously jagged. What causes this? Is there any solution?

[halx99]

Please provide more detail information, sample reproducable project

[zhengy]

Please provide more detail information, sample reproducable project

I apologize for any confusion. I created a new C++ project (Hello World project) and simply replaced the TTF font as well as modified the font color. When compiling and running the project separately for UWP and Win32, differences can be observed.

If I don't replace the default "Marker Felt.ttf" font and only modify the TTF font color, the result is as follows:

The only modification is add the code: label->setColor(Color3B(121, 89, 231));

[halx99]

[rh101]

@zhengy Which version of Windows (and build number) are you running it on, and what monitor resolution?

[halx99]

The only reason cause uwp looks blur is:

• win32 framesize controlled by GLView::createWithRect
• winuwp framesize controlled by system, in my test, framesize is 1217x721 cause contentScaleFactor not 1.0

[zhengy]

@zhengy Which version of Windows (and build number) are you running it on, and what monitor resolution?

Sorry for the late reply. My Windows os system version is Windows 10 22H2 (Build 19045.3693), and the monitor resolution is 2560 * 1440 . Your test results appear to be normal. Did you make some modifications? In my test environment, the issue occurs with any framesize and contentScaleFactor (1 or not).

[rh101]

Sorry for the late reply. My Windows os system version is Windows 10 22H2 (Build 19045.3693), and the monitor resolution is 2560 * 1440 .

The reason I asked is because it seems that there are a lot of reports online related to bad UWP font rendering using certain resolution, which also seems to be impacted by the version of Windows used (not specific to Axmol).

[halx99]

@zhengy Which version of Windows (and build number) are you running it on, and what monitor resolution?

Sorry for the late reply. My Windows os system version is Windows 10 22H2 (Build 19045.3693), and the monitor resolution is 2560 * 1440 . Your test results appear to be normal. Did you make some modifications? In my test environment, the issue occurs with any framesize and contentScaleFactor (1 or not).

ApplicationView::PreferredLaunchViewSize(winrt::Windows::Foundation::Size{1280, 720});
ApplicationView::PreferredLaunchWindowingMode(ApplicationViewWindowingMode::PreferredLaunchViewSize);

[zhengy]

Sorry for the late reply. My Windows os system version is Windows 10 22H2 (Build 19045.3693), and the monitor resolution is 2560 * 1440 .

The reason I asked is because it seems that there are a lot of reports online related to bad UWP font rendering using certain resolution, which also seems to be impacted by the version of Windows used (not specific to Axmol).

Yes, I tested both cocos2dx 3.17 and cocos2dx 4.0, and they have the same issue. May I ask what is your Windows version and screen resolution? I see your test results are normal.

[rh101]

Yes, I tested both cocos2dx 3.17 and cocos2dx 4.0, and they have the same issue. May I ask what is your Windows version and screen resolution? I see your test results are normal.

I'm assuming you meant that question for @halx99

[halx99]

Yes, I tested both cocos2dx 3.17 and cocos2dx 4.0, and they have the same issue. May I ask what is your Windows version and screen resolution? I see your test results are normal.

I'm assuming you meant that question for @halx99

yes

[zhengy]

@halx99 @rh101 I'm very sorry I confused you .
Is the issue related to the underlying rendering? In UWP, the underlying rendering uses DirectX, while in Win32, OpenGL is used. However, the antialiasing effect of FreeType on DirectX may be suboptimal.

[halx99]

@halx99 @rh101 I'm very sorry I confused you . Is the issue related to the underlying rendering? In UWP, the underlying rendering uses DirectX, while in Win32, OpenGL is used. However, the antialiasing effect of FreeType on DirectX may be suboptimal.

Latest axmol both win32 & UWP use directx via google ANGLE render backend

[zhengy]

@halx99 @rh101 I'm very sorry I confused you . Is the issue related to the underlying rendering? In UWP, the underlying rendering uses DirectX, while in Win32, OpenGL is used. However, the antialiasing effect of FreeType on DirectX may be suboptimal.

Latest axmol both win32 & UWP use directx via google ANGLE render backend

Thank you for informing me of this news. So, this issue seems unrelated to whether DirectX or OpenGL is used.

@halx99 Why are your test results normal? Is it due to the system and resolution? Can you tell me your system version and screen resolution? I'd like to reproduce it.

I have added these two lines of code to set the resolution at startup, but the issue still persists. ApplicationView::PreferredLaunchViewSize(winrt::Windows::Foundation::Size{1280, 720}); ApplicationView::PreferredLaunchWindowingMode(ApplicationViewWindowingMode::PreferredLaunchViewSize);

[halx99]

@halx99 @rh101 I'm very sorry I confused you . Is the issue related to the underlying rendering? In UWP, the underlying rendering uses DirectX, while in Win32, OpenGL is used. However, the antialiasing effect of FreeType on DirectX may be suboptimal.

Latest axmol both win32 & UWP use directx via google ANGLE render backend

Thank you for informing me of this news. So, this issue seems unrelated to whether DirectX or OpenGL is used.

@halx99 Why are your test results normal? Is it due to the system and resolution? Can you tell me your system version and screen resolution? I'd like to reproduce it.

I have added these two lines of code to set the resolution at startup, but the issue still persists. ApplicationView::PreferredLaunchViewSize(winrt::Windows::Foundation::Size{1280, 720}); ApplicationView::PreferredLaunchWindowingMode(ApplicationViewWindowingMode::PreferredLaunchViewSize);

win1022h2 4k(3840x2560)

[zhengy]

@halx99 I am using another computer with the same system version and screen resolution as yours, but the issue still persists.

[halx99]

Try enable ttf SDF rendering: https://axmolengine.github.io/manual/latest/d3/d0e/classax_1_1_font_free_type.html#a5d00aecd9e3d6d3e1ed6408eb840648a

[zhengy]

Yes, I have tried it. When the ttf font is larger, enable sdf font will become more clearer, but when the font is smaller, the jagged feeling will still be obvious. enable sdf has an effect, but the effect of ttf rendering is still different from that of the win32 platform (the font is thicker and has a sense of outline)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[zhengy]

@halx99 @rh101 I'm very sorry I confused you . Is the issue related to the underlying rendering? In UWP, the underlying rendering uses DirectX, while in Win32, OpenGL is used. However, the antialiasing effect of FreeType on DirectX may be suboptimal.

Latest axmol both win32 & UWP use directx via google ANGLE render backend

@halx99 Hello, I created a new HelloWorld project and noticed that the Win32 project doesn't use Google ANGLE. Does the Win32 project actually use DirectX?

[halx99]

The latest axmol change default gl bakcend to ANGLE(GLES), please update and recreate new helloworld to check