search

OneLoneCoder / olcPixelGameEngine

The official distribution of olcPixelGameEngine, a tool used in javidx9's YouTube videos and projects
Other
3.86k stars 915 forks source link

WASM (Emscripten): font looks ugly (strange underscores) #356

Closed TuxxuT closed 12 months ago

TuxxuT commented 1 year ago

Good evening,

I wrote a small test app (a kind of snake) and of course implemented the score display using strings. If I run the application directly under VS2022, everything looks great.

Since I would like to make the game available to friends, I compiled the app with Emscripten and opened it in the browser. The drawings look identical except for the texts (fonts/strings).

I translated my application with em++ -std=c++17 -O2 -s ASSERTIONS -s ALLOW_MEMORY_GROWTH=1 -s MAX_WEBGL_VERSION=2 -s MIN_WEBGL_VERSION=2 -s USE_LIBPNG=1 main.cpp -o Game.html

In the code I have the text drawn using the following lines of code: DrawStringPropDecal(olc::vi2d(5, WINDOW_HEIGHT - 20 + 5), "Score: " + ss.str(), olc::YELLOW, olc::vf2d(0.5, 0.5));

I also tried the DrawStringDecal() method, which gives the same result --> text gets strange underlines in the WASM compilation, see the screenshots...

App under VS2022: app_vs

Text drawing in web via WASM (emscripten) app_wasm

Why is that? It would be great if I could get this solved. :-)

Thank you!

sigonasr2 commented 1 year ago

DrawStringDecal uses DrawPartialDecal to render each character and this seems to happen with other things that use it too (try drawing a bunch of tiles next to each other and playing with it in emscripten with a dynamic scrolling view while running around)

My hack I've used for my games is by changing the following lines in olcPixelGameEngine.h (Line 2849-2850) to the following:

        olc::vf2d uvtl = (source_pos + olc::vf2d(0.01f, 0.01f)) * decal->vUVScale;
        olc::vf2d uvbr = uvtl + ((source_size - olc::vf2d(0.02f, 0.02f)) * decal->vUVScale);

(Including the link to the original lines of the PGE just to be safe https://github.com/OneLoneCoder/olcPixelGameEngine/blob/master/olcPixelGameEngine.h#L2849C1-L2850C95)

These numbers gave me the best results without sacrificing too much. The only reason this would be an issue is if you have a really tiny screen resolution, then it cuts off too much of the visible texture.

This should be considered a hack and not necessarily the acceptable solution to this problem however.

TuxxuT commented 12 months ago

@sigonasr2 Thank you so much! That solved my problem with the display. I'll take a closer look at it again, but the letters are clearer now...