Here's the previous design applied to the code. Changes:
- Increased font size for both character names and HP/SP text
- Changed the colors of the bars to match the previous mockup
- Moved the HP/SP text back to white
- Removed the 8 pixel high "fade" from the background shadow. It is now all the same color, except for a single row of gray pixels at the very top.
- Adjusted vertical spacing of elements to account for making full use of the 128 pixel space
- Changed the HP/SP bar border image and text alignment to match last design draft
- Removed the yellow indicator bars (code is currently commented out and can easily be added back in if we decide we want to keep them).
The HP/SP bars are 80 and 60 pixels wide, respectively. I noticed the bars were of different sizes in the mockup and although I initially was skeptical about the idea, I decided it made sense after all since HP and SP will probably cover different ranges of numbers (1000s vs 100s) and also helps distinguish between the two a little better.
I decided to try out the HP/SP text as just being white. The reason we changed the color in the first place was because we moved the text and bars apart and needed a way to associate them. Now that the text and bars are back together, I don't see a compelling reason to color this text (and I think the text is more readable in white because it doesn't blend into the bar). We can easily change the text colors to match the bars if we want though. The HP bar still turns red when health is critical (< 20% I believe), but the HP text currently remains white regardless of bar color.
The new colors look a lot better. They are visible, but not blindingly bright. Because of this, i decided to remove the indicator bar and see how it looked. I like it better without the indicator bar, although it's still hard to tell between the darker green/blue color and black (players with poor vision would be even more affected). I'm a little torn about whether or not the max indicator mark is better to have or not.
The character highlighting needs to change, probably to something similar to the gray highlight in the design. The red highlight, while nice and consistent with our UI color scheme, wouldn't work well when we have an HP bar in the red. I'll work on this image in the near future.
The portrait is currently centered vertically. It is 100x100 pixels, meaning there's 14 pixels above and below it. I know that in your designs you liked to use another portrait that takes the entire space, but that's not an option I'm afraid. Like the damage frames of enemy sprites, the character portraits shown in battle show visible damage as well. That's why we use these specific portraits (it's another nice touch to show how hurt characters are). If we can figure out some sort of command button to put underneat the portrait (ie, show "Menu" and "Swap" keys), then we can move the portrait to the top and squeeze those in under them (with about 20-28 pixels vertical and 100 pixels horizontal space to work with).
There's empty space now to the right of the characters. Status icons should go here. Each icon is 25x25 pixels, and we have about 90 pixels of space between the SP bar and the action menu. That gives us room for 3 status icons to fit here, which should be plenty for most cases. If we have more than that, maybe we could have the status effects "scroll" through the area, or briefly show the different effects every few seconds.
Overall, I'm liking this direction a lot.