Sprite Font Generator - v3

The spritefont page states that it's preferred that the image be a power of two, but doesn't specify 'square', and the built-in spirtefont also isn't square. Ashley also made a comment a while back that the power of two issue is going away: ref

I'd rather not mess with the calculations if I can avoid it. It took a while to get it right.

Wow, I didn't know about this.

But of course! It's your tool, you do what you want with it. I can imagine the amount of effort it took to build it, and I'm super happy with the results already! Thanks a lot man! <img src="smileys/smiley4.gif" border="0" align="middle" />

Actually a better argument would be that fonts aren't square anyway, so the chance that it will fit into a square optimally, are actually low. As I said, the algorithm does try to use a square at first, then looks for the dimensions that reduce the overall file size, while still maintaining the power-of-2 rule.

I would like to make an request: outline colors.

Sometimes I use photoshop, but it needs to be manually aligned. I spossible?

+1 strokezz!

blackhornet

2 comments:

1- is there a way to have crisper/sharper fonts? Right now they look fuzzy:

<img src="https://www.dropbox.com/s/qxfo0kfw6fzli8d/Screenshot%202013-10-14%2007.37.31.png" border="0" />

dropbox.com/s/qxfo0kfw6fzli8d/Screenshot%202013-10-14%2007.37.31.png

2- The generator needs some fixing in the calculated spacings:

notice the gap after the T in the screenshot

PS: The font is Helvetica.

thx

ghost

1) If you have anti-aliasing at High, theres nothing more I can do.

2) I don't see a gap. The space between the tip of the 'T' and the 'e' is the same as the other letters.

1) I really wished it had something more aggressive in that area... well... thx anyway..

2) In the screenshot there's a big gap, it should be tighter

(in this case the app recommended to use 19 for T -- that's the one in the screenshot--, but to make it look better I had to change it to 15).

check this two examples, the spacing is tighter:

<img src="http://3.bp.blogspot.com/-4UwTxzsyI7Y/Tq3mQYRikfI/AAAAAAAAAGs/C8NJovWE5zI/s1600/kerning.jpg" border="0" />

3.bp.blogspot.com/-4UwTxzsyI7Y/Tq3mQYRikfI/AAAAAAAAAGs/C8NJovWE5zI/s1600/kerning.jpg

<img src="http://papress.com/thinkingwithtype/text/text_images/text_images/kerning.gif" border="0" />

papress.com/thinkingwithtype/text/text_images/text_images/kerning.gif

Kerning support would have to come from the plugin, not the generator. You'll have to request this from Scirra.

blackhornet

FYI man, after comparing it to Photoshop, check that the fonts generated using the app come out looking thinner, check this screenshot:

<img src="https://www.dropbox.com/s/fo19mbm7v4x8t6h/fuzzy.png" border="0" />

dropbox.com/s/fo19mbm7v4x8t6h/fuzzy.png

The first one is the one exported from the app using AA high, the other 4 are from Photoshop.

Notice the thing in the middle of the A (let's call it the bridge), it is thinner compared to all the others (except in crisp).

also, notice that the bridge occupies 2 pixels in the ones using Photoshop,

but, more importantly, the slants of the A are much thinner in the one from the exported PNG, compared to the ones from Photshop.

Granted, but there's nothing I can do about this. I call the Windows function to draw the the font, and that's what you get. I have no idea how Photoshop is drawing text, or if they have their own drawing engine.

blackhornet

Thanks for the plugin. it has been fantastic. I've made great use of it. I will continue to use your plugin for some time to come :)

Joannesalfa

This will be a bit of work, but I will look into it. I'm in the middle of something else at the moment, so it will be a while.

blackhornet good! invisible outlines would help to modify in photoshop to add shadows.

A superb tool ever. Thanks!