Godot 3 Tutorial– User Interface Development

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.

Back to Tutorial Series Homepage

Scroll to Top