Redesigning the stat-change HUD (Patreon)

hello, it is me, ame of the thyst. i am testing out patreon's cool new queued post feature by writing this post from the past. i'll set this to queue for next week, may 15th, 2022. let us hope that i don't accidentally slip my finger and set it to post a year later or something instead! haha, that would truly be awful!

today we're going to be talking about the process behind refining the HUD for stat changes in reborn! as you know, we just recently in the month of may released the full version of reborn, and it makes sense for me to be making this post just a little bit after that time, instead of, for random example, a year later. after all, since we just designed it a month or so ago, it is totally fresh in our minds!

so as many of you who have been around since before e19 will know-- that is, all of you, since we only just released it last month-- the following was a popular mod to help keep track of stat stages in battle:

during testing, waynolt, the mod creator, updated this version of the mod to e19 and suggested we implement it. i had already been considering doing so, but the biggest hang up for me was how ugly it was! it is very light and ugly, and it uses 1x, which is also very ugly and illegal in 13 states including reborn. this is unacceptable. so, at some point during testing-- that was, a little more than a month ago-- i began mocking up some alternative concepts for how to visually display stat changes!

here some are!

we are demonstrating using doubles, because doubles is very silly and crowded. if it were just for singles, this would have been much easier from the get-go. alas. 

my original plan was much more elegantly-implemented for singles too. looking above the main health bar, we have arrows pointing up and down for any number of categories. a total of up to six segmented arrows would, each color coding to increasing intensity, would stand out more and more visually as a pokemon got more stat changes stacked up. 

from the original mod, i had wanted to ugly text or relying on pixeled numbers, but for the icons of the stats themselves, i was Doing My Best with the limited space. it was something like:

• white vertical line, phys attack
• gold vertical line spec attack
• white horiz line, phys def
• gold horiz line, spec def
• white circle, accuracy
• gold circle evasion
• white star, speed
• gold star, crit rate

there are things i still like better about this! changing color according to the stat stage would be nice, and the visual difference between one and six stat stages is much more intuitively represented here than in the end-result system. 

however it looks very messy even for one pokemon, let alone two or four! because the display is rotated for the second pokemon in doubles, the up/down arrows become left/right which obfuscates it for colorblind players. 

here we try a different positioning! 

by having it hover on the screen edges rather than being attached to the HUD, we can freely position it over each battler and don't have to worry about re-orienting it and losing the arrows' directions!

ofc, when we're looking at this many pokemon with this many stat changes, it looks pretty crazy. here's how these might have looked in a more tame battle where everyone just got +6 evasion and -1 attack, for some reason

ultimately, the team liked the re-oriented version of this better than the screen-edge version. also, vulpes suggested swapping the stat symbol order so that 'gold' would always be the defensive version, which makes sense, and got us going down that split. 

smeargle tried out a different mockup:

although i love the simple radio sound bar look of this, there unfortunately isn't room there because of the shiny and status symbols. ideally, we might have expanded the width of the display, but it was too late in development to consider that.

the suggest to switch over to the current grid system came from waynolt himself! it was an unsure suggestion, as he didn't fancy himself a UI designer, but i took a swing at it and we liked it much better!

this starts to look much more familiar! 

we firstly yeet the crit display altogether, as it is not necessarily and was surely only added to round out the 4x2 grid in the original. but using vulpes's distinction of offense vs defense, all the defensive stats are on the bottom, physical on the left, special on the right, and speed in the middle.

the positions match the re-oriented angles so that it is clear who each mon's counter belongs to....  kind of...... not really.......

like, those are for alakazam (right) and vikavolt (left) but it looks like it's for alakazam (left) and minior (right).

so we gotta stack it. getting it small enough to fit the two on top of each other was a pixeling challenge, but we got there eventually!

we're getting there, but the positioning is much closer on the top rather than the bottom because of the angle of the HUD's jutting out!

an alternative try for doubles to avoid crowding:

the above was rough, but let's refine and squish it together:

finally, crim took a bat to it with a try and shrink it down even further:

and one more!

you can also see in the above, the original plan was to have the outline of each diamond change color with the general direction of the stat! we opted not to do that for simplicity of coding, and because of how easily it would get lost around the speed gem. instead, the outline became transparent for minimalism and then would be solidified, but sometimes i still think about it... 

here's a few tries at the transparency!

another quick color blind check, as we were lucky to have two people on the team who could confirm that the greens and reds were distinct enough, a brief nod to the reborn colors by making the stat down purple a bit stronger, and we all decided we were happy with it!

there was a lingering hesitation that it still might contribute to crowding, but we decided that as long as it was togglable, that wouldn't be too much of an issue.

here's how the color graphics look against a dark background when split up btw, i always thought it was just kind of nice:

the code can just easily blit from this grid of graphcs into the correct positions, and it becomes very easy! we passed it back to waynolt, who whipped it up into code for us, and that was that!

...kind of! we did have some interesting issues with the positioning bugging out when toggling, that took some community effort to finally iron down. big shout out to torre for finally being the one who found the cause of that, and let us proceed happily. 

and then! the stat icons! those were the work of pyrolusite in a UI overhaul mod. we've stolen work from him before, adopting the previous version of his reborn UI mod into the base game, but when i saw that he had managed to fit readable icons into the game, i asked he would mind us adopting them. so, they were added into a late patch of testing!

one last bonus!

at some point during testing, the positioning of the HUD got shuffled around, and we ended up with this!

i actually think this looks super nice! i don't know how or why this happened, but we are 2/2 on games just looking Better with less UI, but perhaps if we were ever to somehow return to brush up the appearance, we might adopt some of this aesthetic with just a minor fade behind.... i just think it's neat, don't you?

well, that's it for my post on today, may 15th, 2022! i hope this queues and posts safely! see you all later with some hot details from e19 testing, lol! 🤪