Here we are, the second devlog about the UI of the game Million Lords! In the last devlog (you can find here), we talked about the combat reports. Now it has been almost 2 months since this devlog and the global UI of the game has considerably changed since.
We’ve had a new addition to the team, Laila. She specializes in UI UX and she’s creating the game UI with Cédric, the graphics designer (he has written an article on assets here).
More than with the combat reports, we’ve been trying out several things to solve some problematics about the gameplay.
Here are some examples of how the game mechanisms raised some questions about how to create a readable and clear user interface.
The city listing : how to create a readable UI while arranging so much data?
In Million Lords, you have to conquer as many cities as possible. That is quite easy to understand. However, the problem is : how to keep track of all the cities I own in a procedurally generated world?
A list was a simple enough solution. But what else would be useful for the player? In the end we decided to focus on sorting the cities by their name, the number of soldiers in the city. We also decided to add a button “focus” : it shifts the position of the camera towards the city the player wants to focus to.
It was a necessary feature as it can be sometimes hard to find a particular city when it’s far from your main city.
Zoom level and city information : How to make each player distinct and easily recognizable from afar ?
Now another thing we had ( and still do) have to ponder on : there are many informations the user has to know about the cities on the map – the city name, the player’s name, the city’s level, the number of soldiers in the city and the player’s flag. Also you have to associate a color with the player : white for the player, red for enemies and blue for clanmates.
This is a really big load of information to write down on every single city in the game, so it’s pretty hard to decide on what’s important and what isn’t. There is a detailed report about each city available with one click below, so it’s really a matter of knowing what is indispensable or not.
One of the options we have is to create different levels of zoom. The more zoomed the player is the more information he has about the city. A mobile screen is so small you have to be as concise as possible. The buttons must not be too small so that the player can’t click on it, but it shouldn’t be too big either or you’ll lose some really valuable space.
Here is for example the biggest zoom : you have the player’s name, the city name, the flag, the city level and the number of soldiers stationed in the city. There might be a lot of information but as you don’t have many cities at the same time on the map, it evens out.
This is the second zoom. You have more cities on the map so it’s best to stay short. If the player is really interested in one city they will zoom in by themselves to see the city’s information. Now you only have the flag, the player’s name, the city level and the number of soldiers. The enemy players are still in red, the player in white and the neutral cities (to be conquered) are in gray.
Now, for the last zoom. You only have the flags, the city level and the color red or white. This also allows the player to have a wide overview of how they spread in the map and if there is only 1 enemy around him or several.
Here we are for this week’s devlog. The UI is still in progress but we are making giant steps 🙂
If you want to check out our other devlogs on art, assets and game UI, you’ll probably like these ones :
- Game assets creation process at Million Lords
- Game UI is your friend – #2 devlog
- Art? What is art? – #1 devlog
