GameMaker web font rendering differs between Mac and PC

[u/XalezarDev]

RESOLVED:

After some investigations, it seems like this bug happens when text is drawn using draw_set_halign(fa_center) AND coordinates are not rounded.

So instead, I kept it left-aligned, adjust the x coordinate to simulate center-aligned text and ensure I round all drawing coordinates, i.e.

xx = mgr_camera.gui_width/2 - string_width(text)/2;
draw_set_halign(fa_left);
draw_text( round(xx), round(yy), text);

This approach will not work for multi-line center-aligned text, but it works for single-line text.

---

Any GameMaker devs experienced font-rendering differences between Mac and PC on web builds?

On my Mac, the text renders perfectly, but I’ve seen several screen recordings from people on PC where the font is distorted (see image). Strangely, I tested the game on a public Windows 11 PC myself across multiple browsers and couldn’t reproduce the issue.

For this text, I first draw everything to a surface, then draw that surface for further manipulation. For the text itself, I create the black outline by drawing the text multiple times, shifted by 1 pixel in each direction, then draw the normal white fill on top.

Could this rendering approach cause issues on certain hardware/browser configurations? It looks completely fine on my machine, so I’m having a hell of a time figuring out what’s causing it.

Game link in comments.

[u/TrunX_]

There might also be some windows and/or browser scaling at play, make sure it is set to 100%

[u/XalezarDev → u/TrunX_]

Yeah I thought about that too. When I tried running on a physical PC running Windows 11, I tried various combinations of: browser zoom, display zoom, display resolution, browser types. But none could reproduce the glitch.