Ep. 107: Font Sheets - Game Programming

Key Takeaways

hey what's up guys my name is the channel welcome to episode 107 of game programming So today we're going to talk about fonts and text rendering onto the screen because we've just made our debug class last time here it is right over here um and we were able to draw rectangles on the screen if I just launched our game you guys will be able to see that right over here there our awesome rectangle great so now let's talk about text because we're going to need to be able to render text under the screen for a variety of reasons for example let's just say we want to know what an item name is or we want to make a menu um pretty much anything like really that has words should be probably um rendered by itself so in other words we could just obviously U make an image with the name and just put it up as just a Sprite but um uh for some Dynamic element such as maybe like an FPS counter actually on the screen or something that like you know like a stat right for example the speed of our character or the the attack strength that stuff is um we can't just put up about 10,000 Imes of every possible combination of numbers and then just kind of deal with that we want a way to be able to easily render text so in other words our goal here is to basically ignore the fact that I'm in the debug class right now but we basically should be able to go something like you know font. render hello at like position 5 x 10 Y and then maybe like a font size of 8 or 9 you know something like that right that's how easy it should be okay um so that's what we're going to we're basically going to focus on for the next two episodes so this episode we're going to talk about actually creating the font sheet and then next episode which I'm actually going to probably upload later today um hopefully though um we're going to talk about actually integrating that into our code and being able to to make a font class and call that stuff so let's actually make a font class straight away so in our Graphics uh folder here I'm going to go right click on that new and then class okay and in class I'm going to probably call it font right you can call it text you can call it whatever you want I think font is a good name though uh because we're probably going to because okay well actually do make a class called font because I think there's going to be multiple fonts and um we want to kind of keep it uh I guess more or less like this um okay great so um let's go ahead and uh and basically outline what this class is going to do okay and how this entire thing is going to work I'm wishing I had a better way to show this but okay let's open paint on now here okay so basically the idea is we've got a font sheet which might be um just for the sake of this maybe like 240 by like I don't know 48 uh this might be the size of our of our font sheet um and um if we make this something like uh just a grid so you guys can see what I mean so maybe um oh we can't make it uh oh yes we can okay so 24 for example I don't know this is huge obviously but let's say we got this right each one of these cells right this is a Sprite sheet by the way each one of these cells will have their own letter okay so what we need to do is we need to load that into our game using our Sprite sheet class that's why I had it open and extract individual Sprites from that we could have every letter of the alphabet every number of the alphabet every lowercase letter and uh symbol or whatever um in its own Sprite and load them all individually as files that's going to be really really slow and just unnecessary it's better to load them all as one in one Sprite sheet file so to do that we're just going to lay out it's called a font sheet basically or a bit map font sheet or something like that uh it varies from depending on what kind of person you are um I just called them font sheets okay now um character sheets is probably other word but the but the point is every single character that we ever want to use we need to map out okay and then in the code we're going to be able to grab the appropriate character when we do call something like font dot you know or font do whatever we had before there right font. render hello right when we call hello it's going to be able to grab uppercase H uppercase lowercase e l l o Etc right cool so to do that we need a way to first of all load that sprad sheet in not going to talk too much about that today um or right now in episode 107 how 108 we'll cover that in much greater detail but um essentially what we need to do is make a a Sprite sheet here now we could make it over here I'm not going to uh because this is great for like tiles and whatever but I think the font should have its own spray sheeet so make sure it's static okay we don't want to have a new one of these with every instance so private static uh Sprite sheet and then what we'll do is we'll call it like font for now right um because we only got one font uh we'll equal new Sprite sheet okay now we've got a bunch of Constructors here we' got the string path in size and the in width height and then we've got this which is what we want okay well first of all remember we have to actually load in the font sheet the actual the actual like sheet okay so I'm actually going to make a folder in our game directory we've got this uh rain folder of course we've got resources and then we got levels textures I'm actually going to make another folder called fonts okay and inside fonts this is where our actual font shet is going to lie so I'm going to make um I'm going to make it uh um so the path will be um you know just like fonts slash um do we do we need a for slash in front of that though yes we do okay so because it's s out of the to the class to the jav file um so fonts SL I don't know what I'll call this maybe like let's just make an aerial fonts I'll just call it aerial PNG right you can you can make whatever fonts you want you can actually make your own fonts so you can actually just draw draw like pixel art or whatever if you want really low rest fonts we might do something like that but um just for now this will do um and then the size okay so the size of each character probably around I mean remember our game is scaled up by a significant I think it's like three or something uh let's check this out what's the is it just called game yeah yeah our scale is three so remember remember that so maybe like um 16 the best way to do this by the way the best way to check out sizes is we've got this rectangle here which is nice so what basically if I just go to the player class for example I think that's where we're entering the rectangle isn't it okay search File uh bug basically that'll search the entire um here it is okay so it's in shooter okay so we're drawing this rectangle let's um let's draw it uh let's set the uh tracking to false basically uh the width and height let's make it like 32x 32 all right um and then this stuff will make it maybe like I don't know 50/50 doesn't matter all right let's draw that okay so that that's how big if we make our font 32x 32 each character that's how big it's going to look that's huge right I might want to do something a bit smaller like 16x 16 let's see what that looks like um it's good to have it as a power of two it's not really necessary though we're not dealing with like open G textures or anything so it doesn't need to be a power of two but um it can be so that's the size of one tile you know what let's stick with that right because that 16x 16 is clearly the size of one tile here so I think that's a good size for our font okay so um uh I'm just going to get rid of this debugged or rectangle call Al together great so in font um we've got uh this stuff so we'll make it right because remember it will get Scaled up 16 * 3 of course is 48 so it'll be basically 48x 48 true pixels on our screen wonderful when we make a font okay we need to actually um okay well this is one Sprite right but the idea is we want to create another sub Sprite sheet and there's an episode on that if you guys didn't catch that so um font characters all right so if we make a new Sprite sheet um and uh you know from the existing one which is font okay we actually get an interesting Constructor here let me just see if I can find that Constructor here we go so we have sheet sheet right so in other words it'll be font uh we got the X and Y okay and I'm trying to remember this stuff um X and Y what on Earth could that mean see this is why it's important to document C width and height of um each thing wait a minute is this even going to do what I want it to give me a sec guys just got to check out my code here so what does this do again so what what do we use it for oh we created three oh it crops the Sprite sheet doesn't it individually all right that's not going to cut it because we need to actually extract Sprites we haven't done that haven't we okay we're going to do that next episode okay because um as I said all the rendering and extraction stuff will happen next episode so what we need to do and I'm actually going to put a uh to do is extract uh sheet cells into individ ual Sprites right really important then we can probably clear this from memory um or at least hope that Java garbage colle does that itself okay so public font um you know we'll take in uh it doesn't matter what we'll take in right right now okay we'll we'll we'll put in like the backend functionality first next episode and then we'll um we'll talk about this stuff so this is is has it really been 9 minutes are you kidding me right now maybe that's wrong no it has been oh my good okay so I want to get on with this I'm going to use Photoshop for this okay um so first I'm to first thing I'm going to do and I say that just as I pull up paint.net but um I'll tell you one a minute so let's make a new canvas size so we decided 16 right I'm going to bring up a calculator here um so 16 right we have how many letters in the alphabet okay we've got 26 so 13 would give us half of that we don't want to make the font sheet too long otherwise it' be hard to read um by humans not by technology but let's just say so be 16 times maybe a width of 1 actual characters right so that gives us 208 okay so we we put the canvas size to be 208 wide um now the height on the other hand how many of them do we want so we want letters A through Z Capital lower case so that's already four right that's already four and it'll be time 16 eventually but four then we also want numbers and symbols um so like symbols like the you know full stop comma exclanation mark question mark that stuff um and numbers of course 0 through nine so I'm going to probably call it another two rows for that because I don't think one will be it could be um I'm just thinking yeah no I don't think it will be okay so um we'll call it six right so 6 * 16 96 okay okay so the reason I'm using let's just whoops I'm just going to clear this entire thing the reason I'm using pain.net for this is because I I like paint.net in the grid thing it has so 16 uh size here hit okay and then it actually makes a nice grid for us really easy to do harder to do in Photoshop all right so I want to save this into our um let's see oh what's this oh this is my other this is um The Cho engine stuff isn't it this is if you guys haven't been watching The Cho engine um live streams by the way you guys are missing out uh there's a video on my Channel about that go watch that and also uh check out the actual live stream at twitch.tv/ the chero now what am I doing what am I doing right now I'm going to the wrong workspace over and over again game programming okay here we go so rain um we've got uh the uh the resources file here we've got fonts so I'm going to save it as um aiel PNG because aiel is kind of what we called it okay so why am I not just putting out the font here this is an opportunity for you guys to make your own fonts by the way what you can do is um one thing I'm probably going to do quickly actually is redo this grid with uh different colors um so there's going to be a uh a pink kind of magenta color for well the full pink color will be transparent right so that's one and then the other color we're going to use is just probably 7f I just like it right it's a nice gradient it's just a darker purple we're just going to use that for the borders we will take the borders away when we actually when we actually render it okay um sorry when we actually like export it out properly okay the borders are just now to help to help us make sure that everything's in the size so let's go ahead and generate a grid now um and that's actually perfect so there we go right so now we got a grid um this stuff looks pretty good to me so we're going to save that right now uh you guys could go ahead and let's just say pick a color black here um you guys could definitely go definitely go ahead and um make your own characters here so if I set the color where is the color gone did I just did I close that I am just yeah I did okay so let's just set this to Black quickly um what I could do is I could just draw like the letter I don't know the letter A here um I'm obviously rushing here I'm not that bad um but let's just you know you could draw like the letter A here um and uh and and you know make your own basically make your own uh font stuff doing that okay and that that would work out pretty good and depending on what kind of look you're going for it could actually be pretty much perfect for your game but um we're actually going to use a real font just because I'm not going to waste you got your guys time making all these characters individually um so that is the that's the deal right but you can do this yourself and it could look really cool because it's 16 x 16 is rather low resolution so I'm actually not even sure how this will work out but um uh let's see if it will so let's open that um so where is it ARL PNG I'm just going to drag that in okay there it is double click on this background I'm not going to teach you guys how to use Photoshop I don't know how to use Photoshop myself very well I'm an After Effects person as you know that's why I use it for um we could use after effects for this no I'm not going to be that silly but um that's why I use after effects for like l d for making the spris and stuff but um let's go ahead and uh yeah so text tool right let's make the font like I don't know eight or something well that that that seems good letter A okay now you see you get this anti-aliasing here right that's the uh computer desperately or the Photoshop desperately trying to um make sense of why we're doing stuff that small uh you can actually get rid of antialiasing um if you uh see this strong that's like the antialiasing put this to none and it will you can see it's gotten rid of that completely it's all sharp now so that's the idea um you want to have that off let's try and make this as big as we can here uh that's a good size 14 is actually a good size okay who would have thought um okay so remember these borders are going to go away these borders are not part of this crap okay in fact we're probably going to take all of this away all all of this away and then just put in the pink background so this stuff these borders do not matter you can put stuff like that that's fine now you cannot put stuff like that because that would be entering the next tile okay so one tile okay or one Sprite goes from here from 0 down to here okay I know it's a bit hard to see but there we go so it does it includes the top and the left border all right great um this stuff uh is going to take a while but um because I like doing this stuff in front of you guys um I'm going to do it in front of you so um all I'm doing here is I'm I'm hitting control J I'm selecting the layers hitting control J and then if I hold shift and drag like any other normal program I think it will um it'll just drag it along one AIS Okay so uh we're just going to do this a ton until we get enough characters here um so you can see that they're looking pretty decent I mean you know when you're making a game that is that low rise it's just going to look um uh low R right um but that's all right cuz that's kind of in compliance with the uh with the I don't know the theme or the feeling of the game so I'm going to grab all this um contrl J and then just drag it down over here all right so now we have the process of changing these A's into actual uh actually what we want so uh to do that I'm just going to go ahead and uh zoom in there um so a copy okay um grab that change that to a b change that to a okay I got to learn how to do this quickly um so see I'm actually going to align them later all right so I'm not going to align all of them now um just doing this roughly uh so see um where's my typing tool d uh e f g anyway you guys get the point right I'm not going to do this all in front of you cuz I would bore you to death um but the idea is uh you keep changing I need to learn the shortcut with the shortcut for that come on okay I don't have time to wait for you to hover up okay h i l m all right here we have a bit of a problem where we don't know where to align it to the left or the right side uh I'd recommend you guys align it to the left side okay so keep it on the left side keep it as much to the left as possible if you have to choose um like this I for example I don't know what it's doing but let's align that a bit better so another words yeah keep it more towards because remember that that purple border is actually part of this bright so yes okay that looks pretty good though let's move down all right so now we got all letters the W is way too big so let's talk about that for a minute uh you can see it's way too big we could make the font smaller or we could just like it's very wise so what I'm going to do is actually if I right click on that I know you guys won't see most of this um but if I there's like a rasterized type thing you can see it here if I rasterize that it basically just converts it into pixels contrl t on that baby and then just shrink it like that okay and that's looks pretty good all right uh and then it'll do a bunch of bloody antialiasing so uh disable that somehow um and you should be sweet to go so how do I disable that how about no interpolation bro can I stop it from there we go all right so there we go right um that is uh how you do that I know it's trailing off a bit but that's all right it's a w no one care about W's right um that looks pretty good okay uh the Z might be a bit too anyway you guys can play around with that make it whatever you want I'm going for the next episode I'm actually going to duplicate this do it for lower characters and other General characters such as exclamation marks you know dots commas whatever apostrophes uh quotation marks whatever um but save that just hit contrl s um you might want to save it as a Photoshop vile if you're using Photoshop just because it'll save all these layers intact because otherwise if you uh were to oh my goodness where okay it's come up with a dialogue box on my other monitor so yeah whatever okay and then file save as uh that PNG file right um now that's pretty much done except for the fact that it's not not because um it's still got the the background so to get rid of the background uh you just you can just make literally just make a new layer here um hit okay uh drag it all the way down to the very bottom you might want to group these number uh I might do that right now actually after I drag all this stuff um so if you uh select all of the layers that are letters you can um uh you can probably create some kind of folder for them we might have to do that separately um how do you create folders in photo okay here we go so folder or group I'm going to call that uh uh letters maybe like uppercase letters you can make a group for every kind of type of character and uh drag this up into letters here we go and then you can just minimize that all right great so this layer one uh what I want to do I'm just going to hide all of our letters here um and this thing so I'm just going to grab the paint bucket tool here which is uh actually hiding behind the gradient tool by the way um good thing I remember that uh and then I want to set the color of course to be FF 0 FF right and then just click okay that's it and if you bring up our letters you can see they have no borders fantastic so save that and save that as a PNG and you should be good to go now um don't know why that's popped up now uh in our code next time um hope you guys enjoy this very long and seriously long episode of game programming for what we did but um we're going to talk about extracting sheet cells into individual Sprites that might actually take up a good 10 minutes so I might split this up into a third episode for where we actually make our font class properly cuz I thought we already had this functionality but we do not okay anyway guys hope you guys enjoyed this episode of game programming if you did please hit that like button it is just below it's cool to hit that that's what the co kids are doing and I'll see you guys next episode which should be later today okay [Music] goodbye