[Intro] 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 Centre. 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 following 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 yeah, I’ll even try swapping out to another of those
fonts from episode 1 – How hard could it be…? and boy does it looks real sweet!
So what are we waiting for, guys – Let’s get Scratching!
[Bug Fix – Costume Measuring / Flashing] And here is were we left off in episode 1.
As always, I advise we save this is a new copy because this is episode 2.
Now remember that bug we experienced in episode 1, while trying to measure the width of the letter
costumes, Scratch failed to bring the letter fully on screen. This resulted in the widths 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, ITS PERFECTLY ALIGNED ON SCREEN! CRAZY! Go
figure. You can see the difference. So, let’s drop a hide block in the “when flag clicked”,
just before the calculate letter sizes block. 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 slow rendering of text, that is, without the “run without screen
refresh” ticked. – Double cool! [Bug Fix – Letter Spacing]
So, with our costume measurements accurately calculated, the result is that the spacing
between letters will now appear too spaced out. Ok, so find the “calculate letter sizes” script,
and scroll down to the “add to _width” list block. If you remember, we added a bit extra to this to
account for that measurement bug. But, rather than just changing the value, let’s take the
opportunity to enhance it with a calculation to let spacing between letters scale with the size
of the font sprite size. A font at 200% should have twice as much gap added than one at 100%.
To avoid the line getting to long with the math, We’ll split it up, setting the variable i to this
(xx + 240) - x position. But leave off the + 4. 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. Ok. 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 100. Splendid. Now for a 1 pixel gap between letters
sized at 100%, we enter a 1 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 400%, the gap of 1 scales up too,
and the letters remain evenly spaced. That’s much better.
[Bug Fix – Handling Unknown Letters] 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 “é”. My font doesn’t currently support these extended characters.
Running that now, and you’ll find in place of the unknown special e, we find the previous
letter gets duplicated, just like it did for the space letter as we were coding things up.
Find the define Write script. My preferred solution to this is to just pop another
switch costume in before the first, 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.
[Make text follow mouse] Ok, So on with the tutorial!
How about we make things more dynamic – Getting the text to follow the mouse cursor!
Find the when flag clicked 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,
for the new event, named “Test Script”. Just scrolling over to that test script
now. Here we go. So, the “broadcast to 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 the project, just stop the project, and then
click the green flag once. Ta-da! Brilliant. Oh now, if you are only seeing a single letter
appearing, then that’s because your define “Write” script has not been set to “run
without screen refresh”. For the remainder of this episode I’d advise you tick that box.
Next, let’s have the text follow the mouse. Pop in the mouse x & mouse y as the inputs to the write
block. Oh yeah! Look at this!!! The clones are being deleted and recreated at the mouse pointer.
And for the second line of text, use mouse x again, but we’ll need to subtract an
amount from mouse y to make it appear below the first line. Say around 30?
So that works! – But it would be better if we formalised 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 – LINE HEGHT.
And where do we set this variable up? Best place right now is in the Calculate Letter Sizes script.
Set LINE HEIGHT to… and again, this wants to scale with the sprite size.
So, multiply. Then you need a 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 for this font? Click the
green flag to confirm, and yep that looks good! We can confirm that all the gaps,
and line heights are indeed scaling with font size… So this is great, much more flexible now.
[Try a different vector font] Hey, were any of you wondering how this
looks with a vector fonts? 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 it drag just the font sprite into my backpack.
Then! Back in my episode 2 project, I’m just going to save as a copy and name it
Native font episode 2 ha. Better safe than sorry. So import the vector font sprite.
And there’s no scripts here. So we need to bring them in. It’s faster
to copy the 5 or 6 scripts over than it is to re-import all 90+ costumes right!
I like to do it in batches,
a column of scripts at a time. 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… umm… 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 spacing between the letters. We
actually need to use a negative -2 gap to bring them close enough together.
The LINE HEIGHT is also too small. 24 will give better results.
Then, we can drop the costume size down to 100%.
Oh yeah, now we’re talking! Just play with these settings to get the font just how
you want it – right?! [How to Centre Text]
And now for the meat of this tutorial. The most asked question since episode 1 has been, “How
can we centre text”. Good question! At present the text is left aligned at my mouse cursor.
What if I want it beautifully centred? Very useful in a lot of scenarios.
To centre text, we want half the text to be 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 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 width, and start it off at 0. No width.
Then remove the set y position – There will 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 at a time, adding up each letters 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! Sounds convincing.
And “AA”, is 30… Double, perfect. A full stop – 6. Any string should work.
So with that in hand, let’s see if we can centre some written text shall we.
We want the alignment to be optional, so edit the Write block, adding the label Align,
and a text input also named “Align”…
Ok – 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 align is equal to “C”, for centre. 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 centre it. So set xx to,
the x input, subtract,
Half of the width, that is “width divided by, 2”.
Just link the script back together, and then, in the original Text Script,
I’m going to set align to C for both of these.
And Smash that green flag!! Oh guys – this is so beautiful! Both lines are
perfectly centred on my mouse cursor… Isn’t that great?
Oops, 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 right align? We might as well cater for that too.
Duplicate the if else, and we’ll replace that set xx with the new IF ELSE stack.
The second align check will look for an align of “r” for right alignment. And this is
even easier than centring. We subtract the entire width from x. Like so.
It can’t be that easy? – Shall we give it a test. Left aligned, centred, and now right aligned…
Amazing work, that will come in so handy! [Outro]
So, we are working towards creating these awesome paged dialog boxes. The next step will be to solve
how to correctly handling 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, have a great week ahead, and Scratch on guys!