Code a TEXT ENGINE | Awesome "How to" Scratch Tutorial

hello fellow scratchers text is a huge part of games and apps and if we've got something to say we might as well do so in style check out these cool text effects yeah so which do you prefer these babies or scratches built-in speech bubbles and variable reporters yeah it's no contest what you need is a scratch text engine and what exactly is that well basically it's a scratch sprite absolutely chock-full of costumes wow so many throw in a few clever scratch scripts and boom super cool text but tex engines are well known for being time consuming and tricky to get right well then you've come to the right place because i've spent literally days on your behalf trying to make the best tutorial i could so stay tuned to find out how we're going to import your dream font the fastest approach to splitting costumes clever tricks to measure costume sizes and of course the awesome text engine itself there'll be no stopping us then just look what i've been building with it yeah are you excited i certainly am so what are we waiting for let's get scratching so where do we get these awesome fonts from well there's plenty of options and i'll present you with my top four you probably know that scratch has six fonts built into its costume editor option 1 then is to use one of these as the basis for your font engine and it sure is the quickest and easiest font to import for option 2 we must go searching for font sprite sheets these are downloadable pictures showing a complete set of font letters really great if you are after a retro pixel art style option three is to import a google font but wow there are so many to choose from simply thousands of amazing fonts it's just that we need to jump through a few more hoops before we can get these into scratch which leads me to option four remix a font project from my scratch font studio after all the more of us that spend the time preparing these fonts the more that will be available you'll find a link to the studio in the description under this video of course there's nothing like having a go yourself so without further ado let me take you through each option as quickly as i can starting with the easiest option the native scratch fonts then make sure to create a new sprite naming it font so we have these six typefaces to choose from and i'm going to choose the sans-serif font the top one hey did you know that a serif refers to the little lines found on the edges of letters and sans means without so sans-serif means without serifs these little lines now before we start splitting up the letters we should make sure we have decided on the color and the size our font is going to be changing your mind later will mean a lot of hard work if you weren't sure at this point then you could always just stick with the default size check out how it looks on full screen too and off we go change the text to be a single uppercase letter a then without resizing it drag the a carefully to the center of the drawing canvas marked here by a small crosshair and if we zoom right in really close so we can be super accurate in our positioning drag the a so that the bottom left corner of the letter ends on the central crosshair you'll note the bounding box of the a actually goes below this point ignore that for now it's the baseline of the letter a that we are concerned about cool so with the a positioned we can change its name to be a capital a2 perfect that one's done so on to the next duplicate the costume and with the text tool change the a into a b and consequently rename the costume to also be called b right are you getting the picture duplicate the costume change the letter change the costume name to match and repeat over and over and over finally we reach zed and we can pause for breath before beginning work on the lowercase letters starting again at lowercase a and this is an interesting fact that scratch costume names are one of the few places that are case sensitive so we can have one costume named lowercase a and another costume named uppercase a lucky that because otherwise this text engine wouldn't work right that's all 26 x 2 52 letters out of the way we can start on the numbers only ten of those from zero to nine name them after the numbers of course and then phew this really is a marathon you can decide what other punctuation and symbols to include you know full stops commas quotes underscores i'm just going to do them all starting at the top left of my british keyboard and working my way across it it always surprises me just how many symbols there are 91 costumes wowzers okay so do let me just say this all takes quite a bit of time so you may want to add just a few letters to begin with and then get on with the rest of the tutorial the great thing about this engine is that you can go back and add more letters at any point even the order you add them is completely unimportant this way you can test whether you like the look of the font well before you've added more than a dozen letters worth remembering okay cool we have completed adding a built-in scratch font good job and yes that was the easy one are you ready for option two using a font sprite sheet image this is the approach i tend to use if i want a cool retro looking font i googled font sprite sheet and there are plenty of possibilities this one looks nice see how all the letters are laid out in a grid the actual image size is really small but don't worry it's good news for us as that will make it easy to import into scratch just save any prospective images to your computer ready to bring into scratch i note this font doesn't have any lowercase letters though another resource i found is kaviras.net it's packed with a whole bunch of super retro fonts based on classic games i clicked through a few and rather fancied the look of this reactor 7 font i'm going to download this image of the typeface saving it to my computer but checking in file explorer i'm afraid we are going to have a problem importing this image into scratch because it's wider than 480 pixels which is the width of the scratch stage oh man so there's loads of workarounds to this the upshot is that we need to edit the image to make it smaller one option would be to hop on over to the easygif ez gift.com site and make use of their handy crop tool we can upload the picture we just downloaded and then set the crop size to be exactly 480 by 360. don't forget to click set and then make sure the crop is left aligned then scroll down and click crop image okay so here's the result we're just lucky that there are no important letters on the right hand region of this image that we cropped off otherwise we'd have to make a second crop to get those into scratch too so hit save and i'll make sure to add the words cropped to the file name splendid and now we return home to scratch i'm starting over here with a blank font sprite to show you how this is done in the costume editor click to upload a new costume and first i'll show you that fun bubble font nice that would work super well i think it's a mono space font too anyhow i'm not going to use that one right now let me show you what happens if we try to load the font image that was too big for scratch so to begin with scratch load it at double resolution so it appears super tiny this wouldn't be a problem at all if scratch didn't also decide to chop off the top of our image man that is annoying oh well that's why i had us make the cropped version load that up instead and ah that's much better the size is retained and so is the top line yeah so this font is a little small at this size but once we cut out the individual characters we can set the sprite size to 200 and it will look just great but what we need to cut out each and every character by hand yes i'm sorry that is the bad news but don't rage quit right yet there's also some good news this particular sprite sheet is very bloated and we only need to use these first two rows that is good news but also i have done a lot of sprite sheet cutting and i have a rather sick workflow that you might like to follow are you ready for this fasten your seat belts and off we go start by making a duplicate of the entire font sheet just in case something goes wrong click back up into the original sheet next name the sheet a to z then using the rectangular selection tool i next i'm going to select and delete everything but the first line of this image i'll just double check i didn't accidentally remove too much or too little don't forget that we can always click undo if we make a mistake great so next i'll select all by pressing ctrl and the a key and drag the image to snap it to the center of the canvas you know how to snap it there right if we zoom right in on the center point now still with the whole costume selected if it's not then just press ctrl a again we can carefully drag the costume upwards until it sits with the baseline of the font on the midpoint of the canvas i find it helpful to hold the shift key down while dragging to stop it from moving left or right just make sure it's perfectly aligned before you click off the selection one more tweak though before we really begin cutting them up see how this letter to the right of the bass line is not aligned to the background grid that will result in a blurry font so select all again with ctrl a and while holding shift drag it all half a pixel to the left perfecto and now we get to the really laborious and crazily repetitive part of this video separating letters into individual costumes come on scroll over to the far right and find the last letter in the row mine is the lowercase z but yours could be any letter depending on your chosen sprite sheet before we start it's a good plan to duplicate the a to z costume guys soon you'll know these nine steps so well that you'll be babbling them in your sleep step 1 select the original ada zed costume step 2 with the rectangle selection tool drag around the last letter to select it and only it nothing else step 3 click copy step four click delete yeah basically we just cut out the zed from the costume and it's now safely in the computer's clipboard ready for pasting step five duplicate the costume staying with the duplicate step six click delete this is the fastest way to get a new costume right where we are in the list of costumes step seven and now we click paste aha there is our letter nice one step eight so name the costume lowercase zed to match and step nine careful this is the easiest step to miss and i frequently did click on the costume canvas once why if you don't then scratch doesn't save the new costume that we pasted and we lose that pasted letter is that a bug yes it is and it only happens in bitmap mode but hold the phone isn't it a problem that our letter is left positioned way over here to the right of the costume canvas ah well there's a thing we have a choice here under normal circumstances another step in this process would be to carefully move the costume back and align it perfectly to the center of the costume however this step adds more time to our processing than all the other actions combined and it just so happens i have a little bit of grip patch magic that is going to allow us to ignore this step completely wow i wonder what it could be right though back to step one select the original a to z costume two drag around the last letter three copy four delete five duplicate the costume six delete seven paste eight name the costume lowercase y nine and click the canvas again select a to z drag around the letter copy delete duplicate the costume delete paste name the costume and click on the canvas of course by the time you've done this a few hundred times like me you two might be driven slightly around the bend but at least you'll be a master of cutting out costumes oh my there's nothing like having the end in sight and phew we made it the last letter in the road doesn't need copying or deleting we just name it a and it's done oh after finishing a row we can just check down to ensure everything looks good oh no what where is our capital r oh you see i told you we all make mistakes i mustn't have clicked on the costume after renaming it well no problem as long as we made that duplicate of the z costume it's down at the bottom here all i need to do is find the letter r select and copy it and then scroll back up to find the r costume and we just tap paste and few wee that saved our bacon and all the other letters are accounted for nice so are we done come back to the original font sheet ah no we still have the numbers and punctuation symbols to split up in times like this you just gotta pretend you're a robot and go into autopilot right okay select and delete the top row they at least are all done and then carefully remove everything below the second line if you make a mistake you can always click undo or re-import the original picture and then trim off any characters you really don't need that cuts it down a tad so do you remember what we need to do next yeah we align the baseline of the letters to the middle of the canvas position the costume with its baseline just sitting on the central line and lastly before we start splitting again oh joy we need to just nudge the entire line over so that the pixels align with the editor grid there that's perfect and we are ready to roll wish me godspeed the nine steps to costume happiness more like the nine steps to griff patch madness and we are done yes yes i'm so psyched oh man wow what a ride seriously who would do this we must be so dedicated to scratch now i'm obviously a glutton for punishment because there's a third source of fonts i'm going to let you in on the good news is that the splitting process is all but identical to the bitmap one so we can skip over that a lot the third source is google fonts found by visiting fonts.google.com and wow there are so many just amazing fonts on there thank you google for this outstanding resource but how do we get them into scratch so let's choose google's very own roboto font now there's many ways that you might get this into scratch but let me show you my current favorite if i search up the page google font to svg path then that will bring us to a website of the same name a link is of course in the description under the video this site is able to take a font and convert it into an svg a vector image so simply find roboto in the list of fonts so we don't need to upload anything set the font weight regular will do now the default size is rather large let's go with a size of 20 next click on separate characters that will help us split up the font later on we must remember to set the stroke width to zero otherwise the font will have an extra outline finally we write in the text box the letters we want to convert start with all the uppercase letters from a to z and then click download svg the file will save with the name abc etcetera and that's fine with me next up we write the lower um the lowercase letters silly caps lock again we download the svg but just be careful not to save over the previous file lastly we want the numbers and any punctuation and characters full stops commas underscores brackets all those when you download this one you'll probably need to change the file name to get it to save successfully great we can spin up scratch with a once more empty font sprite and upload the first svg font image nice at size 100 it looks pretty sweet and now the process of splitting this up is going to be all but identical to the nine step system we use for splitting up the bitmap font we begin by zooming in because we need to adjust the text baseline now all these letters are separate from each other that's going to be useful later but right now select all using control a and then drag carefully upwards onto the midpoint line trying to line letters up horizontally is actually rather pointless in vector mode so you might as well skip this action anyhow with that done all we need to do is follow the same nine step routine from the bitmap font so we start by duplicating the costume just for safety's sake and off we go just this one time i promise select the original costume two click on the last letter three copy four delete five duplicate the costume six delete seven paste eight name the costume uppercase zed and nine actually in vector mode you don't even need to click on the canvas so i guess it's only an eight step process nice and that is it repeat repeat repeat do you have any idea how long i spent recording this episode for you if you want to take a stab in the comments under this video then have a laugh yeah the things i do for you guys once you've done all the uppercase letters we then upload the lowercase work through them and then the numbers and punctuation there sure is a lot of them but in the end we are done if you made it this far then fantastic because this next bit is quite fun because we finally get to do some coding yay although we have our font costumes all separated out we don't yet know how wide each costume is and we will need that before we can actually place letters next to each other now it's common practice to create a list for these widths and manually go through each costume recording these widths into that yes we could do that but what if we could calculate the widths automatically that would sure save time any idea how we might do that if you don't know already then see if you can guess before i finish explaining this clever scratch trick we start with the bitmap font sprite i'm only sizing it to 800 so that you could see it in this video but ah where is that sprite when we need it ah there it is scratch has fenced it into view ensuring it never goes fully off-screen this is a real pain for making scrolling games but right now i guess we can see the logic in it but this fencing does have another use watch this bring in a set x block hey what such a tiny block ah hold on yeah set this sprite x's position to negative nine nine nine nine and of course rather than going way off screen to the left the sprite is fenced in and is just visible on the left margin so next up we'll repeat until we are not touching the edge of the screen while slowly moving it back to the right with a change x by one run that and the letter slides expectantly into view cool because if we can align a costume to the left edge of the screen then moving the costume half a screen width to the right change x by 240 that will end with sprite aligned from the midpoint of the canvas haha that doesn't tell us how wide the costume is but it does do something else remember how when splitting up these costumes we skipped the step where we brought them back to the center well look now we've managed to adjust the position in code to achieve this same result we can check it out for the letter w which is far off to the right instead and yep it still finds its way to the middle of the screen super we should make a record of this position then make a new variable naming it uh xx for this sprite only then set x x to the current x position recorded so what happens if we duplicate that topic of code strip off those final two lines but instead we move to the far right positive 9999 and of course remembering to switch the change x by to negative one this will move us back in to the left running that and yes as expected the w ends up nestled against the right hand edge of the screen but wait this is really interesting why okay take a look at this we originally managed to position the w sprite aligned to the left of the screen then we added 240 to position it offset from the middle recording this position in the variable x x can you imagine where this letter would be if we added a further half screen width to it well in theory that would take it all the way to just off the right hand edge of the screen and this is exciting because if we compare that position to where we just ended up can you tell me what the relative distance between these two letters is yes it's exactly one full width of the w costume that means we can now calculate the width simply by taking the left position away from the right that is xx plus 240 subtract the new x position and apparently this w has a width of 64. wow cool let's try a thinner letter how about a j run the measuring script and 24 yes that sounds right and so we found a way to successfully measure the width of our costumes our next job then is to automate the measuring of all the costumes in the font sprite let's begin with some initialization when green flag clicked switch costume to a and then set size to 200. that's a good size for this pixel font now to ensure this all runs nice and fast make a new custom block calculate letter sizes and of course tick to run without screen refresh we're going to need to use lists to store our font data the first is named underscore width i use underscore to mean it's a special list of data that is not going to change once set then ensure it starts empty with a delete all of underscore width the next list is named underscore offset x again for this sprite only and again we delete all from this list 2. so we need to loop through all our costumes but how do we tell scratch how many costumes that is another trick then switch costume 2 and now the first costume number is costume 1. to ensure scratch knows this is a number and not a name i'll use the maths round block here but rather than setting it to 1 put a 0 in there instead what yeah this is cool if i run that check out which costume it actually selected the costume before the first costume is the last costume it wrapped around cool costume 94. so now we know how many costumes we have 94. therefore we repeat for costume number that's 94 times one for each costume perfect now not forgetting we are still set to the last costume place a next costume block as the first block within this loop now as we go around we'll progress on through all the costumes set y to zero we must be far away from the top and the bottom edges of the screen for this to work next up with an if else block drop in an equals what is the length of now not the costume number but the costume name of this sprite okay it's one why do we want to check if the length is one well all letter costumes have to have a single letter as their name to work a b c so any costume with a name longer than one letter can be ignored cool now we get to drop in our costume measuring script from earlier put it in the then branch of this if next we need to ensure we record our costume size and offset data in the lists so add the variable xx to the offset x list this is the offset to bring the letter into the center of the screen next we're going to add to the width list and that's this little beauty here the xx plus 240. subtract the x position giving us the calculated width of the costume splendid we are nearly there guys what about the else branch this is here for any costume that is not a letter in that case we just can't ignore them as the list needs to account for every costume so that the list item numbers match with the costume numbers so we just need to duplicate the two ads but change them to just add blank values to our list that will do just fine wow this script has got quite long really i hope you got it all it's about time we gave this a run just scroll over to the when flag clicked hat block and drop in a call to calculate letter sizes awesome here we go then as you can see we have these two empty lists ready to be filled with values so click the green flag oh yes this is looking really good both lists have 94 items added to them and the figures are looking well from what i can tell in the right ballpark you'll note that costume 1 was not a real letter so that's why it's been set to blank and we do have the full 94 costumes so oh yes finally it's time to begin building the actual text engine woohoo now we are going to need to be able to switch costumes to a letter i'll just pick any letter and then look up its width and offset well here's the offset x list but how do we go from costume to list item costume h is costume number 9 so looking in the list item nine gives us the offset for that letter in that case we can just use the costume number yep that's nine and squidge it into the item block here item nine of offset x is indeed 263 as shown in that list great and the width of the h letter that would be 10 perfect nothing can stop us now let's make a variable txt text for this sprite only we'll use this to hold the text we want to display set it to hello world i know it's so cliche next we can reuse the xx variable to hold the position of our text on the screen set it to zero the y position we can just use the set sprite y2 yeah zero as well so we need to loop through the letters one at a time we'll need another variable to keep track of our progress name it simply i for index for this sprout only did i say sprout we're going to set i to zero before entering a repeat loop and we repeat for the number of letters in our text variable length of the text variable right away we can change i by one so i changes from zero to one ready to process our first letter we need to switch to the letters costume and we can get the name of that costume using the letter of block on the right drop in the text variable the text we're trying to display and we want the letter at position i now this is funky if we run that script you can see it rushing through the letters of hello world but the letters are all over the place but not to worry that's what the offset list is there to fix set the sprite's x position 2 and then we need an addition block and the position we want to display the letter is at x x which at the moment is 0 the middle of the screen but to account for any misalignment we now need to add in the costumes offset x hold on we have that just up here item costume number of offset x if we run the script again now we can see that all the letters are nicely appearing in one location well that is much better can you sense victory it's coming i can almost taste it at this point we have a decision to make once we switch to the required letter and have it positioned we need to leave it behind before moving on to the next letter to do this we have two options to create a clone or to use the pen extension to stamp it onto the pen canvas for now we'll use a clone the benefits of clones are that they look much nicer for vector fonts but also they are easier to have appear in front of everything else in your project the downside is that they use up lots of our valuable clones so this can be a real humdinger of a decision to make right the first letter sprite is cloned but we need to move xx to the right by the width of the current letter easy change xx by the item costume number of width list okay are we there smash that um script right this is looking a bit messy shouldn't there be a little bit of space between letters i guess we forgot to account for that no problem come back over to our calculate letter sizes script down here where we record the width of each costume we'll add a small amount extra to account for the spacing between letters use an addition block to add an extra two pixels click the green flag to recalculate the font sizes and then try running our display script again oh man still not quite the perfect text engine we were anticipating i spent a lot of time looking into what the problem was and the answer turned out to be another scratch bug or at least a quirk as we increase costume sizes to 200 and above the touching blocks start to misreport their collisions leading to our clever sprite size measurements being less accurate as such we will have to try adding four to the width instead to mitigate this issue run the project and click our display script there and that is much more like it perfect spacing yes hey what's up with this o in the middle of my hello world that should have been a space right it's showing as an o because that was the last letter before the space and the costume didn't change and why not because letter six is a space character and we don't have no space character boy what i suggest is that we make one i'll just repurpose this first costume one and rename it as a single space there yep scratch is fine with that too if you don't have a costume one free like me then just make a new costume and name it space doesn't have to be costume number one for this to work however there is another problem how wide is an empty space character hmm if the costume doesn't have a width then we aren't going to get much of a space between our words so just how wide should a space be i seem to remember someone telling me that it should be the width of the letter o well in that case let me copy the costume of letter o and paste it up here in the space character sprite run the project and click that display script again yeah okay it's hard to tell if any of that worked since it was already showing an o in the place of the space before let me just paint it red yeah there now we can see the difference good of course we don't want this red o to remain visible and in fact why are we wasting a clone on this anyhow so to kill two birds with one stone let's skip doing that drop in an if block right after switching costumes but carefully move the change xx to outside this if we still want to have a gap even if we don't want to display the space the condition is not equal comparing the costume name to a space character if the costume name is not a space then set the x position and clone perfect we don't need to recalculate the font sizes so just hit the stop button to remove all the clones and then click the display script again and yeah baby hello world not bad at all if you want less space between the words just reduce the width of that red o and we can write any text we want even include the current scratch username that will be handy now you may have noticed that the letters are appearing a little slow on the screen well this is something you may like or you may need it to be super quick either way let's make a new custom block to wrap this all up in name it write with an input text another label at x an input x and one more label y and another input also named y cool i'm going to try running without screen refresh we can attach that define block to the top of our script and now we just need to plug in all these inputs together we'll set txt text to the text input and we'll set xx to the x input and finally set the y position to the y input shall we test this baby out drop some text into the left hand input of the new right block and position it at 0 0 for now finally before we test this we should deal with how to clear away the previous text clones otherwise we'll keep writing one on top of the other and in the end run out of clones we'll use a when i receive block with a new message named clear font letters and all we do in here is delete this sprite simple then before we write out our new text we broadcast clear font letters let me just move this over to the left setting x to negative 100 and now to see it work click the broadcast and write script boom that was lightning fast just what i hoped a little more text then lower down the page no problem at all well that's awesome and i still have loads more to share with you but this video is getting super long so i'm going to have to split it into two if you want to try different font sizes then no problem just remember you may need to play around with how much you add to the width to get the letter spacing right also if you fancy switching out the create clone block for a pen stamp block then that will also work fine too you just need to remember to erase all instead of deleting clones to clear the screen anyhow i'm rushing to the end now i do hope you've had fun watching me spend countless hours cutting out letters but the end results are going to be so worth it i can't wait to see what you guys have made with this don't forget to submit your projects to the studio linked in the description under the video the next episode will stretch what we've done here to amazing new heights with word wrapping dialogues for my rpg and more so if you haven't already subscribe to this channel so as not to miss my next exciting episode oh yeah and please smash the like button too so that more people get to enjoy the video that's how it works in youtube land and i appreciate it so thanks for watching have a great week ahead and scratch on guys [Music] you

Channel: griffpatch

Views: 427,545

Keywords: block coding, costume size, griffpatch, how to make a game in scratch, how to make a text engine in scratch, how to scratch, learn to code, scratch, scratch coding, scratch coding games, scratch coding tips, scratch coding tutorial, scratch costume size, scratch dialog, scratch font engine, scratch game, scratch letter costumes, scratch programming, scratch text engine, scratch text engine tutorial, scratch tutorial, scratch tutorials, upload costume in scratch

Id: BAy0SUnB1J0

Length: 39min 44sec (2384 seconds)

Published: Mon Jul 25 2022