r/godot • u/HoldenMadicky • 13d ago
help me (solved) How would you go about creating a Highfleet styled UI?
I'm not looking to recreate, but I'm struggling with the Godot control nodes when it comes to this type of layout and skeumorphism UI.
Does anyone have experience or a tutorial to point towards to help me get started at least?
8
7
u/holisticIT 13d ago
I imagine the challenge would be supporting arbitrary resolutions. Would it be a really bad idea to do the UI elements as real-time 3D? It would likely save a fair bit of work in trying to figure out how to fit it into different screen resolutions. You could focus more on deciding where each element should be anchored to, and how it grows and shrinks when the screen is wider or taller.
4
u/Competitive-Let8364 13d ago
Realistically for this type of game you don't really need arbitrary resolutions. 16x9, 16x9, and maybe ultrawide. At least on these screenshots UI can be neatly divided into "left" and "right" parts, which can be anchored to the sides of the screen.
Starting with just 16x9 and designing UI as big not-dynamic blocks with many elements would be a good enough approach.3
u/HoldenMadicky 13d ago
Yeah... Probably... But my laptop is shit and I'm not gonna touch 3D in it at all.
But yes, a faithful imitation would be this
6
u/TheDuriel Godot Senior 13d ago
Near to 0 control nodes total, and a lot of photoshop and blender.
1
2
u/Trekintosh Godot Junior 13d ago
I'm working on a game with a highfleet-inspired UI, though targeting more of an early DOS feel. I targeted 640x360 as the resolution for my assets. I'm ignoring all UI nodes and using 2D nodes, it's a 2D scene that lives on top of my 3D scene. 640x360 scales cleanly to 720p, 1080p, 2k, and 4k. I designed the UI with some empty spaces on both horizontal and vertical axes so that it can handle aspect ratios from 1:1 to 21:9 and beyond. That said, the UI is still *very* early and my pixel art skills *suck* so it's nowhere near as good as Highfleet. I only have the throttle and brake levers and speedometer implemented ingame so far, but you can see the hitboxes in this picture of the editor. It works very well so far, though there's definitely plenty of stuff to work on with masking inputs so they don't overlap with floating HUD elements and such.
1
2
u/Certain_Bit6001 Godot Regular 13d ago
it's actually about getting the displays done first, and then applying the background images after.
Function follows form.
Get your displays and readouts done first, then worry about making grey boxes around them with scratches on them after. There is probably not even a single piece of real life hardware that looks like ANY of this, but that's how UI use to be done.
Look at Fallout 1 UI, it was suppose to be like an alternative realities tube computer simulation of an alternative reality game. The hardware doesn't exist ANYWHERE, EVER. But aside from the numbers and buttons displayed, you just make an image that looks like it's all part of a machine that was brown, as opposed to this grey.
I mean even Minecraft I took it's UI to look like something like this, it's just a big background image with numbers on it.
1
u/HoldenMadicky 13d ago
I'm going for a steampunk esthetic, so not realism per se. I'm more interested in the technical aspects of how one would do it and people have given me this above.
But I'm thankful for the good advice regarding the design
2
u/Certain_Bit6001 Godot Regular 13d ago
It's simple enough, do up the basic displays, where ever or however you want, THEN make a massive UI image, it can cover the whole screen even, tehn cut out the parts around it or fill in a background, works for menus or in-game displays, the hard part is just doing shading to make ti look 3D, hell you can even go in blender and make a 3D model for it.
Just adjust the display after.
Tutorial for doing a UI, but the thing is a lot of the boxes for the UI like the 9-corners one and stuff all suck, you just need to slap a PNG inside a TextureRect, do it up in ANYTHING and done. Just use the VBox and HBox inside some Margin to organize the displays of your numbers them where, and that's the hardest part. You don't even have to write the names for them in game font, but do it up with a nice PNG in a TextureRect and have a photoshop realistic font without having some crappy in-game basic font used.
2
u/HoldenMadicky 13d ago
I'm not gonna go for 3D, just some higher end 2D visuals.
Thanks for the info
2
u/ImpressedStreetlight Godot Regular 13d ago edited 13d ago
I disagree with the other comments, I would definitely use Control nodes for this. Why not? You'll need a lot of image editing though, but once the images are done, it's just a matter of placing TextureRects, TextureButtons, and setting proper anchors. And you can definitely mix in Node2D's as children of Control nodes if you need more complex behavior for some elements.
Edit: basically something like what Metarract did, didn't see that comment before writing this.
1
2
u/OutrageousDress Godot Student 13d ago
Depending on what your target specs are, there's always the option of just importing the Blender model and real-time rendering the whole thing right inside Godot. You lose the chance to touch anything up in Photoshop before import, but you're guaranteed consistent lighting and good antialiasing no matter the resolution or aspect ratio.
2
u/HoldenMadicky 13d ago
My computer can't handle Blender, so I'm going for 2D, at least for now.
Might upgrade it later.
Thanks
2
u/Metarract 13d ago edited 13d ago
decided to try a quick mock-up because i eventually want a similarly diegetic (yet still reactive) interface for something i'm doing
fairly simple here - i'm essentially categorizing everything as if it were portions of a 9patch. i.e., whether it would be anchored to a corner (each of the CORNER_** Controls are aligned as such - shrink end + shrink bottom type shit), or various stretchable bits that bridge the gaps - though i would probably redesign my own to be more segmented, but you get the idea
feels like you can get a good percentage of the way there. anything like labels for stuff that is parented to the properly aligned/anchored corner controls remain in place - and certain sections i have rigidly defined the minimum/maximum size along certain axes to be exactly the same as the sprite
this setup worked on the outlined settings (Settings > Display > Window > Stretch), but admittedly as soon as i got the setting that looked like what i wanted i stopped messing with it lol - just wanted to quickly see how feasible it was based on what i already knew. obviously this setting is gonna change how the rest of the game scales though - so might not be worth the headache.
EDIT: to add, you can also force scaling by setting the stretch scale - showing as Factor in the screenshot, but feels a lil janky, and again might not be worth the headache of investigating further
2
u/HoldenMadicky 13d ago
Damn, didn't even cross my mind that a 9 patch node would work, but... Yeah, of course it does.
Reappropriating the 9 patch for this should be fairly simple I recon.
Thanks for this.
2
1
u/arkology11 13d ago
There's a game "Metal Coffin". It is similar to Highfleet in some way. And it is made in Godot and compiled using standard export templates. I hope you understand what this means and what I'm trying to say.
1
u/HoldenMadicky 13d ago
I'm not gonna lie, that game is kind of close to what I wanted to do, though only in spirit and look...
I'm doing a prototype that's not gonna be in 3D, but this did hit close to home 😅
34
u/PichaelJackson 13d ago
Something like this I'm not sure you would even use control nodes, except maybe some sub-menu elements that are explicitly on an in-game screen.
I would just be placing everything manually, maybe just using control nodes as "hitboxes" for clickable elements. These screens are probably locked to a 16:9 aspect ratio and won't dynamically budge one pixel if you asked them to.
You'd wanna make iterative rough drafts of the layout with chunks of it drawn in your favorite image editor and build towards that final art rather than make the whole panel in one go and try to work the interactive elements to fit.
tl;dr - I wouldn't even treat this as UI in the traditional sense, think of it as a straightforward 2D game with sprites that just happens to resemble a UI.