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.
The Video
Assets and Code Samples
The font used in this example is Asimov and can be downloaded for free here.
ButtonDemo.gd
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))
DynamicThemeOnButtonScript.gd
extends Button
func _ready():
var myTheme = Theme.new()
myTheme.set_color("font_color","Button", Color(0,0,1))
self.set_theme(myTheme)
Dialogs.gd
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)
LoadBitmapFont.gd
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.