Experienced programmer, new to Godot: making an LCARS interface?

Godot Version

4.*

Question

I’ve been programming in C++ for 20 years and in Python since 2.x, and I’ve gone through a Godot tutorial or two. I’m trying to make a quick beginner project: a sample LCARS interface, like Star Trek: TNG. Nothing fancy, just some buttons that boop and beep.

For reference: LCARS Intermix Scan (and hit play)

I’m torn on how to start: I want to be able to click the buttons on the left side, have them change color, and interact with whatever nonsense I put in the middle. (Probably a weather display, just to practice using html requests library.) I’d like things in the middle that can move around.

At first blush, this looks like a job for Godot’s UI library, but I might want it to be a bit more “Star Trek” and less “good UI”, if that makes sense.

Sprite sheets for the buttons on the side? Index color graphics so I can change the button to “orange” or “blue” in the palette? Or instead of that, maybe some sort of dynamic object for the side buttons? That way I can have the button expand in the Y axis when clicked and do some random nonsense to the display inside.

this will be super easy for you.
ok first download and open up inkscape. https://inkscape.org/
you are going to do this by TextureButton
go in to godot make a new UI scene
add a TextureButton click on it over on the right side you will see inspector
drop down textures. that’s what you need to make in inkscape.
under canvas Item under visibility you will see you can “modulate” the color of the button.
in inkscape make a grayscale version of your buttons export them as png save copy them to your godot project folder.
then in GDscript modulate the buttons to the correct color as needed.
you can click on node next to inspector then click on pressed to connect the button going down to a actual function.
if you want to build a C++ module start with learning that on a existing module like this GitHub - Zylann/godot_voxel: Voxel module for Godot Engine

1 Like

their is also messing around with godot’s UI theme system for the less image based controls. Tree UI might help you with the expanded. but I would just do the expanded as UI scenes(objects) that get UI_NodeToHoldExpand.add_child(ExpandedSceneNode)
so like you would save the scene and then hold control and drag the scene to your script you will get a line like this.
const EXPANDED = preload(“res://expanded.tscn”)
then you
var ExpandedSceneNode = EXPANDED.instantiate()
and
UI_NodeToHoldExpand.add_child(ExpandedSceneNode)

oh you can hold control and drag the TextureButton in to you GDscript and you get something like this.
@onready var texture_button: TextureButton = $TextureButton
then in a func you can
texture_button.modulate = Color.AQUA
to change the color

Awesome! Thanks; I hadn’t seen that. I’ll give it a shot.

I don’t fully understand the issue. That interface can be replicated in Godot (including interactions abd fancy stuff) with Control nodes (Godot ui nodes). You can also define custom control nodes with custom draws and custom interactions too, in case none of those fits exactly what you need.

Here’s a little introduction to Godot ui: