Multi-Scale Gameplay System

From micro-management to god's-eye view - one world, infinite perspectives

---

Why Multi-Scale Gameplay is Revolutionary

This is Gameplay Accessibility (a11y)

Multi-Scale Gameplay isn't just responsive UI - it's responsive GAMEPLAY.

Traditional "responsive design":

Mobile  →  Smaller buttons, simplified UI
Desktop →  Bigger buttons, more UI elements

RESULT: Same game, different button sizes

CASCADA's "Gameplay Accessibility":

Mobile  →  Different CONTROL SCALE (micro-management)
Desktop →  Different CONTROL SCALE (macro-management)

RESULT: DIFFERENT gameplay experience, SAME world, EQUAL VALUE

This is true a11y: The game adapts not just visually, but mechanically to your device's capabilities!

---

The Problem with Traditional Games

Traditional approach: One game = one interface = one device type

Mobile game  →  Simplified controls, limited view
Desktop game →  Complex controls, full view
Tablet game  →  Compromise between both

Result: 3 different games for 3 different devices

The Real-World Analogy: Artist & Canvas

Think about how real creative tools work across devices:

Digital Artist's Workflow

Morning - iPad Mini (portable device):
├─ Artist with small stylus (precise tool)
├─ Working on DETAILS: eyes, texture, highlights
├─ Zoomed IN very close (2000%)
└─ MICRO control: every pixel matters

Evening - iMac 27" (desktop):
├─ Same artist, same canvas
├─ Now sees ENTIRE composition
├─ Adjusts colors, balance, layout
└─ MACRO control: overall vision

Key insight: Same project, same artist, but different level of control based on device!

Architect's Workflow

On-site - iPhone (phone):
├─ Checking specific room measurements
├─ Detail view: door placement, window height
└─ MICRO: individual elements

Office - Ultrawide Monitor:
├─ Entire building layout
├─ Urban planning, traffic flow, city integration
└─ MACRO: strategic planning

🎵 Music Producer

Commute - Smartphone + AirPods:
├─ Fine-tuning individual instrument
├─ EQ adjustments, single track editing
└─ MICRO: detail work

Studio - Multi-monitor setup:
├─ Full song arrangement
├─ Mixing 50+ tracks simultaneously
└─ MACRO: orchestration

The Pattern Emerges

All professional creative tools follow this principle:

╔══════════════════════════════════════════════════════╗
║                                                      ║
║  Small Device  →  DETAIL WORK  →  MICRO CONTROL     ║
║                                                      ║
║  Large Device  →  OVERVIEW     →  MACRO CONTROL     ║
║                                                      ║
║  Same Project. Same User. Different Perspective.    ║
║                                                      ║
╚══════════════════════════════════════════════════════╝

Why Games Should Work the Same Way

Current problem:

• You play a different game on mobile vs desktop
• Progress doesn't translate
• Skills don't translate
• Experience is fragmented

CASCADA's solution:

• ONE world, multiple scales
• Play as individual hero on phone during commute
• Play as god of civilization on desktop at home
• Same account, same progress, same world
• Actions at MICRO level affect MACRO level (and vice versa!)

---

The Five Scales of Gameplay

CASCADA provides 5 abstraction levels that adapt to your device:

NANO     →  Individual character (mobile portrait)
  ↓
MICRO    →  Squad control (mobile landscape)
  ↓
MESO     →  Battle tactics (tablet)
  ↓
MACRO    →  Strategic map (desktop)
  ↓
MEGA     →  God's eye view (ultrawide)

---

Automatic Adaptation

Device Detection & Mode Assignment

Mobile Portrait (any size)
  → NANO MODE 
  → See: Character details, animations, nearby objects
  → Control: Direct character movement, combat

Mobile Landscape (>600px width)
  → MICRO MODE 
  → See: Squad of 5-10 units, tactical area
  → Control: Squad commands, formations

Tablet Portrait
  → MICRO MODE 
  → See: Tactical battlefield
  → Control: Multiple squads

Tablet Landscape (>1000x700)
  → MESO MODE 
  → See: Entire battlefield, army units
  → Control: Strategic commands, auto-battles

Desktop Small (1024x768+)
  → MESO MODE 
  → See: Regional map
  → Control: Army management

Desktop Medium (1440x900+)
  → MACRO MODE 
  → See: Strategic map, multiple regions
  → Control: Grand strategy, diplomacy

Desktop Large (1920x1080+)
  → MEGA MODE 
  → See: Entire world
  → Control: God powers, civilization management

---

Real-World Scenario: One Day, Three Devices

Morning - Subway (iPhone 375x667 Portrait)

7:30 AM - Commuting to work
Device: iPhone in portrait
Mode: NANO  (automatic)

Gameplay:
├─ You control ONE hero
├─ Detailed RPG-style combat
├─ Quest: "Deliver cargo to Port A"
├─ Combat: Fought 3 pirates, won
└─ Result: +100 gold, cargo delivered

Impact:
└─ Port A now has cargo (stored in world state)

Lunch Break - iPad (1024x768 Landscape)

12:00 PM - Cafe with tablet
Device: iPad in landscape
Mode: MESO  (automatic)

Gameplay:
├─ You see REGION overview
├─ Port A shows "+5% activity" (from morning!)
├─ Action: Build new trade route to Port B
└─ Result: Trade network expands

Impact:
└─ Cities along route start growing

Evening - Home PC (1920x1080)

8:00 PM - Desk setup
Device: Desktop PC
Mode: MEGA  (automatic)

Gameplay:
├─ You see ENTIRE world map
├─ Region shows "Economic boom +2%" (from your day!)
├─ Action: Bless winds → all ships get speed boost
└─ Result: Global trade increases

Impact:
└─ Tomorrow morning, your hero gets tailwind! (synergy!)

The Magic

╔══════════════════════════════════════════════════════╗
║                                                      ║
║  Morning NANO action  →  Delivered cargo             ║
║      ↓ CASCADAs up                                   ║
║  Lunch MESO decision  →  Built trade route           ║
║      ↓ CASCADAs up                                   ║
║  Evening MEGA power   →  Blessed winds               ║
║      ↓ CASCADAs down                                 ║
║  Tomorrow NANO        →  Hero sails faster!        ║
║                                                      ║
║  YOUR ACTIONS MATTER ACROSS ALL SCALES               ║
║                                                      ║
╚══════════════════════════════════════════════════════╝

---

Quick Start Guide

Test It Right Now

pnpm dev

# In game:
1. Press TAB      → Cycle through modes
2. Press 1-5      → Jump to specific mode
3. Press A        → Toggle auto-mode ON/OFF
4. Resize window  → Watch automatic adaptation!

What You'll See

Top-right corner shows:
┌─────────────────────────┐
│  MEGA MODE           │
│ Zoom: 0.3x | Speed: 10x │
│ [TAB] Change | [A] Auto │
└─────────────────────────┘

Press TAB → Mode changes:
MEGA → MACRO → MESO → MICRO → NANO → MEGA...

Resize window → Automatic mode switch!

---

Mode Comparison Table

Mode	Scale	Zoom	Time	Control	Use Case
NANO	Individual	2.5x	1.0x	1 character	RPG, Action
MICRO	Squad	1.5x	1.0x	5-10 units	Tactics
MESO	Battle	0.8x	2.0x	Armies	RTS
MACRO	Region	0.4x	5.0x	Strategy	Grand Strategy
MEGA	World	0.3x	10.0x	Civilization	God Game

---

CASCADA System: How Actions Flow

Up-CASCADA (Detail → Overview)

NANO Action:    Player delivers cargo
    ↓ Aggregates
MICRO Effect:   Port activity +1%
    ↓ Aggregates
MESO Effect:    Regional trade +5%
    ↓ Aggregates
MACRO Effect:   City growth triggered
    ↓ Aggregates
MEGA Outcome:   Economy boom +0.01%

Down-CASCADA (Overview → Detail)

MEGA Decision:  God blesses winds
    ↓ Decomposes
MACRO Effect:   Region wind direction changes
    ↓ Decomposes
MESO Effect:    All ships get speed boost
    ↓ Decomposes
MICRO Effect:   Squad moves faster
    ↓ Decomposes
NANO Impact:    Your character sails 2x faster!

---

Mode Details

NANO Mode - Individual Control

When: Mobile portrait, small screen

{
  device: "Mobile Portrait",
  zoom: 2.5,
  timeScale: 1.0,

  CAN:
   Control character directly (WASD/Touch)
   See animations, effects, details
   Tactical combat
   Interact with NPCs
   Pick up items

  CANNOT:
   Control other units
   Change landscape
   See full map
}

Example: You're in subway with phone → Play as RPG hero

---

MICRO Mode - Squad Tactics

When: Mobile landscape, small tablet

{
  device: "Mobile Landscape / Small Tablet",
  zoom: 1.5,
  timeScale: 1.0,

  CAN:
   Select squad (5-10 units)
   Tactical commands
   Formations (F1-F5)
   Slow motion in battle
   Mini-map

  CANNOT:
   Divine powers
   Landscape manipulation
}

Example: Tablet on couch → Squad-based tactics

---

MESO Mode - Battle Management

When: Tablet landscape, small desktop

{
  device: "Tablet Landscape / Desktop",
  zoom: 0.8,
  timeScale: 2.0, // Time speeds up!

  CAN:
   Control armies
   Raise/lower terrain (Populous style!)
   Auto-battles (no micromanagement)
   Strategic map
   Build structures

  CANNOT:
   Control individual units
   See animation details
}

Example: Home desktop → RTS-style gameplay

---

MACRO Mode - Strategic Command

When: Large desktop (1440p+)

{
  device: "Desktop 1440p+",
  zoom: 0.4,
  timeScale: 5.0, // Time flies!

  CAN:
   Manage entire map
   Divine powers (limited)
   Landscape manipulation
   Grand strategy
   Diplomacy, trade

  CANNOT:
   See individual soldiers
   Micromanagement
}

Example: Strategy gamer's setup → Civilization-style

---

MEGA Mode - God's Eye View

When: Very large screen (1920p+, ultrawide)

{
  device: "Desktop 1920p+ / Ultrawide",
  zoom: 0.3,
  timeScale: 10.0, // Time rockets!

  CAN:
   ALL divine powers (Populous!)
   Earthquake, Flood, Volcano
   Terrain manipulation
   Civilization observation
   Simulation (Conway's Life inspired)

  CANNOT:
   Control units (too small)
   Micromanagement
}

Example: Ultrawide monitor → God game (Populous/Black & White style)

---

API Reference

GameModeManager

// Initialize
gameModeManager.init();

// Get current mode
gameModeManager.getCurrentMode();
// → GameModeType.NANO

// Set mode manually
gameModeManager.setMode(GameModeType.MEGA, "manual");

// Cycle modes
gameModeManager.cycleMode(); // Next
gameModeManager.cycleModeReverse(); // Previous

// Check capabilities
gameModeManager.can("canUseDivinePowers");
// → false (in NANO mode)

// Subscribe to changes
gameModeManager.onModeChange((event) => {
  console.log(`${event.oldMode} → ${event.newMode}`);
  console.log(`Reason: ${event.reason}`);
});

// Auto-mode
gameModeManager.setAutoMode(true); // Enable
gameModeManager.setAutoMode(false); // Disable

---

⌨️ Keyboard Controls

TAB          - Cycle mode forward
SHIFT + TAB  - Cycle mode backward

1            - NANO MODE 
2            - MICRO MODE 
3            - MESO MODE 
4            - MACRO MODE 
5            - MEGA MODE 

A            - Toggle Auto Mode ON/OFF

---

Capability Flags

Full Capability Matrix

Capability	NANO	MICRO	MESO	MACRO	MEGA
Control Units
Command Squads
Command Armies
Manipulate Terrain
Divine Powers
Show Individual Units
Show Tactical Details
Show Strategic Map
Can Pause
Can Slow Time
Auto-battles

---

Multiplayer Scenarios

Scenario 1: Co-op Across Scales

Player 1 (Mobile, NANO):
├─ Controls hero
├─ Completes quests
├─ Fights enemies
└─ Explores dungeons

Player 2 (Desktop, MEGA):
├─ Sees entire map
├─ Helps with divine powers
├─ Creates obstacles for enemies
└─ Guides hero to objectives

Synergy: Hero + God = Ultimate team!

Scenario 2: PvP Different Scales

Army (Desktop, MESO):
└─ Controls large army

Heroes (Mobile, NANO):
└─ 3-5 players control individual heroes

Balance:
- Army strong in open field
- Heroes can do sabotage/raids
- Different skill ceiling

---

What's Already Working

pnpm dev

# In game:
 Auto-mode detection by viewport
 Smooth mode transitions (500ms)
 Camera zoom changes
 Time scale changes
 Keyboard shortcuts (TAB, 1-5, A)
 Mode info display (top-right)
 Console logs on mode change

---

📐 UI Adaptation Example

gameModeManager.onModeChange((event) => {
  const uiConfig = gameModeManager.getUIConfig();

  // Adapt icon size
  switch (uiConfig.iconSize) {
    case "small":
      this.setIconSize(16);
      break;
    case "medium":
      this.setIconSize(24);
      break;
    case "large":
      this.setIconSize(32);
      break;
  }

  // Show/hide minimap
  if (uiConfig.showMinimap) {
    this.minimap.setVisible(true);
    this.minimap.setScale(uiConfig.minimapScale);
  } else {
    this.minimap.setVisible(false);
  }

  // Simplify HUD
  if (uiConfig.simplifiedHUD) {
    this.hideDetailedStats();
  } else {
    this.showDetailedStats();
  }
});

---

Best Practices

1. Use Capability Flags

//  GOOD
if (gameModeManager.can("canUseDivinePowers")) {
  this.showDivinePowersUI();
}

//  BAD
if (gameModeManager.getCurrentMode() === GameModeType.MEGA) {
  this.showDivinePowersUI();
}

2. Subscribe to Changes

//  GOOD - Reactive
gameModeManager.onModeChange((event) => {
  this.updateUI();
  this.updateGameplay();
});

//  BAD - Polling in update()
update() {
  if (this.currentMode !== this.gameModeManager.getCurrentMode()) {
    // Heavy and inefficient
  }
}

3. Save State on Mode Change

gameModeManager.onModeChange((event) => {
  // Save current state
  this.savePlayerState();

  // Switch mode
  this.switchVisuals(event.newMode);

  // Restore state
  this.restorePlayerState();
});

---

Roadmap

v1.0 - Mode System (DONE)

• [x] Define 5 modes
• [x] Auto-detection by viewport
• [x] Keyboard shortcuts
• [x] Smooth transitions
• [x] Capability flags

v1.1 - Gameplay Adaptation

• [ ] Different logic per mode
• [ ] UI adaptation
• [ ] Performance optimization
• [ ] Touch controls for NANO (mobile)

v1.2 - Multiplayer Sync

• [ ] Simultaneous play in different modes
• [ ] Action synchronization
• [ ] Balance

---

🎉 Conclusion

╔══════════════════════════════════════════════════════╗
║                                                      ║
║  MULTI-SCALE GAMEPLAY IS THE FUTURE                 ║
║                                                      ║
║  🏠 Home (Desktop) → MEGA VIEW                      ║
║     └─ Manage civilization                          ║
║                                                      ║
║  🚇 Subway (Mobile) → NANO MODE                     ║
║     └─ Control hero                                 ║
║                                                      ║
║   Rotate device → Auto mode switch                ║
║                                                      ║
║   One world - Multiple perspectives!              ║
║                                                      ║
╚══════════════════════════════════════════════════════╝

**Test it now: pnpm dev → START GAME → Press TAB! **

---

📚 See Also

• Sphere of Influence - How scales interact
• Adaptive Viewport - Responsive game area
• Architecture - Engine design

---

Created: October 2025