Hi-ho, Wudge here. It's finally time to work on my CG album.
Because I'm extra, I didn't want the typical thumbnail grid you'd find in most games. Oh no. What I apparently need to do is to make my album look like a comic book: with various panel sizes that will be monochrome until you mouse cursor hover over them.
Thankfully, a few years(?) ago, I made serious headway towards bringing this idea to life! Long-time followers may remember this test screen:
Looks similar enough to what I've described, right? Though I now take issue with the bulky header and the textbutton list of other albums on the left side... I mean, I don't have enough CGs to fill up six whole albums.
As present day Wudge was reviewing this code and UI... unfortunately, I had some thoughts. And when I have thoughts, that usually means I'm gonna make more work for myself.
In regards to the album thumbnails, the commonly accepted renpy method involves cropping images in a photo editing program, and then storing the PNGs in a game folder.
Something like these, which total up to about 650 KB in file size.
But Herotome is already quite a large and image-heavy game. I want to reduce the file size by any means possible. Therefore, I decided I would recolor and crop the thumbnails in-engine.
image AlbumThumbnail_cropped_1:
zoom .6
im.Crop("images/CGs/Stills/warfight1.webp", (750, 30, 1090, 440))
image AlbumThumbnail_cropped_2:
im.Crop("images/CGs/Villain.png", (585,320,205,280))
...which then resulted in something like these:
...A bit time consuming to get the numbers exactly right, but no art program needed. These thumbnails total to less than 6 KB. A hundred times smaller than the PNGs, and I can resize and adjust them rather freely.
The above screenshot is just me testing out the code to make sure it worked though; for the actual UI design (making it look pretty, not just functional), I did have to hop momentarily over to clipstudio paint.
I brainstormed three possible layouts.
You can see I completely removed the bulky header, and replaced the list menu with some arrows to "flip the page"
The "actual comic book" design felt a bit dorky (and I'd have to draw the actual comic book base <_<); ultimately I was most drawn to having a darker background.
Which led me to this layout design...! Certain CGs have been blacked out for spoiler reasons. I was satisfied with it for the time being and moved back into coding to make sure it's functional.
Speaking of functional... While trying to code it, I got pretty tilted because the panels weren't lining up quite right LOL
But I figured it out after removing some unnecessary hboxes and vboxes. By the end, I think I was pretty much able to transfer the entire design over, though some of the crops ended up looking different.
... Pay no mind to the secret❤ CG in the lower right.
I'm not sure yet what I'm gonna do with the arrow icons, because without the white frame around them, they're almost impossible to see against the dark bg. I might have to switch to a lighter bg or... keep the white frame behind the arrows.
I also wrote one short transition passage, some notes for Mia, and I replied to some emailssss about some commissions. More on those soon maybe.
And I drew a TV for the living room because it annoyed me that my writing described a weather channel on the TV, but in the background image the TV was off.
Here's what the tv screen lookslike unblurred lol:
......Oh and uh, lowkey, Herotome's steam page officially got approved. You can go wishlist it now if you want. I'm kinda waiting for the trailer to be done before I make a more formal, splashy announcement.
