Druid - Component GUI Framework

The Defoldmine
164

Thanks for that! It makes me so happy to see this :slight_smile:

1 Like
165

Thank you, everything worked out! :+1:

1 Like
166

I opened the Druid 1.0 example in Defold version 1.9.2, and it shows the following error. What should I do?
/example/components/example_scene/example_scene.gui
The file ‘/example/components/example_scene/example_scene.gui’ could not be loaded: Message missing required fields: script

Unable to open
/example/components/example_scene/examplscene.gui,since it contains unrecognizabledata. Could the project be missing a requiredextension?

167

What if you load it in the latest Defold version (currently 1.9.4)?

2 Likes
168

Success! Thank you very much!

1 Like
169

When I use edit -> create druid component, the following error appears. What should I do? The operating system is Windows 11.

ERROR:EXT: Create Druid Component’s “run” in /druid/editor_scripts/druid.editor_script failed: Command “bash ./build/run_python_script_on_gui.sh ./build/create_druid_component.py ./example/examples/basic/grid/grid.gui” exited with code 49

170

Druid 1.1.0

Release 1.1.0
Release 1.1.0800×450 142 KB

Hello there, Druid users!

The wait is over - Druid 1.1.0 has arrived! This update brings substantial improvements and exciting new features that make building UI in Defold easier and more powerful than ever.

By the way, the PR number of this release is #300. It’s sounds ve-eery huge and the long journey for me!

Highlights

  • Widgets are here! This is the evolution of custom components, but Widgets with totally no boilerplate code and far more convenient usage. All Druid examples have been migrated to use widgets. Widgets are now a default way to create a new user custom components.

The widget code is simple as:

---@class my_widget: druid.widget
local M = {}

function M:init()
	-- Druid is available now
	self.button = self.druid:new_button("button")
end

return M

To instantiate a widget, you need to call

local my_widget = require("widgets.my_widget.my_widget")
self.widget = self.druid:new_widget(my_widget, "widget_template_id")

To create a widget with a even more fast way, now you always can right click on GUI file and select Create Druid Widget to create a widget file for current GUI file nearby.

  • No more calling druid.register()! All Druid components are now available by default with self.druid:new_* functions, making getting started simpler than ever.

  • Druid UI Kit brings fonts, atlas, and ready-to-use GUI templates right out of the box - a long-requested feature that lets you use Druid UI elements instantly in your projects. I think now it’s a possible to create even a external dependencies with a set of GUI templates and Druid’s widgets to make a ready to use UI kit for projects! The flow to init widgets always now from two steps:

    • Add GUI template to your GUI scene
    • Call self.widget = self.druid:new_widget(widget_file, "template_id") to init widget
    • or Call self.widget = self.druid:new_widget(widget_file, "template_id", "tempalate_id/root") to clone root node from template and init widget from it

  • Completely reworked documentation with full code annotations. Let’s check the new brand Quick API Reference to get familiar with Druid. Any documentation are generated from the code annotations, so in case to update documentation, you need to update annotations in the code directly.

  • Updated Editor Scripts. The editor scripts also reworked to be in pure Lua without any dependencies, so using additional options now are much easier. Now for the “Create Widget” or “Create GUI Script” the template can be changed in dedicated “Druid Settings” menu

druid_settings
druid_settings556×514 36.3 KB

Breaking Changes

  • druid.event has been replaced with the defold-event library, requiring a small migration in your code if you were using Druid events directly before. Double dependencies: defold-event and druid are now required to use Druid.

This release represents a major step forward in making Druid more maintainable, readable, and powerful. Check out the full changelog for all the details!

The contributing guide is created for people who want to contribute to the Druid.

Thank you for using Druid and please share your feedback!

Changelog 1.1.0

  • [Docs] Reworked all documentation pages
    • The code now is fully annotated
    • The old API website is removed
    • The API now placed as a markdown files in the api folder of the repository
    • Start with Quick API Reference to learn how to use Druid
  • [BREAKING] Remove druid.event, replaced with defold-event library. Now it required to two dependencies to use Druid.
    • This allow to make more flexible features, like shaders and sync init functions between script and gui_script in various cases.
    • You need to migrate from require("druid.event") to require("event.event") if you are using it in your project
    • If you are used event.is_exist() now, you should use #event > 0 or not event:is_empty() instead
    • Use 11+ version of defold-event library: https://github.com/Insality/defold-event/archive/refs/tags/11.zip
    • Read defold-event to learn more about the library
  • [UI Kit] Add Druid UI Kit, contains druid.atlas, druid_text_bold.font, druid_text_regular.font so now you can use Druid GUI files in your projects.
    • Contains mostly basic shapes for the UI and can contains several icons. Atlas is a small, only 128x128 size and will be included in build only if you use it. Probably will grow a little bit in future.
    • A long waited feature which allows try or just use some Druid GUI features almost instantly.
    • No more “rich_input” template is not working! Should be good for now.
    • Now GUI files from Druid can be added inside your project.
    • This allow to include Default Widgets - ready to use GUI templates
    • Two fonts will keep in the UI Kit: druid_text_bold.font and druid_text_regular.font. They each of them ~100KB, already contains extended characters set, with font size of 40.
  • [Widgets] Widgets here!
    • A replacement for Druid’s custom_components. Basically it’s the same, but widgets contains no boilerplate code and more convinient to use.
    • Now I can include a kind of widgets with Druid and you can use it almost instantly in your project.
    • All Druid Examples was migrated to use Widgets instead of Custom Components.
  • [Widgets] Widgets can be used in GO script files.
    • It’s a kind of experimental feature, but looks fun to check.
    • Added the druid_widget.gui_script which can register a Druid instance for this GUI scene.
    • You can use druid.get_widget(class, url) to get a Druid instance in GO context.
    • All top level functions from widget are available in GO context.
    • It uses an defold-event library, so wrapping have a costs.
  • [System] :tada: No need for the druid.register()! Now all Druid’s components are available by default and available with self.druid:new_* functions
    • This means the Druid will be bigger in size, but it’s much comfortable to use
    • In case you want to delete components you are not using, you can do it in fork in druid.lua file
    • Read optimize_druid_size.md to learn how to reduce the size of the Druid library if you interested
    • Any additional new widgets, utilities files will be not included until you use it
    • You still can register your custom components to make a aliases for them. Widgets are not supported here.
  • [BREAKING] Removed old druid.no_stencil_check and druid.no_auto_template flags. Now it’s always disabled
  • [System] Huge code refactoring and improvements. The goal is to raise maintainability and readability of the code to help people to contribute.
  • [Docs] Add CONTRIBUTING.md file with various information to help people to contribute to the Druid.
  • [Editor Scripts] Updated editor scripts
  • [Editor Scripts] Add “[Druid] Create Druid Widget” instead of “Create Custom Component”
  • [Editor Scripts] Add “[Druid] Create Druid GUI Script”
  • [Editor Scripts] Add “[Druid] Settings” editor dialog
    • Contains different documentation links
    • You can adjust the widget template path to use your own templates in “Create Druid Widget” editor script
    • And edit a template for the “Create GUI script” option
  • [Text] Add trim_left and scale_then_trim_left text adjust modes
  • [Text] Add set_text function instead set_to (the set_to now deprecated)
  • [Widget] Add widget mini_graph
  • [Widget] Add widget memory_panel (works over mini_graph widget)
  • [Widget] Add widget fps_panel (works over mini_graph widget)
  • [Widget] Add widget properties_panel
  • [Unit Tests] Updated Unit tests
    • Now it’s cover more cases and more code, which is great!

A big thanks to the my Github supporters:

And all my other supporters! Very appreciated!

:heart: Support :heart:

Please support me if you like this project! It will help me keep engaged to update Druid and make it even better!

Github-sponsors Ko-Fi BuyMeACoffee

14 Likes
171

In Druid 1.1.0, Widgets were introduced, with several of them available “out of the box.”

One of them, which can be useful for your development - properties panel

This properties panel includes controls such as buttons, sliders, inputs, etc. During development, it can be quite useful for quickly adding a control panel for various elements in your game.

I want to explain how you can use it inside your project

Properties Panel

As a widget, initialization always follows these steps:

  • Add GUI template to the scene
  • Initialize widget with Druid

Let’s implement this step by step:

  1. Open your GUI scene, right-click on Nodes → Add → Template…
    /druid/widget/properties_panel/properties_panel.gui
    Then place it on your scene:

    add_prop_panel
    add_prop_panel1920×1080 195 KB

  2. Attach a GUI Script with the default Druid template

local druid = require("druid.druid")

function init(self)
	self.druid = druid.new(self)
end

function final(self)
	self.druid:final()
end

function update(self, dt)
	self.druid:update(dt)
end

function on_message(self, message_id, message, sender)
	self.druid:on_message(message_id, message, sender)
end

function on_input(self, action_id, action)
	return self.druid:on_input(action_id, action)
end
  1. Next, require the properties panel widget class and instantiate it:
local properties_panel = require("druid.widget.properties_panel.properties_panel")

function init(self)
	self.druid = druid.new(self)
	-- The "properties_panel" is the name of the template id on the GUI scene
	self.properties_panel = self.druid:new_widget(properties_panel, "properties_panel")
end
  1. Let’s run it and verify everything works:

You should see no errors, and an empty properties panel will appear on the scene that can be moved around the screen.

Now that everything is set up, we can add property components to the panel. To view the available widget functions, check the API documentation here.

Let’s add a button:

 -- Each add_* function receives a created widget as its first parameter
self.properties_panel:add_button(function(widget)
	-- You can find the API for each property widget on the API page as well
	widget:set_text_property("Hello")
	widget:set_text_button("World")

	--
	widget.button.on_click:subscribe(function()
		print("Button clicked")
	end)
end)

So simple! Let’s check result:

Now let’s add a Slider and a Left Right Selector component. Each component has its own API for configuration and communication.

self.properties_panel:add_slider(function(slider)
	slider:set_text_property("Game Speed")

	slider:set_value(1)
	slider.on_change_value:subscribe(function(value)
		print("Slider changed", value)
	end)
end)

self.properties_panel:add_left_right_selector(function(left_right_selector)
	left_right_selector:set_text("Level")

	left_right_selector:set_value(1)
	left_right_selector:set_number_type(1, 20, true)
	left_right_selector.on_change_value:subscribe(function(value)
		print("Left Right Selector changed", value)
	end)
end)

As you can see, you can customize each widget and subscribe to their on_change_value events. Here’s the result:

There’s also an input property available:

self.properties_panel:add_input(function(input)
	input:set_text_property("Name")
	input:set_text_value("Insality")
	input.on_change_value:subscribe(function(text)
		print("Input changed", text)
	end)
end)

You also can provide a custom widget:

-- Require your custom Druid Widget
local property_system = require("gui.property_system.property_system")

-- And add it to the properties panel
self.properties_panel:add_widget(function()
	local widget = self.druid:new_widget(property_system, "property_system", "root")
	widget:set_system(system)
	widget:set_text(system_name)
	widget.button_inspect.on_click:subscribe(function()
		-- ...
	end)

	return widget
end)

Custom widgets provide a powerful way to build specialized debug panels, as shown in this example:

Thanks for reading!

I recommend copying the GUI and Lua files from the dependency folder, allowing you to modify them as needed in case of future updates.

16 Likes
172

We are having a problem with druid buttons, specifically when there is an error inside the button callback the game doesn’t crash but keeps running leading to player data corruption.
We are using an older version of druid in which event.lua is inside the repo but the newest version seems to be behaving in the same way. I believe the issue is that event.lua uses pcall() for event callback invocation and ignores the error, I don’t see an option to disable this behaviour. Is there a way?

image
image1152×1068 83 KB

If I replace the pcall() with a regular function call the game crashes properly.

173

I think you have two options currently

  • Fork & adjust behaviour as needed in your version of Druid, especially if you are using the older one
  • Since 1.1 you can adjust the defold-event to make “crashable” with event.set_logger like this
local event = require("event.event")
event.set_logger({
	trace = function() end,
	debug = function() end,
	info = function() end,
	warn = function() end,
	error = function(_, message)
		-- Stop lua execution and throw error
		error(message)
	end,
})

Also it’s can be a good PR to the event module itself

2 Likes