Animate Your Words #1 | Scratch Tutorial

Key Takeaways

hello fellow scratchers have I got something exciting to share with you today something I know a lot of you will find super useful in your games finally a custom Dynamic and interactive text engine specifically for use in game dialogue and you can plug it straight into your games check out this simple example the actual game excluding backpack text engine is only 34 blocks that's for movement and interactions including the multicar branched dialogue that changes whether your far away or close to Nano and look at these funky effects so it's all controlled from the first Sprite these are the movement scripts and when you press or click the mouse we simply add the required dialogue to our script list and broadcast to have the dialogue text engine Sprite take over from there so cool so who's with me on this let me see your yeses in the comments under the video and let me know if you already have plans for what you're going to use this with now of course the biggest issue with creating text engines in scratch is creating the font yeah we still need to get every letter in the extended alphabet as individual costumes in one of our Sprites that's just the way it's done I'm afraid now if you are quite happy to use this same one as me then you are in such luck you'll find a link to my starter asset project in the attachments under this video it's here on the Griff patch Academy scratch profile in it are the basic resources you'll need to make a fast start including a full 95 or 96 letter font and a sample dialogue Sprite so go ahead and remix this project now however let me begin with a super quick walk through how I got the font costume in here just in case you want to bring in your own awesome font designs we would begin by creating a new Sprite for the text engine and we create a costume for each letter starting with not an a an O I am simply using scratch inbuilt font for convenience and I snap it directly to the center of the canvas like this now this is important you want every letter to be centered horizontally like this but the tricky bit is that the font's Bas line that is the imaginary line that each letter sits on that must be the same for every costume you import or create luckily that's super simple when you are using a built-in font as all the letters naturally snap to have a matching Baseline too then we name the costume and this is actually not an O as you thought but a space I know right see how I did enter the space as the costume name so it just happens that an O is a great size to represent the space character let's color it blue so that we can tell it's special and now all the following costumes they are the real deal we name the first one the lowercase a change the costume to be an a to and we'll color this one red yep y from now on make sure all your letters are pure red and crucially snap it back to the center if you skip this step you'll regret it later as all your letters will be higgledy piggledy and now repeat for b c d e all the way through to zed and then are we finished no way we have the capital letters a to zed naming the costumes upper case a to zed as well and now have we done not at all numbers and then punctuation and symbols too like I said 95 or six in all in this character set that I could find on my keyboard still all done in under 15 minutes so not too bad and so whether you remix my project or you're working from scratch you're now ready to start work on our epic text engine guys let's get scratched in so having remixed my project you should be seeing something a bit like this here's the text engine Sprite and I'm going to size it up to 400 so that we can see this letter O which of course is the space let's change the costume with a switch costume block to an a there we go much better so the basic way a text engine works is we either stamp or clone a Sprite of a letter on the screen so we'll use a clone in this case and then we move a bit to the right say I don't know 25 and then we can click click click click this script to get lots of A's in a row oh they're a bit tightly packed we might have to play around with this change X number to find out how far apart these A's should be hm I can also click the green flag to reset all the old clones so that there's a Fresh Start 45 that's better they're a bit spaced out now but as you can see there's this problem that it's hard to know exactly how wide a letter is and it's even worse when you look at things like letter L's you see our chosen font is a variable width font so some letters are very narrow and some are really wide and we have to cater for all of that but we don't really want to have to enter all these widths by hand that would be a real real pain because there are so many letters to work through so instead what we're going to try and do is create a script to calculate the width of each letter so that we don't have to do it manually but how exactly do we do that with scratch well there's actually a really quite clever trick imagine you have a letter and we move it as far left on the stage as we possibly can then we'll move it slowly to the right until it's no longer touching the left edge of the screen and at this point we know the middle of the f is now half the width of the F away from the edge and by definition we then know how wide the f is it's the X position of the f plus 240 that gives us half the width of the F okay let's code this up start by dropping in a goto XY we're going to move this F far as we can to the left so an X or negative 9999 and a y of zero keep it centered vertically and then click that block and there's our F fenced in on the left hand side of the screen just poking out now we need to move it to the right slowly so repeat until the f is no longer not touching Edge drop that block in there so until it's not touching the edge we want to move to the right so we need to change X by one just one pixel at a time and click that block stack and see the F Glide in gracefully until it's just resting against the edge very nice so if our math is correct all we need to do is add to this x position the position of the left margin which is 240 and scratch reports we have a half width of 13 pixels success so shall we store this in a variable make a new variable named width and make it for this Sprite only okay and then set width to the exposition plus 2 40 and drop that on the bottom of our script click that now and width gets set to 13 however a variable only gets us so far we need to record the width of all the different letters so we're going to make a list name it font halves and make it for all Sprites because there's going to be 96 different widths for each of the different letters and we don't want those copied across all the Clones of every letter that we write to the screen okay so before we start measuring the width of all the letters let's delete all all of the font halves and then we want to Loop through from the first to the last costume but for that we need to know how many costumes there are in this Sprite and there's a trick to find this out all we need to do is switch to costume and then drop in a round block what we're actually doing is switching to costume zero which is before costume 1 and so it wraps around to the last costume if you look down in our costumes you'll find this is the last one in my Sprite now it might be a different one for you if you remix my project but don't worry about that the important thing is that we're now on the last costume because now if we use the costume number block it lists the last costume number and that is the number of costumes in our Sprite perfect so repeat once for every costume in our Sprite each time changing to the next costume and because we started on the last costume then straight away next costume takes this onto the First costume yeah look at that running through all the costumes that's really cool so let's plug in our a measuring script pop that underneath the next costume block and this will measure the width of the costume and then we need to put it into our list so we need the list blocks here we go add to list and it's the font half list and we're going to add the current width to the end of the list so now click the script and watch it bringing the letters in one by one measuring each of the wids and it's a bit slow so we can run this in turbo mode hold the shift button and press the green flag and woo it goes through all of the rest letters in no time at all 95 of them here maybe 96 if you remixed okay so that's great but we don't want to have to run in turbo mode so turn that off again shift click the green flag and we'll use a custom block to make this run fast but just before we do let me just switch back to the F costume because these measurements are for really really big letters if I happen to stick the size back to maybe 85 which is a more appropriate size letter and then we were to run these scripts then the measurements become really small and there's not a lot of difference between them 1 2 3 and four and it doesn't reflect a very good accuracy of measurement so it's better to be able to record the measurements with a big costume even if we're going to use a small costume for the actual letter display so make a new block naming it measure font and then I'm going to have a hyphen and zoom colon and then I'm going to add an input of Zoom this is how much bigger we want our letters to be when we're measuring them and then another text label adjusted by and another input named adjustment we'll use this to tweak the distance between our letters and then we run without screen refresh so that it runs quickly without the turbo mode being enabled brilliant attach that to the top of our scripts so I said we're going to enlarge our letters before we scan them so let's bring in a set size two block and drop in a multiply and then we multiply the current size by Zoom so if Zoom is two the letters will be twice as big but it's important that we restore the size back to the small size again afterwards so drop another set size at the bottom and this time we're going to divide the current size by Zoom once more returning the Sprite to its original size before we came into this custom block now what about the widths that we're recording they too will be blown up by this Zoom Factor we need to divide those values too so we need to duplicate The Divide take away that size and drop in the EXP position plus 240 and divide that by Zoom too so that they're also scaled by Zoom when we record them except I also said we're going to adjust the numbers by a small factor and we can do that too by adding adjustment to width before we record it in font halfes drop that back into the ad block and now we can test this out and see whether it's working as expected so drag us into some free space and we want a new measure font block we're going to zoom by two and just leave the adjust blank for now and click the block aha do you see the difference we've managed to record our widths in much more detail not only is it now integer 2 three fours and fives but we've also got the fs the in between pixels and that will make a big difference when we're laying out our letters giving us much more consistent space cool so the measurements are almost done but there's one slightly weird thing that we have to do before we continue and that is we've discovered that if you hide the Sprites before taking measurements the measurements actually come out different to when the Sprite is shown and now this is really weird I'm not quite sure why this is if I show them again and run it again you'll see the values are different why being visible or hidden makes any difference to the width of a font I have no idea but anyhow we're going to hide them before we do our measurements so drop that in before our measure font and now because our measurements actually come out slightly wider we're going to adjust our letters to be slightly closer together by minus 0.5 that takes away half from all of our measurements and I'm happy with that so let's get this to run when the green flag is clicked when green flag clicked hide and measure the font and as I said I want my font to be size 85% so I'll drop that in there too for consistency and then we can click the green flag all our font gets measured but I'd really like to know whether these widths are correct or not so let's go back to that little script we wrote right at the start switching to an F cloning and then moving across by 45 now we're going to move across by the width of the letter F but hold on which of these font halves is the letter F Well costumes link directly to font halfes by the costume number whatever costume number f is that is the item number in our font half's list so bring in a costume number there we are 33 so let's f is item number 33 in this list which is 4.5 okay then so let's get the item of font halfes drop in the current costume number and that should be 4.5 tell you what let's assign that to the width variable set width right after we switch to costume F and drop in the item costume number of font halves that gives us the half width of this letter and now rather than just changing X by 2 * width what we're actually going to do is do two change X's by and put one of them before the Clone and one after and this is actually how it should work because the letters are centered around the half so we need to move half forward then clone then half again but don't forget that our clones start hidden so when I start as clone show and then we can click our script and see whether the fs look like they're lining up the right width apart and they really do let's try a small letter like I and try again and these ones are closer together that is looking Splendid let's try some more letters X's yes anything else how about a w cuz that's one of the widest letters yes to my eyes that is looking really good however since making this video I have switched the starter project over to a new and exciting font and I found that its letter spacing can appear a little bit squashed so to fix fix this we need to find our when green flag click script and we would be thinking to change the adjustment value to push the letters further apart however hold that thought because I also notied that although we are setting the font costume size to 85 here look at the font size reading down here what the when there's a discrepancy you should always take note this can happen when we try setting the Sprite size for a costume that won't allow it cuz sometimes the costume we've got selected is really small already so we have stumbled upon a little bug the fix is to ensure we switch to a large enough costume before setting the size so let's switch to the letter a right before setting size to 85 but if we click the green flag this alone is not enough to resolve this sizing issue we're still at 100% why is that well because there's another place we are setting the size and that's right down here in the measure font block right at the bottom so once again before setting the size drop in a switch costume 2 and switch again to the letter a right so now we click the green flag once more and this time ah the Sprite is indeed set to 85% yay the result is that if we now reclone all those letters again our Tech spacing appears much improved but I feel for the optimum facing an adjustment of zero after much more Sprite clicking gives us the best results right now so what next if we were writing just a generic text engine I would now plow into writing the scripts that output our beautiful sentences however we are not doing that we are writing a dialogue text engine so a little bit more thought is going to come into this and that is the text needs to be able to fit inside this dialog box wrapping around onto the next line and waiting for user input if it overflows the bottom so we're going to stop here for today because I want to give you time to get your fonts in order before we plow on ahe with some serious but fun coding however if you watch my previous text engine tutorials you may be wondering why this time I got you all to go to the trouble of centering each and every letter costume horizontally well that's because having the letters centered makes it so much easier to then apply cool effect text to our letters later on like shrinking and growing and rotation giving us loads of cool possibilities for making our text engines all the more exciting now if you're a bit stuck on how to bring in your own font into scratch I'd advise you watch my original coded text engine tutorial as the first episode covers importing your own fonts in more detail however this time unlike in that other tutorial we do have to ensure we Center each letter in the costume editor horizontally but we also line up the baselines the same across all the costumes however as I was wrapping up this episode I decided that all this fiddly work importing fonts was far too much hassle so I am delighted to be able to bring you a really Nifty little tool that will make light work of the whole process it's just so cool you'll find this new tool at utils dogri patch. Academy but it's linked from the original remixable project and under this video let me give you a quick walk through well first off we're going to need a font that we're going to import into scratch this can be a true type font or an open type font file the best resources for these is Google fonts so there's a link right here to that site now we just need to find a nice font that we want to import gosh there are so many to choose from wow okay I'm going to go for this one squad one click into the font and then click get font and we're almost there we then have to click download all to actually get the file however as that implies we can actually download more than one font at once if we want so we can pick another font and then it gets added to our basket don't worry it doesn't cost anything and then we click through to download all and the fonts get exported as a zip file and downloaded to our local device in this case my laptop in the downloads folder so we can then return to the Griff patch font converter and then in import and convert those fonts click choose file and select the font we just downloaded from Google that zip file now because it was a zip and contained multiple fonts they all get displayed so we can pick the one that we want to convert first we'll begin with the Francis one regular so then click create a new Sprite and it doesn't take a second and we can save that new Sprite file to our computer nice so each font that you create will be saved in its own Sprite file like so but finally this is the magic come back into scratch and in our project click to upload a new Sprite and then we can choose our new Sprite 3 font file and if we wander into the costumes tab you'll be amazed to find all the costumes all laid out individually centered and with perfect Bas lines man what a Time Saver and look here's that other font too wow I cannot wait to see some of these fonts in action so lastly now you may be wondering what if you've already begun scripting up this font Sprite and you don't want to lose all those precious scripts when you bring in the new font well no problem I have got you covered look here are some scripts that I don't want to lose all we do is export this font sprite from scratch saving it to our local device then we pick our Google font load it up into the font converter ah note that some fonts have a lot of different styles inside them we just want the regular font which is at the bottom then rather than creating a new Sprite we are going to modify an existing Sprite the first step is to open the font Sprite that we exported from scratch and then this gets updated with the new font costumes and we can save it back to our device again using the same name if you want and then and this is the slightly scary bit make a backup if you're unsure we delete the text engine sprite from our scratch project and re-upload the modified text engine Sprite that we just created in the converter and there you see the scripts are still there but the Sprite costumes are all gorgeously replaced with the Google font woohoo how cool is that well I hope you appreciate this bonus gift I bring you this week but I think it was worth the extra investment of time since it will save us all loads of time going forward and perhaps I might make a video showing you how I made this and it's really cool but that is it for today I'm really looking forward to episode 2 where we're going to get the text writing out within the bounded rectangle of our dialogue boxes so cool until then have a great week ahead and scratch on guys [Music]