SpriteFont scale affecting character widths

Bugs will be moved here once resolved.

Post » Thu Feb 16, 2017 5:25 pm

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:
Code: Select all
if (angle === 0)
// roundX = Math.round(roundX);
   roundY = Math.round(roundY);

in the instanceProto.draw and instanceProto.drawGL functions.

Attach a Capx

Description of Capx
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.

Steps to Reproduce Bug
  • set the spritefont scale to less than 1.0

Observed Result
notice how letters shift as the line changed, and the periods are not evenly spaced either.

Expected Result
expect character spacing to be consistent regardless of the scale.

Affected Browsers
  • Chrome: (YES)
  • FireFox: (YES)
  • Internet Explorer: (not tested)
  • Edge: (YES)

Operating System and Service Pack
Windows 10

Construct 2 Version ID
Posts: 438
Reputation: 17,930

Post » Mon Feb 20, 2017 3:47 pm

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%.
Scirra Founder
Posts: 24,765
Reputation: 197,354

Post » Mon Feb 20, 2017 11:42 pm

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...
Posts: 438
Reputation: 17,930

Return to Closed bugs

Who is online

Users browsing this forum: maddy467 and 3 guests