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

  1. Open your game in the UFOLab editor

  2. Navigate to the Components section in the component picker

  3. Select Letter Platformer from the minigame components

  4. 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: easy

  • Options:

    • 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: 100

  • Range: 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: false

  • When true: Generates a completely new random level each playthrough

  • When false: Uses the Level Seed for consistent generation

  • Use 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: true

  • When true: Shows "?" for uncollected letters

  • When false: Shows actual letters before collection

  • Use Case: Keep true for word discovery challenges, false for 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: false

  • When true: Removes sky and background rendering

  • Use Case: Overlay the platformer on custom scene backgrounds

Audio Settings

Mute

  • Default: false

  • Completely 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: true

  • Displays the integrated score counter in the top-left HUD

  • Tip: Disable if using custom score displays

Show Coin Counter

  • Default: true

  • Displays coin sprite and count in the HUD

  • Shows total coins collected

Show Enemy Kill Counter

  • Default: false

  • Displays 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: 50

  • Points awarded for each coin collected

Letter Score Value

  • Default: 500

  • Points awarded for each letter collected

Enemy Kill Score Value

  • Default: 100

  • Points awarded for defeating an enemy

Advanced Settings

circle-exclamation

Debug: Show Hitboxes

  • Default: false

  • When true: Renders collision boxes around player and enemies

  • Use Case: Debug collision issues or understand game mechanics

Lives Configuration

Lives Storage

  • Default: Internal

  • Options:

    • 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: lives

  • Name of the global variable for storing lives

  • Use this variable name in other components to access/modify lives

Initial Lives (Internal mode only)

  • Default: 3

  • Number of lives the player starts with

Score Configuration

Score Storage

  • Default: Internal

  • Options:

    • Internal: Score managed only by this component

    • Shared (Global State): Score accessible across the entire game

Variable Name (Shared mode only)

  • Default: score

  • Name of the global variable for storing score

Coins Configuration

Coins Storage

  • Default: Internal

  • Options:

    • Internal: Coin count local to this component

    • Shared (Global State): Coins persist across game scenes

Variable Name (Shared mode only)

  • Default: coins

  • Name of the global variable for storing coin count

Enemy Kills Configuration

Enemy Kills Storage

  • Default: Internal

  • Options:

    • Internal: Kill count local to this component

    • Shared (Global State): Kills tracked globally

Variable Name (Shared mode only)

  • Default: enemyKills

  • Name 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)

  • 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)

  • Trigger: Player runs out of lives

  • Use Case: Navigate to game over screen, retry prompt, score submission

On Restart (restart)

  • Trigger: Player clicks "Play Again" after winning or losing

  • Use Case: Reset game state, increment attempt counter

On Game Start (start)

  • Trigger: Player clicks START for the first time

  • Use Case: Start timer, trigger intro animations, hide instructions

On Respawn (respawn)

  • Trigger: Player respawns after death (with lives remaining)

  • Use Case: Play respawn sound, show encouragement message

On Player Death (playerDeath)

  • Trigger: Player dies (hits enemy or falls off map)

  • Use Case: Play death animation, update death counter, show hint

On Coin Collected (coinCollected)

  • Trigger: Each time a coin is collected

  • Use Case: Track coin streaks, play custom sounds, show combo effects

On Letter Collected (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)

  • Trigger: Player defeats an enemy by jumping on it

  • Use Case: Award bonus points, track combat stats, trigger power-ups

Spelling Practice

Create educational spelling games:

Setup:

  1. Set Target Letters to vocabulary words

  2. Enable Hide Letters to make it a discovery challenge

  3. Set Difficulty to Easy for younger learners

  4. Use On Letter Collected action to provide pronunciation audio

  5. On Win: Show definition and use in a sentence

Example Flow:

Language Learning

Teach vocabulary in different languages:

Setup:

  1. Use Target Letters with words in target language

  2. Set Level Seed for consistent difficulty

  3. On Win: Show translation and example sentence

  4. Chain multiple Letter Platformer scenes for vocabulary lists

Speed Challenges

Create time-trial competitions:

Setup:

  1. Set Random Level to false for fair competition

  2. Use specific Level Seed for identical levels

  3. Enable Show Score for point tracking

  4. Set Lives Storage to Shared to carry lives across attempts

  5. 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:

  1. Target Letters: Character names, magical words, quest items

  2. Use custom Graphics (sprite sheet, backgrounds) for theme matching

  3. On Letter Collected: Trigger story narration for each letter

  4. On Win: Continue story in next scene

Example:

Math Word Problems

Combine platforming with problem-solving:

Setup:

  1. Show math problem in previous scene (e.g., "5 + 3 = ?")

  2. Target Letters: "EIGHT" (the answer)

  3. On Win: Validate answer, proceed to next problem

  4. Lives Storage: Shared (mistakes carry over)

Treasure Hunt

Create exploration-based gameplay:

Setup:

  1. Target Letters: "TREASURE" or clue words

  2. Level Length: Long (200-300 segments) for exploration

  3. Hide Letters: true

  4. Use custom backgrounds for themed environments (jungle, cave, ocean)

  5. 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

circle-info

💡 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

circle-check

Creating Simple Animations:

  1. 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

  2. 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)

  3. Enemy Animation: Reuse your run animation

    • Change colors to make it distinct from player

    • Or flip horizontally for variety

  4. 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:

  1. Create Canvas: 112×112 pixels (or larger multiples: 224×224, 336×336)

  2. Enable Grid: Set up 16×16 pixel grid in your image editor

  3. Draw Sprites: Place each sprite in exact position according to layout map

  4. Transparent Background: Ensure background is fully transparent (not white)

  5. Export: Save as PNG with transparency

  6. 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

  1. Upload sprite sheet URL to Graphics Settings

  2. Enable "Debug: Show Hitboxes" in Advanced settings

  3. Preview the game in editor

  4. Check:

    • All animations play smoothly

    • Platforms connect properly

    • No missing sprites (showing fallback colors)

    • Collision boxes match visual sprites

  5. 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:

  1. Use On Coin Collected to track streak

  2. Multiply points for unbroken chains

  3. Use On Player Death to reset streak

  4. Display combo counter with custom text components

Race Mode

Multiple players compete on the same level:

Setup:

  1. Set Random Level to false

  2. Share specific Level Seed with all players

  3. Use Ranking component to display times

  4. On Win → Submit time to leaderboard

Daily Challenges

Generate unique levels each day:

Implementation:

  1. Use Random Level = true or date-based Level Seed

  2. Same target word for all players

  3. Shared Storage for global daily leaderboard

  4. 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