(Reposted from cohost as that site is getting shut down by the end of 2024 )

Good functional UI design? No. 😪 

Tacky custom choice screen that got no other use besides literally one single moment for a very specific visual novel? Hell yeah! 🥳

This is WIP for "I saw it in the rain". Still struggling with a writing block so I did something else as a change of pace. Unfortunately for those who play my visual novels... design... is... my... passion. 👨‍🎨✨

This is probably not the actual BG that is depicted in the VN for when the choice is presented, so the transparency of the buttons should be more legible. Basically all the visuals are to be crops from one photo, as this was made for an O2A2 VN Project I couldn't finish on time. I can picture myself actually reusing this kind of layout if it fits narratively that you're always presented with two options. In the general use case, the text should not be rotated, but since this is a game where you're only given a choice once, I thought there's no harm to make it a little bit disorientating.

Rotation in Ren'Py is clock-wise and it is made easier if you set an anchor first, by default it takes the centre of a displayable: (0.5, 0.5). Such as setting anchor to (0,0), the top-left coordinate of the displayable (in this case the corner of a box with text) and specifying transform_anchor=True. In this particular code snippet, it's using the coordinates of the image (for imagebutton) as the space (164x374 image), so pos is relative to that. Legend for the marked approximations: red box represents the image size, yellow dot the pos location, and black box the boundary of the text.

$ imageLeft = Fixed(
    "/images/left_brain_choice.png", 
    Transform(Text(items[0].caption, size=55, color="#FFF", bold=True, pos=(80,325), anchor=(0,0)), transform_anchor=True, rotate=270), 
    fit_first=True)

Links to the image assets:

https://www.pexels.com/photo/empty-street-after-rain-10725827/

https://www.freepik.com/free-vector/camera-interfeace-smartphone-template_6555440.htm

https://www.pexels.com/photo/brain-model-on-plate-15410078/