Devlog #16: Attack Range Indicator - Improvements & Optimizations

I recently had some design choices to make and I wanted to share them with you to get your feedback!

If reading isn't your thing, here are two short videos summarizing this devlog:

Visual Tests: [dynamiclink href="https://youtube.com/shorts/m5UJ6GY-fzM"]

Optimization: [dynamiclink href="https://youtube.com/shorts/Hb1PuXriMg8"]

Attack Range Indicator

For the Avant-Garde: Napoleonic Battles Demo, I wanted to improve the design of the unit attack range indicator. This indicator is intended to clearly show the player the attack zone of units, within which an enemy unit can be attacked if present.

Traditionally, in a real-time strategy game, a unit's attack range is only displayed in front of it, in red, at a predefined angle. Since Avant-Garde is based on a hexagonal grid (I explain why in this devlog), it seemed logical to show the extent of the zone in a 360-degree arc.

Unit attack range comparison between TotalWar Napoleon (left) and Avant-Garde: Napoleonic Battles (right).

A few months ago, during the initial iterations, I decided to use a thicker line for the outer border of the indicator and dotted lines for the inner region. While trying to improve and optimize the indicator, some design ideas came to mind, and I wanted to test them.

Visual tests and comparisons

Solid Color

I wanted to test a simple way to display attack range, using a solid color covering all the squares that make up the attack range. This result turned out to be visually unappealing and jarring.

Marked Circular Lines

In the game, the unit has a damage multiplier based on its distance from the enemy unit. To better represent this, I decided to add the thickness of the outer line to all the lines surrounding the unit. I found this result harder to read than I expected.

Solid Color with Transparency Level

Then, I tried solid colors per square, but with increased transparency the further the square was from the selected unit. The result is also difficult to read and understand.

Transparency gradient

What if, instead of displaying a solid color, I displayed a transparency gradient, allowing the player to better see the importance of the distance multiplier? I liked the result, but I found this solution very cumbersome on the battlefield, especially when units have a long attack range, like artillery.

Final choice

Not being convinced to change my initial design, I simply chose to improve it visually and optimize it.

Improving Visual Communication

In the prototype, the range indicator takes the form of a "sticker" placed on the terrain at the selected unit's position. This allows me to easily display the attack range on the terrain's contours.

However, being composed of a single sticker, it's not possible to account for the differences between the terrain's hexagons. For example, the indicator might be visible on a hexagon that is inaccessible to the units. This makes visual communication cumbersome.

Composing the indicator from multiple stickers is therefore a solution that would allow for the consideration of the nature of each terrain hexagon. I have thus opted for this option.

Graphics Resource Optimization

But in terms of graphics resources… isn’t it more demanding?

Absolutely, and it’s something I had to look into to ensure the game remained as accessible as possible for those without a cutting-edge computer. In fact, I realized that in my prototype, I was using a 4096x4096 (4K) resolution sticker, which is understandable, as it covered a large area of the playing field, up to 8 hexagons in radius. By using one sticker per hexagon, I was able to reduce the