Devlog #003: Responsiveness


Hi everyone,

I didn't manage to push another patch last week, the US election had a heavy toll on my productivity... I hope to be able to upload an update this Friday if everything works well.

I'm mostly working on making all the UI responsive to different screen size because it was only optimized for 1080p and nothing else. That means there isn't much to show because it's either a broken interface or looks mostly like before. Here's a little progress update video that you can check out.

The battle screen was the hardest so far because it has so many buttons that need to be large enough to be clicked or dragged on but not overlap other important UI. I'm getting there but it's slow and being new to Godot's whole UI approach means I need to learn a lot.

Initially I used margin containers to space my interfaces but that was a bad idea because I put in hard pixel numbers to force margins and a gap of 100 pixels on a full HD screen might look good but is the vast emptiness of space on a tiny laptop screen. So I now put everything into hbox and vbox containers with the stretch mode enabled, meaning its content will be spread across the full width or height. The stretch ratio value is really handy because with that you can assign how much percentage (or weight, more accurately) the node should take up. So I used empty "spacers" to assign a percentage for empty space.

screenshot of Godot engine showing the animon HP and stats component divided by different colored areas. Beside it is a screenshot of the inspector showing two objects in a vbox container and the stretch ratio of a spacer set to 2

Image Description: screenshot of Godot engine showing the animon HP and stats component divided by different colored areas. Beside it is a screenshot of the inspector showing two objects in a vbox container and the stretch ratio of a spacer set to 2

 
Additionally, there doesn't seem to be dynamic text scaling so I had to script it myself. I made a relative font size script that lets you assign a reference object and a multiplier ratio. The size of the text is then set based upon the reference object's x or y size multiplied with a ratio or you can use the screen size as a reference too. It's not perfect but at least my text now adjust when scaling the window.

I'm sure there are better and smarter ways to do this and I'll definitely watch a tutorial to learn the proper ways but for now I wanted to keep the momentum. I sometimes learn better by failing and fixing it myself.

I hope the other screens (shop, kiosk, inventory, etc.) go faster so I can test everything and patch but we'll see. Thanks for reading!

Get Soulblaze

Download NowName your own price

Leave a comment

Log in with itch.io to leave a comment.