SpriteFont scale affecting character widths

0 favourites
  • 3 posts
From the Asset Store
Forget about default textbox restrictions, you can create sprites atop of the textbox
  • Problem Description

    When a Spritefont is scaled down (to 0.5 for example), character spacing changes slightly as the text changes. On the same line you often get the same letter spaced differently. I made a line of text with the word "this" repeated several times. Sometimes the i was closer to the h and sometimes it was closer to the s.

    At full scale it works fine. Adjusting character widths only made things worse because there was no way to predict how letters were going to get spaced. Using a smaller spritefont at a scale of 1.0 spaced properly, but was too blurry. The larger spritefont scaled down was much sharper, but inconsistently spaced.

    It looked like a rounding issue to me, so I went digging in the Spritefont plugin and commented out two lines where the x value was being rounded. That seems to have fixed the problem, and now looks just how I was hoping. I know it is a really bad idea to change official plugins, and I don't want to make my own spritefont plugin (and I am not sure this was the best solution).

    The lines I changed are:

    if (angle === 0)
    {
    // roundX = Math.round(roundX);
       roundY = Math.round(roundY);
    }
    [/code:12m67hdp]
    
    in the instanceProto.draw and instanceProto.drawGL functions.
        
    [b]Attach a Capx[/b]
    [url]http://www.rieperts.com/games/forum/spritefont_bug.capx[/url]
        
    [b]Description of Capx[/b]
    the capx has two lines of text - with the same spritefont. One line is at a scale of 1.0, the second at a scale of 0.5
    Then ever 2 seconds a period is inserted at the beginning of each line, to show how the spacing changes for various letters in the scaled line of text. Letters that were closer to one side seem to jump to being closer to the letter on the other side.
    
    [b]Steps to Reproduce Bug[/b]
    [ul]
        [li] set the spritefont scale to less than 1.0[/li][/ul]
        
    [b]Observed Result[/b]
    notice how letters shift as the line changed, and the periods are not evenly spaced either.
        
    [b]Expected Result[/b]
    expect character spacing to be consistent regardless of the scale.
        
    [b]Affected Browsers[/b]
    [ul]
        [li] Chrome: (YES)
        [/li][li] FireFox: (YES)
        [/li][li] Internet Explorer: (not tested)
        [/li][li] Edge: (YES)[/li][/ul]
        
    [b]Operating System and Service Pack[/b]
    Windows 10
        
    [b]Construct 2 Version ID[/b]
    r242
  • SpriteFont rounds characters to integer positions for pixel-perfect rendering, but you're right that it looks bad at small scales. I've fixed it in the next build by disabling the rounding if the scale is not 100%.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Awesome! Thanks Ashley!

    A higher-res sprite font scaled down to half size looks much better (sharper) than a smaller sprite font at 100% - at least with small point sizes.

    And then one font can easily do multiple sizes - 50% for small, regular text, 100% for headings, and 150% for titles.

    Although I am eager to try the new web fonts in C3...

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)