Game Developer & Designer Skill

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

Core Workflow

• Analyze — Understand game type, platform, core loop, target audience

• Design — Define mechanics, progression, visual style, audio needs

• Architect — Plan component structure, state management, game loop

• Implement — Build iteratively: core → polish → juice

• 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