Juicing Human-Computer Interaction and UX (Unity juice techniques)

UX Improvements

While menus, loading screens, etc have been receiving polish and attention, the gameplay UX has been neglected (if few people are reaching the title screen, why bother?).

Now that our player population is picking up a bit, let’s fix that!

Line Renderer Effects : ArborVisualizationShape

Unity’s LineRenderer component is versatile, enabling the creation of arbitrary 2D shapes (via a new System developed this week– ArborVisualizationShape). Sounds useful for a sorely-missing tower defense stable– the entity vision radius!

See what they see!

This vision-distance visualization tech works on any gameobject with a “HasVision” component, which means it works on units as well as…

Towers!

When the player is thinking about placing a tower, we may help them decide by visualizing the attack area of the prospective tower–

But if we shrink this same shape, we can re-use it for a juicy little “click-confirm” effect (look closely at the mouse cursor)!

Seeing a little “splash” appear provides useful feedback, allowing the player to verify visually that the game understood their intention. Little effects like this add up, creating an experience that just feels better, even if it is difficult to explain why.

Card Cost Visualization

At the bottom of the screen lie the player’s equipped cards, each of which allows a particular tower type to be spawned in the gameplay area. A card the player can afford renders like this–

Chalky white background + black sillhouette. If the player cannot afford a card, it turns dark grey.

What if we try and pack a little more information into these card colorings?

Cards that can not be afforded will show the player how close they are via shading.

With this addition, players can use their peripheral vision to understand how close they are to affording that next critical tower– no need to divert their focus from the gameplay field (and risk their units in doing so).

Future improvements

Visual Clutter

In the gifs above, it is easy to notice the visualization rings appearing left and right. While sometimes useful, they often appear when not needed. Currently, when the user hovers their mouse over a unit, a ring appears instantly. In Life’s a Beach, most units have a similar visibility radius, so the information provided by these rings typically do not outweigh the visual clutter they generate. We will look to remove them from some units in the coming week.

Card Shading Inversion

Look at the following card below. The player is 75% of the way towards affording it. Almost there!

When the player can afford the card, it will turn a bright color. Why then, is the shading using the darker of the two grades as the “progress” bar? The lighter grey should be on the bottom of the above card ,representing 75% afforded, and the darker grey should represent the missing 25% of the card that is non-funded. An easy change, this will make this shading scheme (and what it represents) more intuitive.

Bonus : Google Ads Fail

Google’s automated ad-checking algorithm saw fit to label this image…

Don’t look!

As explicit (adult content). I wish google and its engineering team the best in what may be a difficult decade.

Subscribe to Future Devblogs!

Subscribe here to be notified when we publish future devblogs, tutorials, etc.