Devlog 2: Functionality

Hi everyone!

I've been focusing on designing and implementing a functional graybox UI in the past two weeks. This means with this log, the build uploaded to the project page have also been updated! Go check it out the new update for yourself :D

That being said there's also a struggle with iOS platform, which is discussed towards the end of the log if you are interested.

---- Grayboxing ----

Gameplay screen

I iterated through a couple different designs. I thought I should lean into the touchscreen gesture input, because designing for a smaller touch screen means finding space for all the functionalities is difficult, but it brings up more opportunities to explore because it has a different set of affordances, and i've already got codes that reads dragging motion. I went with a vertical drag over a horizontal one because it allows me to collapse irrelevant parts and not repeat any information. 

Start menu 

I kept the mockup layout I did for the start menu. As I experimented with things this week, I ended up having the language buttons on the bottom corners. I was gonna do a seperate screen on start but I needed something to fill those spaces so I'll keep them there.. or I'll do both if I have the time but I doubt it.

Popups 

There are a couple places where I need a frame for things: building details, settings, and narrative introduction. In an ideal world I'd make something new for all of them, but the reality is I have 3 weeks left to have something presentable and I also have other things lined up so I need to be as efficient as I can in my design. I've learned from my uni capstone project Mens Mala that once I have a design for a frame I can stick it everywhere. It's always better than default and at least keeps the style consistent. I picked the circle and square layout from the start menu. The square is easily stretchable so the height can change depending on what content is in there. Above is an example of how the this frame is used in the build prompt popup.

---- Implementation ----

Scene layout and anchors

I’ve used Godot before for various small projects but this is the first time trying to polish a UI and needless to say, I was kicked in the gut for it. At the start I chopped up my sprites in the hope that I can reuse them in the scene and save some resources. But I struggled for a while just to get it to align and stretch as I wanted. So sprites are flattened back to as few as possible. 

The scene is arranged under the assumption that the width will always remain the same and stretches are always happening in the height because currently phones have a huge ratio between the width and height. You can see for the start screen elements on the top and bottom remain the same, and the straight bars in the middle stretches.

I’m trying to save repeatedly used structures as scenes as much as I can. For example, the main frame structure is used for starting screen and loading screen, so the basic structure is saved separately.  And I can expand and add in the extra elements in a deperate scene.

Drag bar

A lot of time went into implementing and debugging this drag bar. I thought I could reuse the code for dragging tiles but they don’t function the same way. For a major element of the scene, it needs to respond to input in more detail than swapping tiles. Currently it can register when you have pressed on the bar and will keep tracking the height of your finger till you release and will follow where your finger is. To improve the smoothness of the experience, a snap function is added to snap the bar to the desired position as long as the player has pulled it past the middle point.

Localisation 

As I mentioned in a previous log that I need to have Mandarin support for this game because it’s for my mum who only speaks Mandarin, but I also need to send it to my friends and others to playtest, and majority of them are English speakers. So I invested a little bit of time into how to localise a game in Godot. It was surprisingly easy, at least for a smaller scale game. I basically just followed this tutorial. And now I just need to write up the details for the buildings in 2 languages.

---- The Struggle ----

I could have finished implementing these way earlier if not for this rabbit hole I fall into. But instead I've spend 2 days trying to find a way to make my build run iOS devices.. I've tried hosting with github, setting up a developer iOS build and other things and none of them worked, at least with the amount of resource I have :( A very helpful person on the Godot Cafe Discord server suggest Xogot plugin, which is what I'm banking on currently. Unfortunately I'm gonna need a newer iOS device to test it on and it's for playtesting at best, but it's something?

It seems that if you want to deploy your project on iOS, you need to look into your engine choice very carefully. Like for example, Godot 3 seems to have better iOS web support than Godot 4, and I've made web-based mobile game before in Unity and it runs fine on iOS (still had occasional bugs that popped up but fixable). Please my friends.. Stay sane and do your research before making a commitment on platforms.

Also some my friends have been making devlogs too! 

Trackside View - Nostalgia and trains

Sack Investigation - Chaotic sack investigators

Again, the build have been updated. Please have a look at let me know what you think.  You can find me at @mallymiao.bsky.social or follow me on itch.