Creating UI for a radio tuning mechanic

Godot Version

4.7

Question

Ok so, as part of a game jam, me and my team decided to go with a radio-tuning mechanic as our main hook for our game. that Mechanic being that you have a radio that you can freely scroll between frequencies on, and by standing in specific locations with the radio at specific frequencies, you can open doors and solve puzzles.

Now the actually mechanics of all this are working all fine and dandy. The problem we’re running into is figuring out how we’re supposed to get the UI for all this working. We originally decided to go for a skeuomorphic design where the radio would sit in the bottom left corner of the screen, and by pressing Q or E the dial on the right hand side of the radio would rotate and the red line would move across the frequency display to show which frequency you’re on.

However, unfortunately I learned that Godot really doesn’t want you stacking UI elements like that. I could theoretically make it a 2D game object instead of a UI element but then that’d raise the question of “how do i keep it on screen?”. I don’t feel comfortable scraping the idea but It might be the only way forward. I don’t know

If someone could please help me figure this out that’d be greatly appreciated.

How are you stacking your UI elements? Could you share a screenshot of your scene tree? What problems are you running into?

This is about as good as I’ve been able to get it after a lot of finagling. Biggest issue at the moment is getting everything’s size correct and also “how on earth am I supposed to move the read line left-and-right across the frequency display?” Also just to let you know Godot’s UI is my biggest blindspot so if there’s something I missed that’s probably why

You probably could use the new Offset Transforms for both the indicator line and the knob rotation. If Offset Transforms don’t help then I’d avoid the Containers, assuming your base radio image is the PanelContainer I’d change it to be a regular Panel with the knob and line as Texture children, anchored to the top and positioned/rotated by scripts.

hm, I think I see where you’re going with this.

That’s close to what I want. Main thing nose is getting the size right. I know of expand mode and stretch mode but I haven’t been able to trial-by-error my way into something that works yet. Also I Offset Transforms do work so that’s that part handled as well thankfully

Got it! Took a lot of code gore to get here but we got it in the end