MilesMouse
patreon
Progress Report 7/8/2022
🕑 Added 2022-07-08 22:18:15 +0000 UTCOkay, I might actually be melting this time... Here's what I got done this week:
- Added a text box for hexadecimal values for colors in the Giantess menu
- Made the color picker push other UI elements down when it's not minimized
- Fixed an issue in which the size of the color pickers grew each time the window size changed.
- Added all UI elements to the "Body" tab in the Giantess menu
- Added all UI elements to the "Face" tab in the Giantess menu
- Added all UI elements to the "Hair", "Clothes", and "Extras" tabs in the Giantess menu
I'll never not be amazed at how effective regular breaks can be. :D Alright, where to begin...
I'll start with the obvious issue: the buttons still don't actually do anything aside from interacting with other buttons. That's next on the to-do list for this prototype.
In better news, the hexadecimal text box was surprisingly simple. It's literally just a text box that takes whatever you type and turns it into a color corresponding to HTML color codes. You can even copy and paste the values! I couldn't tell you how the hexadecimal part works, but hey, if it ain't broken... On that note, its simplicity comes with a little bit of a quirk. Like I said, it's just a text box that takes whatever you type in it. You can even type your name if you want to (and I have), but it usually just returns a black color. It's behaving for now, but with no way of checking if the text is a legitimate color or not, I have no choice but to cross my fingers and hope this doesn't break anything. ^^;
Moving on, I made the color picker push all the other elements down! It was just a couple lines of code telling it to expand the minimum size of the rect of the-... er... Sorry, let me put this in layman's terms: I told the button to get bigger when the color picker is out and smaller when it's hidden. The containers (which I'm finally starting to get the hang of!) do the rest.
This same method made it possible to make a checkbox that pops out a corresponding color box under it, as seen with the "Wet" checkbox under the Body tab. This makes it more clear that the color only applies to whatever you're making visible. You want the giantess to be wet? Boom, choose a color of the liquid. She's not wet? Nothing to see here, move along. I'm pretty proud of this one. :)
With those tasks done, I was able to finish the Body tab! The rest of the tabs should all fall into place with what I've already created!
At least, that's what I thought. The Face tab had a bit of a curveball in there -- a curveball called "heterochromia". Heterochromia is a condition in which a pair of eyes are different colors, which is a very common aesthetic in anime. That's all well and good, but I needed to figure out an intuitive system of buttons to make it work. I went through a couple of iterations before finally doing something I should have done long ago: I simplified the prototyping process. I did so by opening notepad and playing around with something like this:
Eye Color:
[ ] Heterochromia:
[ Color ]
Eye Color:
[X] Heterochromia:
Right Eye:
[ Color ]
Left Eye:
[ Color ]
It's extremely basic, but holy cow did it help with visualizing the spacing without having to fight all the containers and fighting real estate with other buttons and exacting the coordinates and... ugh, there's a lot that goes into button placement... Anyways, this hyper-simplified prototype worked wonders for my caveman brain and I got it up and running soon after!
Now with THAT task done, I was able to glide through the Hair, Clothes, and Extras tabs in about 40 minutes. It's all about establishing the look and language of the UI; past that, it's just a bunch of copying and pasting elements as needed. But man... the setup is rough.
In fact, all of UI design is rough. Or should I say, UX design (user experience as opposed to user interface). After finally making it through this whole process, I needed to read some "UI design is hard" posts online as a vent. That's when I came across this post, which stilled any fears I had about taking as much time as I have been on this stuff. I completely forgot that there's an entire career path dedicated to making good UI and offering good UX to the player. This stuff is rough and often sucker punches new, naïve game developers. The worst part is that it's a thankless job; if you do the job right, not a single person will notice it. Still, building a good UI/UX system is very satisfying when done right!
This is all to say: I'm probably gonna be doing UI stuff for a good bit longer. Making a button is easy, but making a button that's clear in what it's doing AND making it aesthetically pleasing with everything around it is a deceptively difficult undertaking. Add that to the fact that I've got, what, 4 more menu screens to start plus all the menus that appear during gameplay? We're in for a UI adventure! It's... gonna be about as fun as it sounds...
Anyhoo, enough about menus. I'm gonna click the Taco Bell button and minimize the food into my mouth. This metaphor was brought to you by my lack of forethought. :D I'll see you guys again next week if I'm still sane!
Comments
Bombur
I know I'm late (awfully late) but this is some truly fascinating stuff and don't worry, I'm taking notes to discuss later ;)
Vis
Thanks, I'm trying my best!
Same here -- I just wanna crawl back into bed and sleep until Monday. ~.~ Right? I thought we were halfway through summer a couple of weeks ago, but then I looked it up and realized it hadn't even started yet. ;~; You take care, too! I hope you've been having a good summer so far (despite the heat)! ^_^
Vis
*Gives a comforting pat on the shoulder and a hug.* I'll be honest, I didn't read everything... because it is the weekend... and I am lazy. But I wanted to write something nice and motivating anyway. xD So keep on going, there are only.. wait.. how much more days of summer? .... oh god, no... Sorry, nothing nice here, were f*-ed :'D Anyway, take care and have a great weekend! ^-^
