Aller au contenu

How to create advanced text engines in Scratch - Complete typewriter effect tutorial

Ce contenu n’est pas encore disponible dans votre langue.

💡 Building complex dialogue systems or need help with advanced UI design? 🚀 Get Help Now

TD

TextEngine_Developer

Posted on June 26, 2025 • Intermediate

⌨️ How to create professional text engines?

Hi everyone! I’m looking for help creating a text engine that displays text letter by letter, like a typewriter effect. I need something that can handle dialogue systems and text animations.

I want to create something like this progression:

S
Sc
Scr
Scra
Scrat
Scratc
Scratch

Any help with creating a robust text engine system would be amazing! 📝

TE

TextEngine_Master

Replied 8 minutes later • ⭐ Best Answer

Perfect question @TextEngine_Developer! Let me provide you with a comprehensive text engine system:

📝 Text Engine Architecture

Here’s how different text rendering approaches work:

flowchart TD A[📝 Text Input] --> B{Engine Type?} B -->|Basic Typewriter| C[⌨️ Letter by Letter] B -->|Advanced Dialogue| D[💬 Multi-line System] B -->|Rich Text| E[🎨 Formatted Text] C --> F[Character Timer] D --> G[Line Management] E --> H[Style Processing] F --> I{Display Method} G --> I H --> I I --> J[🖥️ Screen Output] I --> K[🔊 Sound Effects] I --> L[⏸️ Pause Controls] J --> M[Update Display] K --> N[Play Type Sound] L --> O[Wait for Input] style A fill:#e1f5fe style C fill:#e8f5e8 style D fill:#fff3e0 style E fill:#f3e5f5 style M fill:#fce4ec

⌨️ Basic Typewriter Text Engine

Let’s start with a fundamental letter-by-letter system:

    // Basic Text Engine Setup
when flag clicked
set [Full Text v] to [Hello! Welcome to my game!]
set [Display Text v] to []
set [Character Index v] to [1]
set [Text Speed v] to [0.05]  // Seconds between characters

// Main text engine loop
repeat until <(Character Index) > (length of (Full Text))>
set [Current Character v] to (letter (Character Index) of (Full Text))
set [Display Text v] to (join (Display Text) (Current Character))
say (Display Text)

// Add typing sound effect
play sound [type v] until done

wait (Text Speed) seconds
change [Character Index v] by [1]
end

// Text complete
broadcast [Text Complete v]

💬 Advanced Dialogue System

For games with multiple characters and dialogue trees:

    // Advanced Dialogue Engine
when flag clicked
// Initialize dialogue system
delete all of [Dialogue Lines v]
add [Character 1: Hello there!] to [Dialogue Lines v]
add [Character 2: Nice to meet you!] to [Dialogue Lines v]
add [Character 1: How are you doing?] to [Dialogue Lines v]

set [Current Line v] to [1]
set [Dialogue Active v] to [true]

repeat until <not <(Dialogue Active)>>
display dialogue line (Current Line)
wait until <key [space v] pressed?>
change [Current Line v] by [1]

if <(Current Line) > (length of [Dialogue Lines v])> then
set [Dialogue Active v] to [false]
end
end

// Custom block for displaying dialogue
define display dialogue line (line number)
set [Current Dialogue v] to (item (line number) of [Dialogue Lines v])

// Extract character name and text
set [Colon Position v] to [1]
repeat until <(letter (Colon Position) of (Current Dialogue)) = [:]>
change [Colon Position v] by [1]
end

set [Character Name v] to (letters [1] to ((Colon Position) - [1]) of (Current Dialogue))
set [Dialogue Text v] to (letters ((Colon Position) + [2]) to (length of (Current Dialogue)) of (Current Dialogue))

// Display with typewriter effect
typewriter effect (Dialogue Text)

🎨 Rich Text Engine with Formatting

Support for colors, speeds, and special effects:

    // Rich Text Engine with Tags
when flag clicked
set [Rich Text v] to [Hello <color=red>world</color>! <speed=slow>This is slow text.</speed>]
set [Display Text v] to []
set [Character Index v] to [1]
set [Current Color v] to [black]
set [Current Speed v] to [0.05]

repeat until <(Character Index) > (length of (Rich Text))>
set [Current Char v] to (letter (Character Index) of (Rich Text))

// Check for formatting tags
if <(Current Char) = [<]> then
process formatting tag
else
// Regular character display
set [Display Text v] to (join (Display Text) (Current Char))

// Apply current formatting
set pen color to (Current Color)
say (Display Text)

play sound [type v]
wait (Current Speed) seconds
end

change [Character Index v] by [1]
end

// Custom block for processing tags
define process formatting tag
// Find end of tag
set [Tag End v] to (Character Index)
repeat until <(letter (Tag End) of (Rich Text)) = [>]>
change [Tag End v] by [1]
end

// Extract tag content
set [Tag Content v] to (letters ((Character Index) + [1]) to ((Tag End) - [1]) of (Rich Text))

// Process different tag types
if <(Tag Content) contains [color=]> then
set [Current Color v] to (letters [7] to (length of (Tag Content)) of (Tag Content))
end

if <(Tag Content) contains [speed=]> then
if <(Tag Content) contains [slow]> then
set [Current Speed v] to [0.1]
else
if <(Tag Content) contains [fast]> then
set [Current Speed v] to [0.02]
end
end
end

// Skip to after the tag
set [Character Index v] to (Tag End)

🎮 Interactive Text Engine

Add user controls and interactive elements:

    // Interactive Text Engine
when flag clicked
set [Text Queue v] to []
add [Welcome to the adventure!] to [Text Queue v]
add [What would you like to do?] to [Text Queue v]
add [1. Explore the forest] to [Text Queue v]
add [2. Visit the town] to [Text Queue v]

set [Current Message v] to [1]
set [Text Paused v] to [false]
set [Skip Mode v] to [false]

repeat until <(Current Message) > (length of [Text Queue v])>
display text with controls (item (Current Message) of [Text Queue v])
wait until <key [space v] pressed?>
change [Current Message v] by [1]
end

// Enhanced display with user controls
define display text with controls (text)
set [Display Text v] to []
set [Character Index v] to [1]

repeat until <(Character Index) > (length of (text))>
// Check for user input
if <key [space v] pressed?> then
if <(Skip Mode) = [false]> then
set [Text Paused v] to [true]
wait until <not <key [space v] pressed?>>
set [Text Paused v] to [false]
else
// Skip to end
set [Display Text v] to (text)
say (Display Text)
stop [this script v]
end
end

if <key [s v] pressed?> then
set [Skip Mode v] to [true]
end

if <not <(Text Paused)>> then
set [Current Character v] to (letter (Character Index) of (text))
set [Display Text v] to (join (Display Text) (Current Character))
say (Display Text)

// Variable speed based on punctuation
if <<(Current Character) = [.]> or <(Current Character) = [!]>> then
wait [0.3] seconds  // Longer pause for sentences
else
if <(Current Character) = [,]> then
wait [0.15] seconds  // Medium pause for commas
else
wait [0.05] seconds  // Normal character speed
end
end

change [Character Index v] by [1]
end
end

🔊 Text Engine with Audio

Add voice synthesis and sound effects:

    // Audio-Enhanced Text Engine
when flag clicked
// Setup audio profiles for different characters
set [Character Voice v] to [narrator]
set [Voice Pitch v] to [0]  // Normal pitch
set [Voice Speed v] to [1]  // Normal speed

define setup character voice (character name)
if <(character name) = [hero]> then
set [Voice Pitch v] to [10]   // Higher pitch
set [Voice Speed v] to [1.2]  // Faster speech
else
if <(character name) = [villain]> then
set [Voice Pitch v] to [-15] // Lower pitch
set [Voice Speed v] to [0.8] // Slower speech
else
set [Voice Pitch v] to [0]   // Normal
set [Voice Speed v] to [1]
end
end

// Text-to-speech integration
define speak text (text)
set [TTS Text v] to (text)
// Use text-to-speech extension if available
speak (TTS Text) with voice (Character Voice) pitch (Voice Pitch) speed (Voice Speed)

// Typewriter with audio
define typewriter with audio (text)
setup character voice (Character Name)
speak text (text)  // Start speaking

// Display text letter by letter while audio plays
set [Display Text v] to []
set [Character Index v] to [1]

repeat until <(Character Index) > (length of (text))>
set [Current Character v] to (letter (Character Index) of (text))
set [Display Text v] to (join (Display Text) (Current Character))
say (Display Text)

// Sync with speech timing
wait ((0.05) * (Voice Speed)) seconds
change [Character Index v] by [1]
end

📱 Mobile-Friendly Text Engine

Optimize for touch devices and different screen sizes:

    // Responsive Text Engine
when flag clicked
// Detect screen size and adjust
if <(screen width) < [400]> then
set [Text Size v] to [small]
set [Max Line Length v] to [25]
else
set [Text Size v] to [normal]
set [Max Line Length v] to [40]
end

define display responsive text (text)
// Word wrap for different screen sizes
set [Words v] to []
split text into words (text)

set [Current Line v] to []
set [Line Length v] to [0]
set [Line Number v] to [1]

for each [word v] in [Words v]
if <((Line Length) + (length of (word))) > (Max Line Length)> then
// Start new line
display line (Current Line) at y ((Line Number) * [-30])
set [Current Line v] to (word)
set [Line Length v] to (length of (word))
change [Line Number v] by [1]
else
// Add to current line
set [Current Line v] to (join (join (Current Line) [ ]) (word))
change [Line Length v] by ((length of (word)) + [1])
end
end

// Display final line
if <(length of (Current Line)) > [0]> then
display line (Current Line) at y ((Line Number) * [-30])
end

💡 Pro Tips for Text Engines

  • Performance: Use efficient string operations and avoid unnecessary loops
  • Accessibility: Provide options to skip animations and adjust speed
  • Localization: Design your system to handle different languages
  • Testing: Test with various text lengths and special characters
  • User Experience: Add visual cues for when text is complete
  • Memory Management: Clear old text data to prevent lag

This comprehensive text engine system will handle any dialogue or text display needs in your projects! Let me know if you need help with specific features! 📝

UI

UI_Design_Expert

Replied 30 minutes later

@TextEngine_Master Fantastic comprehensive guide! I’d like to add some visual enhancement tips:

🎨 Visual Polish for Text Engines:

    // Add visual effects to text display
define add text effects
// Cursor blinking effect
if <((timer) mod [1]) < [0.5]> then
set [Cursor Visible v] to [true]
else
set [Cursor Visible v] to [false]
end

// Text box styling
set pen color to [#333333]
set pen size to [3]
draw rectangle at x: [-200] y: [-100] width: [400] height: [80]

// Character highlighting
if <(Character Index) <= (length of (Display Text))> then
set pen color to [#ffff00]  // Yellow highlight
// Highlight current character position
end

These visual enhancements make text engines much more professional! 🌟

TD

TextEngine_Developer

Replied 1 hour later

@TextEngine_Master @UI_Design_Expert This is absolutely incredible! 🤩

I implemented the basic typewriter system and it works perfectly! The character-by-character reveal looks exactly like what I was hoping for. The advanced dialogue system will be perfect for my RPG project.

Thank you both for such detailed explanations - this thread is now my go-to reference for text engines! 📚

VB

Vibelf_Community

Pinned Message • Moderator

📝 Master Advanced UI and Text Systems

Excellent discussion on text engines! For developers creating sophisticated user interfaces and dialogue systems, our community provides expert guidance on:

  • ⌨️ Advanced text rendering techniques
  • 💬 Complex dialogue tree systems
  • 🎨 UI design and user experience
  • 📱 Cross-platform compatibility

📚 Related Topics

Ready to create professional-quality text systems and user interfaces? Get expert guidance from our UI/UX specialists in the Vibelf app!