Sprite font plugin - change "space" width?

I've been meticulously working on getting Arial Rounded MT Bold into the new Sprite font object, and I'm 95% there. I know it can't be perfect because this font has different character widths depending on the characters that FOLLOWS it, but I can still get it close enough to be acceptable with one exception... How can I define the width of the "space" character? I left room in the Sprite font image at the end, and I added a space to the end of the Character Set. I then adjusted the width of "space" in the same loop where I adjust all of my other characters, but space is ignored (i.e. it just uses the default Character width of the Sprite font object).

I know this is a brand new feature and will be documented after the next stable release, but does anyone know right now if this can be done?

Thanks!

Use the 'set character width' action with a space.

Well, that was embarrassing. Definitely should have tested outright before posting here. Setting it explicitly worked.

What is interesting is that the method for setting it in a loop didn't work.

What I've done is created a delimited global string in the following format:

"a^39|b^39|c^39|d^41" etc. that includes all characters in my character set. The end of the above list is "Z^44| ^14" indicating that a "space" is 14 pixels wide.

I loop through this string using tokenat on start of layout to set all character widths, but it doesn't seem to register the "space". If I use a manual line after the loop is over to explicitly set the width of space, things work fine.

Anyway, thank you very much, Ashley, for adding this plugin officially. If you're still taking feature requests for it, could you add a property that allows for adjusting the pixel width of each character based on the character that follows it? I understand if this is a little too convoluted to be worth the time, but it really would allow for non-mono width fonts to be perfectly reproduced with Sprite font.

To give an example of what I mean, take two strings, each two characters wide:

aa

ab

In 48 point, Arial Rounded MT Bold font, the width of the first 'a' in "aa" is 38 pixels. The width of the 'a' in "ab" is 40 pixels. It turns out that regardless of what the first letter is, if the letter 'b' comes second, it ALWAYS results in the preceding character being 2 pixels wider than if an 'a' were to come second. So, what would be perfect is if I could set a baseline width per character and ALSO set a modifier for each character that says "add this amount to the width of the preceding character". The value could be negative, of course.

For now, I've just averaged the width of each character and I'm hoping it will continue to test to make sure it looks ok. We're only talking about a few pixels. For what it's worth, the letter 'j' is kind of the outlier in how much it affects the width of whatever character precedes it. 'f' is the other culprit.

Anyway, thanks again for the plugin. I can now determine the exact width of strings and I'm not dealing with blank text boxes as I tried to trim the whitespace from dynamically created and resized text boxes between Chrome and iPad... talk about maddening :)

Yeah, that's called kerning. I don't think we're going to support it for the time being, but I'll add it to the todo list.

Thanks for the replies!

Ashley I like the new official SpriteFont but I think "set character width" should be symmetrical . For the moment it cuts only from the right side of the character, forcing me to modify the PNG itself and offset narrow fonts to the left. (Or is there a better way to do it?)

<img src="https://dl.dropboxusercontent.com/u/139926126/Forums/scirra/spritefont_34543.PNG" border="0" />

I made each char 64x64 px and have "Character spacing" set to -20

For the second text I also set the width of "I" char to 52 at the start of layout

<img src="https://dl.dropboxusercontent.com/u/139926126/Forums/scirra/spritefont_678.PNG" border="0" />

Character map in Windows shows characters centered on the containing squares

Cheers

Cipriux - you should draw characters left-aligned in their cells. This was a deliberate choice because if you draw them centered then reduce the character width by an odd number of pixels, it's not clear which way it should round, so left-aligning avoids the problem.

Ashley Thanks for explain it.Is good to know the reason behind this decision. I hope this choice stays the same for future upgrades so I can make my Sprite-sheet modifications.

Hmmm left aligning makes it so we can't use a lot of the cool/easy font tools I've found (e.g., BMFont) and seems non-standard. Has anyone found a quick workaround rather than adjusting/counting pixels for every character in Photoshop/Gimp?

Agni If your font sheet has enough space around the fonts, you can use Photoshop to make multiple selection and then use move tool. I am not expert in PS but this will do the trick.

You can see an example of what I mean.

Example

P.S. I am pressing arrow keys to move the selection pixel by pixel

and sorry for my lame selection technique :P

Cipriux

Thanks Cipriux! This just feels rather time-consuming if there are multiple fonts and font-styles that I'm working with (and upper/lowercase characters). I haven't seen any other spritefont/bitmap font tools that do the left-aligning to solve pixel perfect rounding issues.

Isn't it much easier to be able to take the png output from a program like BMFont or FontFactory and plug it in directly? The programs calculate your pixel widths as well so you can import it directly into an array and set character widths that way instead of manually measuring the width of each character.

Agni It is time consuming, but you do it one time only for every font that you want to use. I had made a template in CorelDraw and make my life easier when I want to change the font type. I just select the individual characters and change font type.

[EDIT]

Example 2