1. Hey! Guest! The 35th GMC Jam will take place between November 28th, 12:00 UTC - December 2nd, 12:00 UTC. Why not join in! Click here to find out more!
    Dismiss Notice

GMS 2 Fonts in GUI layer are fuzzy

Discussion in 'Programming' started by Erayd, Dec 7, 2018.

Tags:
  1. Erayd

    Erayd Member

    Joined:
    Jun 23, 2016
    Posts:
    135
    I feel like I must be missing something. I'm drawing on the GUI layer using draw_text(). It's a low res 16bit game so I figured the only way to draw text that isn't fuzzy for lack of a better word would be on the GUI layer. But if you click on the screenshot below, that's not the case. This is a font with anti-alias on and at size 25, though the fuzzy shows on every size I've tried. I can't get it to draw clear. Any thoughts?

    https://www.screencast.com/t/cPymZDyE
     
  2. marasovec

    marasovec Member

    Joined:
    Sep 15, 2016
    Posts:
    333
    Try another font
     
  3. icuurd12b42

    icuurd12b42 TMC Founder GMC Elder

    Joined:
    Apr 22, 2016
    Posts:
    1,839
    turn interpolation off... ?
    do the edges have the same exact pixelation if you draw the exact same text at 0,0?
     
  4. TheouAegis

    TheouAegis Member

    Joined:
    Jul 3, 2016
    Posts:
    7,007
    Do you need to resize the GUI first? To what, I don't know. lol
     
  5. Erayd

    Erayd Member

    Joined:
    Jun 23, 2016
    Posts:
    135
    I do already adjust the gui size. I set it to view_wport and view_hport which in this case is 1024 x 768. Pixel interpolation is off, and yes I've tried at least 20 different fonts by now, but it's the same result. If I draw the text at 0, 0 I also get the same weird fuzziness.

    Screenshot of the text in the corner: https://www.screencast.com/t/1tHDOwEct

    Anyone else notice the weird things GMS is doing to the font? In the white background you can see an example of the ttf file being loaded. In the preview for GMS the font is all kinds of messed up. The S has a huge thick part, the T is uneven from one side to the other. All these letters are written in the same width all around, they dont change, so what is GMS doing to it?
    https://www.screencast.com/t/HnhjjcRc
     
    Last edited: Dec 8, 2018
  6. icuurd12b42

    icuurd12b42 TMC Founder GMC Elder

    Joined:
    Apr 22, 2016
    Posts:
    1,839
    >Screenshot of the text in the corner: https://www.screencast.com/t/1tHDOwEct
    Ya should have drawn the exact same text as I asked

    Can't compare the artefacts of 2 different pieces of text. Obviously I wanted to compare every letter of the first image to the exact same characters when drawn at 0,0... urgh.

    Well I can't see "uneven" artefacts in the "Test String" like in the H of "Hey, how's it going!". anyway, look at same characters that appear in both text and notice how they are all full and even in the 0,0 position, while more fussy in the first image.

    This basically tells me you are not drawing the text on an exact (display) pixel coordinate, like drawing at 100.3,100.5 instead of 100,100 forcing the system to blur the text so it appears to be at the place you specified. like hey, code says to draw at 100.3... lets see what I would draw at 100.3 AND 101.3... blend those 2 colors (and alpha) draw that at 100... fuzzing the edges

    same problem happens scaling images (the font is an image in gml). if there is an uneven scaling that would require to add or remove an uneven number of pixels to the images. if the image is 16x16 and you scale it up to 17x17, there would be one extra line that would need to be added in both direction... causing one line to be thicker...

    as for varying size of the lines artefacts in the preview, possibly 40 pt for that font is not ideal try 41 or 42 or 39, 38 and see if one of these gives an even line thickness throughout.


    >I set it to view_wport and view_hport which in this case is 1024 x 768
    that is not really a resolution that is easy to manage when scaling with your monitor (in full screen) especially if no one runs at that resolution, most people run at 1920x1080 in full screen. You should try to use sizes that evenly scale to 1080p... even scaling options are
    3840x2160 (twice the scale, 4k)
    1920x1080 (no scaling, common setup)
    960x540 (half scaling)
    480x270 (1/4 scaling)

    >I do already adjust the gui size
    To what? Typically you want to call _set_gui to a known popular resolution eg, 1920x1080 so that scaling of the GUI matches evenly most displays and evey render instructions falls on a real pixel... Typically most people run at that resolution so there would be no half pixels in the coordinates...

    And finally there is little to fix distortion issues in windowed mode or for people running full screen on a monitor not of the popular 1080p size.

    You can tile this image

    upload_2018-12-8_15-23-20.png

    as background and see if the view scaling is adequate. you can also draw it in the gui draw, tiling it manually, to verify that you GUI is scaling evenly. scaling up (*2 for 4 k for example), all the lines should be double in width. scaling down by half some lines will be removed evenly, scaling down by half for example all the red lines could disappear... or all the white cell should shrink, depending on what lines the algorithm decides to remove.
     
    Last edited: Dec 8, 2018
  7. Erayd

    Erayd Member

    Joined:
    Jun 23, 2016
    Posts:
    135
    My bad, I didn't read your post well enough. Heres the text your looking for, displayed in the top left corner. https://www.screencast.com/t/st5Zzzg7b

    As you can see, the text is still rendering fuzzy even at 0,0. I started a blank project and changed no settings. I made a new font with anti aliasing, same one I'm using here and it renders beautifully in the top left corner. At the same gui width and height of 1024x768, just like I said before. I understand this isn't a conventional ratio and it'll change but that isn't affecting what's happening here. All of the text in my game, in menus, messages, whatever, they all have this fuzz issue. Seeing as how it isn't happening in a blank project, it must be something I'm doing, I'm just having a hard time figuring out what it is that I'm doing to make it fuzzy.

    The visual above was made with a very simple, draw_text(0,0, "whatever")
     
  8. icuurd12b42

    icuurd12b42 TMC Founder GMC Elder

    Joined:
    Apr 22, 2016
    Posts:
    1,839
    If you look at the vertical lines on the H, you will see the new one is fully drawn, where as the original image there are dimmer vertical lines. that is artefact due to drawing at a position in between pixels.


    as for the fuzz that is either interpolation due to scaling ot the antialiasing, which is just edge smoothing when the font was converted to a sprite... creating this blurry and abrupting alpha fading edge...

    turn off the antialias in the font properties...
     
  9. ph101

    ph101 Member

    Joined:
    Jun 20, 2016
    Posts:
    415
    also be aware that if you are centre justifying but then rounding the x,y pos of text it still wont always be on rounded pixels as the centre justify calculation is not affected by the rounding, and creates artifacts like you see. Check in both cases you have
    Code:
    draw_set_halign(fa_left);
    
    before hand, probably if you have draw_set_valign(fa_middle) you will have same issue.
     
    Last edited: Dec 9, 2018
  10. Erayd

    Erayd Member

    Joined:
    Jun 23, 2016
    Posts:
    135
    So my first issue was that I wasn't using whole numbers to render the text in the box. With that fixed, both texts look the same amount and type of fuzzy.

    However now I understand why, due to scaling of the font sprite upon rendering with anti aliasing on.

    With anti aliasing off and after having switched to a new font since the other one was trash without anti aliasing, my issue comes down to line thickness. Take a look at the screenshots below.

    Size 28, notice all the line thicknesses here are very wonky in the preview: https://www.screencast.com/t/bLcZul0I4L
    Size 30, better, but notice the J in jumps has two different line lengths, as well as the center line in an E https://www.screencast.com/t/eTSpasGKk
    Size 36, even better, after initial observation it looks great https://www.screencast.com/t/LBxkaEwpdN however in the game I can see that the i is a different thickness than the H as is an edge of the g is inconsistent with the rest of the g https://www.screencast.com/t/e7HH6xOaYy The w is probably the most obvious, since it's got a heavy base.
    Size 48, everything looks great https://www.screencast.com/t/Wdgz0yUgee

    Why are fonts this difficult the work with and why are the first 47 size choices crap? This means I can't have smaller font and I now need to accommodate my gui as well as message boxes to this font size which is quite limiting. I figure, given that this font has a specific line width, it would simply scale with a certain multiple but that's not the case, unless the multiple is 48 in which case that really sucks. And past all that, what's the point of giving the anti aliasing option if every font comes out fuzzy in the first place?

    Something must still be affecting the system in some way because in a new project, with anti-aliasing on, same gui size, with a regular old font drawn at 0, 0 and with interpolation off (all defaults), the text renders perfectly https://www.screencast.com/t/gtdFV7yufgZd Fonts can't be as hard as they seem to work with, my gut is telling me something is still not right in that project. With the exact same settings in my current project the text is all kinds of weird.

    So I've figured out the problem. It wasn't the sizing or the gui ratio or anti aliasing or even the positioning of which pixel it starts rendering at. It was the weird window size I was setting. It was slightly skewed I guess and that was the source of the fuzziness. I'm sure all of those things didn't help the situation and I'm glad I know it all now anyway. https://www.screencast.com/t/IJ7e9O1lR
     
    Last edited: Dec 9, 2018
  11. Binary Orange Studios

    Binary Orange Studios Member

    Joined:
    Mar 26, 2018
    Posts:
    21
    Very interesting stuff in here. It does seem GMS 2 has some wonky stuff with fonts.

    Because of this thread, I started to mess around with fonts in my project (which I started about a week ago and hadn't changed from the fuzzy default font), and noticed some things that definitely seem peculiar, but maybe make sense as well.

    My resolution for my game is 640x360, which is basically 1080/3 (an odd resolution for sure, but it looked the best on my monitor when running fullsceeen, my monitor is 1440p).

    I went online and downloaded the FFForward font.

    If I leave the font at a minimum size of 6 with anti-aliasing, it's nice and crisp and appears to be even.

    Same if I bring it to 12, 15, 18, and 21.

    As soon as I set it to something that is a multiple of 2 (4, 8, 16, 24, etc.,.), it appears to become slightly distorted. My aspect ratios match what my monitor displays, so I know it's not because of that.

    I think, just from my quick experiments, what you need to do is make sure your fonts are set to a multiple of what your base resolution is (in my case, my resolution is 640x360, essentially 1920x1080/3, and my font size is a multiple of 3).

    Anyone care to test this theory out more in-depth? This was also on a Draw GUI event for my player object.

    Here's a screenshot showing the font at size 6 in my game. Looks exactly how it should, according to FFForward's preview.
    [​IMG]

    This font doesn't seem to be affected by anti-aliasing, I'll check more fonts out. Just thought I would share what I had experienced.

    EDIT: This FFForward font appears to scale very nicely. I do not get the above results with other fonts, even old-school arcade fonts that are basically pixel-perfect.

    This is quite the curious case indeed.
     
    Last edited: Dec 9, 2018
  12. icuurd12b42

    icuurd12b42 TMC Founder GMC Elder

    Joined:
    Apr 22, 2016
    Posts:
    1,839
    >Fonts can't be as hard as they seem to work with

    Yeah, they are, specifically because they are made of lines.... converting vector lines to a pixel image has always been a huge hurdle to not have it jagged. There is a reason you have to go through the font setup and read all them versions of the same text drawn in various readability...

    If I remember right, font have a lookup table to convert pt to actual pixel dimensions to ensure the best render at the desired point size, for your monitor... for example, arial may have point 30 and 31 set to a pixel size of 52 pixels, 2 point sizes, one actual size.

    some fonts are poorly designed. some font don't scale well through all point sizes, some fonts may have vertices that fall between pixels often at particular pt sizes....

    on a windows app the vector font of the right pixel density for the font size selected, using the selected smoothing for that monitor. the font line vectors are turned to pixels live on your display...

    in gm, the font is turned to an image when you compile, though without the windows smoothing (I would hope) but with anti alias method (if chosen) to essentially do the same thing windows font smoothing does, but of less perfect result. I concluding from my own experience...


    proper font and proper scaling is what matters.
     
  13. Binary Orange Studios

    Binary Orange Studios Member

    Joined:
    Mar 26, 2018
    Posts:
    21
    Indeed, it seems that most fonts do not scale very nicely in GMS. Probably any engine, really, as I seem to recall having some issues with fonts in the older version of Godot as well.

    But, I found a video on using spirte fonts, which looks extremely promising, and allows for much fancier custom text. It's a bit long, but does show how to use sprite fonts fairly well (it's surprisingly the only video I could find on the subject), and shows you how you can resize them in code.



    I'll likely be using this technique for my game, once I get to a more-than-just-testing phase of development!
     
  14. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,867
    I'm not particularly surprised, because it's a mess to set up compared to using off-the-shelf fonts x3 Working with kerning yourself, and so on... and having to redo the entire font if you realize you need a different size... it works if you know what you're doing, but be prepared it's easy to mess up. I dabbled with it in the past, and I just figured it was more trouble than it was worth. But that's just me.
     
  15. icuurd12b42

    icuurd12b42 TMC Founder GMC Elder

    Joined:
    Apr 22, 2016
    Posts:
    1,839
    GM does not do kerning... in 1.4 there is no kerning data for the font, there is a kerning section in the font resource .xml file but it's empty... and in gms 20, Their are kerning pairs in the json file but they are all set to the same value. not that it matters. if you change the kerning info yourself in the file, it will have no effect...


    https://icuurd12b42.itch.io/tmc-kerning-for-game-maker
     
  16. Erayd

    Erayd Member

    Joined:
    Jun 23, 2016
    Posts:
    135
    I did stuff like the video shows back when I was making an engine in java, not sure it's worth it really. Once I knew the specifics of working with fonts in the ways discussed above, everything fell in to place. There are certain rules to follow when it comes to scaling/resolution/font rendering and in regards to anti-aliasing or font design. Once those guidelines are followed, working with fonts isn't so bad. I'm testing the game at 3/4 full hd resolution and everything renders perfectly. I cleaned up my gui/application surface/window resizing code and in the future I'll have different resolution choices the player can try out to best suit their screen with the default being 1920x1080.

    Basically my issue was I was using a strange resolution originally, thats now fixed. And the text was rendering at a pixel fraction sometimes due to my positioning the text using a script that gets the position on the gui relative to an NPC in the game room. Flooring that number fixed the artifacting. Thanks for the help @icuurd12b42 your expert knowledge on this subject helped me understand the finer points of fonts and scaling. It can be hard to come across one single resource that covers it as thoroughly as you helped explain it here.
     
    icuurd12b42 likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice