Sprite font plugin - change "space" width?

Discussion and feedback on Construct 2

Post » Thu Jul 04, 2013 9:30 am

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!
ImageImageImage
B
38
S
5
G
4
Posts: 79
Reputation: 5,355

Post » Thu Jul 04, 2013 10:20 am

Use the 'set character width' action with a space.
Scirra Founder
B
402
S
238
G
89
Posts: 24,628
Reputation: 196,023

Post » Thu Jul 04, 2013 5:48 pm

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 :)
ImageImageImage
B
38
S
5
G
4
Posts: 79
Reputation: 5,355

Post » Thu Jul 04, 2013 6:04 pm

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.
Scirra Founder
B
402
S
238
G
89
Posts: 24,628
Reputation: 196,023

Post » Thu Jul 04, 2013 6:09 pm

Thanks for the replies!
ImageImageImage
B
38
S
5
G
4
Posts: 79
Reputation: 5,355

Post » Fri Jul 05, 2013 11:47 pm

@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?)


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

Character map in Windows shows characters centered on the containing squares
CheersCipriux2013-07-06 10:18:09
B
84
S
21
G
23
Posts: 521
Reputation: 18,789

Post » Sat Jul 06, 2013 2:17 pm

@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.
Scirra Founder
B
402
S
238
G
89
Posts: 24,628
Reputation: 196,023

Post » Sat Jul 06, 2013 4:19 pm

@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.
B
84
S
21
G
23
Posts: 521
Reputation: 18,789

Post » Mon Jul 08, 2013 6:19 pm

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?
B
9
S
3
Posts: 58
Reputation: 1,566

Post » Tue Jul 09, 2013 2:38 pm

@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
B
84
S
21
G
23
Posts: 521
Reputation: 18,789

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 2 guests