Game menu evolution2020-04-16
Hi and welcome to our next blog post. Like the last one, this post will focus on graphics. We’ll show you the evolution of one of our in-game menus: the Warehouse menu. It’s an example of the game making process that’s not straightforward. Rather, it goes two steps forward and one step back. It’s constantly re-evaluated and reworked.
In the first picture you can see part of a “prehistoric” version of our Warehouse menu. Except for the goods icons, it was not yet touched up by our graphics department. We’ll breakdown the menu here now, so we can focus on graphics later in the post.
The first column represents warehouse storage—specifically, the current number of goods in the warehouse and it’s maximal storage capacity.
The second column features two arrows for each of the goods. These arrows alter the duties of the transport units (the delivery people) within the game. The first and second arrows activate/deactivate the ability to carry goods either to the warehouse or from it.
The last column contains a 3-state button that determines the activity of caravans. Caravans may export goods, import goods or do nothing with the goods in the warehouse. What exactly are transport units or caravans is not important for the following text.
The second image shows the first design of this functional prototype. The last column’s buttons changed from single, 3-state buttons (none) to three 2-state buttons with exclusive states. So now there’s the ability to change the activity of caravans in a single click. We also added triangle-shaped buttons to alter the maximum storage capacity of current goods, and we replaced the basic arrows with triangle-shaped buttons. We added small dots to improve button indication. We also added a stripe on the top of the menu with descriptions and icons for all the columns. Additionally, we added decorative elements throughout the menu for more aesthetic appeal.
The next picture shows some minor tweaks of the background graphics to improve readability. We also added more goods to the right side of the menu to give an impression what we’ll have when we further develop the menu. You’ll notice some of the goods icons on the right side are just copied to the left: they serve as placeholders for now, as we’re working on developing the rest of the icons.
Minor tweaks of the background in attempt to lighten the whole menu a bit.
…the next tweak was to reduce big contrast gaps between background stripes to let the players focus more on the information layer instead of the background graphics.
…which worked well, but the end result was too flat and boring.
The next iteration was quite big. We replaced the triangle storage capacity buttons with plus/minus buttons to better represent their function. We also added an arrow button to remove all assigned goods. Background graphic decorations were replaced along with the icons for the transport units and caravans.
On the bottom part of the window we added buttons for the easy setup of all transport units and caravans. And on the very bottom, we placed a “shield” icon to represent the warehouse building (using a picture of the bakery as a placeholder). We also removed some of the redundant indication dots.
We also tweaked the plus/minus buttons, which we found too small.
We added a background stripe behind the rows of each of the goods: the stripe disappears for goods with zero storage. The shield was removed—we decided to use it for production building menus only.
Caravan buttons proved too small for comfortable clicking and reading, so we replaced them with a single 3-state button. Essentially, we returned to the original system in the first version!
In the latest iteration, we changed the function of the disappearing background stripe. We really liked the idea of highlighting important goods for specific warehouses, but the capacity of current storage was not the right indicator. Now the stripe disappears when its goods have deactivated both transport units and caravans. This means that there can’t be any interaction with these goods in the warehouse, so the player doesn’t have to bother with them.
During development we also added features to let players change the number of columns. It helps for having a better layout considering the varying number of goods during the campaign, varying screen resolutions and, of course, future mods.
Here at the end, we’d like to mention this is the final stage of this menu. At least for now. But there can be a revision at any time, based on our or some player’s experience. If it’s necessary, we’ll make the fix.
This topic is an example of the development process for a partial feature of the game. The point being that you can consider the whole game as a sum of partial features like this one. So maybe now you can imagine that development of a game isn’t always straightforward: from the idea to the final product. There’s usually a lot of hidden work and from time to time…dead ends.
We hope you liked this post. Wish us a minimum of dead ends and stay tuned!Discuss this blog post on our forum or reddit.