With the new battle fatigue feature now implemented, I think it's time to take a fresh look at our battle UI And see how we can improve upon it. The battle UI is quite complicated and there's a lot to cover, so to start out with let's just talk about the main battle view when no command window, dialogue window, or anything else is on the screen. Here's what this looks like today, with the HP/SP fatigue system and indicators in the UI.
Looking at this, these are the problems I see:
- HP/SP numeric text is hard to read (simple to improve: needs a text shadow). Furthermore, the presence of this text covers up the HP and SP bars that now are a little more complex than a simple single colored bar. It can make it difficult to find what region of the bar is fatigue and where the active max HP/SP is (the small yellow bar)
- When there are two enemies of the same type in a battle, there's no way to differentiate between the two of them. You can't tell which icon on the stamina bar (on the right of the screen) corresponds to which spider.
- Although not seen here, when an actor receives damage the damage numbers are not bold enough to make it easy to see. Furthermore, the damage appears on the side of the character and moves around, which also make it harder to read.
I took a stab at this and here's the result, with markup annotations
I'm going to go through these changes/proposal from the markings here clockwise, starting from 12:00.
- Move the stamina bar to the top of the screen. This was Djinn's suggestion. I'll talk about that more later.
- Add an "A", "B", etc. to distinguish between enemies of the same type. On the enemy's action icon, I put an "A" to show the enemy there (the other spider is hidden behind the snake icon and would have a "B" icon)
- Added the distinguishing letter to the enemy target as "Spider A". Also some slight re-formatting of the text for the attack point target name (Head)
- Proposal: make an icon image of an arrow that sits between the action name and the target. Just to make it a little more clear that "X" is being done to "Y"
- Just a remark that these "arrow" icons are temporary/place holder images. I made these to get this feature working a long time ago, and we still need to replace it with something nicer
- Proposal: move the HP/SP number text to the right of the HP/SP bar instead of sitting on top of it and obstructing the view
- The greyed out "Swap" icon that is always in the lower left corner was for a feature we had planned long ago that would allow you to swap out party members mid-battle. I'm not worried about this feature at all right now because we won't have more than 4 characters for a long time still, so I just want to cut it out entirely. If we decide to have a swap party member feature later in the game, we'll just revisit the design and figure out what needs to change.
- Proposal: The damage numbers (12 on Claudius, 7 on the spider) might be better and more readable if they are above the head of the actor in question. This in addition to using a bolder/more distinguished font would make damage easier to track.
Now regarding moving the stamina bar to the top of the screen and making it horizontal instead of vertical. We've considered this in past design discussions. Here's Djinn's recent mockup that contains this suggestion.
The thing about the top of the battle background image is that it is supposed to be the most visually interesting aspect of the background. We also have support for this part of the background to be animated (imagine a castle under attack and seeing other NPCs and enemies fighting it out in the background). So I was really hesitant about putting any permanent UI elements over this part of the screen for that reason. However, there are benefits to doing it here as well. I think it would be easier to glance at and quickly assess the state of the situation. We would also be able to have a much longer stamina bar here, and icons wouldn't overlap so often or so frequently. I'm honestly torn about whether to keep the stamina bar where it is or move it to the top of the screen and make it horizontal. I could go either way really, so I want to hear more opinions about this.
The most difficult part about this current mockup is the HP/SP numeric text. We don't have a lot of room to work with here. And I also really like the look of our HP/SP bars and don't want to see those go away. While we might be able to squeeze in the HP/SP text now with these low-digit numbers, we wouldn't be able to fit late game HP/SP values which will have more digits. I'm at a loss about what to do here. Back in the day, we decided against not having a bar graphic and just having text like this: "HP: 1257/5428", because it's a lot more difficult to look at those numbers and figure out "Okay, I'm down to about 25% of my max health". Hence the bars, which are much easier for a user to glance and and quickly absorb the information. But the bars by itself are difficult as well, because then you don't have a good idea of "Okay, that enemy dealt 50 damage to me last round. How much of my HP did that remove?". This is why we have both the text and the bar graphics.
How can we make these both fit in this limited space in an aesthetically pleasing way? We also don't want to "hide" this information from the player ever, because they need it available 100% of the time to make informed decisions about their next actions.
End of rambling. I look forward to hearing others ideas/suggestions, and maybe seeing mockups from other people as well.