Skip to content
three-flatland three-flatland

Knightmark

What It Demonstrates

Knightmark is a sprite stress test inspired by classic benchmarks like Bunnymark. It showcases:

  • Batch rendering — thousands of animated sprites in minimal draw calls
  • AnimatedSprite2D — frame-based sprite animation with multiple states
  • Spatial hashing — efficient collision detection between sprites
  • Y-sorting — depth-correct rendering via zIndex

Key Patterns

Animated Sprites with State Machines

Each knight has a state machine (walk, roll, trip, idle) driving its animation:

const sprite = new AnimatedSprite2D({
  spriteSheet: knightSheet,
  animationSet: knightAnimations,
  animation: 'idle',
  layer: Layers.ENTITIES,
});


sprite.play('run');
sprite.play('death', {
  onComplete: () => sprite.play('idle'),
});

Y-Sort Depth Ordering

Knights render in correct depth order by setting zIndex from their Y position:

sprite.zIndex = -Math.floor(sprite.position.y);

Spatial Hash for Collisions

A simple spatial hash grid enables O(n) collision checks instead of O(n^2):

spatialHash.clear();
for (const knight of knights) spatialHash.insert(knight);


spatialHash.forEachNeighbor(knight, (other) => {
  // Check distance and resolve collision
});

Next Steps