Code a TEXT ENGINE | Awesome "How to" Scratch Tutorial
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- 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
HEY! I FOUND OUT A WAY TO FIX THE SCRATCH SIZE CALCULATION BUG!
(That works only by using clones)
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 :)
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!
amazing
@@minegreg-official you could also use one clone to stamp it I think
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. :)
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
No one can stress how much of a genius griffpatch is
So true my man so true
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!
That is awesome! Thanks for sharing :D
SameMan
yea same
Not able to type and duplicate lowercase letters
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
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!
Thank you so much!
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!
I'd play that :D
What's the game called?
@@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!
@@XyraStarpls alert us when it’s done
@@XyraStar i would like to be alerted when its done
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!
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 )".
and use the color effect to make other colors?
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
Genius
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!
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
CoolScratcher in the wild
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!
Nice yes, that was an option... But this turned out better :)
quick question how did you say that 13 hours ago when it came out 3 hours ago
@@maxsanby9974 good question
@@maxsanby9974 ohh it’s probably because there a Chanel member
Member
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
Thank you very much!
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 :)
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
thank you griffpatch for the effort you put in the videos you are the best scratch tutorial maker i have ever seen
Yes! Thank you Griffpatch! I’ve been waiting for someone to make a tutorial for a text engine!
Thank you too much griffpatch!
You are the best scratcher I have ever seen!
This is nice way to display text.
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.
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!
Written on phone by the way! Lol
This is the most AWESOME Text Engine with really simple codes I have ever seen!!
I love this tutorial! It looks very cool as well! This’ll definitely come to use in RPG’s especially!
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
Glad it was helpful!
Maybe another week, you could do a tutorial on a box physics engine. I feel a lot of people would love to see that!
Serious dedication mate (keep it up). I got into coding because of you
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
Thank you for spreading the love :D
@@griffpatch you are welcome!
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.
Haha clever lol
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
Pretty sure that it means that the letters are the same height.
@@rockets4lifegaming no, it doesn’t.
@@FlummoxTheMagnificent Ok
Nice, I learnt 2 new facts about fonts today!
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
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!
Fantastic!
@@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?
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 😃)
You and me both!
4:52 The good thing about this is that the numbers automatically change their name to it’s number
YES ITS FINNALLY DONE :D always a grea time watching scratch tutorials from griffpatch.
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)
Thanks for sharing!
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!
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.
Me Hard Work A B C D E F G H I
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.
THANK YOU SO MUCH OMG
but how do you make a whole sentence different colored at different points??
@@-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
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
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
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!
Solve that by stamping every other sprite too... lol
To quote what I recently sent on Scratch Forums: If stamping doesn't work, just stamp more!
I love how he actually goes through his comments and cares about his audience.
I do!
Hi griff
@@klaudiasylwia737 replying to a griffpatch comment will not increase the chances of griffpatch responding
He’s the only TH-camr ever to do that lol
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
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?
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
Thanks i will use that
Quite right - I did have that in my original script, but I had to cut back due to running length
@@griffpatch but why you dont want have a big length on yours videos?!
@@allabarnprogramochlitesmat3545 they're already fairly long, and having a video close to one hour just for a tutorial might be tedious for the viewer
@@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! ;)
Did anybody noticed how many messages Griffpatch receives on Scratch😂 By the way this tutorial is amazing and very useful!
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
I Like How griffpatch would sacrifice his energy just to give us an awesome scratch tutorial, keep up the good work
so true
Thanks Griffpatch! This worked for very well! Your hard work has truly paid off!
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 🤓
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
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!
this is very cool
edit: after seeing the font spliting im glad to have an already split font from last year
I feel so bad you had to write this much characters just for a video
thank you so much!! i’ve been wanting something like this for so long haha.
It is amazing on how blocks are in the beginning
And this tutorial is great. Keep the work up
Nice! There is a lot of games and great projects this can make. You are a great coder griffpatch
This helped so much! You are an awesome coder griffpatch!
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. 💕✨
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!
thank you so much for doing this
Awesome!Going to try this out!
bruh the editing is so good and you teach me to be really good at scratch thank you
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! ;)
You're very welcome!
@@griffpatch Wow. you answered!
@@griffpatch I'm glad you answered me. You have a large audience base on Scratch.
This was so helpful!!! Thank you for posting it (first time seeing this video) so I'll sub!
I am subscribed and I am obsessed with your games I have done almost all your tutorials on Scratch
Griffpatch deserves more than 1M subscribers !Keep up the work :D
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 ❤
Your videos are so interesting that I can just sit back, relax and watch. :D
Glad you enjoy it!
your tutorial gave me a great idea to display a text! I use Unity and not scratch, but the idea is still good.
Thank you so much! This was so helpful! Btw, when is the rpg tutorial series coming out?
I'm shocked that this was only uploaded less than a week ago lol. This combined with the release of your RPG tutorial vids could not have more perfect timing, as I'm working on one myself!
Also, it's too late now, but it might've been useful to mention how making the letters red will help people later on as brightness and colour effects can be changed. Otherwise though, great video.
Thanks For doing all this hard work I am so happy you are with me 😃
Aw man i just made a text engine a week ago, and now you came with a better one XD
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.
I'm never GONNA stop coding because of you
This was a great tutorial. Thank you.
I used this tutorial just to get a fancy font for my games UI. Thanks buddy :)
It is so cool! I love your scratch tutorials :)
Thank you! 😊
THANK YOUU I REALLY NEEDED THIS!!!!!!!!!!!
Thx Griffpatch, I used this to make a database on Scratch!
This is such a helpful video! Thank you :)
we can find many ways to solve many problems in scratch, but you show us the best and the easiest❤
Glad you think so!
Really cool! Will make game with this!
Love your videos bro, I’m subscribed
Nice way of measuring the letters
thanks for teaching me, I did great!
so much dedication griffpatch has!!!
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.
Lol
@@griffpatch hahahaha
I HAVE BEEN WAITING FOR THIS MY WHOLE LIFE!!!!!!!!!
Haha
Just followed this. Can't say I feel any better about my coding performance, but I definitely feel at least marginally smarter for it.
I never knew you could use round(0) to get to the last costume! Helps a lot, since my project really needs it for looping through all costumes. I'm making a game where the project needs to make prefixed animations.
Also putting switch costume to 0+0, or a variable set to 0 would work
With this, you can make a script to automatically detect the last sprite.
[set costume to ( round (0) )]
[set [last sprite] to (costume number)]
I too am making a project with prefixed animations! It's more of a video than a game, though. My account is full of those >w
griffpatch screaming into my ear BOOOOOOOOOOOOOOOOOOOM made my day ngl
thanks dude!! thats really helpful :)
Depending on the external editor it can actually be easier than dealing with scratch editor. Not to mention better autosave.
To move in a straight line, you have to start dragging _before_ your press shift.
Maybe we _should_ make a spritesheet here, but you would need a way to crop it in scratch without making multiple costumes. Though _it is_ called (from) _scratch._
Four hours. Well done on the optimisation and time saving here. Scratch workarounds are fun.
It is better to add spacing when drawing text instead of before.
This is really amazing 😍
Is it only me or is there a sound of discord notification at 38:47
Great tutorial, super helpful, also for my favourite type of scratch projects - scratch OS simulators, keep up the good work griffpatch, thank you :)
I'm happy you posted a new tutorial! I missed them haha!
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.
Please reply ????
Hello?
HI?
"and we dont have a space character boy!" got me rolling 🤣🤣🤣🤣🤣🤣 34:21
I don't even use Scratch, but I like watching you create stuff for some reason.
really nice I can't wait to see the "new RPG tutorials that are coming soon
30:25 yes said “sprout” 😂 that doesn’t matter actually, thank you for sharing! Amazing work!❤
Nice! thx for your help!
Sweet tutorial fam !
I always want tp make it! But i make only in Text menu(In say menu). But thanks to you, because it's SO useful! Thank you very much!
What a coincidence, I tried coding a text engine exactly like this yesterday! 🤣