How to use a Custom Font with Text Mesh Pro in Unity (Custom Texture, Add effects in Photoshop)

in this video we're going to learn how to use custom fonts with text mesh browser netting this one I always to add effects to our phones like gradients and weird outlines and use them the same as normal text let's begin [Music] hello and welcome I'm your code monkey and this channel is all about helping you learn how to make your own games with nf2 torrents made by a professional indie game developer so if you find the video helpful consider subscribing so this is our goal we have a bunch of Knights walking around with the name above their heads and as you can see the name is written in a very nice font with a bunch of nice effects and this really is a font as you can see since all these Knights have different names so we are using it exactly the same as any text so the goal is to be able to write text using a custom font with custom effects that we can modify on our texture alright so let's get to it so here is our testing scene there are a bunch of characters just walking around each of them has a unique name and this font obviously does not match what they look like so that's what we want to sort now the first thing that we need is a font there are many websites that have lots of free fonts so just go on to find something over here I have a pre nice unique font it's called archaeological sand it's a nice medieval font so it suits our sprites now if you're using the own text mesh component you can simply create a new text mesh and here you could just drag the font straight into there and everything would work so just like that our font is displayed using the text machine phone however with the new types mesh pro if we go in here create a new 3d object text mesh Pro here as you can see we cannot drag the font directly into there so the text mesh pro requires a bit more work but it also gives us a lot more options now the first thing that we need is to make sure that text mesh browser so when you create a new text match proved here this window allows you to import the essentials so just click on that and with that you can now use the text mesh Pro so you can walk into the inspector in order to see the various options that you have available so just at a glance you can see that we have a lot more options compared to the basic text mesh and the text also looks a lot better okay so for the custom font as you can see this requires a font asset so we cannot drag a font which means we need to first convert is font into a font asset so for that we go here into the window tex mex Pro and the font asset creator so this window appears and as you can see up here we do have a field for a font so we can now drag it and now let's just hit generate with the default parameters any up here it is you can see the actual texture that was generated so now let's hit save so here on the project files we now have our font asset so we can now go into the text match Pro and we can now drag our font asset and there it is there's our nice font so the characters are in Senshi ated through this prefab so let's simply open this go into the text much pro and drag our font asset and now let's test and yep our characters are now using our custom font which looks much better compared to these sprites okay so this is the way to just add a new simple font to your game however the cool thing about it is that we have an Atlas texture so if we have a texture that means we can modify it in any imaging program so before we start modifying our texture let's go into these options to see what they do so up here we have the source font file then we have the sampling point size it will automatically calculate the maximum size it can use to fit all the characters inside the texture then the padding which is the most important when the only weight custom fonts that you want to add effects essentially if you add something outside the font like for example an outline you need enough padding to be able to draw it so in this case since we're going to add a nice outline let's increase it to 10 then the packing method which is how close the clefts are packed together so fast for the most part is fine then we have the epaulettes resolution this is going to be the final size of our texture so this small item limit your character set or the character size in order to fit everything in the texture so for simple usage is 512 by 512 is probably fine but if you had a lot of extra padding or a lot of extra characters then you can simply increase this and go all the way up to as far as you need then we have the character set so this won't depend on what you want to do for example if you were making some sort of special font for a head counter then you would really only need numbers but in this case we want names so ASCII probably fun alternatively you can also select custom characters and in here put all the characters that you're going to need however do remember that the font-family itself needs to have that character if it doesn't then you won't actually see it then we have the font style then for the render mode these have to do with how the fonts are rendered now the first ones are bitmap fonts which means your font will only look good at that exact size so for in most cases you want to stick with distance field of either 16 or 32 the difference in these two is one of precision so it will depend on what you want to use it for but for most cases 16 will do just fine and finally we have the kerning pairs so checking this just gets the kerning pairs from the font file so with all the options covered here is our font texture and we hit save and inside the font asset you can see the texture Athens however for the goal were trying to achieve here of modifying our texture using this render mode will not be very helpful so instead we go in here instead of creating a distance field 16 let's create a smooth and now we have this texture which is much more clear and much more perfect for our current goal so you have to keep in mind what your texture is going to be used for if you don't want to add a lot of special effects directly into the texture then using this texture would be better but since we're trying to add some special effects this one won't be better so we hit save and now we need some way of getting this texture so we can edit it so for that we some like the font asset and go up here to the gear icon and simply extract Atlas and upon clicking and there you go here's our new apples which is a simple PNG so now we can open this in any sort of image program so in my case I have it open here in Photoshop and now this is a texture unlike any other so we can modify this in any way donar requirement is that we stay within the padding area so we don't spill our effects onto other characters so let's add some effects so here's our modified found with a bunch of nice effects now that we have our texture let's save it as our PNG so you're in the project files you can see the original texture and our modified texture now we need to apply this to our font so for that we select the material inside our font asset and in here first of all since this is supposed to be a bitmap font we go in here text mesh and some like bitmap custom atlas and here on the debug settings we have a field for the font APIs and we simply drag our modified font apples and there it is there's our font with nice drop shadow a stroke and some nice colors okay so that's pretty much it now we can go here we can edit our text with anything we want be essentially this working just like normal text so this is normal text we can write anything as long as you have the characters in order to displayed okay so now on the character pre found in here I already have the text mesh Pro using this font and this material so everything should be working let's run the game and if there's our characters and each of them has a name with our custom font custom effects and custom anything so you now know how to create a font asset for any given font extract the appleís from that font acent and modify the texture in any way you want in any image program finally you know how to import it back into the game in order to be used as a normal phone as always you can download the project files in utilities from in Tacoma keep calm if you liked the video subscribe to channel for more unity to turrets post any questions you have in the comments and I'll do my best answer alright see you next time [Music]

Channel: Code Monkey

Views: 96,118

Keywords: unity textmesh pro custom font, unity textmesh pro, unity textmeshpro, unity text effects, unity text ui, unity textmesh pro set text, unity textmesh, unity textmesh pro text, unity text, unity textmesh pro sprite, code monkey, brackeys, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity 3d tutorials, unity tutorial 2d, unity2d, unity3d, unity

Id: nBcP7FaDPE0

Length: 8min 39sec (519 seconds)

Published: Fri Apr 26 2019