Update docs

This commit is contained in:
Insality
2025-04-15 21:49:22 +03:00
parent e2c9a7d9d6
commit 9e2a14c6dd
48 changed files with 1097 additions and 1289 deletions

View File

@@ -60,38 +60,77 @@ no_auto_input = 1
```
## Code Bindings
## Set Sound Function
You can set the sound function to play sounds in the Druid components. Mostly used as a click sound for the buttons.
Adjust **Druid** settings as needed:
```lua
local druid = require("druid.druid")
-- Used for button component and custom components
-- The callback should play the sound by name: function(sound_id) ... end
druid.set_sound_function(function(sound_id)
-- sound_system.play(sound_id)
sound.play("/sounds#" .. sound_id)
end)
```
## Set Text Function
You can set the text function to get the localized string by locale ID.
```lua
local druid = require("druid.druid")
-- Used for lang_text component
-- The callback should return the localized string by locale ID: function(locale_id) ... end
druid.set_text_function(function(locale_id)
-- return lang.get(locale_id)
-- return lang.get(locale_id)
end)
```
-- Used to change the default Druid style
druid.set_default_style(your_style)
-- Call this function when the language changes in the game,
-- to retranslate all lang_text components:
local function on_language_change()
## Set Default Style
You can set the default style for the Druid components.
```lua
-- Copy the default style from the Druid folder and modify it as needed
local my_custom_style = require("my.custom.style")
local druid = require("druid.druid")
druid.set_default_style(my_custom_style)
```
## On Language Change
You can set the function to be called when the language changes.
```lua
local lang = require("lang.lang")
local druid = require("druid.druid")
function M.next_language()
lang.set_next_lang()
-- When game language changes, call this function to retranslate all Druid components
druid.on_language_change()
end
-- Call this function inside window.set_listener
-- to capture game focus lost/gained callbacks:
-- window.set_listener(function(self, event, data) druid.on_window_callback(event, data) end))
local function on_window_callback(self, event, data)
druid.on_window_callback(event)
end
window.set_listener(on_window_callback)
```
## On Window Callback
You can set the function to be called when the window event occurs.
```lua
local druid = require("druid.druid")
-- Initialize the window listener, will override the previous window listener
druid.init_window_listener()
-- Or call this function inside window.set_listener
-- The callback should be called when the window event occurs: function(event) ... end
window.set_listener(function(self, event)
druid.on_window_callback(event)
end)
```

View File

@@ -51,7 +51,7 @@ end
function init(self)
self.druid = druid.new(self)
-- We can use the node_id instead of gui.get_node():
-- We can use the node_id instead of gui.get_node():
self.button = self.druid:new_button("button_node_id", on_button_callback)
self.text = self.druid:new_text("text_node_id", "Hello, Druid!")
end
@@ -79,39 +79,57 @@ Widgets are reusable UI components that encapsulate multiple **Druid** component
### Creating a Widget
Create a new Lua file for your widget class. This file should be placed near the corresponding GUI file with the same name.
Create a new Lua file for your widget class. This file better to be placed near the corresponding GUI file with the same name.
Define `init` function to initialize the widget.
Here's a basic widget example:
```lua
---@class your_widget_class: druid.widget
---@class best_widget_in_the_world: druid.widget
local M = {}
function M:init()
self.root = self:get_node("root")
-- Create a button and a text components inside your widget
self.button = self.druid:new_button("button_node_id", self.on_click)
self.text = self.druid:new_text("text_node_id", "Hello, Druid!")
-- They are now accessible by self.button and self.text outside
end
---The "self" will be invoked correctly inside Druid's callbacks
function M:on_click()
self.text:set_text("The button clicked!")
end
---Add your own functions to the widget
function M:say_hello()
self.text:set_text("Hello, Druid!")
end
return M
```
### Using Widgets
You can create widgets in your GUI script like this:
You can create widgets in your GUI script:
```lua
local druid = require("druid.druid")
local best_widget_in_the_world = require("widgets.best_widget_in_the_world")
function init(self)
self.druid = druid.new(self)
self.my_widget = self.druid:new_widget(your_widget_class)
local my_widget_template_id_on_gui_scene = "best_widget_in_the_world"
self.my_widget = self.druid:new_widget(best_widget_in_the_world, my_widget_template_id_on_gui_scene)
-- Now you can use the widget functions
self.my_widget:say_hello()
end
function final(self)
@@ -137,12 +155,12 @@ Widgets can use templates defined in your GUI scene. Templates are collections o
### Using Templates
If you have a GUI template with ID `my_widget_example` containing `button_node_id` and `text_node_id` nodes, you can use it like this:
If you have a GUI template with ID `best_widget_in_the_world` containing `button_node_id` and `text_node_id` nodes, you can use it like this:
```lua
function init(self)
self.druid = druid.new(self)
self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example")
self.my_widget = self.druid:new_widget(best_widget_in_the_world, "best_widget_in_the_world")
self.my_widget.button.on_click:subscribe(function()
print("my custom callback")
@@ -158,18 +176,18 @@ For dynamically created GUI templates (from prefabs), you can pass nodes directl
```lua
function init(self)
self.druid = druid.new(self)
self.prefab = gui.get_node("my_widget_prefab/root")
self.prefab = gui.get_node("best_widget_in_the_world/root")
local nodes = gui.clone_tree(self.prefab)
self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example", nodes)
self.my_widget = self.druid:new_widget(best_widget_in_the_world, "best_widget_in_the_world", nodes)
end
```
You can also use the root node ID or node directly:
You can also use the root node ID or node directly, it will be cloned and used as a template:
```lua
self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example", "my_widget_prefab/root")
self.my_widget = self.druid:new_widget(best_widget_in_the_world, "best_widget_in_the_world", "best_widget_in_the_world/root")
-- or
self.my_widget = self.druid:new_widget(your_widget_class, "my_widget_example", self.prefab)
self.my_widget = self.druid:new_widget(best_widget_in_the_world, "best_widget_in_the_world", self.prefab)
```

View File

@@ -587,39 +587,33 @@ Hello! Druid 1.1 is here! It's brings a lot of new features and improvements. Le
**Changelog 1.1**
- Remove external annotations, remove old HTML API page
- Fully annotated code and new API README page
- Widgets here!
- A replacement for `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.
- Deprecated `druid.register()`. Now all Druid's components are available by default and available with `self.druid:new_*` functions
- [Yeay!] 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](optimize_druid_size.md) to learn how to reduce the size of the Druid library if you need
- Any additional widgets, color library will be not included until you use it
- 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 between script and gui_script in various cases.
- Any additional new widgets, utilities files will be not included until you use it
- [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`
- Add Druid UI Kit, contains atlas so now you can use Druid GUI files in your projects.
- Read [defold-event](https://github.com/Insality/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.
- A long waited feature which allows try or just use some Druid GUI features almost instantly.
- Now GUI files from Druid can be added inside your project.
- This allow to include `Default Widgets` - ready to use GUI templates
- [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.
- [System]: Huge code refactoring and improvements. The goal is to raise maintainability and readability of the code to help people to contribute to the Druid.
- Add [CONTRIBUTING.md](/CONTRIBUTING.md) file with various information to help people to contribute to the Druid.
- All Druid Examples was migrated to use Widgets instead of Custom Components.
- [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)
- Add `druid.color` module to work with colors and palettes
- Add `container` component to handle more complex adaptive layouts
- The container component is still in a development and I expected the various changes in the future
- [Shaders] Add repeat, hard image stencil and world gui materials
- [Color] Add `druid.color` module to work with colors and palettes
- [Widget] Add widget `mini_graph`
- [Widget] Add widget `memory_panel`
- [Widget] Add widget `fps_panel`
- [Widget] Add widget `properties_panel`
- A widget where you can add different properties to the panel to make easy edit/debug panels
- Include `property_button` widget
- Include `property_checkbox` widget
- Include `property_input` widget
- Include `property_left_right_selector` widget
- Include `property_slider` widget
- Include `property_text` widget
- Include `property_vector3` widget
- Removed old `druid.no_stencil_check` and `druid.no_auto_template` flags. Now it's always disabled

View File

@@ -48,6 +48,23 @@ function init(self)
end
```
## Adjust styles in place
You can adjust styles params right after the component creation.
```lua
local druid = require("druid.druid")
function init(self)
self.druid = druid.new(self)
self.grid = self.druid:new_grid("node", "prefab", 1)
self.grid.style.IS_ALIGN_LAST_ROW = true
self.drag = self.druid:new_drag("node")
self.drag.style.DRAG_DEADZONE = 0
end
```
## Create your own styles

View File

@@ -132,3 +132,39 @@ function init(self)
end
end
```
## Using Widgets without GUI templates
It's a possible to use widgets without GUI templates. This widget can pick nodes from the parent instance.
```lua
-- my_widget.lua
local event = require("event.event")
local M = {}
function M:init()
self.on_close = event.create()
self.druid:new_hotkey("key_backspace", self.on_close)
end
return M
```
```lua
-- gui_script
local druid = require("druid.druid")
local my_widget = require("widgets.my_widget.my_widget")
local function on_close()
print("Widget closed")
end
function init(self)
self.druid = druid.new(self)
self.my_widget = self.druid:new_widget(my_widget)
self.my_widget.on_close:subscribe(on_close, self)
end
```