Web Games

Web Browser Game Development

Framework selection and browser-specific principles.

1. Framework Selection

Decision Tree

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser
│   └── Raw rendering power? → PixiJS
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
    └── Custom → Raw Canvas/WebGL

Comparison (2025)

2. WebGPU Adoption

Browser Support (2025)

Decision

• New projects: Use WebGPU with WebGL fallback
• Legacy support: Start with WebGL
• Feature detection: Check navigator.gpu

3. Performance Principles

Browser Constraints

Optimization Priority

1. Asset compression - KTX2, Draco, WebP
2. Lazy loading - Load on demand
3. Object pooling - Avoid GC
4. Draw call batching - Reduce state changes
5. Web Workers - Offload heavy computation

4. Asset Strategy

Compression Formats

Loading Strategy

5. PWA for Games

Benefits

• Offline play
• Install to home screen
• Full screen mode
• Push notifications

Requirements

• Service worker for caching
• Web app manifest
• HTTPS

6. Audio Handling

Browser Requirements

• Audio context requires user interaction
• Create AudioContext on first click/tap
• Resume context if suspended

Best Practices

• Use Web Audio API
• Pool audio sources
• Preload common sounds
• Compress with WebM/Opus

7. Anti-Patterns

Remember: Browser is the most accessible platform. Respect its constraints.

🧠 AGI Framework Integration

Hybrid Memory Integration (Qdrant + BM25)

Before executing complex tasks with this skill:

python3 execution/memory_manager.py auto --query "<task summary>"

Decision Tree:

• Cache hit? Use cached response directly — no need to re-process.
• Memory match? Inject context_chunks into your reasoning.
• No match? Proceed normally, then store results:

python3 execution/memory_manager.py store \
  --content "Description of what was decided/solved" \
  --type decision \
  --tags web-games <relevant-tags>

Note: Storing automatically updates both Vector (Qdrant) and Keyword (BM25) indices.

Agent Team Collaboration

• Strategy: This skill communicates via the shared memory system.
• Orchestration: Invoked by orchestrator via intelligent routing.
• Context Sharing: Always read previous agent outputs from memory before starting.

Local LLM Support

When available, use local Ollama models for embedding and lightweight inference:

• Embeddings: nomic-embed-text via Qdrant memory system
• Lightweight analysis: Local models reduce API costs for repetitive patterns