Dev Blog #3 - Grid: From a Napkin Sketch to a Scalable Visualization System

[p]Hello everyone!
In today’s dev blog, we want to share the story behind one of the core technical systems in Age After Age - our Grid Highlight System, which is responsible for visualizing complex calculations directly on the game grid.[/p][p]This system is used for many gameplay features, and it will continue to grow as the game evolves.[/p][p][/p][h2]It Started with a Simple Idea[/h2][p]One day (as it usually happens), our lead came to me and said something like:[/p]

[p]“We need a system that visualizes complex calculations on the grid.
This will be the foundation for future gameplay tasks.
It needs to show several zones and metrics at once, layered on top of each other - and the player must instantly understand the result.
Most important: fast, readable, no freezes.
Approach: dig, collect, build a solution.”[/p]

[p][/p][p]And then I was given a very simple concept - not about implementation, but about the idea:
there are several sources, each one has its area of influence, and all of this needs to be visualized clearly on the grid.[/p][p]At that point it looked like:
“Okay, we just highlight some tiles.”[/p][p]But very quickly it became clear:
we’re not drawing squares - we’re visualizing math, and math can be heavy.[/p][p][/p][h2]Digging: What Happens When the Grid Gets Big?[/h2][p]The first real question I asked myself was:
what happens when this is no longer 500 cells, but tens or hundreds of thousands?[/p][p]Because in the game, the player will not wait.
They move the cursor - they expect feedback instantly.[/p][p]So from the start, I introduced a hard rule:[/p]

[p]Heavy calculations should be moved off the game thread whenever possible.
The main thread should only assemble the final visual result and apply controlled updates.[/p]

[p]That decision shaped everything that came after.[/p][p][/p][h2]Iteration 1: Chunk Structure Was Born [/h2][p]I started with the foundation:
how do we store and update data without scanning the entire world every time?[/p][p]That’s where the chunk structure came in.
Essentially, it’s a container system that allows working locally - only updating and recalculating what is actually needed.[/p][p]At first it was created just for highlighting,
but very quickly it became obvious:
this is a universal structure that future gameplay systems can also build upon.[/p][p]What this gave us:[/p]

• [p]Local processing (no full-map scans)[/p]
• [p]A clear path to scalability[/p]
• [p]A base for caching and controlled updates[/p]

[p] [/p][h2]Iteration 2: First “Wow Visualization” and First “Uh-Oh”[/h2][p]Next, I built what everyone wanted to see:
the first real highlight visualization in the actual game scene.[/p][p]And this is where the interesting part started - because something that works in a controlled test can start breaking down in real gameplay scenarios:[/p]

• [p]Artifacts on zone borders[/p]
• [p]Issues when moving the cursor quickly or switching modes[/p]
• [p]Difficulty adding new highlight types without breaking existing ones[/p]
• [p]And most importantly performance when many cells are active at once[/p]

[p]So yes, it looked cool…
but I knew: if we leave it like this, the first serious feature will completely destroy this system.[/p][p] [/p][h2]Iteration 3: Clean Up and Survive[/h2][p]The third iteration was about survival of the system:[/p]

• [p]Fixes[/p]
• [p]Stabilization[/p]
• [p]Removing things that blocked further development[/p]
• [p]Making sure typical cases no longer broke the system[/p]

[p]But that still wasn’t enough. Because the problem wasn’t a single bug. The problem was that the system needed real architecture, not just patches.[/p][p][/p][h2]Iteration 4: Turning Highlight into a Platform[/h2][p]In the fourth iteration, I stopped building “a highlight system” and started building a platform for highlights.[/p][p]Several key principles became the foundation:[/p]

• [p]Separation of concerns
  Calculations, data preparation, and rendering must not be tangled together.[/p]
• [p]Thread-aware design
  It must be clear what can run in background threads and what must stay on the game thread.[/p]
• [p]Safe background processing
  Background tasks must not break frame stability or cause data races.[/p]
• [p]Editor-friendly setup
  New modes and rules should be added without rewriting half the system.[/p]

[p]After this stage, I finally had the feeling:
"Now this can actually be extended.
Adding new rules, modes, and metrics is no longer scary."[/p][p][/p][h2]What Gave the Biggest Performance Boost[/h2][p]After the architectural changes, the system stopped causing frame drops when the player expects instant feedback.[/p][p]The biggest contributors were:[/p]

• [p]Incremental updates (work is split into small steps instead of “everything in one frame”)[/p]
• [p]Caching of already calculated metrics[/p]
• [p]Parallel processing where it is safe[/p]
• [p]Highlight update budget (how much can be updated per tick without stalling the frame)[/p]
• [p]Culling (we only calculate and render what the player actually sees and needs right now)[/p]

[p]In the end, we achieved what the original task required:[/p][p]A system that is:[/p]

• [p]Clear to read[/p]
• [p]Fast to update[/p]
• [p]Scalable[/p]
• [p]Capable of processing extremely large data volumes
  (up to millions of cells in some internal scenarios)[/p]
• [p]Without the player feeling any delays or stutters[/p]

[p]And this system will now serve as the foundation for many future gameplay mechanics in Age After Age.[/p][p][/p][p]As you can see we are experimenting with the dev blog, in this particular we provided a though process which was taken to create the grid highlight system.
Hope you like it, we will continue to experiment on dev blog content. And see you guys in two weeks! [/p][p][/p]