Dev Blog 8: UI Overhaul

The pace of development has slowed down a bit over the past month due to family obligations, but I have nearly completed a pretty significant overhaul of the way the combat sections of the game look. The user interface has been completely overhauled, both to look nicer and to fit in better with the new isometric viewpoint. Like a lot of people, I’m a big fan of the interface design in Into the Breach, so I’ve been referring to that game as one of my main inspirations in terms of how to do UI that communicates effectively in an isometric 2D game. After the jump I’ve got the first new screenshot that I’ve taken in quite some time, so let’s take a look at that and then I’ll go into a bit more detail about the changes and the new visual design.

New combat UI as of September 2018

For comparison, here’s the last screenshot I posted back in March:

Old combat UI in March 2018

All of the art is still temporary, but now I think it’s at least starting to look much more like a playable game. The UI is much cleaner and takes up less space, while also providing considerably more information. All of the actual art, which is to say the character sprites and the UI icons, is comprised of assets I downloaded from the Unity Asset Store. They are not final, and don’t even represent the look I want (The Last Virtue is a sci-fi game with a bit of a dystopian bent), but while I continue to look for an artist they make the game easier to read, and they’ll make it easier to put in proper art later. I’ve started picking fonts as well, and the font that’s used in all the text in the first screenshot is likely one that I’m going to stick with from here on out.

Now let’s go over some of what’s on display here.

In the top-left corner is a list of the characters in the player’s party, along with their current HP and any action points they have remaining (the blue stars are AP, and characters get two AP per turn to move and attack).

The bottom-left corner is where all of the active character’s abilities go. You get a standard bar with icons and numbers like in XCom, Shadowrun Returns, and most other modern RPGs. If you select an ability you can see its name, statistics (damage, range, and AP cost), and a plain English description of what the ability actually does. On the grid you can see red highlights on any tile in range that does not contain a valid target and green highlights on any tile that does contain a valid target. The orange tile is the currently active character.

The bottom-right corner contains a summary of all the info the player should need on the currently active character. The top panel is the character’s statistics (movement range, damage reduction, and the sum of any currently active damage bonuses). The right-hand panel is a set of icons for any currently active positive or negative status effects. The icons all have tooltips with more info on what the status effect is doing. The middle panel is a repeat of the basic character info from the top-left corner of the screen. And the bottom panel will eventually contain a list of the character’s traits. The trait system is still under development and is far from finished, but I did explain a bit about it back in June’s devlog.

Eventually the top-right corner of the screen will contain a character summary view of an enemy who has been targeted by an ability, so that you can see things like their statistics and traits before confirming that you want to use an ability against them. That view will be a mirror of the bottom-right panel, but it hasn’t been implemented yet.

I think the combat UI in its present state is highly usable, and looks much improved over the old version. Before it was pretty hard to understand if you weren’t me, whereas now I think anyone who has some experience with RPGs could jump right in and understand what they were doing, so the game is much closer to actually being playable without needing me to walk the player through how everything works.