Powerful Defold UI component framework
Hello! What a wonderful day for the new Druid update!
Alright, let's get straight to the point. Look at what I have for you!
Druid Rich Text has finally been released. The main difference from the existing Bjorn's Rich Text is that all visual parameters are customizable directly in the GUI. This allows you to integrate Rich Text more accurately and quickly. Additionally, this Rich Text aligns pixel perfect (well, almost) with regular GUI text node.
This version is the most basic one. Honestly, just wanna to publish current version for your and polish it later. Read RichText API here
Another addition is the ability to enable the "HTML mode" for the Button component. In this mode, the button's action occurs in the context of user action
, allowing operations like "copy and paste text" "show the keyboard" and more. However, in this mode, the button only responds to regular clicks due to the technical implementation of it (so no double clicks or long taps for this button).
The huge work was done on documentation. Now it's more clear and have more examples. All documentation now moved to the API section. The separate componentd.md
manual will be deleted soon as all documentation will be moved to the API section.
The API section now filled with overview and usage examples. I've started with the basic modules, in future I will add more examples for all modules.
Also, I've added the Unit Tests. It's not cover all Druid code, but it's a good start! 🎉
Have a good day!
Changelog 0.11.0
game.project
dependency.html5.set_interaction_listener
.
button:set_web_user_interaction(true)
. In HTML5 mode button have several restrictions. Basically, only the single tap event will work.blocker:set_enabled
and blocker:is_enabled
affects only inner state of component. To consume input, the blocker component should be enabled and the node itself should be enabled.
hover:on_input
.layout:set_max_gui_upscale
function.
max_gui_upscale
value. It can be useful for adapt mobile device to desktop screen.Thanks to the my supporters:
❤️ Support ❤️
Please support me if you like this project! It will help me keep engaged to update Druid and make it even better!
https://github.com/Insality/druid/issues/126 - change input bindings to Defold's defaults https://github.com/Insality/druid/issues/210 - Layout update, add set_gui_max_upscale function https://github.com/Insality/druid/issues/214 - Fix hover component on_input return value https://github.com/Insality/druid/issues/215 - Better late_init component interest work, fix if input component created later that init() function https://github.com/Insality/druid/issues/216 - Button component should react on touch_multi action_id
Solve #217 - Error with gui.get_text_metrics
on typing the space characted in input component
Solve #213 - Wrong progress bar init on creation
Fix #207 scroll + data_list issue
Hello! Here is new Druid update. It's brings to you two new components: Layout and Hotkey. Both components are "extended", so to use it, you should register it first (when you try to use it, in console will be prompt with code you should use)
In general:
local layout = require("druid.extended.layout")
druid.register("layout", layout)
The Drag component now knows about window scaling, so now it have more accuracy dx/dy values depends on the screen size. The scroll and other components should work better :)
Now you can change the input priority of components temporary. For example while you interact with them (input fields, drag on select etc).
Also the update brings several bug fixes and now Druid have stencil_check mode enabled by default. It should be more easy to use input components with stencil nodes without manual set_click_zone
functions.
And yeah, the new Druid logo is here!
Changelog 0.10.0
hotkey:add_hotkey
with additional paramsconst.LAYOUT_MODE.STRETCH_X
- Stretch node only by Xconst.LAYOUT_MODE.STRETCH_Y
- Stretch node only by Yconst.LAYOUT_MODE.ZOOM_MIN
- Zoom node by minimal stretch multiplierconst.LAYOUT_MODE.ZOOM_MAX
- Zoom node by maximum stretch multiplierconst.LAYOUT_MODE.FIT
- Usual Defold Fit modeconst.LAYOUT_MODE.STRETCH
- Usual Defold Stretch Modeon_element_add
and on_element_remove
data_list:get_data()
to access all current data in DataListdata_list:get_created_nodes()
to access currently visual nodes in DataListdata_list:get_created_components()
to access currenly visual component in DataList (if created)progress:set_max_size
function to change max size of progress baron_drag(self, dx, dy, total_x, total_y)
to check the overral drag distancedrag:is_enabled
and drag:set_enabled
to enable/disable drag input componentset_in_row
works incorrectly with IS_DYNAMIC_NODE_POSES style optionon_window_resized
component interest. It will called on game window size changescomponent:set_input_priority
to mark it as temporary. It will reset to default input priority after the component:reset_input_priority
druid.no_stencil_check
in game.project settingsCustom components update
Hello!
Here is the long awaited update! Finally I implemented some ideas how to make easier creating custom components. There is a bunch of improvements you can be interested in.
I wanna make a point that Druid is not only set of defined components to place buttons, scroll, etc. But mostly it's a way how to handle all your GUI elements in general. Custom components is most powerful way to separate logic and make higher abstraction in your code.
Usually - custom components is set of GUI template and lua code for this template. I've added editor script, that can make a lua component file from your GUI scene (all boilerplate and usage code, also some component that can be defined right in GUI scene).
Auto layout from GUI script should be a powerful tool too! Also it's brings some code structure and style across all your files. Auto layout works from node names. If its starts or equal to some string, it will add code to generated lua file. For example, if you have in your scene node with name "button_start", it will create the Druid button, stub function and annotations to this. Sounds good!
For more information see Create custom components documentations.
Also this update have some breaking changes: you should no more pass full tempalte name in inner components and the second one is renaming text:get_text_width
to text:get_text_size
.
The Defold 1.3.0 solves the old my issue with slider component. Now you can define input zone (not only the slider pin node) to interact with slider. It's because of inroduction gui.screen_to_local
and gui.set_screen_position
in default GUI api. If you using previuos Defold releases, this piece of logic will be ignored.
The Druid Assets repository will be closed and I move some components right in Druid repository. You can now use custom components in your game if your need. Right now it's Rich Input (input field with cursor and placegolder) and Pin Knob (Rotating node for set value). And slowly working on adding new examples and improvements of existing ones.
You can say thanks to me via stars on GitHub! :wink: Also you can help with testing new functions and leave feedback. Wanna something more? Add an issues! Take care of yourself
Changelog 0.9.0
button
, text
, lang_text
, grid
, static_grid
, dynamic_grid
, scroll_view
, blocker
, slider
, progress
and timer
get_node
inside inner components with template/nodes
current_template .. "/" .. inner_component_template
). From this update you should pass only the inner_component_template
name. It's will auto check the parent component template name to build full template pathdruid.no_auto_template
in your game.project file. By default it's enabled nowcomponent:get_template()
function to Druid Base Component
self.druid:new_button(SCHEME.BUTTON)
instead of self.druid:new_button(self:get_node(SCHEME.BUTTON))
inside your custom componentsself:get_node()
static_grid:set_in_row(amount)
functionslider:set_input_node(node)
function. Now slider can be interacted not only with slider pin node, but with any zone you will define.gui.screen_to_local
and gui.set_screen_position
functions.text:get_text_width
to text:get_text_size
. Now it return two numbers: width and heightdruid:new
functions inside gui_script.druid/custom
. It will have the complex custom components. Usually you should to use default GUI template or create your own with similar GUI scheme. Currently add RichInput
and PinKnob
components from druid-assets repository.druid:new(Component, template_name, [nodes])
. See component docs to see constructor params.IS_DYNAMIC_NODE_POSES = false
styleFix the #169 with layout_changed event
Hello!
In this Druid update no any huge special features. Mostly the bug fixes and reworking the component's interest points. If you used interests in your custom components, you should remove it from component.create
and all should works as before.
Also added last row allignment in Static Grid component with "dynamic content poses" style enabled. You can look how it is work here: https://insality.github.io/druid/druid/?example=grid_static_grid_dynamic_pos
You can say thanks to me via stars on GitHub 3! :wink: Wanna something more? Add an issues! Have a nice day!
Changelog 0.8.0
component.create
function have next signature: create(component_name, input_priority)
component.create("custom", { component.ON_INPUT, component.ON_LATE_INIT }, const.PRIORITY_INPUT_HIGH)
to
component.create("custom", const.PRIORITY_INPUT_HIGH)
...
from lang_text to fixed arguments, add format function to change only string format arguments
...
. Now Lang Text will support up to 7 string.format argumentsscroll:scroll_to_percent
by Y positionanimate
or set_to
functionsset_state
function
helper.centrate_nodes
Hello! Here I'm again with new Druid stuff for you!
The feature I want a long time to deliver for you: the different Text size adjust modes. Druid use the text node sizes to fit the text into this box. There are new adjust modes such as Trim, Scroll, Downscale with restrictions and Downscale + Scroll. You can change default adjust mode via text style table, but by default there is no changes - it's downscale adjust mode as before. I'll hope it can be useful for you for in different cases and now it will be much easy to fit all your texts for different languages!
The next features is made for add more control for availability of user input. So meet the whitelists, blacklists and custom check functions for Buttons. Now you can easily choose the more suitable way to enable/disable/restrict input for you users. I'm sure it can be useful for you tutorials.
Another small, but cool feature on my mind is druid.stencil_check
. If you did interactive elements inside the Scroll, probably you used component:set_click_zone
to restrict input zone by stencil scroll view node. With this feature, Druid will do it automaticaly for you! You can enable this feature in your game.project
. It will not override you existing set_click_zone
.
Now you even able to remap default input keys! Also there are several bugfixes with Scroll, Text, Grids.
Wanna something more? Add an issues! Good luck!
Button:set_check_function(check_function, failure_callback)
function to add your custom click condition to button.
Button:set_enabled
has more priority than this to check button availabilitycheck_function
should return true of false. If true - button can be clicked by userfailure_callback
will be called if check_function
will return falseset_check_function
in general:buttons example collectiondruid:set_whitelist()
and druid.set_blacklist()
functions. It's affects only on input process step, you can allow/forbid interact with list of specific components
druid.stencil_check = 1
to your game.project file.
component:set_click_zone
to restrict clicks outside scrolls zone for example. Now you can don't think about click zone and let Druid do it instead of you!helper.get_closest_stencil_node
function to get closest parent of non inverted stencil nodecomponent.ON_LATE_INIT
interest. Component with this will call component.on_late_init
function once after component init on update step. This can be used to do something after all gui components are initeddruid_const.ON_MESSAGE_INPUT
. The message table params:
node_id
- the name of the node with component on itaction
- value from druid_const.MESSAGE_INPUT
. Available values:
value
- optional field for several actions. For example value is text for TEXT_SET
component.ON_MESSAGE_INPUT
component:on_message_input(node_id, message)
IS_DYNAMIC_NODE_POSES
(default: false). Always align by content size with node anchor.
component:set_input_priority()
affects on all component's children toodruid.set_text_function
callgame.project
WHEEL_SCROLL_BY_INERTION
(default - false). If true - mouse wheel will add inertion to scroll, if false - set position directly per mouse wheel event.
WHEEL_SCROLL_BY_INERTION
for more controllable scroll by mouse wheel.Hey! Are you tired from Druid updates? (It's a joke)
Finally, got a time to release component to process huge amount of data. So introducing: DataList component. It can help solve your problem with GUI nodes limit reached
and helps with scroll optimization. Give feedback about it!
The next important stuff is EmmyLua docs. I'm implemented EmmyLua doc generator from LuaDoc and Protofiles, so now you can use EmmyLua annotations inside your IDE instead of website API looking or source code scanning.
Also the Druid examples is reworked, so each example will be in separate collection. Now it's become a much easier to learn Druid via examples. A lot of stuff in progress now, but you already can see on it!
Input priority got reworked too. Now instead of two input stacks: usual and high, Druid use simple input priority value.
And I should note here are several breaking changes, take a look in changelogs.
Wanna something more? Add an issues! Have a good day.
druid:new_data_list(scroll, grid, create_function)
.
fun(self, data, index, data_list)
data_list:set_data({...})
add/remove
functionsconst.SHIFT.RIGHT
, const.SHIFT.LEFT
and const.SHIFT.NO_SHIFT
.
StaticGrid:remove
and DynamicGrid:remove
functionscomponent:increase_input_priority
component function. Use component:set_input_priority
function instead. The bigger priority value processed first. The value 10 is default for Druid components, the 100 value is maximum priority for acquire input in drag and input components
component.ON_INPUT_HIGH
you should replace it with component.ON_INPUT
and add const.PRIORITY_INPUT_HIGH
as third param. For example:
before:
ocal Drag = component.create("drag", { component.ON_INPUT_HIGH })
after:
ocal Drag = component.create("drag", { component.ON_INPUT }, const.PRIORITY_INPUT_HIGH)
helper.centate_nodes
function. It can horizontal align several Box and Text nodesInput:select
and Input:unselect
function.Input.style.IS_UNSELECT_ON_RESELECT
style param. If true, it will be unselect input on click on input box, not only on outside click.component.lua
WHEEL_SCROLL_SPEED
, WHEEL_SCROLL_INVERTED
Scroll:set_click_zone
function. This is just link to Drag:set_click_zone
function inside scroll component.druid:create
is deprecated. Use druid:new
for creating custom components