Engineering a Real-Time Robot Battle Simulator: Lessons in Performance and Language Design

How I Built a Real-Time Robot Battle Simulator from Scratch — Logic Arena

Ali Haggag developed Logic Arena, a production platform where players use custom code to control robots in real-time battles. The system features a bespoke scripting language and a 60fps physics engine built entirely in TypeScript.

Why This Matters

Real-time simulation exposes the gap between theoretical logic and hardware reality. In this project, naive state management led to a catastrophic 3,862ms bottleneck on the main thread, proving that high-frequency updates (60fps) cannot rely on standard UI state patterns like React’s useState without causing severe performance degradation.

Key Insights

• Dual-State Architecture: Replacing useState with useRef for game logic while throttling UI state to 10fps eliminated a 3,862ms scripting bottleneck (v1.3.0).
• Custom DSL Pipeline: Implementing AliScript via Lexer → Tokens → Parser → AST → Server Evaluator allows for algorithmic control over robot actions.
• GPU Offloading: Moving pulse animations from JS callbacks to fragment shaders reduced CPU overhead and improved frame stability (v2.5.0).
• Resource Management: Using THREE.InstancedMesh reduced WebGL draw calls for obstacles from 30 down to 4.

Working Examples

Using the @Global() decorator in NestJS to enforce a single shared engine instance across modules.

@Global()
@Module({
providers: [GameService],
exports: [GameService],
})
export class GameModule {}

Implementation of dual-state architecture to solve main thread choking.

// Before: useState causes re-render on every tick
const [gameState, setGameState] = useState(null);

// After: useRef for game logic, throttled state for UI only
const gameStateRef = useRef(null); // updates at 60fps, zero re-renders
const [uiState, setUiState] = useState(null); // updates at 10fps, DOM only

Practical Applications

• ，{

References:

• From internal analysis