This video GUI/UI (User Interface) development using the Godot Engine. The Godot game engine provides a number of UI controls and widgets, in fact, the editor itself is created entirely using them! In this video, we look at all aspects of crafting a user interface including controls, styles, themes, containers, dialogs, and fonts.
Assets and Code Samples
The font used in this example is Asimov and can be downloaded for free here.
extends Button func _on_Button_pressed(): self.text = "Clicked!" func _on_Button_mouse_entered(): self.add_color_override("font_color_hover", Color(0,0,0))
extends Button func _ready(): var myTheme = Theme.new() myTheme.set_color("font_color","Button", Color(0,0,1)) self.set_theme(myTheme)
extends Node func _ready(): # The following line wires the cancel button of the dialog to our local function $FileDialog.get_cancel().connect("pressed",self,"_on_Cancel") # The following commented out line of code displays the dialog modally #$FileDialog.show_modal(true) # While this version displays the dialog as a movable popup button #$FileDialog.popup() # The following code would be called if you had a node named AcceptDialog added to your scene already #$AcceptDialog.get_label().text = "You OK with this?" #$AcceptDialog.popup_centered() #This code creates a dialog for displaying text to the end user progammatically var diag = AcceptDialog.new() diag.get_label().text = "You OK with this?" self.add_child(diag) diag.popup_centered() func _on_Cancel(): print("Cancelled") func _on_FileDialog_file_selected( path ): print("File selected at " + path)
extends Label func _ready(): var font = load("res://myfont.fnt"); self.add_font_override("font",font)
The assets used in this example can be downloaded here.