Intuitive UI design workflow in Godot

UI Design Tool

Toolbar

Intuitive UI design workflow in Godot.

Import/manage font source files and styling UI directly in the editor viewport.

Features

  • Overlay Text Editor
  • Toolbar(Support batch edit):
    • Font:
      • Import and manage TrueType fonts(.ttf)
      • Font family
      • Font weight
      • Font size
      • Font color
    • Highlight
    • Horizontal/Vertical alignment
    • Font Style/Formatting(Typography hierarchy)
    • Utilities:
      • Clear font
      • Clear color
      • Rect size refresh

For more detail list, check CHANGELOG.md

Installation

  • Install directly from Godot Asset Library

or

  • Download this respository,
    1. Move addons/ui_design_tool to your {project_dir}
    2. Enable it from Project -> Settings -> Plugins

Usage

Toolbar

Show Overlay Text Editor

Select any Control node will show the toolbar at the bottom of 2D screen viewport, otherwise, it will stay hidden. Select multiple nodes to edit simultaneously.

Overlay Text Editor

Show Overlay Text Editor

Double click on Control node with text property(Label, Button, RichTextLabel, etc...) will show overlay text editor at mouse position.

Import TrueType Font(.ttf)

Click on Open Font Directory to select the root directory where your font source directories located.

Make sure the selected directory and filenames are structured as below:

  • {root_dir}
    • {font_dir}
      • {font_filename}{- or _}{weight_name}
      • ...
    • ...

Example:

  • fonts/
    • Arial/
      • Arial-Regular.ttf
      • Arial-Bold.ttf
      • Arial-Italic.ttf
      • Arial-BoldItalic.ttf
    • Courier/
      • Courier_Regular.ttf
      • Courier_Bold.ttf
      • Courier_Italic.ttf
      • Courier_BoldItalic.ttf
    • ...

Folder name of the font will be used as the font name in toolbar

Click on Refresh Font Directory to refresh the font list upon any changes made to the font sources.

Supported weight names (non case sensitive)

  • thin
  • extralight
  • light
  • regular
  • medium
  • semibold
  • bold
  • extrabold
  • black
  • extrablack

Supported italic weight names (non case sensitive):

  • thinitalic
  • extralightitalic
  • lightitalic
  • regularitalic/italic
  • mediumitalic
  • semibolditalic
  • bolditalic
  • extrabolditalic
  • blackitalic
  • extrablackitalic
Comments
  • Can not set font in RichTextLabel

    Can not set font in RichTextLabel

    在RichTextLabel 上设置字体,Godot提示这个错误

    Change Rich Text Fonts res://addons/ui_design_tool/scenes/Toolbar.gd:412 - Invalid get index 'normal' (on base: 'Dictionary').

  • Toolbar's visibility only on editables nodes.

    Toolbar's visibility only on editables nodes.

    Toolbar is now visible on all GUI nodes. That can be confusing for the users and that can make some conflicts and errors. On plugin.gd I replaced this function to make sure to active visibility of the toolbar only on effective text-label nodes with a list :

    func _on_selection_changed():
    	var selections = editor_selection.get_selected_nodes()
    	var is_visible = false
    	var focused_objects
    	if selections.size() == 1:
    		var selection = selections[0]
    		if selection is Control:
    			focused_objects = [selection]
    			is_visible = true
    	elif selections.size() > 1:
    		var has_non_control = false
    		for selection in selections:
    			if not (selection is Control):
    				has_non_control = true
    				break
    		if not has_non_control:
    			is_visible = true
    			focused_objects = selections
    	else:
    		focused_objects = []
    
    	toolbar.visible = is_visible
    	toolbar.focused_objects = focused_objects
    	overlay_text_edit.focused_objects = focused_objects
    

    by this one :

    var editables_nodes = ["Label","Button"] # list of editable nodes (make sure to add all editable node)
    
    func _on_selection_changed():
    	var focused_objects = []
    	for selection in editor_selection.get_selected_nodes():
    		if editables_nodes.find(selection.get_class()) != -1:
    			focused_objects.append(selection)
    
    	toolbar.visible = not focused_objects.empty()
    	toolbar.focused_objects = focused_objects
    	overlay_text_edit.focused_objects = focused_objects
    

    I am thinking to upgrade the func load_fonts(dir) to be enable to get any fonts blend inside the directory you want to load. Because, just as exemple when you download fonts on godot Assets the directory is not compatible with your tool.
    That will be for later. Anyway good job on that :)

  • can not load font

    can not load font

    你好,我用3.22的godot安装了这个插件,选择font目录加载对应的tff后,字体选项仍然是NULL。godot控制台报这个warning,能帮忙看一下吗?多谢! Mono: Logfile is: C:\Users\fang\AppData\Roaming/Godot/mono/mono_logs/2020_10_09 22.48.08 (7124).txt WARNING: call: UI Design Tool: Unable to locate usable .ttf files from D:/MyProject/GitHub/UIDesignToolDemo/resources/font, check README.md for proper directory/filename structure At: modules/gdscript/gdscript_functions.cpp:817

  • Godot AssetLib, fix two broken images

    Godot AssetLib, fix two broken images

    Tested in: v3.4.1.stable.official [aa1b95889] Windows 10 21H1

    This Godot plugin appeared when searching for "Tool", in the Godot AssetLib.

    Clicking on the plugin, opened the info window: UI Design Tool

    But it shows a broken image:

    broken image 1

    The second image works.

    But scrolling the images to the right, shows another broken image:

    broken image 2

  • Make sure assetslib does not see no needed files.

    Make sure assetslib does not see no needed files.

    When installing through AssetsLib

    Screenshot 2020-11-26 at 16 54 33

    on has to unselect some files and others are unnessary to see.

    Screenshot 2020-11-26 at 16 55 08

    By adding .gitattributes your ZIP download gets way smaller.

    See also https://github.com/bitwes/Gut/blob/master/.gitattributes and https://github.com/clemens-tolboom/godot_3_spawn_points/blob/develop/.gitattributes and their ZIP downloads at both GitHub and AssetsLib

  • Godot 4.0 port

    Godot 4.0 port

    Feel free to comment in this pull request if you have found any bugs.

    Know issues:

    • [ ] Error “res://addons/ui_design_tool/scenes/Toolbar.gd:40 - Got a freed object as a result of the call.”
  • Toolbar can't reflect the font type of RichTextLabel

    Toolbar can't reflect the font type of RichTextLabel

    The font type is always shown as "None" when open a scene that consist RichTextLabel with fonts that previously set by UIDesignTool's toolbar.

    This is a known limitation of UIDesignTool's toolbar, as it is dedicated to edit Control with single font. So, it doesn't make much sense to reflect RichTextLabel's font type out of the five font weights (normal, bold, italics, bold italics & mono), as they are not necessary from the same font type. What the toolbar does now, is simply override all fonts of RichTextLabel when setting font from toolbar. ezgif-3-6e481105a9c1

  • Able to edit non-related Control node

    Able to edit non-related Control node

    Font Family, Font Color & Highlight Color are always active regardless of whether selected Control node has font, font color & bg color property.

    Assigning font, font color & highlight color doesn't raise any error, nor will the assigned object be saved to scene file(.scn/.tscn), but the assigned object will be added to undo/redo stack.

A minimal material design based UI toolkit for Tiny Go projects
A minimal material design based UI toolkit for Tiny Go projects

A minimal material design based UI toolkit for Tiny Go projects.

Sep 3, 2022
Go-design-pattern-examples - Golang implementations of common design patterns

Design Patterns Golang implementations of common design patterns Build project T

Oct 29, 2022
Kakoune syntax highlighting for the Godot Engine / Godot Scripting Language gdscript
Kakoune syntax highlighting for the Godot Engine / Godot Scripting Language gdscript

gdscript-kak Kakoune syntax highlighting for the Godot Engine / Godot Scripting Language gdscript. Adds basic syntax highlighting to your .gd files fo

Mar 2, 2021
Intuitive package for prettifying terminal/console output. http://godoc.org/github.com/ttacon/chalk
Intuitive package for prettifying terminal/console output. http://godoc.org/github.com/ttacon/chalk

chalk Chalk is a go package for styling console/terminal output. Check out godoc for some example usage: http://godoc.org/github.com/ttacon/chalk The

Dec 23, 2022
A modern and intuitive terminal-based text editor
A modern and intuitive terminal-based text editor

micro is a terminal-based text editor that aims to be easy to use and intuitive, while also taking advantage of the capabilities of modern terminals.

Dec 30, 2022
Hunch provides functions like: All, First, Retry, Waterfall etc., that makes asynchronous flow control more intuitive.
Hunch provides functions like: All, First, Retry, Waterfall etc., that makes asynchronous flow control more intuitive.

Hunch Hunch provides functions like: All, First, Retry, Waterfall etc., that makes asynchronous flow control more intuitive. About Hunch Go have sever

Dec 8, 2022
clockwork - Simple and intuitive job scheduling library in Go.
clockwork - Simple and intuitive job scheduling library in Go.

clockwork A simple and intuitive scheduling library in Go. Inspired by python's schedule and ruby's clockwork libraries. Example use package main imp

Jul 27, 2022
Speak HTTP like a local. (the simple, intuitive HTTP console, golang version)

http-gonsole This is the Go port of the http-console. Speak HTTP like a local Talking to an HTTP server with curl can be fun, but most of the time it'

Jul 14, 2021
A modern and intuitive terminal-based text editor
A modern and intuitive terminal-based text editor

micro is a terminal-based text editor that aims to be easy to use and intuitive, while also taking advantage of the capabilities of modern terminals

Jan 7, 2023
A modern and intuitive terminal-based text editor
A modern and intuitive terminal-based text editor

micro is a terminal-based text editor that aims to be easy to use and intuitive, while also taking advantage of the capabilities of modern terminals.

Jan 5, 2023
GodSpeed is a robust and intuitive manager for reverse shells.
GodSpeed is a robust and intuitive manager for reverse shells.

GodSpeed is a robust and intuitive manager for reverse shells. It supports tab-completion, verbose listing of connected hosts and easy interaction with selected shells by passing their corresponding ID.

Dec 12, 2022
A lightweight Vault client module written in Go, with no dependencies, that is intuitive and user-friendly

libvault A lightweight Hashicorp Vault client written in Go, with no dependencies. It aims to provide an intuitive, simple API that is easy to use. Ju

Sep 18, 2022
Fast, intuitive, and powerful configuration-driven engine for faster and easier REST development
Fast, intuitive, and powerful configuration-driven engine for faster and easier REST development

aicra is a lightweight and idiomatic configuration-driven engine for building REST services. It's especially good at helping you write large APIs that remain maintainable as your project grows.

Oct 19, 2022
painless task queue manager for shell commands with an intuitive cli interface (execute shell commands in distributed cloud-native queue manager).

EXEQ DOCS STILL IN PROGRESS. Execute shell commands in queues via cli or http interface. Features Simple intuitive tiny cli app. Modular queue backend

Dec 14, 2022
Gomu is intuitive, powerful CLI music player.
Gomu is intuitive, powerful CLI music player.

Gomu (Go Music Player) Gomu is intuitive, powerful CLI music player. It has embedded scripting language and event hook to enable user to customize the

Dec 25, 2022
A cross platform CLI for Flyte. Written in Golang. Offers an intuitive interface to Flyte https://flytectl.readthedocs.io/en/latest/
A cross platform CLI for Flyte. Written in Golang. Offers an intuitive interface to Flyte https://flytectl.readthedocs.io/en/latest/

FlyteCTL Flyte's official command-line interface Documentation · Contribution Guide FlyteCTL was designed as a portable and lightweight command-line i

Nov 7, 2022
A simple yet intuitive golang unit test framework.

gotest Intuitive and simple golang testing framework which helps in writing unit tests in a way which improves the readability of the test. Here is an

Jan 1, 2022
Simple, intuitive and effective error handling for Go

Error Handling with eluv-io/errors-go The package eluv-io/errors-go makes Go error handling simple, intuitive and effective. err := someFunctionThatCa

Jan 19, 2022