Making aircraft display with Godot

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By DarKraD


I’m exploring Godot to make an aircraft primary display for an idea I’m trying to work on. For example, display like this: Boeing 737 primary display. Is it easy to draw those primitive shapes in Godot? For example, is there any drag and drop, builder kind that I can drag a circle in into Godot scene and resize/change color in there?

I only want to make the display for now. So nothing in 3D, no game aspect like collision, etc. And the data for the display will be provided by other simulator like X-Plane or Microsoft Flight Simulator.

Is this the task that suitable for Godot?

Thank you so much for your time and help.

I’m totally new to Godot and this forum in general. So if I’m making any mistake or this is not a right place for the question, please let me know. I will try and fix it asap.

:bust_in_silhouette: Reply From: archeron

You can build the primary display using Godot’s primitive drawing routines (see the documentation for CanvasItem - they’ll mostly cover your needs). There isn’t a ready-made drag-n-drop solution for basic shapes (except for rectangles and nine patch rects), though. You’ll need to create scripts to call the drawing primitives for anything that’s more complicated than a colored rectangle.

What I would do is create a scene for every single element (like altitude meter, horizon, speed meter etc). Then use background images you created in some graphics software package for the more complicated shapes that aren’t just rectangles, and attach some scripts to each of the elements and override their _draw methods to overlay the numbers and lines so that the display elements can react to changing inputs and won’t just display a static image.

For example, the following _draw method will overlay a display element such as a background texture or colored rectangle with 30 horizontal white lines that automatically adapt to the size of the display element. If you move or resize the background element, the lines will follow correctly. You can make them display in the Godot editor by using the “tool” keyword at the top of your script.

func _draw():
	var white = Color(1.0, 1.0, 1.0) # rgb color
	var r = get_rect()
	var vertical_spacing = r.size.y / 30
	var line_thickness = 2.0
	for i in range(30):
		var from = Vector2(0, i*vertical_spacing)
		var to = Vector2(r.size.x, i*vertical_spacing)		
		draw_line(from, to, white, line_thickness) 

It’s fairly easy to draw Text (for the numbers) and arcs, too.

Doing it like that will take a while to do, but the upside is that you’ll end up with basic display elements such as “altitude meter”, “speed meter” etc that you can then use to build lots of different cockpit layouts.

If you export relevant parameters, you can then also change these parameters in the Godot editor instead of having to change them in the script. For example, try attaching the following script to a ColorRect and see what it does:


extends ColorRect

# make this a constant - you'll have to change it in the script
const LINE_THICKNESS := 2.0 

# make these parameters editable in the editor's inspector
export var line_color := Color(1.0, 1.0, 1.0) # white
export var line_count := 30 # default is 30 lines

func _draw():
    var r = get_rect()
    var vertical_spacing = r.size.y / line_count
    for i in range(line_count):
        var from = Vector2(0, i*vertical_spacing)
        var to = Vector2(r.size.x, i*vertical_spacing)      
        draw_line(from, to, line_color, LINE_THICKNESS) 

Thank you so much for the detailed answer along with lot of example.

However, there is something I’m still unclear. You mentioned earlier that it will be difficult to draw shapes other than rectangle. So the best way to it something like a primary display is to use another program like GIMP or paint to create the same, then put it inside Godot? With that I don’t think I can change the color of the shape right?

So should I prepare all the shape colour / stage and then swapping them using the Godot script?

Again, thank you so much for your time and help.

DarKraD | 2021-03-23 19:52

Well, the answer is, uhm, complicated. Basically, yes, if you draw an image in Gimp and the import it into Godot, then the color stays fixed.

But… once you’re an advanced Godot user, you can create a special shader that takes, say, all the pink pixels of your image and replaces them with any color you want, on the fly, on your GPU, blindingly fast. That’s not even very complicated once you get the hang of custom shaders. So if you wanted to, you could still make the colors configurable if you took care to paint all the parts you want to assign different colors to in very specific, flat key colors that you can then “swap out” via a custom shader. But that’s really for later; for now, you could just make do with making multiple different versions of your images in Gimp. Switching from one image to another via a script is easy (basically you just change the texture-Property of a TextureRect object). And again, break down your cockpit into small pieces and draw each of those pieces as a separate image. Once you have all the little pieces, you can assemble them in Godot to make a whole, and arrange them differently for different cockpits (if you’re interested in multiple cockpits, anyway).

archeron | 2021-03-23 20:22

Thank you so much. I understand now. I will look into the CanvasItem as well as how to incooperate GIMP image into Godot and switching it out. I will also looking to Scene as you mention and will try to break down the primary into smaller piece.

I think the compass at the bottom might be the best piece for me to get my feet wet with Godot. It will be just a circle image with never-change number on top of it. It will just rotate either clockwise or counterclockwise depending on the the value. I will try and create both the circle and number with GIMP then import into Godot.

Thank you so much for your time and help. I really appreciate it.

DarKraD | 2021-03-23 20:51

The compass would actually be a good test case for learning how to draw lines and numbers with Godot, too. It’s basically just a lot of lines that you need to draw radially, and positions to calculate for the text. The circular grey background can be drawn with Godot’s circle draw primitve, or you can import it as a background image, whatever you prefer.

Drawing radial lines involves a bit of math, but it’s basically the same idea that I used to draw the horizontal lines in my answer - you just need to calculate the to and from coordinates differently.

Good luck with your project!

archeron | 2021-03-23 20:58

Thank you so much.

I will try to create the compass with both method today. I will be a good learning project for me.

DarKraD | 2021-03-24 12:01