Letter Platformer
The Letter Platformer is a classic side-scrolling platformer minigame where players collect letters scattered throughout a procedurally generated level to form a target word. This engaging component combines the nostalgia of retro platformers with educational value, making it perfect for language learning, spelling challenges, and interactive storytelling.
Overview
Players control a character that runs, jumps, and navigates through platforming challenges while collecting target letters. The game features procedurally generated levels with enemies, coins, obstacles, and customizable graphics, creating a unique experience every time (or consistent levels using seeds).
How to Add Letter Platformer
Open your game in the UFOLab editor
Navigate to the Components section in the component picker
Select Letter Platformer from the minigame components
Drag and drop it onto your scene
Configuration Settings
The Letter Platformer offers extensive customization through six configuration tabs: General, Graphics, Audio, HUD, Scoring, and Advanced.
General Settings
Target Letters (Required)
The word or sequence of letters players must collect
Range: 1-16 characters
Supports: Any unicode characters including emojis
Spaces are ignored (not collectable)
Example: "UFOLAB", "HELLO WORLD", "🎮🎯"
Difficulty
Default:
easyOptions:
Easy: Slower enemies (1.0x speed), 30% enemy spawn rate
Medium: Medium enemies (1.5x speed), 50% enemy spawn rate
Hard: Fast enemies (2.2x speed), 70% enemy spawn rate
Level Length
Default:
100Range: 10-500 segments
Number of platform segments in the procedurally generated level
Longer levels = more challenging and time-consuming
Tip: 50-150 segments work well for most games
Random Level
Default:
falseWhen
true: Generates a completely new random level each playthroughWhen
false: Uses the Level Seed for consistent generationUse Case: Enable for replayability, disable for fair competitions
Level Seed
Default: Empty (uses target letters as seed)
String value that controls procedural generation
Same seed = same level layout every time
Hidden when "Random Level" is enabled
Use Case: Create specific challenge levels or allow players to share levels
Hide Letters
Default:
trueWhen
true: Shows "?" for uncollected lettersWhen
false: Shows actual letters before collectionUse Case: Keep
truefor word discovery challenges,falsefor spelling practice
Graphics Settings
Sprite Sheet URL
Custom tileset image (16x16 sprites)
Must contain: player animations (idle, running), jump sprite, enemy animations, and all platform tiles
Important: Tile positions must match the default layout
Format: PNG image with transparent background
Default: Provided retro pixel art tileset
Cloud Image
PNG image for cloud decorations in the background
Format: Any size PNG (will be scaled dynamically)
Clouds use parallax scrolling for depth effect
Far Mountain Image
PNG image for distant mountains (slowest parallax layer)
Scaled to 40% of original size
Format: Any size PNG, recommended 250-500px height
Near Mountain Image
PNG image for nearby mountains (faster parallax layer)
Scaled to 37.5% of original size
Format: Any size PNG, recommended 180-380px height
Sky Color (Top)
Default:
#87CEEB(light blue)Top color of the sky gradient
Sky Color (Bottom)
Default:
#6b8cff(deeper blue)Bottom color of the sky gradient
Blends with Ground Color if set
Ground and Fog Color
Default:
#795548(brown)Sets the color for:
Bottom portion of sky gradient
Fog layers over mountains
Ground fog at bottom of screen
Transparent Background
Default:
falseWhen
true: Removes sky and background renderingUse Case: Overlay the platformer on custom scene backgrounds
Audio Settings
Mute
Default:
falseCompletely mutes all game sounds
Tip: Useful for silent gameplay or when using external audio
Volume
Default:
0.5(50%)Range: 0.0 to 1.0 (0% to 100%)
Hidden when "Mute" is enabled
Multiplied by global game volume
Controls all 8-bit sound effects (jump, coin, item, squash, die, win)
HUD Settings
Show Score
Default:
trueDisplays the integrated score counter in the top-left HUD
Tip: Disable if using custom score displays
Show Coin Counter
Default:
trueDisplays coin sprite and count in the HUD
Shows total coins collected
Show Enemy Kill Counter
Default:
falseDisplays enemy sprite and kill count in the HUD
Use Case: Enable for combat-focused challenges
Scoring Settings
Control point values for different collectibles:
Coin Score Value
Default:
50Points awarded for each coin collected
Letter Score Value
Default:
500Points awarded for each letter collected
Enemy Kill Score Value
Default:
100Points awarded for defeating an enemy
Advanced Settings
⚠️ Advanced Features: These settings provide integration with global game state and debug capabilities. Use carefully.
Debug: Show Hitboxes
Default:
falseWhen
true: Renders collision boxes around player and enemiesUse Case: Debug collision issues or understand game mechanics
Lives Configuration
Lives Storage
Default:
InternalOptions:
Internal: Lives managed only by this component instance
Shared (Global State): Lives stored in global game state, accessible by other components
Variable Name (Shared mode only)
Default:
livesName of the global variable for storing lives
Use this variable name in other components to access/modify lives
Initial Lives (Internal mode only)
Default:
3Number of lives the player starts with
Score Configuration
Score Storage
Default:
InternalOptions:
Internal: Score managed only by this component
Shared (Global State): Score accessible across the entire game
Variable Name (Shared mode only)
Default:
scoreName of the global variable for storing score
Coins Configuration
Coins Storage
Default:
InternalOptions:
Internal: Coin count local to this component
Shared (Global State): Coins persist across game scenes
Variable Name (Shared mode only)
Default:
coinsName of the global variable for storing coin count
Enemy Kills Configuration
Enemy Kills Storage
Default:
InternalOptions:
Internal: Kill count local to this component
Shared (Global State): Kills tracked globally
Variable Name (Shared mode only)
Default:
enemyKillsName of the global variable for storing enemy kills
Game Mechanics
Controls
Keyboard
Arrow Keys or WASD: Move left/right
Spacebar: Jump
Touch/Mobile
On-screen buttons: Appear automatically on touch devices
Left/Right: Movement
Jump button: Jumping
Gamepad
D-pad/Analog stick: Movement
A/B buttons: Jump
Player Abilities
Movement
Smooth acceleration and friction-based physics
Maximum speed: adjustable based on difficulty
Direction changes show "skid" animation
Jumping
Variable height jumps (hold longer = jump higher)
Short hop by tapping jump button
Can't jump in mid-air (single jump only)
Combat
Defeat enemies by jumping on their heads
Touching enemies from the side or below causes death
Brief invincibility period after respawning (2 seconds, flashing effect)
Level Generation
Procedural Generation
The platformer generates levels using seeded randomization:
Platform Layout: Ground platforms with variable heights and gaps
Box Platforms: One-way platforms you can jump through from below
Gap Detection: Automatically adds helper platforms for impossible jumps
Platform Merging: Adjacent platforms combine for smoother terrain
Element Placement
Letters
Distributed throughout the level
At least one letter guaranteed in the final 20% of the level
Placed at accessible heights above platforms
Float up and down with smooth animation
Coins
Randomly placed on valid platform positions
50% spawn chance on available spots
Floating animation synchronized with game time
Enemies
Spawn based on difficulty setting (30%-70% chance)
Patrol specific platform ranges
Animated walking sprites
Can be defeated by jumping on them
Background Elements
Furniture: Trees and decorative items placed on ground platforms
Trees: Variable height (0-3 middle segments)
Items: 3 variants randomly selected
80% placement rate for high decoration density
Parallax Layers: Clouds, far mountains, near mountains
Depth-based scrolling for 3D effect
Fog layers for atmospheric depth
Platform Types
Ground Platforms (ground)
Solid surfaces with grass on top, dirt below
Cannot jump through
Main navigation path
Box Platforms (box)
One-way platforms
Can jump up through from below
Solid when landing on top
Create alternate paths and shortcuts
Hard Platforms (hard)
Solid walls and barriers
Used for level boundaries
Block horizontal movement
Collision System
Spatial Culling
Only checks nearby entities for performance
Ignores off-screen platforms
One-Way Platform Logic
Box platforms allow upward movement
Prevents falling through when landing
Swept collision detection prevents phase-through at high speeds
Death Conditions
Touching enemy from side or below
Falling off the bottom of the map
Respawn after death (if lives remaining)
Particle effects on death
Actions & Events
The Letter Platformer triggers various actions for integration with your game:
On Win (success)
success)Trigger: Player collects all target letters
Payload: The completed word (string)
Use Case: Progress to next scene, show victory screen, award points
On Lose (fail)
fail)Trigger: Player runs out of lives
Use Case: Navigate to game over screen, retry prompt, score submission
On Restart (restart)
restart)Trigger: Player clicks "Play Again" after winning or losing
Use Case: Reset game state, increment attempt counter
On Game Start (start)
start)Trigger: Player clicks START for the first time
Use Case: Start timer, trigger intro animations, hide instructions
On Respawn (respawn)
respawn)Trigger: Player respawns after death (with lives remaining)
Use Case: Play respawn sound, show encouragement message
On Player Death (playerDeath)
playerDeath)Trigger: Player dies (hits enemy or falls off map)
Use Case: Play death animation, update death counter, show hint
On Coin Collected (coinCollected)
coinCollected)Trigger: Each time a coin is collected
Use Case: Track coin streaks, play custom sounds, show combo effects
On Letter Collected (letterCollected)
letterCollected)Trigger: Each time a letter is collected
Payload: The collected letter character (string)
Use Case: Reveal hints, show letter in UI, celebrate milestone
On Enemy Killed (enemyKilled)
enemyKilled)Trigger: Player defeats an enemy by jumping on it
Use Case: Award bonus points, track combat stats, trigger power-ups
Popular Use Cases
Spelling Practice
Create educational spelling games:
Setup:
Set Target Letters to vocabulary words
Enable Hide Letters to make it a discovery challenge
Set Difficulty to Easy for younger learners
Use On Letter Collected action to provide pronunciation audio
On Win: Show definition and use in a sentence
Example Flow:
Language Learning
Teach vocabulary in different languages:
Setup:
Use Target Letters with words in target language
Set Level Seed for consistent difficulty
On Win: Show translation and example sentence
Chain multiple Letter Platformer scenes for vocabulary lists
Speed Challenges
Create time-trial competitions:
Setup:
Set Random Level to
falsefor fair competitionUse specific Level Seed for identical levels
Enable Show Score for point tracking
Set Lives Storage to Shared to carry lives across attempts
Use Ranking component to display leaderboards
Settings:
Level Length: 100-150 segments
Difficulty: Medium or Hard
Hide Letters: true
Story Adventures
Embed words into narrative gameplay:
Setup:
Target Letters: Character names, magical words, quest items
Use custom Graphics (sprite sheet, backgrounds) for theme matching
On Letter Collected: Trigger story narration for each letter
On Win: Continue story in next scene
Example:
Math Word Problems
Combine platforming with problem-solving:
Setup:
Show math problem in previous scene (e.g., "5 + 3 = ?")
Target Letters: "EIGHT" (the answer)
On Win: Validate answer, proceed to next problem
Lives Storage: Shared (mistakes carry over)
Treasure Hunt
Create exploration-based gameplay:
Setup:
Target Letters: "TREASURE" or clue words
Level Length: Long (200-300 segments) for exploration
Hide Letters: true
Use custom backgrounds for themed environments (jungle, cave, ocean)
On Win: Reveal treasure location or next clue
Advanced:
Multiple Letter Platformer scenes for multi-stage hunts
Score Storage: Shared to accumulate treasure value
Custom sprite sheets matching theme
Global State Integration
Why Use Shared Storage?
Internal Mode
Best for standalone minigames
Each instance manages its own state
Simple, no cross-component complexity
Shared Mode
Perfect for multi-level games
Lives/score persist across scenes
Other components can read/modify values
Create meta-progression systems
Example: Multi-Level Platformer Game
Setup:
Using Variables in Text
Display game state in other components using templating:
Customization Tips
Creating Custom Sprite Sheets
💡 Important: Custom sprite sheets must follow an exact layout. The game expects specific sprites in specific positions. Any deviation will cause visual glitches or errors.
Sprite Sheet Requirements
Technical Specifications:
Sprite Size: Exactly 16×16 pixels per sprite
File Format: PNG with transparent background
Grid System: 16×16 grid with 0px spacing between sprites
Minimum Canvas Size: 112×112 pixels (7 columns × 7 rows)
Critical: Each sprite must be in its exact position. The game reads sprites based on grid coordinates, not by searching for them.
Complete Sprite Layout Map
The sprite sheet is organized in a grid where each cell is 16×16 pixels:
Row 0 (Y: 0px): Platform Tiles - Ground Surface
Column 0: Empty/Transparent (reserved)
Column 1: Ground Left Edge (grass, curved left)
Column 2: Ground Middle (grass, flat)
Column 3: Ground Right Edge (grass, curved right)
Column 4+: Additional decorative tiles (optional)
Row 1 (Y: 16px): Platform Tiles - Underground/Hard Surfaces
Column 0: Box Platform (one-way platform sprite)
Column 1: Hard Platform Left Edge (dirt/stone, left side)
Column 2: Hard Platform Middle (dirt/stone, center)
Column 3: Hard Platform Right Edge (dirt/stone, right side)
Column 4+: Additional decorative tiles (optional)
Row 2 (Y: 32px): Collectibles
Column 0: Coin sprite (16×16, single frame or first frame of animation)
Column 1-4: Optional additional coin animation frames
Row 3 (Y: 48px): Player Idle Animation - 5 frames required
Columns 0-4: Idle animation frames (character standing still, subtle movement)
All 5 frames must be present
Animation plays in sequence: frame 0 → 1 → 2 → 3 → 4 → repeat
Row 4 (Y: 64px): Player Run Animation - 5 frames required
Columns 0-4: Run/walk animation frames (character running, legs moving)
All 5 frames must be present
Plays faster than idle animation for smooth running effect
Row 5 (Y: 80px): Player Special Actions
Column 0: Jump sprite (single frame, used while in air)
Column 1-4: Can be copies of jump or unused (only first frame used)
Row 6 (Y: 96px): Enemy Animation - 5 frames required
Columns 0-4: Enemy walk animation frames
All 5 frames must be present
Enemy moves back and forth on platforms
Animation Frame Requirements
Some sprites require multiple frames for animation:
Player Idle (Row 3): 5 frames
Creates subtle "breathing" or idle movement
Tip: If you don't want animation, duplicate the same sprite 5 times across columns 0-4
Example: Standing pose → slight body movement → back to standing
Player Run (Row 4): 5 frames
Creates running/walking motion
Tip: Minimum viable animation: standing → one leg forward → standing → other leg forward → standing
Must have all 5 frames even if some are duplicates
Enemy Walk (Row 6): 5 frames
Enemy walking/movement animation
Tip: Can reuse player running animation with different colors if desired
Must have all 5 frames for smooth enemy motion
Single-Frame Sprites:
Jump (Row 5, Column 0): Only 1 frame needed
Coin (Row 2, Column 0): Only 1 frame needed
Platform tiles: Single sprites, no animation
Quick Tips for Non-Animators
✨ No Animation Skills? No Problem!
Creating Simple Animations:
Idle Animation: Draw your character once, then duplicate it 5 times
Optionally: Move the head slightly up/down in frames 2-3
Result: Subtle "breathing" effect
Run Animation: Use this simple 5-frame pattern:
Frame 0: Standing pose
Frame 1: Left leg forward
Frame 2: Standing pose (copy of frame 0)
Frame 3: Right leg forward
Frame 4: Standing pose (copy of frame 0)
Enemy Animation: Reuse your run animation
Change colors to make it distinct from player
Or flip horizontally for variety
Static Character: If you truly want no animation:
Draw character once
Copy-paste it 5 times for idle (Row 3)
Copy-paste it 5 times for run (Row 4)
Copy-paste it 5 times for enemy (Row 6)
Result: Character will slide without animating (retro style!)
Creating Your Sprite Sheet
Step-by-Step:
Create Canvas: 112×112 pixels (or larger multiples: 224×224, 336×336)
Enable Grid: Set up 16×16 pixel grid in your image editor
Draw Sprites: Place each sprite in exact position according to layout map
Transparent Background: Ensure background is fully transparent (not white)
Export: Save as PNG with transparency
Test: Upload to UFOLab and enable "Show Hitboxes" to verify
Recommended Tools:
Piskel (free, browser-based, perfect for pixel art)
Aseprite (paid, professional pixel art tool)
GIMP (free, powerful image editor)
Photoshop (paid, with pixel art plugins)
Common Sprite Sheet Mistakes
❌ Wrong sprite size: Using 32×32 or other sizes
Solution: Each sprite must be exactly 16×16 pixels
❌ Missing animation frames: Only 3 frames instead of 5
Solution: Duplicate frames to reach 5 frames total
❌ Sprites in wrong positions: Player on Row 2 instead of Row 3
Solution: Follow the exact layout map above
❌ Non-transparent background: White or colored background
Solution: Use transparent PNG background
❌ Spacing between sprites: Gaps in the grid
Solution: Sprites must be in a continuous 16×16 grid with 0px spacing
❌ Platform tiles misaligned: Different sizes for ground tiles
Solution: All platform tiles must be exactly 16×16 pixels
Visual Example Reference
Design Tips
Visual Clarity:
Use contrasting colors: bright player, darker enemies
Add outlines (1px black border) for better visibility
Keep details minimal at 16×16 size
Test at actual size (16×16) while designing
Color Palette:
Limit to 4-8 colors per sprite for retro aesthetic
Use consistent palette across all sprites
Reserve unique colors for important elements (player, enemies)
Animation:
Subtle movements work better than dramatic poses
Maintain consistent sprite center point across frames
Test animation speed in-game (some frames may play faster/slower)
Platform Tiles:
Ensure edges (left/right) connect smoothly with middle tiles
Ground surface should be visually distinct from underground (hard) tiles
Box platforms should look different (e.g., floating wooden crate)
Testing Your Sprite Sheet
Upload sprite sheet URL to Graphics Settings
Enable "Debug: Show Hitboxes" in Advanced settings
Preview the game in editor
Check:
All animations play smoothly
Platforms connect properly
No missing sprites (showing fallback colors)
Collision boxes match visual sprites
Adjust and re-upload until perfect
Creating Custom Backgrounds
Mountain/Cloud Assets:
Use PNG format with transparency
Recommended sizes:
Clouds: 64-128px wide
Far Mountains: 250-500px height
Near Mountains: 180-380px height
Images will be scaled automatically
Silhouette style works best (no fine details)
Color Coordination:
Match Sky Colors to your theme
Use Ground Color to tie together background and foreground
Fog Color should complement mountain colors
Performance Optimization
For Long Levels:
Use Level Length of 100-200 (sweet spot)
Longer levels (300+) may impact performance on low-end devices
Consider splitting very long levels into multiple scenes
For Complex Graphics:
Optimize custom sprite sheets (keep file size under 500KB)
Use compressed PNG images for backgrounds
Avoid excessive transparency in sprite sheets
If Something's Not Working
Letters Not Appearing
Check:
Verify Target Letters is not empty
Ensure level has enough length for letter placement (minimum 10 segments)
Look for letters floating above platforms (they may be off-screen)
Check if Hide Letters is enabled (shows "?" until collected)
Player Falls Through Platforms
Possible Causes:
Very high frame rate causing physics issues (rare)
Custom sprite sheet with incorrect collision data
Debugging: Enable "Show Hitboxes" to verify collision areas
Can't Jump Through Box Platforms
This is correct behavior:
Box platforms are one-way (jump through from below, solid from above)
Ensure you're jumping from below, not falling onto them from above
Can't jump through regular ground platforms (by design)
Enemies Not Spawning
Check:
Difficulty setting affects enemy spawn rate:
Easy: 30% chance
Medium: 50% chance
Hard: 70% chance
Very short levels may have few/no enemies
Increase Level Length for more potential spawn points
Game Too Easy/Hard
Adjust:
Difficulty: Changes enemy speed and spawn rate
Level Length: Longer = more challenging
Initial Lives: More lives = more forgiving
Random Level: Different layouts have varying difficulty
Level Seed: Some seeds generate harder layouts than others
Score Not Persisting
Verify:
Score Storage set to "Shared (Global State)"
Variable Name matches across all components accessing it
Using same variable name in text templating:
{{score}}
Custom Graphics Not Loading
Check:
Image URLs are accessible (test in browser)
Images are PNG format
File sizes reasonable (< 2MB per image)
Sprite sheet matches required 16x16 layout
Performance Issues
Solutions:
Reduce Level Length (try 80-120 segments)
Remove custom backgrounds if not needed
Disable Show Enemy Kill Counter if not used
Use Transparent Background only when necessary
Ensure sprite sheet is optimized (compressed PNG)
Creative Ideas
Progressive Difficulty Campaign
Create a series of platformer scenes with increasing challenge:
Structure:
Use Shared Storage for lives and score to create tension and continuity.
Hidden Message Game
Players collect letters across multiple levels to form a secret message:
Example:
Level 1: "THE"
Level 2: "KEY"
Level 3: "IS"
Level 4: "HIDDEN"
Final message revealed: "THE KEY IS HIDDEN"
Use different Level Seeds and Difficulty settings for variety.
Themed Platformers
Create immersive worlds with custom graphics:
Jungle Theme:
Green gradient sky colors
Custom tree backgrounds (Near/Far Mountains)
Brown/green ground color
Words: "JUNGLE", "VINE", "TIGER", etc.
Space Theme:
Dark blue/purple sky gradient
Star/planet backgrounds
Black ground color
Transparent Background for starfield effect
Words: "ROCKET", "STARS", "MOON"
Ocean Theme:
Blue gradient sky colors
Wave backgrounds
Blue-tinted ground color
Words: "OCEAN", "FISH", "CORAL"
Combo Chain Challenges
Reward consecutive actions:
Implementation:
Use On Coin Collected to track streak
Multiply points for unbroken chains
Use On Player Death to reset streak
Display combo counter with custom text components
Race Mode
Multiple players compete on the same level:
Setup:
Set Random Level to
falseShare specific Level Seed with all players
Use Ranking component to display times
On Win → Submit time to leaderboard
Daily Challenges
Generate unique levels each day:
Implementation:
Use Random Level =
trueor date-based Level SeedSame target word for all players
Shared Storage for global daily leaderboard
Reset at midnight using date-based seeds
The Letter Platformer brings classic platforming action to your educational and entertainment games. With extensive customization options, procedural generation, and deep integration capabilities, it's a versatile component that can adapt to countless use cases. Whether you're teaching spelling, creating epic adventures, or building competitive challenges, the Letter Platformer delivers engaging, replayable gameplay that keeps players coming back for more.
Last updated