Making of (interface)

Making an interface in a video game is much harder than it looks, and it usually is scrapped and redone a few times over the course of a project development. It is a matter of showing all the required information, but not too much, so that it is readable, polished, and doesn't clutter up the screen. Most times, you'd like to have as few interface elements as possible. But in a strategy game, there are still many things that are absolutely necessary. You start out during the design with very simple sketches, like boxes and texts. It looked something like this a year ago, for the gameplay interface : [img]http://i.imgur.com/jESfRwu.png[/img] All of the elements are here, and many have actually been suppressed since then. That's because we simplified the game along the way. For instance, the action cards are moving up when you want to select them, and you click anywhere on them to trigger the action. So it's much faster to use. There is no camera change either - it's automated, when you leave a city and wander the map. The next step is to do a mockup of the interface, so that everyone agrees on what it would look like in the end. You have to decide on the art style. On Megalo Polis, it went very straightforward, and the first complete mockup is close to the final render : [img]http://i.imgur.com/cZbkGRP.jpg[/img] The interface work is also about all the screens you go through, like the main menu, or in our case, the US map : [img]http://i.imgur.com/ZCqMkTk.png[/img] This is one of the most complex screen of the game. It required a lot of work, preparing and animating each state. That work is done by Raphaël, the UI expert, along with the coders. Each click and mouseover has to work as planned, so that you get the required information, and launch the mission you indeed selected. Preparing and scripting each screen is a lot of work and finetuning, but there is also animating the page itself. You can go with a static screen, of course, but when elements move when you select them, it's overall much more satisfying for the user. This is done entirely inside Unity : [img]http://i.imgur.com/aHfaRgn.png[/img] In the end, there was some tweaking of the UI all around, but not by a lot. The art style was fixed from the start, and it was mostly adapting or adding some content for clarity.