Turret Icon

Highlights

C++
UI
Gathering feedback to improve UX
Vector mathematics

Context

My team was going through a project aimed at improving the 2D map of our game.

This project was requested by a specific customer but it was intended to become available to all.

One of the requirements was about displaying in 2D the orientation of the turrets of the 3D vehicles and I was the one who took care of this part.

There were 3 sets of challenges to overcome:

1) UX: the NATO symbology standards don't include any representation of turrets, therefore it was necessary to create an icon able to deliver the right message while fitting with the rest of the icons.

2) Vector mathematics: transforming a 3D rotation in 2D and applying it to an icon in screen coordinates requires a bunch of knowledge about vectors and their projections.

3) New C++ component: working with a new component requires familiarization with its classes and methods to be able to add and edit logic without disrupting the framework or creating duplicates.

Workflow

The whole process took around 10 days of work.

The difficulty with the UX challenge is that, due to how our business is structured, we cannot have wide user screenings to collect feedback, which left me with just two tricky options: 1) doing an internal poll 2) asking for feedback at least to the one customer that was paying for the project.

Why are these options tricky? Having a poll answered by a different target audience than the final one and gathering feedback from a single customer of a specific culture when the feature will be for all the customers will always be misleading.

But, hey, you have to work it out with what you have, so that's what I did, keeping all the due attention to the fact that the outcome would have been biased. So I drew some icons with Affinity Photo 2, pulled out a nice Google Form, and shared it with my colleagues.

I analyzed the results using Google Sheets, creating charts and other cool data visualizations. Did I pick the most-voted icon as the final one? Of course not. The goal of the form was to determine the better direction in which to move. Therefore, I discussed the results and my interpretation with the stakeholders and then picked an icon that we deemed to be the best one for our customers.

Then, we finally had the opportunity to talk to the one paying customer mentioned above and they gave us a great thumbs up.

Some examples of the icons proposed.

While the feedback machine was crunching, I was dealing with another challenge: vectors!

Now, did I study vector maths? A bit. Did I remember all of it? Not really.

Dealing with vectors is quite common in my day-to-day job, but turning a 3D vector rotation into 2D map coordinates and transformations required some research. It took me one day, but I came out with the necessary knowledge and a wacky prototype built in Desmos (you can find it here).

Thanks to that, I was able to pull out a first in-engine prototype:

Coming soon!

Ugly right? But as we say in Italy, every cockroach is beautiful to its mother and this first steps allowed me to find the right way to go and gather insights from programmers.

In fact, to implement this I had to get my hands dirty with C++ and change the relative component code.

Did I create new classes and methods properly for this first prototype? Hell no! I dissacrated the beautifdul and elegant structure created by the senior programmer in my team, adding code here and there to have my ugly rotating icon there. But that's what a prototype needs: bad code, quick results.

If you saw the video (if you didn't, now it's time for that), you'll have noticed that the black thing rotating is not a turret icon, but just a copy of the unit icon. Why that? Because I just needed to see how to apply the rotation relative to the unit's position to something else and I didn't want to waste time and focus on importing a new icon, so I just copied the one that was being rendered for the unit.

After I got my first prototype working, I had something to play with and started polishing it step by step.

First, I fixed an issue that was changing the distance between the unit icon and the turret's one when zooming in and out (it was due to the positions not being converted and updated from 3D to 2D sceen coordinates).

Then, I was finally able to import the icons I was creating and showing them in-engine, not just as a drawn mock-up.

Coming soon!

I was nearly there, but since I was ahead of schedule, why not trying something creative?

I get it, our is a serious game and a simulation, but my gamer heart was sending me Palpatine vibes ("DO IT!") and I quickly assembled this:

Coming soon!

Aren't those cute little tanks adorable?

Of course, they didn't make it to the final implementation but I got that "Everyone liked that" notification.

After a few days spent on implementation details and code reviews (yes, I polished the code and made our senior programmer happy, in the end), the feature was ready for testing:

Coming soon!

But what if one of the customers doesn't like the icon? And what about the most voted icons in the poll?

Fear not, thanks to our our config system and, modestly, to my kindness, I added a way to modify the icon by changing its source file and I provided the icons that won the poll in the relative folder, as ready-to-use alternatives (see them below).