I got it. I experimented with the same dimensions (7x9, b2) and this is how I got undistorted pixel perfect text, as well as having the same ppu as my game objects (16ppu): If you don't touch the output settings at all in your converter site, the default should be like this: em 1024, ascent 768, descent -256, and pixel size 128. Your target fontsize, that is the [Font Size] variable in your ttf inspector, should always be em / pixel size. In this case 1024 / 128 = 8. This is how you never get distortions in your pixel. By the way, the default output settings would be wrong in this case; the ascent should be 128 * 7, so 896 not 768. If you don't do this, you have to manually adjust the line spacing setting in Unity.. which is a pain you don't have to deal with if you set your ascent right. Actually the ascent should be "minimum" 7, which means that the ems would just touch each other. (The tail of g and head of T, for example.) You can give as many space as you want in between lines via ascent. I gave it one more pixel, so that's 128 * 8 = 1024 ascent. And your em should be 1024 ascent - (-256) descent = 1280. And your target Font Size will be 1280 / 128 = 10. You can decrese your descent rather than increasing your ascent size for line spacing, if you want. It really doesn't matter, I think. /// The following step is for those who want "exact perfect ppu" as your game objects, and with pixel snapping too. /// This means you can't use UI scaling or dynamic "media-queried" sizing... but you can make texts that match the style and grid of your game. /// It can also be kind of awkward if you have non-gameobject UI elements... so you'll probably have to make those just gameobjects too. Next, you don't use tmp font or even legacy font. Instead, you make your text a regular gameobject and make it textmesh. This is because the UI elements are impossible to get the right pixel size by manipulating the fontsize. Instead, go to your font inspector, and select the inner ellipsis menu (three dots). Press 'Editable Copy' and you'll get a texture, material, and a new font copy. You can edit the texture however you want, just as you'd with textmesh pro. Just make sure it's point filter. (I don't think ppu matters here.) Make a gameobject. Give it a TextMesh component and drag the new font copy into its font. I have no idea why, but the font will have a 10 ppu no matter which dimensions you've first drawn with. If your target ppu is x, make your fontsize 10 / x. For example, for 16 ppu, make your fontsize 0.625. Now you have a perfectly sized text. If your game world camera is pixel perfect, it will You can go a step further from here. Your text will have pixel perfection if your camera is pixel perfect. This is because your text is now a gameobject not a ui object. However, you'll find that it doesn't quite pixel snap to the same ppu as your game objects, but to a fraction of it. To create perfect pixel snapping, you have to make a script, attach it to the text gameobject, and place this: transform.position = new Vector3( Mathf.Round(transform.position.x * pixelsPerUnit) / pixelsPerUnit, Mathf.Round(transform.position.y * pixelsPerUnit) / pixelsPerUnit, transform.position.z ); where pixelsPerUnit is your target ppu. Depending on whether your text moves or not, you may have to call this at awake or update. Now if you move your text around, you'll find that it has the exact same ppu, non-distorted, and snapping at your pixel perfectly. It might be a bit harder to manage. You might have to make a separate UI camera for this (if you have that script, you don't need a pixel perfect camera). But you can honestly just make it work with one camera via sorting layers or z sorting, and making your ui follow the camera. It's easy to do that in a 2d game. /// That was long... but this took me more agonizing days than it ever should, and I wanted to make some more good out of it. Hopefully someone else can benefit from this.
I had a huge head ache even with this tutorial were the font would ALMOST be right but just a bit of and the thing that fixed it was just leaving the font size as 16 if anyone else has a similar issue
I tried again, with a standard pixel art font, like in 8 bit and arcade games (one color), but it comes out weird, I followed you step by step and didn't work out.
Why do the silhouettes of your letters change when you begin to start dragging the correctly coloured versions over? Im having issues with my font and im rewatching the video and im wondering if you missed a part which is why im having issues. Thanks.
thanks for the video! this really helped a lot. I ended up coloring my text red and outline green so I could easily make a shader to replace the colors with anything.
Great tutorial! To save time, I found that if I only use the letter outlines when making the font, I can overlay the atlas on a white background and just cut out the bits I want to keep transparent. Hopefully that helps!
Dude, thanks so much. I've spent almost my whole afternoon trying to figure this out. It's crazy since having this functionality seems pretty basic as far as having a readable font in a pixel game goes, I'm surprised there isn't an easy way to do it. As for the easier way to replace all the characters, after I extracted the atlas, I just used a global magic wand & fill tool to fill everything as white, then a contiguous magic wand to select and delete the background.
If you are zooming as far as you can and have grid enabled you may see some disalignemnt. I found that changing Shader type to TextMeshPro/Mobile?Distance Field SSD helps a lot and is perfect.
Also in the Online Tool that you are using there are options to change for Output, Pixel Size, Em size, Ascent, and Descent. Set Descent to Pixel size * by the Number of Pixels below the base line, in your case pixel size is set to 64 * 3 = -192 Ascent will be Pixel size * number Pixels above the base line 64 * 7 = 448, then Em Size would be 448 + 192 = 640. Or using 32 for the Pixel Size 224, -96, 320. Again I am not sure if this will help with Duel Color Fonts.
When using the FontAssetCreator and pressing the "Generate Font Atlas" button for my ttf (exported from the pixel font converter tool), I get an error saying it failed and possibly the font is invalid. I pasted the character set perfectly. If I don't use custom-set and just leave it set to Dynamic, I get no errors. What could I be doing wrong?
Hmm, I’ve never experienced those errors before. Does it do the same thing in a fresh unity project? That would narrow it down to something with your file
@@ZacMarvinGameDev Yeah have tried a new Unity prj. No luck. I'm not sure it matters actually though, as it seems to detect my characters perfectly fine when simply set to Dynamic. An additional setting found in the font asset before taking it into the FontAssetCreator is "Include Font Data" which I assume is doing what you'd normally use the custom input interface for, probably automatically includes the character set I'd otherwise be inputting/pasting manually? I'd love someone from Unity to chime in on this because it doesn't make a heck of a lot of sense. Their documentation doesn't seem to assume we have any use for custom fonts like this. An additional step I had to do with my fonts is, in the Output tab of the online converter tool, I had to set Pixel Size to 32 or my fonts would be all squished and overlapping. No idea what this setting does or why it has to be 32 (I just took its suggestion to try Power-of-2 values, my font tiles are actually 24px).
Each character in my font is 7 pixels wide and 8 pixels tall. Nothing works with Sampling Point Size in the Font Asset Creator, 7 is too little and 8 is too much. Does anyone know how to make it work? Thanks
To get a proper look without dragging all the characters by hand, increase the "sampling point size" and "Atlas Resolution". This will generate the font with all the forms preserved properly.
I had to use a sampling point size of 8 to get it to work, otherwise the letters in the atlas would be all distorted. Which is odd cause my font was the exact same size as yours (7x9).
After further research it seems point size isn’t exact. My exact pixel perfect point size is 8.6125 for some reason. Doing more research on this as we speak
Thanks for sharing! I was looking for a way to use an existing font from a classic game‘s spritesheet and this will be helpful. Regarding dual color, would the Outline effect in TMP not be an option?
No problem! From my experience the outline effect with text mesh pro works well with regular fonts but with pixel fonts the outline isn’t pixel perfect and can make the font look off
Thanks for the tutorial. Something so obvious yet so booooring and time consuming. Got a question: What happens or how can I add to the atlas a new letter? Say for example I have to translate something to another language and they add leters. Can I manually add them and reference it? Because I believe different file, different atlas...Thanks
Thank you for the awesome tutorial! I think it's time I bite the bullet and make several of my own fonts for my game. It took me a while to realize that since you can't really scale a pixel font and keep your target pixel resolution, it becomes a matter of finding several fonts that were created in the various sizes you need for titles, headers, and body. This is almost impossible to do sourcing fonts online. Question: Are you doing any math to land on a 36 pt font size in your TMP Text component, so it meets your target pixel resolution?
I think I may have made some sense of it! I was operating on the assumption that font size has a 1:1 relationship with pixels, but this is actually false. My font was 11 pixels tall, and is actually considered a 8 point font (you can look up a conversion chart, unfortunately I can't post it in comments) Once I adjusted my font asset + TMP font asset settings to all match 8 pt, as well as configured Canvas to my desired 640 x 360 scale, everything slid into place.
Did you try setting the Sampling point size to a larger size? you set it to 7 but that is smaller then the size of your font, You r Height was 9. I do not know if that makes a difference with the dull color font. You can get a better layout by better adjusting the Atlas Resolution, Change the Height to the smallest possible size as well. There is no way to make it pack the atlas by the same way that you drew them, It compresses the images together, in order to use the online tool you have to have it in a grid, Unity and TMP PRO pack them together, by the size of the image.
I’m not entirely sure why 7 seemed to work but it does. I’ll look into what you said a little more because I’m going to have to make another pass on the font to add localization characters
@@ZacMarvinGameDev p.s. thanks for the great tutorial. You gave me a new tool to play with, I had a project that I am working on converting from XNA studio that has several sprite fonts, the tools you pointed me to made it much easier to use. Before this I had to use the text atlas of Textmesh and convert all my strings to hex.her. These tools made it much easier
Late here, but I like the facecam! Perhaps during snippets where we need to see what's under it (on your screen), you could hide the facecam temporarily during that short section of the video? (If it's not too much work -- it wasn't a big deal for me!) Awesome tutorial video, thanks for the guidance with fonts/pixel art (which is oddly hard to find info on online!)
I got it. I experimented with the same dimensions (7x9, b2) and this is how I got undistorted pixel perfect text, as well as having the same ppu as my game objects (16ppu):
If you don't touch the output settings at all in your converter site, the default should be like this: em 1024, ascent 768, descent -256, and pixel size 128.
Your target fontsize, that is the [Font Size] variable in your ttf inspector, should always be em / pixel size. In this case 1024 / 128 = 8.
This is how you never get distortions in your pixel.
By the way, the default output settings would be wrong in this case; the ascent should be 128 * 7, so 896 not 768.
If you don't do this, you have to manually adjust the line spacing setting in Unity.. which is a pain you don't have to deal with if you set your ascent right.
Actually the ascent should be "minimum" 7, which means that the ems would just touch each other. (The tail of g and head of T, for example.)
You can give as many space as you want in between lines via ascent. I gave it one more pixel, so that's 128 * 8 = 1024 ascent.
And your em should be 1024 ascent - (-256) descent = 1280. And your target Font Size will be 1280 / 128 = 10.
You can decrese your descent rather than increasing your ascent size for line spacing, if you want. It really doesn't matter, I think.
/// The following step is for those who want "exact perfect ppu" as your game objects, and with pixel snapping too.
/// This means you can't use UI scaling or dynamic "media-queried" sizing... but you can make texts that match the style and grid of your game.
/// It can also be kind of awkward if you have non-gameobject UI elements... so you'll probably have to make those just gameobjects too.
Next, you don't use tmp font or even legacy font. Instead, you make your text a regular gameobject and make it textmesh.
This is because the UI elements are impossible to get the right pixel size by manipulating the fontsize.
Instead, go to your font inspector, and select the inner ellipsis menu (three dots). Press 'Editable Copy' and you'll get a texture, material, and a new font copy.
You can edit the texture however you want, just as you'd with textmesh pro. Just make sure it's point filter. (I don't think ppu matters here.)
Make a gameobject. Give it a TextMesh component and drag the new font copy into its font.
I have no idea why, but the font will have a 10 ppu no matter which dimensions you've first drawn with.
If your target ppu is x, make your fontsize 10 / x. For example, for 16 ppu, make your fontsize 0.625.
Now you have a perfectly sized text. If your game world camera is pixel perfect, it will
You can go a step further from here. Your text will have pixel perfection if your camera is pixel perfect. This is because your text is now a gameobject not a ui object.
However, you'll find that it doesn't quite pixel snap to the same ppu as your game objects, but to a fraction of it.
To create perfect pixel snapping, you have to make a script, attach it to the text gameobject, and place this:
transform.position = new Vector3(
Mathf.Round(transform.position.x * pixelsPerUnit) / pixelsPerUnit,
Mathf.Round(transform.position.y * pixelsPerUnit) / pixelsPerUnit,
transform.position.z
);
where pixelsPerUnit is your target ppu.
Depending on whether your text moves or not, you may have to call this at awake or update.
Now if you move your text around, you'll find that it has the exact same ppu, non-distorted, and snapping at your pixel perfectly.
It might be a bit harder to manage. You might have to make a separate UI camera for this (if you have that script, you don't need a pixel perfect camera).
But you can honestly just make it work with one camera via sorting layers or z sorting, and making your ui follow the camera. It's easy to do that in a 2d game.
/// That was long... but this took me more agonizing days than it ever should, and I wanted to make some more good out of it.
Hopefully someone else can benefit from this.
Wow really insightful! Thank you so much. Gonna pin this to help future viewers
This really helped, thank you so much!
why is it this hard to make a font pixel perfect lol
Thank you kindly!
I try change the texture but i can see anything change. :S What am i doing wrong? :(
Why is this the only good tutorial on fonts, like, does no one use text in their games? Thanks so much my guy!
I had a huge head ache even with this tutorial were the font would ALMOST be right but just a bit of and the thing that fixed it was just leaving the font size as 16 if anyone else has a similar issue
I’m so glad it helped you!
Glad you got it worked out!
Thanks so much, this has helped me immensely. Amazed how complex sorting out fonts is.
You're very welcome!
Keep coming back to this, thanks for the good method of tackling this
Really glad it’s helping you out!
You're an animal, bro. Thanks a lot for this. My font came out like garbage, but you give a full walkthrough, and I learned a lot.
I tried again, with a standard pixel art font, like in 8 bit and arcade games (one color), but it comes out weird, I followed you step by step and didn't work out.
Glad I could help!
Interesting. Did you play with the values at all?
Why do the silhouettes of your letters change when you begin to start dragging the correctly coloured versions over? Im having issues with my font and im rewatching the video and im wondering if you missed a part which is why im having issues. Thanks.
It can be a little quirky. I’ve noticed that too
thanks for the video! this really helped a lot. I ended up coloring my text red and outline green so I could easily make a shader to replace the colors with anything.
That’s awesome
Great tutorial! To save time, I found that if I only use the letter outlines when making the font, I can overlay the atlas on a white background and just cut out the bits I want to keep transparent. Hopefully that helps!
Great tip! That probably speeds things up quite a bit!
Dude, thanks so much. I've spent almost my whole afternoon trying to figure this out. It's crazy since having this functionality seems pretty basic as far as having a readable font in a pixel game goes, I'm surprised there isn't an easy way to do it. As for the easier way to replace all the characters, after I extracted the atlas, I just used a global magic wand & fill tool to fill everything as white, then a contiguous magic wand to select and delete the background.
So glad I could help! That’s a good idea to use the global magic wand!
Great video man, it really helped me. Keep up the good work
Glad to hear it! Thank you!
If you are zooming as far as you can and have grid enabled you may see some disalignemnt. I found that changing Shader type to TextMeshPro/Mobile?Distance Field SSD helps a lot and is perfect.
That’s great!
when I "Extract Atlas" from my font asset, my letters in the png is all blurry... why? I followed all steps explained in the video
Hmm you may need to play with the settings of the font asset creator
Also in the Online Tool that you are using there are options to change for Output, Pixel Size, Em size, Ascent, and Descent. Set Descent to Pixel size * by the Number of Pixels below the base line, in your case pixel size is set to 64 * 3 = -192 Ascent will be Pixel size * number Pixels above the base line 64 * 7 = 448, then Em Size would be 448 + 192 = 640. Or using 32 for the Pixel Size 224, -96, 320. Again I am not sure if this will help with Duel Color Fonts.
Awesome thank you!
When using the FontAssetCreator and pressing the "Generate Font Atlas" button for my ttf (exported from the pixel font converter tool), I get an error saying it failed and possibly the font is invalid. I pasted the character set perfectly. If I don't use custom-set and just leave it set to Dynamic, I get no errors. What could I be doing wrong?
Hmm, I’ve never experienced those errors before. Does it do the same thing in a fresh unity project? That would narrow it down to something with your file
@@ZacMarvinGameDev Yeah have tried a new Unity prj. No luck. I'm not sure it matters actually though, as it seems to detect my characters perfectly fine when simply set to Dynamic. An additional setting found in the font asset before taking it into the FontAssetCreator is "Include Font Data" which I assume is doing what you'd normally use the custom input interface for, probably automatically includes the character set I'd otherwise be inputting/pasting manually?
I'd love someone from Unity to chime in on this because it doesn't make a heck of a lot of sense. Their documentation doesn't seem to assume we have any use for custom fonts like this.
An additional step I had to do with my fonts is, in the Output tab of the online converter tool, I had to set Pixel Size to 32 or my fonts would be all squished and overlapping. No idea what this setting does or why it has to be 32 (I just took its suggestion to try Power-of-2 values, my font tiles are actually 24px).
Hell yeah, this video did me up good. Thanks!
So glad!
Each character in my font is 7 pixels wide and 8 pixels tall. Nothing works with Sampling Point Size in the Font Asset Creator, 7 is too little and 8 is too much.
Does anyone know how to make it work? Thanks
Check out Manas comment section! I’ll pin it to the top of the thread. It may help you!
@@ZacMarvinGameDev It helped, thank you (and Manas) so much!
To get a proper look without dragging all the characters by hand, increase the "sampling point size" and "Atlas Resolution". This will generate the font with all the forms preserved properly.
Sweet!
I had to use a sampling point size of 8 to get it to work, otherwise the letters in the atlas would be all distorted. Which is odd cause my font was the exact same size as yours (7x9).
After further research it seems point size isn’t exact. My exact pixel perfect point size is 8.6125 for some reason. Doing more research on this as we speak
Thanks for sharing! I was looking for a way to use an existing font from a classic game‘s spritesheet and this will be helpful. Regarding dual color, would the Outline effect in TMP not be an option?
No problem! From my experience the outline effect with text mesh pro works well with regular fonts but with pixel fonts the outline isn’t pixel perfect and can make the font look off
Thanks for the tutorial. Something so obvious yet so booooring and time consuming. Got a question: What happens or how can I add to the atlas a new letter? Say for example I have to translate something to another language and they add leters. Can I manually add them and reference it? Because I believe different file, different atlas...Thanks
Unfortunately it’s a different atlas and I haven’t found a better way to do it than recreating the whole thing
what do you use to make pixel custom text?
Usually just aseprite!
I can't believe how well this worked. God bless you and everyone you love, fellow tutorial man! thanks from the bottom of my heart
So glad to help!
It's working 😄
That’s great news!
Thank you for the awesome tutorial! I think it's time I bite the bullet and make several of my own fonts for my game. It took me a while to realize that since you can't really scale a pixel font and keep your target pixel resolution, it becomes a matter of finding several fonts that were created in the various sizes you need for titles, headers, and body. This is almost impossible to do sourcing fonts online.
Question: Are you doing any math to land on a 36 pt font size in your TMP Text component, so it meets your target pixel resolution?
I wish I could tell you some formula to figure that out but unfortunately it was just trial and error for me to figure out the proper sizing
I think I may have made some sense of it!
I was operating on the assumption that font size has a 1:1 relationship with pixels, but this is actually false. My font was 11 pixels tall, and is actually considered a 8 point font (you can look up a conversion chart, unfortunately I can't post it in comments)
Once I adjusted my font asset + TMP font asset settings to all match 8 pt, as well as configured Canvas to my desired 640 x 360 scale, everything slid into place.
Bro if it wasn't for you and this tutorial I probably would have spent more time than the entire rest of my game just trying to make the stupid UI
yo really helpful thanks
Thanks a lot, got it working!
Awesome! Glad I could help!
Thanks your a life saver.!
Probably faster would be just make letter without outlines, then draw just outline or use outline filters.
Not a bad idea
Thanks!
No problem!
Did you try setting the Sampling point size to a larger size? you set it to 7 but that is smaller then the size of your font, You r Height was 9. I do not know if that makes a difference with the dull color font. You can get a better layout by better adjusting the Atlas Resolution, Change the Height to the smallest possible size as well. There is no way to make it pack the atlas by the same way that you drew them, It compresses the images together, in order to use the online tool you have to have it in a grid, Unity and TMP PRO pack them together, by the size of the image.
I’m not entirely sure why 7 seemed to work but it does. I’ll look into what you said a little more because I’m going to have to make another pass on the font to add localization characters
@@ZacMarvinGameDev p.s. thanks for the great tutorial. You gave me a new tool to play with, I had a project that I am working on converting from XNA studio that has several sprite fonts, the tools you pointed me to made it much easier to use. Before this I had to use the text atlas of Textmesh and convert all my strings to hex.her. These tools made it much easier
@@jameslafritz2867 that’s great news! So glad I could help!
Nice !
Glad to help!
W tutorial
Thanks!
Thanks for the tutorial however it would be much better if the video goes straight into the tutorial
Noted! Will do this in the future
Good tutorial, but I'd recommend getting rid of the facecam. I don't need to see who's talking to me, I need to see what's being shown on screen.
Good to know! Thanks
@@ZacMarvinGameDev Facecam is good
Late here, but I like the facecam!
Perhaps during snippets where we need to see what's under it (on your screen), you could hide the facecam temporarily during that short section of the video? (If it's not too much work -- it wasn't a big deal for me!)
Awesome tutorial video, thanks for the guidance with fonts/pixel art (which is oddly hard to find info on online!)