Druid - Component GUI Framework

The Defoldmine
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