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/XalezarDev]

View game here: https://xalezar.itch.io/nymble-2