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

by



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 – https://youtu.be/lhHLAQSzQvo
πŸ‘€ Episode 3 – https://youtu.be/oPgUAQ0lzBA

⭐ Support this channel – Join to get access to perks:
https://www.youtube.com/channel/UCawsI_mlmPA7Cfld-qZhBQA/join

πŸ’Ύ Font Resource Websites
Cava’s Pixel Resource – https://caveras.net/
Google Fonts – https://fonts.google.com/

βœ‚οΈ Image / Sprite sheet Splitter
EZGif – https://ezgif.com/sprite-cutter
Google Font to SVG Path – https://danmarshall.github.io/google-font-to-svg-path/

🐱 Scratch
Scratch Font Studio – https://scratch.mit.edu/studios/31906423/
Bitmap Font – https://scratch.mit.edu/projects/716698372/
Sans-Serif Font – https://scratch.mit.edu/projects/717107419/

————–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

source

26 thoughts on “Code a TEXT ENGINE | Awesome "How to" Scratch Tutorial”

  5. I have a (potential) solution to the god awful process of separating each letter every time: There's this software called ShoeBox which specializes in a bunch of spritesheet related stuff, one of those specialties being separating pieces from one. You could import a bitmap font into ShoeBox (be sure to select the option to separate the pieces) and have it export each individual portion as its own image, then import all of them into Scratch. Boom, crisis averted! If you're on Windows or MacOS, that is. Unfortunately, if you're not on either of those (or if Wine for Linux fails to emulate it properly), you'll have to go through the painful process of separating each letter yourself. By the way, the app requires Adobe Air, which shouldn't be a problem either. I have it myself.
    Really quick edit: ShoeBox may be a bit sensitive with the separation, so manual editing MIGHT be necessary if it detects certain pieces to be separate from your letter, like the two dots in a percent sign.

    Reply

  13. If you want live updating text, put a green flag clicked block, then a broadcast block named "run". Put down a when i receive block, with a forever loop under it. In the forever loop, put the write text broadcast statement. Then in the font sprite, find the when i receive write text block, and take the code off it. Make a new block called text, and set it to run without screen refresh. Attach the blocks you took off the when i receive write text block, and put them under the define text block. Then under the when i receive write text block, put the text custom block. This will make it so if the text your writing changes during the program, it will smoothly update.

    Reply

Leave a Comment