Game Developer & Designer Skill

Build complete, polished games with professional-grade mechanics, visuals, and player experience.

Core Workflow

1. •Analyze — Understand game type, platform, core loop, target audience
2. •Design — Define mechanics, progression, visual style, audio needs
3. •Architect — Plan component structure, state management, game loop
4. •Implement — Build iteratively: core → polish → juice
5. •Playtest — Test feel, balance, edge cases

Game Design Fundamentals

The Core Loop

Every game needs a satisfying core loop. Define it explicitly:

Action → Challenge → Reward → Progression → (repeat)

Example (Pong-style): Hit ball → Keep rally → Score point → Level up → Harder AI

Player Experience Pillars

• •Agency: Player actions feel meaningful and responsive
• •Challenge: Difficulty matches skill, with room to grow
• •Reward: Clear feedback for success (visual, audio, progression)
• •Flow: Minimize friction between player intent and game response

Platform-Specific Guidance

React Native Games: See references/react-native-games.md Web/HTML5 Games: See references/web-games.md Game Math & Physics: See references/game-physics.md

Implementation Patterns

Game Loop Architecture

// Core game loop pattern
const useGameLoop = (updateFn, isRunning) => {
  const frameRef = useRef();
  const lastTimeRef = useRef(0);
  
  useEffect(() => {
    if (!isRunning) return;
    
    const loop = (timestamp) => {
      const deltaTime = (timestamp - lastTimeRef.current) / 1000;
      lastTimeRef.current = timestamp;
      updateFn(deltaTime);
      frameRef.current = requestAnimationFrame(loop);
    };
    
    frameRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(frameRef.current);
  }, [isRunning, updateFn]);
};

State Management

Separate concerns clearly:

• •Game State: Positions, scores, level, entities
• •UI State: Menus, modals, settings
• •Input State: Current touches, gestures, keys
• •Audio State: What's playing, volume levels

Collision Detection

Start simple, optimize only if needed:

// AABB collision (rectangles)
const checkCollision = (a, b) => (
  a.x < b.x + b.width &&
  a.x + a.width > b.x &&
  a.y < b.y + b.height &&
  a.y + a.height > b.y
);

// Circle collision
const circleCollision = (a, b) => {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return distance < a.radius + b.radius;
};

Game Feel ("Juice")

Good games feel responsive and alive. Add juice through:

Visual Feedback

• •Screen shake on impacts (subtle: 2-5px, dramatic: 10-15px)
• •Particle effects for collisions, explosions, trails
• •Squash/stretch on bounces and impacts
• •Flash effects on damage or scoring
• •Trails behind fast-moving objects

Audio Feedback

• •Vary pitch slightly on repeated sounds (±10%)
• •Layer sounds for impact (hit + whoosh + bass)
• •Use rising tones for positive events, falling for negative
• •Add subtle ambient soundscape

Timing & Easing

• •Use easing functions, never linear motion
• •Add anticipation before actions (wind-up)
• •Add follow-through after actions (settle)
• •Hit-stop/freeze frames on important impacts (16-50ms)

AI Opponent Design

Difficulty Scaling

const AI_CONFIGS = {
  easy: {
    reactionDelay: 200,    // ms before responding
    predictionError: 0.3,  // randomness in targeting
    speedMultiplier: 0.7,  // movement speed
    mistakeChance: 0.15    // chance to miss intentionally
  },
  medium: {
    reactionDelay: 100,
    predictionError: 0.15,
    speedMultiplier: 0.9,
    mistakeChance: 0.05
  },
  hard: {
    reactionDelay: 50,
    predictionError: 0.05,
    speedMultiplier: 1.0,
    mistakeChance: 0.01
  }
};

AI Behavior Patterns

• •Reactive: Respond to current ball position
• •Predictive: Calculate where ball will arrive
• •Adaptive: Adjust strategy based on player patterns
• •Personality: Add quirks (aggressive, defensive, erratic)

Level Design & Progression

Difficulty Curve

Levels 1-10:   Tutorial zone — Teach mechanics gently
Levels 11-25:  Learning zone — Introduce variations
Levels 26-50:  Challenge zone — Test mastery
Levels 51-75:  Expert zone — Combine mechanics
Levels 76-100: Mastery zone — Peak difficulty

Progression Systems

• •Unlocks: New content as reward for progress
• •Upgrades: Permanent improvements
• •Achievements: Recognition for skill/exploration
• •Leaderboards: Social competition

Level Variation Techniques

• •Modify parameters (speed, size, count)
• •Add/remove elements
• •Change layouts
• •Introduce new mechanics
• •Combine existing mechanics

Visual Style Guidelines

Retro/Arcade (80s)

• •Neon colors: #ff00ff, #00ffff, #39ff14, #ff6b35
• •Scanline/CRT effects
• •Pixel fonts or bold geometric sans-serif
• •Grid backgrounds, glow effects
• •High contrast, dark backgrounds

Modern Minimal

• •Limited color palette (2-3 colors)
• •Clean geometric shapes
• •Generous whitespace
• •Subtle shadows and depth
• •Smooth animations

Pixel Art

• •Consistent pixel scale (don't mix sizes)
• •Limited palette per sprite
• •Clear silhouettes
• •Animation principles still apply

Sound Design Checklist

Essential sounds for most games:

• • Menu navigation (select, confirm, back)
• • Core action sounds (hit, collect, shoot)
• • Feedback sounds (success, failure, damage)
• • Ambient/background music
• • Transition sounds (level start, game over)

Implementation tips:

• •Preload all sounds before gameplay
• •Use audio sprites for web
• •Implement volume controls (music/SFX separate)
• •Support mute toggle
• •Vary sounds slightly to avoid repetition fatigue

Performance Optimization

Critical for Games

• •Target 60 FPS consistently
• •Minimize garbage collection (object pooling)
• •Use useMemo/useCallback for expensive calculations
• •Batch state updates
• •Profile before optimizing

React Native Specific

• •Use react-native-reanimated for animations
• •Avoid JS thread blocking during gameplay
• •Use native driver for animations when possible
• •Consider react-native-game-engine for complex games

Project Structure Template

game-name/
├── src/
│   ├── components/
│   │   ├── game/          # Game entities (Player, Ball, Enemy)
│   │   ├── ui/            # UI components (Button, Modal, Score)
│   │   └── effects/       # Visual effects (Particles, Glow)
│   ├── screens/           # Full screens (Menu, Game, Settings)
│   ├── hooks/             # Custom hooks (useGameLoop, useSound)
│   ├── context/           # State management
│   ├── utils/             # Helpers (physics, math, collision)
│   ├── config/            # Constants, level data, settings
│   ├── assets/
│   │   ├── sounds/
│   │   ├── images/
│   │   └── fonts/
│   └── types/             # TypeScript definitions
├── App.tsx
└── package.json

Quality Checklist

Before considering a game complete:

Gameplay

• • Core loop is satisfying
• • Controls feel responsive (<100ms latency)
• • Difficulty curve is smooth
• • Edge cases handled (pause, background, resume)

Polish

• • Visual feedback for all actions
• • Sound effects for key events
• • Smooth transitions between states
• • Loading states where needed

UX

• • Clear how to play (tutorial or intuitive)
• • Progress is saved
• • Settings are accessible
• • Pause functionality works

Technical

• • Consistent 60 FPS
• • No memory leaks
• • Handles interruptions gracefully
• • Works on target devices/browsers