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

How to code a Text Engine in Scratch, using either clones or pen stamping. We will be working towards making in game dialog boxes, and pages of text, but can also display simple usernames or cool text.
In this tutorial we learn where to get fonts from, how to get them into Scratch, how to process them ready for use in our games.
We learn the secret to calculating the size and offset of a costume in code. We make use of Scratch lists, and learn how to loop through all the costumes, and we finally begin coding the text engine itself.
We look mono-spaced, and proportional fonts, Serif and Sans-serif, talk about letter widths, and letter spacing, and work around some Scratch bugs!
👀 Episode 2 - • TEXT ENGINE #2 | Cente...
👀 Episode 3 - • Perfect Word Wrap | Ep...
🚀 Boost Your Creativity with Griffpatch
The Griffpatch Academy will take you from "Gamer to Game Creator"
Learn more at 👉 griffpatch.academy 👈
😺 Scratch was developed by the Lifelong Kindergarten Group at the MIT Media Lab. See scratch.mit.edu
💾 Font Resource Websites
Cava's Pixel Resource - caveras.net/
Google Fonts - fonts.google.com/
✂️ Image / Sprite sheet Splitter
EZGif - ezgif.com/sprite-cutter
Google Font to SVG Path - danmarshall.github.io/google-...
🐱 Scratch
Scratch Font Studio - scratch.mit.edu/studios/31906...
Bitmap Font - scratch.mit.edu/projects/7166...
Sans-Serif Font - scratch.mit.edu/projects/7171...
-------------Video Chapters-------------
0:00 Intro
1:14 The Typeface (Font)
2:22 Option 1 - Native Scratch Fonts
5:58 Font Sprite Sheets / Images
8:50 Preparing to Split a font in the Scratch costume editor
11:08 The 9 steps to Splitting a font costume
14:10 Fixing mistakes
15:01 Actually we haven't quite finished yet
16:17 Google Fonts
16:56 Converting a font to an SVG
18:17 Importing an SVG font and splitting it
20:02 How to calculate the size and origin of Scratch Costume
24:40 Automating the costume measuring script
28:57 Retrieving the offset and size of a costume
29:48 From text string to costume
31:48 Stamping or Cloning - You choose
32:44 Letter Spacing Quirks and more Scratch Bugs
34:01 The space character
36:21 A fast text engine
38:14 Outro

[@minegreg-official]

HEY! I FOUND OUT A WAY TO FIX THE SCRATCH SIZE CALCULATION BUG!

[@minegreg-official]

(That works only by using clones)

[@minegreg-official]

If you hide the actual sprite by putting the "hide" below the "when flag clicked", create the condition "when i start as clone" and put "show" below it, it'll fix the bug! Just change again the spacing back to 2 :)

[@griffpatch]

YOU ARE A GENIOUS!!! That explains why it wasn't a problem for me in my original project, the sprite was hidden LOL - So! Simply hide the sprite before running the letter sizing scripts and it all work perfectly, thanks so much and well done!

[@dasdfsgsdagsgfdsfs]

amazing

[@-_lIl_-]

@@minegreg-official you could also use one clone to stamp it I think

[@onyx8oom493]

griffpatch, i can't stress enough how much of a genius you are. honestly, you're the whole reason i got into programming in the first place. you always find clever ways to fix bugs, rather than what seems to be the easiest, most obvious way (which often ends up with more bugs). good on you, keep being awesome. :)

[@eggstatus5824]

This man would be an absolute beast at stuff like escape rooms. Because at the end of the day, programming is just problem solving. Even simple programming languages like Blockly which has a visual syntax really does have endless possibilities. People like griffpatch just keep discovering these possibilities. Quite an impressive feat I must say

[@koji4884]

No one can stress how much of a genius griffpatch is

[@Sub2dawhitecat]

So true my man so true

[@dylanf1]

Hey, I just want to say that your scratch projects were my childhood. Many years ago, my school would use scratch as a coding platform and I would often play scratch projects at home as well! Your games (the ones I can remember from the top of my head (paper minecraft, scratcheria and ball physics), I was so amazed by how you could do this on such basic code, yet I couldn't recreate anything no matter my efforts... Thank you for everything!

[@griffpatch]

That is awesome! Thanks for sharing :D

[@katakuti08]

SameMan

[@omarscomments]

yea same

[@AkshatSinghplayz]

Not able to type and duplicate lowercase letters

[@schlzawg]

same lol i remember scratch getting blocked at one point because they thought it was educational (it is) but the people at my school used it to just play games or as a music player

[@pixlol]

By the way, if you're making your own font or using scratch defaults, colour the costumes red. this makes it easier to make the text a different colour. And if you ever want, you can make the text black using a "set [brightness] effect to ( -100 )".

[@BertLeyson]

and use the color effect to make other colors?

[@meowymeowz1604]

I never thought of that but that is actually really helpful Ill keep that in mind for the next time i need to use a text engine

[@Scratchvideoz]

Genius

[@WrynneBow]

I love the LOTR stuff/quotes at the beginning 😆 Really cool code that you write and I think it's so nice and generous that you share it with us! Thanks for this tutorial!

[@griffpatch]

Thank you so much!

[@XyraStar]

When my school account was deactivated, I struggled to regain my motivation because of all the work I lost. Thankfully, my favorite game I was making I had downloaded the code. Thanks to you, I found the motivation to continue my game. If I end up finishing it, I think it’ll be amazing!

[@ZeSillyGuineaPigGUYFEVEJ-YUMBO]

I'd play that :D

[@squidsalotl]

What's the game called?

[@XyraStar]

@@squidsalotl it’s still not released yet. It’s gonna be a whiiiiiile. I’m having to take a break rn to work on other projects for school but I will get back on it soon!

[@Kora-112]

@@XyraStarpls alert us when it’s done

[@wutthehekamidoing5615]

@@XyraStar i would like to be alerted when its done

[@CoolScratcher]

I'm a graphic design/typography nerd, so seeing griffpatch cover a topic in the exact vein of what I do for fun is so cool. this might be my favorite griffpatch tutorial lol, definitely going to try this out

[@RedGuy14]

CoolScratcher in the wild

[@trojanfrog]

YES!! the second I woke up and saw this I left everything that I was doing and started scratching! it's so fun seeing every time the new video you make' it really brings this platform life! thank you for making this video and I can not WAIT for part 2!

[@Resseguie]

That's some clever trickery using the edge collisions. I was guessing that you'd create a vertical bar at the center and slide the costume left and right until a hit was detected. But the edges allow for easier math and a few fewer steps. Nice!

[@griffpatch]

Nice yes, that was an option... But this turned out better :)

[@maxsanby9974]

quick question how did you say that 13 hours ago when it came out 3 hours ago

[@zayahIGA]

@@maxsanby9974 good question

[@zayahIGA]

@@maxsanby9974 ohh it’s probably because there a Chanel member

[@greatfifashorts]

Member

[@zeboosta]

Wow, I can't imagine all the time and effort you put into making this video, I shuddered myself at the thought of having to split up 91 characters by hand! Luckily, you setup TWO (just imagine, TWO) font assets, so you had to do the work twice. That shows how dedicated you are to Scratch coding. Keep up the great work griffpatch!

[@PaperMarioFan-vg7wb]

Heya Griffpatch! Awesome tutorial! This really helped me out with making my games on Scratch! I have been very inspired by your tutorials for as long as I can remember lol! I wish to someday be hooked with coding as well :D

[@mahadevan4660]

Yet Another griffpatch mastermind. Even if the video is large, it is very helpful. I really like your dedication in making this video, and I'm glad to see your channel growing big

[@griffpatch]

Thank you very much!

[@drawvsmanbackupraichu103ba7]

thank you griffpatch for the effort you put in the videos you are the best scratch tutorial maker i have ever seen

[@jdh9419]

4:52 The good thing about this is that the numbers automatically change their name to it’s number

[@lucypie09]

Yes! Thank you Griffpatch! I’ve been waiting for someone to make a tutorial for a text engine!

[@YBABEPIP]

Thank you too much griffpatch! You are the best scratcher I have ever seen! This is nice way to display text.

[@naradoxy]

for cutting sprite sheets up steps 3 and 4 can be merged to one, instead of copy then delete, you can do [ctrl+X] to cut it (as in copy and delete). that can save you a bit of time that will surely add up :)

[@superodin8656]

I love how he actually goes through his comments and cares about his audience.

[@griffpatch]

I do!

[@klaudiasylwia737]

Hi griff

[@cheesepop7175]

@@klaudiasylwia737 replying to a griffpatch comment will not increase the chances of griffpatch responding

[@kjanimates]

He’s the only KZbinr ever to do that lol

[@Cha21550]

This is the most AWESOME Text Engine with really simple codes I have ever seen!!

[@ashtonruiz5539]

I love this tutorial! It looks very cool as well! This’ll definitely come to use in RPG’s especially!

[@Matt51112]

Thanks Griffpatch! I developed a different method that makes it infinitely easier to separate the fonts: In Inkscape, you can convert text to path which separates each letter path as a separate object. Then you can export them all as individual svgs which can them be imported into scratch (at which point it is the same process as the native scratch fonts.

[@icotwilight8597]

Amazing, I love how all your tutorials can be used in other cases, for example I made a raycasting engine in python thanks to your videos. Had to add DDA algorithm to keep it fast enough for textures in the end. Please keep up the amazing work.

[@faretek3545]

Haha clever lol

[@vaibhavr3069]

Serious dedication mate (keep it up). I got into coding because of you

[@hamilchaos]

Can we just appreciate the fact that he agrees to descend into madness just so we know how to import fonts to Scratch in three different ways and actually shows how to do it instead of just explaining it?

[@colinmacc]

Excellent! Some great time-saving tips here.. Getting all the costumes and aligning them and setting the widths is the MOST time-consuming process... :O

[@griffpatch]

Glad it was helpful!

[@faretek3545]

You can easily set the size or position to anything by switching costumes. If you switch to a 0x0 costume, you can set it size to anything more than 100, even Infinity. Then switch back. With size infinity, you can go to anywhere, even (infinity, infinity) but a strange quirk is that the sprite can't be seen, even in show mode. You can also get size 0 by zooming out the actual web page to make a tiny canvas, draw an abnormally large costume. This lets you make size 0 and size 1. For sizes 2 - 100, find a costume that works. It's relatively big, but definitely doable. This is what I use when making intros (usually in pen nowadays) and it helps with camera control and not needing to clip points. However, when the sprite is offscreen, collisions are always false, but you can use turbowarp to fix that. Also, someone called wolther made an insane intro for you in mostly pen, but I don't think you checked it out! I would recommend it, but also you're welcome for some happy scratch wisdom, just like how you share it with us!

[@faretek3545]

Written on phone by the way! Lol

[@griffinbrooks6748]

YES ITS FINNALLY DONE :D always a grea time watching scratch tutorials from griffpatch.

[@Iminsanealr]

Hello griffpatch! I love your tutorials! They are so helpful, For example I used your joystick in a project of mine. I can’t wait for part 2! Keep up on the great work :D!

[@griffpatch]

Fantastic!

[@Iminsanealr]

@@griffpatch Also, I need help with a project. I need help with the positions because when I set a position it sends me to a different position. Could you please help?

[@okayjs]

Maybe another week, you could do a tutorial on a box physics engine. I feel a lot of people would love to see that!

[@Jerdz]

I don't know if you mentioned it but the font that has Mono in their name means that all letters have the same width, which can ease a lot of the calculations and can help if you want to know how many characters fits on a line of dialogue

[@rockets4lifegaming]

Pretty sure that it means that the letters are the same height.

[@FlummoxTheMagnificent]

@@rockets4lifegaming no, it doesn’t.

[@rockets4lifegaming]

@@FlummoxTheMagnificent Ok

[@eowynscience]

Nice, I learnt 2 new facts about fonts today!

[@grandestag]

I had never thought of a game with that scratch mechanic but now that you did the tutorial I will do one of that style

[@alexprusst3296]

griffpatch screaming into my ear BOOOOOOOOOOOOOOOOOOOM made my day ngl

[@falafel_83]

Very useful tutorial, Griffpatch! Now I don't need to backpack the published backpackable text engine projects 🤣 I can't wait to see which tutorial you will bring us next! (Also impatient for the RPG next devlog and possible tutorial 😃)

[@griffpatch]

You and me both!

[@vii-ka]

Wow, I made a text engine using the width detection already, but I can't wait to see how many cool things I missed! Actually, I have to wait, because I am kinda busy making projects, but this is still so exciting!

[@vii-ka]

Actually, I made it after your community post about this tutorial, so I wanted to see if I could make it before your video came out.

[@omlet70]

Me Hard Work A B C D E F G H I

[@crimsonwave1356]

Thanks Griffpatch! This worked for very well! Your hard work has truly paid off!

[@Papichi05]

Griffpatch is a great expert of Scratch that he can literally make anything that that comes out his mind and imagination. Keep up the great work!

[@lechuga2820]

Suggestion, always make your font color in the sprites red - completely full saturated red. Then you can use the change color block before cloning or stamping and have multiple text colors.

[@-CookieDev-]

THANK YOU SO MUCH OMG but how do you make a whole sentence different colored at different points??

[@virtuedreamer6623]

@@-CookieDev- it's just as complicated as doing it in CSS or HTML as far as i know. You gotta make each individual letter a different color in that word; but if there's another way i don't know about, which there probably is, i'm all ears

[@oakleydezan5276]

Hey griffpatch! I've found that stampting the costumes instead of cloneing them helps a lot if you are worried that there will be to many clones on screen. The only downside is that stamps go to the very back layer every time but its still quite handy! Maybe a tutorial on that would be handy for some people!

[@chonkydog6262]

Solve that by stamping every other sprite too... lol

[@monnamonsta]

To quote what I recently sent on Scratch Forums: If stamping doesn't work, just stamp more!

[@guizhong_yay]

34:21 😂 No-one Is Gonna Talk About How Mr. Griffpatch Said “AND WE DONT HAVE NO SPACE CHARACTER BOYYY”, I Love This Channel! It Inspired Me To Do Scratch And Programming! You Are A Absolute Genius And Cool Person! Soon You'll Be A Celebrity For Your Awesome Skills. 💕✨

[@ihavenoproblems2116]

Man look what you spend for us! you really love making scratch tutorials like you spend lot of hours to edit your videos but for making that video. man it's a really crazy time thank you so much for these tutorials griffpatch. also i made a google font roboto by myself to put use already done

[@quneptune]

3:00 it's best to make them red so you can customize what color they're gonna be for special text and you can decrease the brightness to make them black

[@zayahIGA]

Thanks i will use that

[@griffpatch]

Quite right - I did have that in my original script, but I had to cut back due to running length

[@allabarnprogramochlitesmat3545]

@@griffpatch but why you dont want have a big length on yours videos?!

[@eryscalamitas1611]

@@allabarnprogramochlitesmat3545 they're already fairly long, and having a video close to one hour just for a tutorial might be tedious for the viewer

[@allabarnprogramochlitesmat3545]

@@eryscalamitas1611 yea, but he can make more info and more materials for the viewers if its long and so can people learn more in one video. and i think he have a voice to talk self! ;)

[@IloveParkSunghoon0905]

Did anybody noticed how many messages Griffpatch receives on Scratch😂 By the way this tutorial is amazing and very useful!

[@cmedinamendez]

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

[@Cfcfgcft]

34:18 kinda got me there XD bro your scratching is so good and what makes it even better is that you make it fun and funny :D awesome job

[@HexaflexagonFan]

thank you griffpatch for the tutorials :) you have improved the scratch experience for people and you are the only reason I got into programming! Even if you don't read this, I just want to write a thank you note. love from South Africa

[@griffpatch]

Thank you for spreading the love :D

[@HexaflexagonFan]

@@griffpatch you are welcome!

[@RealUnify]

I found a way to fix the alternative step on the video! Timestamp: 5:58 To fix the problem with VERY LARGE IMAGES that can't fit into scratch... You can use an alternative 3rd party engine TurboWarp! All you need is to resize the screen to the Resolution to the image size (or larger), and then Upload it on the costumes editor! And do the similar steps to the alternative step that Griffpatch uses. Or... You can split the letters to separate images yourself using an Offline Paint Tool. Put them to a folder, select all of the hard work files you've done... And put them to the costumes editor! BONUS: If you don't want to do these steps I said, you can do the same thing from the alternative step! But with a twist... You can use an Offline Paint tool, and then resize the image using the paint tool! Yeah I know, I'm a big nerd putting all of this 🤓

[@Skidhi_eats_BK]

I feel so bad you had to write this much characters just for a video

[@chiranthisuras3427]

I'm never GONNA stop coding because of you

[@Zen78410]

I Like How griffpatch would sacrifice his energy just to give us an awesome scratch tutorial, keep up the good work

[@epikepics]

so true

[@BestBoi8]

Reminder that if your turning off fencing for a Turbowarp game or something, you could most likely not be it the left with fencing off, use a block to set the x to that number, then just use it instead of -9999 in the x

[@TropialGamingYT]

It is amazing on how blocks are in the beginning And this tutorial is great. Keep the work up

[@keerthimayurivivek9564]

I am subscribed and I am obsessed with your games I have done almost all your tutorials on Scratch

[@beehivemind9343]

thank you so much!! i’ve been wanting something like this for so long haha.

[@benzin8665]

bruh the editing is so good and you teach me to be really good at scratch thank you

[@JosephJaya_yoy]

This was so helpful!!! Thank you for posting it (first time seeing this video) so I'll sub!

[@The_real_Mist_1]

Awesome!Going to try this out!

[@VeryCrazyDude]

this is very cool edit: after seeing the font spliting im glad to have an already split font from last year

[@Snek86]

This helped so much! You are an awesome coder griffpatch!

[@PenguinBuster0725]

Griffpatch deserves more than 1M subscribers !Keep up the work :D

[@ChewingFruitGum]

Nice! There is a lot of games and great projects this can make. You are a great coder griffpatch

[@RosieBearYT]

Your videos are so interesting that I can just sit back, relax and watch. :D

[@griffpatch]

Glad you enjoy it!

[@Kinger968]

Thank you so much! This was so helpful! Btw, when is the rpg tutorial series coming out?

[@Mosswurk2]

This is such a helpful video! Thank you :)

[@smth35]

I actually did a text engine for a jam before I saw this. It worked using a few lists which had the widths for the next symbol. I also had a list which had 2 items for one clone to make text. The uneven item was the text, the even item was the parameters, like the position, direction, size, etc. I also drew every single symbol myself in Piskel. Luckily I could save it in a .zip file

[@ambilysathish]

so much dedication griffpatch has!!!

[@robinbatwing8846]

Nice way of measuring the letters

[@instinctdiff7765]

I love learning, and its always excites me if its from you griffpatch. What I learned here was: - Tricky way to find the width (and height) of the costume by using code (very useful in these kind of projects) - Get the last costume by putting "round (0)" block (simplified version)

[@griffpatch]

Thanks for sharing!

[@Jay3527]

Thanks For doing all this hard work I am so happy you are with me 😃

[@oiiengchan6213]

thanks for teaching me, I did great!

[@occrazy8]

Thx Griffpatch, I used this to make a database on Scratch!

[@Kattaku]

Griffpatch, your the best scratch youtuber, and something about making the code yourself instead of copying it, is so fun, trying to deal with the bugs is just fustrating but also fun, ive been subscribed for aabout a year or more now, love your tutorials griffpatch ❤

[@wolfensponge_fan]

I used this tutorial just to get a fancy font for my games UI. Thanks buddy :)

[@whatdadogdoingaming]

I HAVE BEEN WAITING FOR THIS MY WHOLE LIFE!!!!!!!!!

[@griffpatch]

Haha

[@anxiousoptimism5517]

This was a great tutorial. Thank you.

[@denx1048]

Hello Griffpatch! Thank you for teaching us tricks and teaching us how to make cool scripts! You have charisma and humor. Cool montage! You are interesting to listen to. I am glad that there are such people who will help us in something, even fulfill our dreams, for example, finally fix a bug in our project. Thank you again and good luck! Keep it up! ;)

[@griffpatch]

You're very welcome!

[@denx1048]

@@griffpatch Wow. you answered!

[@denx1048]

@@griffpatch I'm glad you answered me. You have a large audience base on Scratch.

[@jerrytai5714]

30:25 yes said “sprout” 😂 that doesn’t matter actually, thank you for sharing! Amazing work!❤

[@izaanhafid]

the amount of work done by this man, it's monstrous, gigantic, enormous, incredible, huge, more than the suggestings grammarly can give me for more critical versions of the word big!

[@izaanhafid]

thank you so much for doing this

[@memeboy09]

Love your videos bro, I’m subscribed

[@obunga869]

"and we dont have a space character boy!" got me rolling 🤣🤣🤣🤣🤣🤣 34:21

[@robble21]

your tutorial gave me a great idea to display a text! I use Unity and not scratch, but the idea is still good.

[@huntify]

THANK YOUU I REALLY NEEDED THIS!!!!!!!!!!!

[@beeman9229]

It's always a good day when Griffpatch posts.

[@FliPOffwg]

It is so cool! I love your scratch tutorials :)

[@griffpatch]

Thank you! 😊

[@Tech-Tips5]

Thank you griffpatch this Tutorial was very helpful for my scratch game 😀😀😃😃

[@casperaccount5425]

DUDE I LOVE THIS CHANNEL IT HELPED ME PASS MY TEST AND I GOT A 101!!!

[@thefossilizedgamer_real]

Really cool! Will make game with this!

[@JuanGamer0202]

Aw man i just made a text engine a week ago, and now you came with a better one XD

[@griffpatch]

Not sure there is quite such a thing as better. Everything you make has huge value as you get to think through a problem yourself.

[@TETNTM]

this is one of the tutorials i'll be coming back too.

[@melonandappleadventures7006]

0:09 Amazing LOTR reference. Perfect.

[@assaadeloualji859]

I don't even use Scratch, but I like watching you create stuff for some reason.

[@nofoodbeforebed]

Please stop giving such helpful information! I lie awake at night unable to sleep, all because you told me how to find the meaning of life in scratch with 5 simple steps.

[@griffpatch]

Lol

[@Scath_the_scratch_master]

@@griffpatch hahahaha

[@ananyachakraborty8431]

Just what I needed : )

[@QuantumQuest444]

we can find many ways to solve many problems in scratch, but you show us the best and the easiest❤

[@griffpatch]

Glad you think so!

[@Stephanieplayz_2024]

Griffpatch is the smartest scratcher 🎉 thx for all the tutorials i needed it for my programming with scratch course

[@duongdong5850]

Wow that’s so cool, can be improving scratch game!

[@loveandpoprocks7112]

thanks dude!! thats really helpful :)

[@chipthespithor]

What a coincidence, I tried coding a text engine exactly like this yesterday! 🤣

[@GROGU_RUS]

This is really amazing 😍

[@masteroftheinternetverse1296]

Just followed this. Can't say I feel any better about my coding performance, but I definitely feel at least marginally smarter for it.

[@supermariokingdom-official8975]

I'm happy you posted a new tutorial! I missed them haha!

[@supermariokingdom-official8975]

I would like you to make a Friday Night Funkin tutorial on Scratch. Just in case , it is a rhythm game similar to Dance Dance Revolution.

[@supermariokingdom-official8975]

Please reply ????

[@supermariokingdom-official8975]

Hello?

[@supermariokingdom-official8975]

HI?

[@andresrivasgonzalez]

Sweet tutorial fam !