vision-royale

A real-time AI overlay for Clash Royale

Vision Royale Cover

1. THE PROBLEM

Clash Royale is a game of resource management. Elixir regenerates at a fixed rate — 20 per minute — and every card costs a known amount. A player who knows their own elixir count precisely and can estimate their opponent's remaining elixir has a meaningful strategic edge: they know when the opponent is elixir-starved and can't counter, and when to hold off on playing an expensive card.

The game's own UI shows your elixir as a bar with a small number. It does not show you your opponent's elixir. Vision Royale solves both: it reads your elixir directly from the screen with sub-pixel accuracy, and it computes the opponent's estimated elixir from play history and regeneration math — all rendered as a floating overlay on top of your game window.

2. THE ELIXIR DETECTION ENGINE

Marquee selection over elixir bar + live elixir count display Suggested image: screenshot of the overlay showing the marquee selection region drawn over the elixir bar, with the live elixir count rendering beside it

This is the most technically interesting component. Rather than injecting into the game process or reading from memory — which would trigger anti-cheat systems — Vision Royale reads the screen visually through the Canvas API.

How it works:

CaptureWindow.js captures the game window as a live video feed using Electron's native window capture. A hidden <canvas> element is drawn over this feed, never visible to the user but constantly sampling pixels from it.

The user performs a one-time calibration: click and drag a marquee selection rectangle over their elixir bar. This defines the detection region.

Once calibrated, the engine divides the selected region into 10 equal horizontal segments — one per elixir pip. On every requestAnimationFrame tick, it samples the center pixel of each segment and checks whether that pixel's RGB values match the signature elixir purple (#e23fe9) within a ±30 RGB tolerance. Segments that match are counted as filled; the total count is the current elixir.

WHAT'S NEXT

Vision Royale's module system was built to be extended. Four steps to add a new module — new state key, toggle, render block, CSS class. The foundation is already there.

The natural next modules:

  • Deck tracker — log your own played cards to display remaining cycle order, so you always know what's coming next in hand
  • Trade analyzer — flag positive and negative elixir trades in real time as you log opponent plays, surfacing whether you're winning or losing the exchange economy
  • Double elixir countdown — automatic timer overlay that tracks the match clock and highlights the transition to double elixir, the point where the entire pace of the game changes
  • Win condition detector — identify the opponent's likely win condition from their first 2–3 plays and surface a suggested counter-strategy

The most ambitious extension: a real-time decision-making bot. The elixir detection engine already knows your current elixir. The opponent tracker already models their remaining resources. Feed both into a card recommendation model — trained on high-ladder replays — and the overlay could suggest what to play and when: "Opponent has 3 elixir. You have 8. Drop the Hog."

The pixel sampling architecture means this requires no game API, no process injection, no terms-of-service violation. Just a model watching the same screen a human watches, thinking a little faster.