Technical Post #2: On TWA GNV mode (Patreon)

Hi hi!! It’s Adirosa here for this month’s technical post! 

I’ll be talking about… drumroll… the The Waters Above UI! Specifically, I’ll go into the design choices I made for the choice boxes in depth. I might go over the menus some other day, if y’all are interested, but we have lots of people writing about a lot of fun things, so... we’ll see!

So, I hope you’ve all played TWA:P! (If you haven’t, you really should!) Some of you may have noticed the two play modes in the options menu: ADV mode and GNV mode! GNV mode is a mode that minute worked really hard on to give a more graphic novel styled experience. It was something I pushed for a lot because I’ve always been a huge fan of Namie and Loika, so I wanted to frame the game in a way that would really show off our beautiful assets!

Every main character has a custom speech bubble and a custom narration bubble.

Maera

I began with the ideas of Maera’s textbox even before we decided to make a GNV mode! Namie’s beautiful designs really inspired me so I drew a lot of inspiration from the character designs. Maera’s colours are mint and pink - I wanted it to look classy, airy and refined. Her scallop design was a perfect fit! 

It took… a lot of refining to get here! I won’t show my entire hand because I don’t think I have enough space for it and we’ll document it more nicely in the artbook, but here are some WIPs:

Originally, her textbox was an off-white. We even played with the idea of different characters speaking in different fonts but we decided against that pretty quickly.

Isn’t that a big difference to what we have now!? Even things like her name icons went through many iterations and tests before we got a design we were happy with.

Clio

Clio’s design! Wow, what a rollercoaster... It was also one of the earlier ones I concepted, and it was one of the first mock-ups I ever did!

It was… a lot. Minute did a lot of the UI tests with this textbox too so it’s a part of TWA dev history. The general feel of the TWA UI was taken from the image Maera portrays - I think it was fitting, because it let me go for a light, watery look that was elegant but also illustrated. This is reflected in Clio’s designs, which took a while to get right! I needed that elegance to tie it with Maera and the game in general, but I also needed to get Clio’s individuality into it.

That sure was an attempt! It’s bad. I was really stuck and confused but then I slept on it and and looked at Clio’s design more and found my answer!

Once I figured out that Clio’s gradient was the key, it made designing the other boxes easier. I used the ruffles from her design to show her more wild, unrestrained side compared to Maera’s box!

Iris

Iris was a toughy but I’m really happy with the final results!

A major concern for Iris was actually if we should make her textbox light or dark! For accessibility reasons I wanted to keep it consistent, whether it was light text on dark or vice versa. I struggled a lot with the colour choices for a lighter textbox though - white just didn’t fit Iris. In the end we went with a darker box because they read a lot more like Iris. One of my favourite design choices on Iris is the cutouts on her hair, so I’m really glad we went with a design that implemented it!

Regarding accessibility, we decided to develop an ADV mode that was very consistent and customizable because it’s a lot easier to tile basic textboxes than the complex designs I was doing here. It’s a pity we couldn’t bring the font options to the GNV mode but I crafted the ADV mode with lots of love and care, too, so I hope y’all find the best way to experience TWA! Small reminder that you can hit ‘H’ at any time to hide the textboxes if you wanted to bask in the art.

Apple

It’s Apple!!! Apple’s design came really naturally to me. When I looked at Apple’s design, it just clicked into place! I wanted something that was fun, quirky, cute, and a lot of that was already in their design. The star cutouts are such a smart little touch! I added a little bowtie because I think that gives it that distinct Apple flavour.

Looking back on some concepts, J was pretty cute… but K’s a better fit for Apple!

And of course! The generic ones!

I gave it half a black background so you could see the little effect. The lower box is also the base box for ADV mode and is repeated a lot throughout the TWA UI in general!

In the end, each of the 1st narration boxes had to be scrapped because they didn’t scale well enough in Ren’Py… but I managed to find a spot for them anyway in the TWA:P title screen!!! Life plays out on fun ways.

Thank y’all for reading!!! I hope you had as much fun as I had writing this post. It’s really great to see how far we’ve come… If you wanna hear more from me, comment down below and let us know! There’s a ton of topics that I can still cover, including the logo design process (tl;dr: lots and lots and LOTS of font tests) and the menu design process for both games!

Love y’all!!! Thank you so much for supporting us, Adi out!