Ep. 110: Rendering Strings of Text! - Game Programming

Key Takeaways

hey what's up guys my name is CH welcome to episode 110 of game programming today we're going to talk about getting uh basically being able to enter some kind of text uh into our little render method here and then based on what text that is of course we will render the appropriate characters from our character array okay so in case you guys have been living under a rock and missed all the other episodes go watch them but uh we have a basically any any any kind of character we want to show up we we can now actually control that right so if I go ahead and uh print like this one for example you can see it's printing f okay and F is index 5 why because F of course is the sixth letter in the alphabet but more importantly the reason that's actually happening is if I just bring this up really quickly here um the idea is let me just find my little font sheet uh the idea is of course in our actual font sheet which you guys can actually find I I'll make a link in the description so that you guys can actually download that font sheet if you want the exact same one one that I have but um essentially in this font sheet right we have uh ABCD e f g h i j k anyway we've got all this we got like this array basically of um of characters okay and the idea is um based on the index of each character that's what's going to Define which one gets rendered right of course if I go ahead and say AB okay let's just say uh I want to render the letter N okay well we know there are 13 characters here okay array start at zero so this n here is going to be number 13 okay so if I switch back into our code and I type in 13 over here and I hit debug we should get n and you can see we do okay zero of course would be uh a right and then because since we know that one row is essentially uh 13 characters wide we can do something like 13 * 0 of course which will obviously be zero but uh if I do it the other way around um we've got uh zero okay it's like this this is like the row okay so row zero we get a right uh if we go Row one we will get n okay uh let's spice it up a bit and say this so this is row 0 1 2 3 4 let's say row four if I go row four right what is it going to give me it should give me zero right and you can see it does okay so basically the idea is we need some way to be able to pick out a certain character but but the big thing here is that the character that we pick out really has to depend on text that we input okay so first of all we need a way to actually tell our program oh hey you know this is the character at this index we kind of need a way to map out these characters and the way that we can do that is by literally making a string in our font class that contains these characters in order okay so what I'm going to do now right if I alt tab back into our code I'm going to make a private static this will not change at least for now private because we've only got one font uh private static string I'll call this characters okay um and this will uh it will not be an array notice it's just a normal string okay and these characters are literally just going to be all of these so beginning with capital letters of course A B C D E F G H oops h i j k l m n and then we get to n and it's like well this string will be very long first of all and B we kind of you know it's going to be kind of hard to diagnose where we went wrong so basically the idea is we want to kind of format it so that um after M you know we can kind of hit enter and start off on a new row okay so kind of like that this is kind of what we want to do and Eclipse actually does a bit of this for us but the idea is what we want to do is split up our string into several different strings just to make it easier for us to read okay the computer's going to read it the same way but what I'm going to do is I'm going to hit up plus then a double like a double forward slash to indicate a comment and then I'm going to continue typing over here so for example n okay let's cut that just for now oh we already got characters here I just notice that okay um oops I'll call it uh character index okay okay so why have I done this and what is this plus and what is this double little comma sign okay now there the reason I've done this right and this will actually get formatted over here but don't worry about that just for now um the reason I've done this is because first of all we want to drop this into a new row okay the plus works just the way it would if this was here okay it's a same thing as if we did plus two for a string right it would just append two onto the end of the string that is what happens with n n gets appended onto the end of this string okay now if I hit enter and I hit control shift F to format our code eclipse is going to pull that back up why that's just eclipses Auto formatting rules okay you can probably fix that up but an easy way to do that is to Simply hit up a double forward slash and then drop that into another row now why will it not bring up n it can't because if it does n becomes a command and is no longer code okay so that's why Eclipse does not bring it up and doing it this way is really really easy okay so I can put a Double's equal a double kind of comma sign here drop this down here and then what we'll get is everything on a new string for uh everything on on a new line for example okay so it's really up to you how you format this but I like doing it this way so let's continue here so we've got n it it just kind of makes it like aesthetically to us this programmers look a bit better because you know hey we can see uh the N is on a separate row okay so I'll continue here n o p QR s t u v WX Y and Z okay fantastic so then I'll do the same thing plus F SL SL and then I'll keep going right and the idea is if I hit control shift F and I won't do that now but but I will in a minute you'll see that it will more or less uh not get formatted back up to the line so a BC D E F G H I I don't need to keep checking that jklm okay plus pqrs TUV uh WX Y and Z okay fantastic now um okay so what I want to do now is let just pring that back up okay so then what what do we have then we' got the numbers now so 0 1 2 3 4 5 6 7 8 9 and then we've got dot uh dot uh comma and one of these apostrophe single quote whatever you want to call that um and then we've got uh another single okay this is what gets interesting okay because we' got two types of single quotes notice and then we've got two types of these things now what I want to do here is I'm actually not going to add the quotes Okay so basically you can see that this is not a neutral so to say quote it's an opening quote and this is a closing quote okay for now I'm not going to look up the asky table and find out what they actually are okay because in Eclipse since eclipse is an editor for code if you hit uh these apostrophes or you know the single or double quots they're going to be neutral okay they're not going to be facing any direction okay otherwise the code will not get passed correctly um that's why E clips and any other uh text editor will do that but if you go into something like word um in fact I'm just do I might just do that now cuz you guys will probably want to see that if I go into something like Microsoft Word all right uh and then I go ahead and say uh opening quote or whatever you can see it's going to bring it up as an actual opening quote okay and a closing quot and same thing with this so if I grab this and I put it into a clipse you can see oh look they look very different don't they okay so you could do it this way um in fact I probably will now that I've done it anyway so apostrophe uh this is this is really an opening quote okay so I'll just um now the downside however if you do that is that you're not going to be a you're going to have to basically copy and paste it every time you want that okay so you could do it this way um and I've kind of shown you how but I've just decided I'm not going to do it this way okay so that's how you get those characters in in Eclipse you can just do do it in Microsoft Word or whatever and then just copy and paste it and it will work but um we're not going to use them okay we're going to use standard quotes so we've got an opening quote so to speak we've got closing quote they're the same though then we've got an opening double quote and a closing double quote how we how do we do that we can't just do double quote because as you can see it will actually close off the string right to do characters like that you can hit backs slash and then the character so basically backs slash uh this apostrophe sorry back SL double quote will literally just be a double quote okay but of course we we can't actually add a double quote because that would end our string since double quotes are what we use over here right so that's what we can do so we'll just do two of these whoops and then everything else should work fine okay you can see that works now I've hit control shift F and it's formatted it but you can see it's nice and it's row by row it is a bit offset but that's all right I'm not going to fix that right now you can if you go into uh the eclipse eclipses formatting settings there I I know I know for a fact there are settings to control indentation so you could control it that way but I'm not going to bother with that right now cuz it's looks fine to me all right great so we've got the apostrophes now we got the semicolon and the colon semicolon colon uh excl Mark at sign dollars percentage uh what else brackets minus plus all right fantastic that's it that's all we need so the idea is I've copied down this font sheet exactly make sure it's obviously correct otherwise it's not going to work okay but this is how we do it okay simple as that we've got this now now how is this useful to us very very it's the the reason it's simple the sorry the reason it's uh actually useful to us is very very simple okay because this is like a lookup table when we pass in a string to render such as hello okay what we're going to be able to do is say okay find the letter H in this index okay uh here it is capital H there it is okay then we can say well what position position is that in this index what index is it in this string okay 0 1 2 3 4 5 6 7 it's index 7 okay thus I'm going to use index 7 for the array and if I launch this and run it h we get an H okay that's how it works and then it will repeat the same thing for e l l and then o okay that's how it works so we have a lookup table and conveniently the reason I did these in order obviously is that this lookup table corresponds directly to which character is which in our Sprite array okay simple as that now in order to actually calculate all these indexes uh our our job is largely made easy because there is an actual um there's an actual uh method in the string class that will actually find what index a character is at but essentially what we need to do is obviously we want to render every single character okay if we type in a message and we could probably do this right now so want uh so public word render for example here might have something like uh you know string text okay so that's very very simple but the idea is we want to render every single character in this string that we passed not just the first one okay so we're going to need a way to repeat code we're going to need some kind of loop okay good way to go would probably be a for Loop okay uh because um strings are indexed as well so picture is string is an array of characters because that's really what it is okay in fact you can see over here uh it represents character strings okay um and the idea is uh here we go exactly string string equals ABC the actual character data is just an array ABC okay that's how it works so it is an array of characters that we have so let's let's go through every index in that array or in other words say in IAL z i is less than text. length because we're going through every not last Index o did a lot uh because we're going through every single um character in that array i++ okay we'll get we'll grab the character uh and we'll just call it current character okay and that will be text Dot character at and then of course the index being I all right so what does this do pretty simple if we go ahead and print current character all right and I won't actually print it on a new line all right I'll pop in a new line at the end of this though so it prints it all in a row um and I might actually just print it along with a space okay if I go to game fix up this error enter something like hello all right and then uh just run this basically what we're going to get is you can see hello Okay the reason they have spaces in between them of course is because I did put that space over here but you can see that via this for loop it's just is rendering every single character individually all right if I do put a line at the end of that enter on this then we're obviously going to get hello okay so that's how that works pretty simple right again if you guys are ever in doubt at what something does print it to the console that's probably the best debugging tool you actually have okay obviously debuggers are very powerful but this printing to the console thing it it's just probably the easiest way honestly all right fantastic so now that we've got that we need to figure out which Index this character is in our string right so how do we do that well let's make a variable out of it and let's set it equal to our character Index right do index of and then we can pass in a character for example current character all right so if now we were to print out um index plus maybe like a space all right and we run this all right so let's just add in a print line at the end of that um if we run that there you go all right great so we're getting all the indexes now so you can see for the first one it's saying all right well the first one right over here is of course the letter H and what is it giving us it's giving us seven Why seven well 0 1 2 3 4 5 6 7 right H is number seven then it's giving us number 30 which I presume is lower case um e I'm not going to count that but that's the idea and all the way to 70 being the exclanation Mark which is right over here all right fantastic so guess what we've now got an index so now all we really need to do is actually render the Sprite for each of the characters and which index are we going to render it at index okay simple as that so if we do this now what are we getting exclamation mark wait that's weird shouldn't we get the whole word word well obviously but the idea is that we're all printing them on top of each other the last one is exclamation mark okay so if I do something like a single character print so for example I can print like an uh number two run this sweet we get two change this to lower a Lo say how awesome is that right it's doing everything for us except it's not printing them in a row how do we do that well we need to play around with the position that we rented the Sprite at okay now how big are these I've actually forgotten which is a bit embarrassing I think they're 16 by 16 though so what I can do is if I put uh let's just say uh we'll go 50 for now so 50 right now okay and I'll change these parameters in a minute just to not complicate this 50/50 is kind of the index that we want to render it at okay so right right now that's over here okay now based on which character we're currently rendering it at right because of course I know the length of the string and that then I'm obviously using this for Loop to go through every character in the string based on which character I'm up to that's the EXP position it should have right so the first one again should be offset by nothing the second one should be offset by 16 the third one by 32 then 48 then 64 so on okay so how can I do that I can say plus I being this current variable here right with which iteration of the Fall we're up to multiplied by 16 because that is the size of each character all right let's launch this and see what happens amazing there's our text awesome isn't it so now if I change this to something like the churn what's going to happen we're going to crash Why did we crash why did we crash because I put a space there all right so what happens if there's a space What do we do if there's a space well it's pretty obvious what we do okay we still increment the position that I'm at but we don't render anything there okay so put it to put it simply right now what we'll do is because if if it can't find it I think it returns negative 1 yeah negative 1 if the character does not occur okay so we could put in like a space putting a space here will not work by the way because since we don't have it in our actual characters thing it'll still give us an array index out of bounds because that will be number it would be basically be at at um at at the like past the last uh index of our um characters array okay so what we can do um is simply say Well for now I could just say if index uhal -1 continue all right not a solution but we'll think of one in a minute okay and for that it will still put a space there but it will not um crash or anything so that works fine okay so I can put literally anything here and it will work okay anything that any any kind of character that exists in here will work out all right so that being said where is our's our game um I mean let's try a few right so let's put in like quotes perhaps if you're doing quotes make sure you have a backslash there otherwise it will think you're ending the string you can see that does not work awesome we've got quotes they are beginning quotes but that's all right um You can change that in the actual sheet if you want there's no actual way to get closing quotes right again I said as as I said before uh there is a way right if I go into word again grab these guys put them here make an opening make an opening and a closing quote and then uh over here in let me just grab them again over here in font I can of course do the same thing here so we have where are they oops instead of these Black slash things I'll just have that and if I run this now look at that we're getting our opening and we're getting our closing but the thing is it's a lot of work to copy and paste them so it's up to you what you guys choose of course but that is the idea so now we have pretty much full text rendering going on okay now there are problems and we're going to fix them in the upcoming two episodes we're going to spend two more episodes on this font rendering thing uh hopefully not more than that but the idea is we have a few problems for example if we put something like uh let's put something in like uh game with a lower case G or gamey what's going to happen the G is going to be kind of pushed up and the Y is going to be pushed up it just looks weird right we don't want that so we that's one thing we need to fix then the other thing we need to fix is of course making spaces proper but that's a minor thing the other major thing we need to fix is this pink background okay we want to get rid of that so those are the two things we we're going to fix in upcoming episodes but I hope you guys enjoyed this episode of game programming if you did please hit that like button um now what else what else I think there's any really anouncements to make um I'm going to try and make more episodes I always say that but I'm being serious this time if you guys do want to learn uh privately for me if you go to my website that ch.com there is a tutoring section if you go to that you can pick a time at which I available which is in Australian isent Standard Time uh fill out the form and I will get back to you shortly and basically you can book a tutorial with me privately all right over Skype and I will explain to you whatever it is you wish to know anyway that is the idea uh if you guys are enjoying the game programming series please hit the like button the more likes I get the more episodes I know I should put the more time I should allocate to this basically is that's my thought process um obviously if if heaps people want me to do it then I'm here so that's the idea anyway anyway I'll see you guys next time goodbye [Music]