The head-up display is an important part of the user interface of any game.
It needs to present a lot of information and interface elements, in a clear an concise manner. In Samurai Wars, although the current interface works and does the job, I’ve felt that there have been several flaws:
- it doesn’t scale well for matches with many players (or many teams for that matter)
- the top and center popup panels obscured too much of the battle field
- some inconsistencies here and there and some unintuitive choices
- it was inflexible and hard to generalize and add new functionality
The first step was to introduce the command bar, to hold the chat and command buttons, and that functionality was released in the last update. After a lot of brainstorming and lot of mockups and I think I have arrived at a nice solution for the other parts of the UI as well.
The head-up user interface has been rewritten in Angular2 Material, which is a really nice framework that makes the code well structured which means it is easy to maintain and add functionality. Some key improvements:
- cleaner layout, better use of screen space
- the same interface works well for both desktop and mobile
- the sidebar panel architecture will make it really easy to add more panels for stuff like user settings, additional match settings, more map tools, and whatever…
- chat works more smoothly, obscuring less of the battle
Here are some before/after screens: