TEXT ENGINE #2 | Centering Text & More | Scratch Tutorial

hello fellow scratchers today we're focusing on adding text alignment to our scratch text engine that's to the left yeah we did that already the right and the center this will get us one step closer to building those awesome scratch dialog boxes also in this episode i'll let you in on how to make the text follow the mouse cursor so cool and we'll update the engine to include scaling of letter spacing and line height along with the chosen sprite size and yes i'll even try swapping out to another of those fonts from episode one how hard can it be and boy it does look real sweet so what are we waiting for guys let's get scratching and here is where we left off in episode one as always i advise we save this as a new copy because this is episode two now remember that bug we experienced in episode 1 while trying to measure the width of the letter costumes scratch failed to bring that letter fully on screen this resulted in the wits being reported too narrow well i'm really excited to announce the scratcher mine greg huge respect to you discovered a fix for this bug so yeah here the costume is left slightly off screen well watch this if we hide the sprite first before we run the very same movement script now when we show it again it's perfectly aligned on screen crazy go figure you can see the difference so let's drop a hide block in the when flag click script just before we calculate the letter sizes but since the font is now hidden we'll have to show the letters again as they are cloned that's easy enough when i start as a clone show the double benefit of this is that it also fixes another bug where you might have seen lots of flashing letters during the slow rendering of text that is without the run without screen refresh ticked double cool so with our costume measurements accurately calculated the result is that the spacing between letters will now appear too spaced out okay so find the calculate letter sizes script and scroll down to the add to width list block if you remember we added a little bit extra to this to account for the measurement bug but rather than just changing the value let's take the opportunity to enhance it with a calculation to let the spacing between letters scale with the size of the font's bright size a font at two hundred percent should have twice as much gap added than one at one hundred percent to avoid the line getting too long with the maths we'll split it up setting the variable i to this xx plus 240 take away x position but we'll leave off the plus 4 and then drop the i variable into the addition block below cool so i want this gap between letters to be easy to change edit the custom block adding an input named gap okay drag that input down here and we need to scale the gap by the sprite size multiply by gap and on the left a divide dividing the sprite size by one hundred splendid now for a one pixel gap between letters sized at one hundred percent we enter a one in here run the project and then click on the display scripts over here there nice and clean you can play with this gap to space things out more but importantly if we use a bigger font size say four hundred percent the gap of one scales up two and the letters remain evenly spaced that is much better another fix that is worth doing now is to handle unknown letters in our text see what happens when i change this e for an accented e my font doesn't currently support these extended characters running that now and you'll find in place of the unknown specially we find the previous letter gets duplicated just like it did for the space letter as we were coding things up in the first episode find the define write script my preferred solution to this is just to pop another switch costume in before the first but this time setting it to the space costume then if the next costume doesn't exist scratch remains on the one it was already set to and doesn't change therefore it will remain a space and that that is a much better outcome for us cool okay so on with the tutorial how about we make things more dynamic getting the text to follow the mouse cursor find the when flag click script let's drop in a forever loop at the bottom to make the text move we first have to delete the existing clones do that with a broadcast to clear font letters and then to display the letters again add another broadcast right afterwards and the new event is named test script just scrolling over to the test scripts now and here they are so the broadcaster clear isn't needed here now it moved over into the forever loop now we trigger these scripts off a new when i receive test script cool no more searching around for scripts to test this project just stop the project and then click the green flag once ta-da brilliant oh now if you are seeing only a single letter appearing then that is because your define write script has not been set to run without screen refresh for the remainder of this episode i'd advise you to tick that box next we'll have the text follow the mouse pop in the mouse x and mouse y as the inputs to the right block oh yeah look at this the clones are being deleted and recreated at the mouse pointer and what about this second line of text we use a mouse x again but we'll need to subtract an amount from the mouse y to make it appear below the first line say around 30 so that works but it would be better if we formalize this measurement as we'll want to use it again later for sure make a new variable naming it line height for all sprites then we can use the mouse y subtract line height and where do we set this variable up best place right now is in the calculate letter sizes script set line height 2 and again this wants to scale with the sprite size so multiply then you need to divide on the left again dividing sprite size by 100 you'll see that a lot and our line height goes on the right 15 should do the trick for this font click the green flag to confirm and yeah that looks good we can confirm that all the gaps and the line heights are indeed scaling with font size so this is great much more flexible now hey were any of you wondering how this looks with a vector font don't feel you need to do this at home you can just watch me but it's useful to know how to switch the font over if i find the sans-serif font project on my tutor account this is the one that uses the built-in scratch font and what i'm going to do is drag just the font sprite into my backpack then back in my episode 2 project i'm going to save as a copy and name it native font episode 2. better safe than sorry so import the vector font sprite and there's no script here so we need to bring them in it's faster to copy the five or six scripts over than it is to re-import all 90 plus costumes right i like to do it in batches a column of scripts at a time and then rearrange to keep the order the same once done just delete the old font sprite and run the project so there you go this is what it looks like using the built-in scratch font obviously the costume sizes i used here must be quite a bit bigger than the bitmap one but also you'll find the built-in fonts have much more space between the letters we actually need to use a negative negative 2 gap to bring them closer together the line height is also too small 24 will give better results then we can drop the costume size down to 100 oh yes now we're talking just play with these settings to get the font just how you want it right brilliant and now for the meat of this tutorial the most asked question since episode 1 has been how can we center text good question at present the text is left aligned at my mouse cursor what if i want it beautifully centered very useful in a lot of scenarios to center text we want half the text to be on the left of the mouse and the other half on the right so if we can measure the length of the text first we'll then just need to position it all left by half of that width and job done find the write script we want to offset this x position but first we need to calculate the width of the text make a new custom block naming it get width of text with an input text and run without screen refresh please the process of getting the width is actually very similar to the process of drawing the text in the first place so duplicate those scripts into the new define script however there are some changes to be made rather than keeping track of the x position in xx we want to keep track of the text's width make a new variable width for this sprite only change the xx to be width and start it off at zero no width to begin with then remove the set y position there'll be no actual drawing done in this script only finding the widths as such careful not to remove the change xx block we can throw away the if clause as you can see that's only to clone the letters lastly switch this xx for the new width variable beautiful this script now loops through the text a letter to time adding up each letter's width as it goes we can test that it works just bring in a get width of text block and try it on the letter a the result is shown in the width variable reporter 15 pixels for mine sounds convincing and a is 30 double perfect full stop six any string should work so with this in hand let's see if we can center some written text shall we we want the alignment to be optional though so edit the write block adding the label align and a text input also named align okay we start writing out text from the position xx we want to change this depending on the align value with an if-else block after setting txt check if a line is equal to c for center if it is then we get the width of the text from the txt variable remember moving back by half this width will allow us to center it so set x x to the x input subtract half of the width that is width divided by two just link that script back on and then in the original text script i'm going to set a line to c for both of these and smash that green flag oh guys this is beautiful both lines are perfectly centered on my mouse cursor isn't that great oops well we appear to have broken the left align l doesn't work that's because i left out the default set xx to x there but not so fast what about writerline we might as well cater for that too duplicate the if else and we'll replace the setxx with the new if else stack the second line check will look for an align of r for write a line and this is even easier than centering we simply subtract the entire width from x like so it can't be that easy shall we give it a test left line centered and now right aligned amazing work that will come in so handy so we are working towards creating these awesome page dialog boxes the next step will be to solve how to correctly handle text as it overflows off the edge of our page the next episode will therefore cover word wrapping and that is going to be such fun i do hope you are enjoying this mini series if you are then please smash that like button and don't forget to subscribe to the channel not to miss the next exciting episode the same scratch studio is still open so do submit your updated projects there so we can all see them and join in the fun right that's all i've got time for thanks for watching and have a great week ahead and scratch on guys you

Channel: griffpatch

Views: 85,892

Keywords: how to make a text engine in scratch, scratch text engine, scratch dialog, scratch coding, upload costume in scratch, scratch coding tutorial, scratch text engine tutorial, scratch tutorial, scratch tutorials, how to scratch, letter clones, costume size, block coding, scratch, scratch font engine, center text in scratch, text alignment in scratch, scratch center sprite, scratch vector font, scratch font, scratch text, scratch text width

Id: lhHLAQSzQvo

Length: 14min 51sec (891 seconds)

Published: Mon Aug 01 2022