Druid Release 1.0

Druid 1.0

Description

Hello! The long-awaited update for Druid is finally here! The Druid now is finally 1.0 version! 🎉 This was a long path to achieve current state!

This update brings a lot of improvements, so let's dive in:

New Example Page
I’ve updated Druid's main examples page. Since Druid has become quite popular, I wanted to ensure the examples meet high standards of quality and aesthetics. The examples are now clearer and provide more information. I’ve also added many new examples. Check them out! Share your feedback and suggestions for new examples. Now it's much easier to learn Druid!

Play right here - https://insality.github.io/druid/druid

Component Reworking
Several components have been reworked. While I generally avoid introducing breaking changes, sometimes they are necessary for progress.

• Rich Text is now applied directly to the text node, rather than using a Rich Text Template. This makes setup and usage much easier! I’m still working on figuring out how to apply this approach to Rich Input.

• The Layout component has been completely replaced. It now functions similarly to Dynamic Grid but with more settings and modes. This layout now works similarly to Figma Auto Layout, allowing you to arrange nodes in various ways.

• Dynamic Grid will be deprecated in the future, with the new Layout component serving as its replacement.

• Data List now works exclusively with Static Grid, making it more stable and optimized. Additionally, a new cached version is available, which optimizes node reuse. However, the cached version requires using on_add_element and on_remove_element events to properly set up nodes.

Code Cleanup
I’ve finally removed middleclass from Druid. If you were using it for some reason, you’ll need to copy the "middleclass" code into your project.

Annotations
Druid’s annotations were originally created when there were no Lua language servers. These annotations are of the older LDoc type and not EmmyLua. In the future, I aim to get rid of annotations altogether and rely on annotated code, which is easier to read, maintain, and feature-rich. The Defold will support the LLS (Lua Language Server) as well as VSCode with amazing Defold-Kit extension.

---

Milestone: https://github.com/Insality/druid/milestone/12

Changelog 1.0

• New Druid logo!
• [Example] New Example Page with 40+ examples.
• BREAKING [Rich Text] Now applied directly to the text node instead of using a Rich Text Template (which previously contained three nodes: root, text, and image prefabs). This simplifies usage in the GUI.
• BREAKING [System] Removed middleclass.lua. If you were using it, you’ll need to copy the code into your project.
• BREAKING [System] Removed: checkbox, checkbox_group, and radio_button components. These components can be easily created using the Button component. Check the examples for implementation.
• BREAKING [Layout] Reworked the Layout component. The new version allows arranging nodes in various modes (vertical, horizontal, horizontal wrap) and includes more settings (margins, padding, justification, pivots, and content hugging options). This will replace Dynamic Grid in the future.
• [Data List] Reworked Data List to work only with Static Grid. It’s now more stable and has an extended API.
  • Added a Cached Data List option, which uses less memory (highly optimized) but requires on_add_element and on_remove_element events for node setup. All components must be of the same class in this case.
• [Rich Input] Updated with new features such as selection and cursor navigation. New input keys can be configured in Druid (arrows, ctrl, shift).
• [Input] Users can now switch between text input areas with a single click, instead of needing to tap twice (once to close the focus and once to open the new input).
• [Dynamic Grid] Deprecated in favor of the new Layout component.
• [Drag] Added a touch parameter to Drag callbacks, making it easier to add custom logic with input action data.
• [Scroll] Added scroll.view_size, scroll:set_view_size(size), and scroll:update_view_size() functions for better management of the scroll input area and visible part.
• [Static Grid] Added grid:set_item_size(size) and grid:sort_nodes(comparator) functions.
• [Text] Adjustments for multiline text height seem to be working correctly now.
• [Progress Bar] Improved accuracy when scaling progress bars for images with slice9 parameters.
• [Slider] Fixed several slider setup issues.
• [System] Updated and fixed annotations.
• [System] Removed: pin_knob custom component. It mostly was created as an example and now is not needed.
• [System] Added self:get_druid(template, nodes) to replace self:set_template(template) and self:set_nodes(nodes) calls in custom components.
• Various improvements and fixes.

A big thanks to the my Github supporters:

• Defold Foundation
• Ragetto
• Pawel

And all my other supporters! Very appreciated!

❤️ Support ❤️

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

Defold Druid v0.11.0

Druid 0.11.0

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

---

• #191: [RichText] Finally add Druid Rich Text custom component. Component is used to make formatted text in your's GUI. This Rich Text mostly adjusted visually in GUI and have almost pixel-perfect match with similar GUI text node
• #39: [System] Finally add Unit Tests. Yeah, it cover not all Druid code, but it's a good start! 🎉
• #219: [System] UTF-8 performance optimization. Now Druid will try to use utf8 native extension over lua utf8 library if exists. If you wanna use native utf8, just add the extension in your game.project dependency.
• #156: [Button] Now button can work in HTML5 with html5.set_interaction_listener.
  • The API is button:set_web_user_interaction(true). In HTML5 mode button have several restrictions. Basically, only the single tap event will work.
• #227: [System] Update current URL in HTML5 example
  • Now if you will open the example from direct URL, it will be updated to the current URL in your browser. So now it's much easier to share the example link with each other.
• #183: [Docs] Documentation about GUI in World Space
  • Also not only the GUI in World Space, but overall How to GUI in Defold article.
• #234: [BREAKING] [Blocker] Now 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.
  • Breaking due the changes can affect your current logic. Please if use this re-check Blocker component usage.
• #235: [Drag] Fix Drag coordinates on streched screen.
• #236: [Hover] Fix nil return in hover:on_input.
• #237: [Layout] Add layout:set_max_gui_upscale function.
  • This functions will scale down element, if current GUI scale is bigger than max_gui_upscale value. It can be useful for adapt mobile device to desktop screen.
• #238: [System] Add Helper documentation.
• [System] Now the documentation contains the Druid size. The current size as dependency is around 67KB. It counted without extended components, which is not included by default in the build.

Thanks to the my supporters:

• Defold Foundation
• Ragetto

❤️ Support ❤️

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

Defold Druid v0.10.3

#126 - change input bindings to Defold's defaults
#210 - Layout update, add set_gui_max_upscale function
#214 - Fix hover component on_input return value
#215 - Better late_init component interest work, fix if input component created later that init() function
#216 - Button component should react on touch_multi action_id

Defold Druid v0.10.2

Solve #217 - Error with gui.get_text_metrics on typing the space characted in input component
Solve #213 - Wrong progress bar init on creation

Defold Druid v0.10.1

Fix #207 scroll + data_list issue

Defold Druid v0.10.0

Druid 0.10.0

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

---

• #133 [Hotkey] Add new extended component: Hotkey
  • It's allow you set hotkeys to call callbacks
  • You should pass one action key and several modificator keys (left shift, right ctrl etc)
  • List of modificator keys ids setup via component style (you can change it)
  • You can add several hotkeys on one callback via hotkey:add_hotkey with additional params
• #98 [Layout] Add new extended component: Layout
  • It's allow you to extend standart Defold node adjust modes
  • Layout mode can be next:
    • const.LAYOUT_MODE.STRETCH_X - Stretch node only by X
    • const.LAYOUT_MODE.STRETCH_Y - Stretch node only by Y
    • const.LAYOUT_MODE.ZOOM_MIN - Zoom node by minimal stretch multiplier
    • const.LAYOUT_MODE.ZOOM_MAX - Zoom node by maximum stretch multiplier
    • const.LAYOUT_MODE.FIT - Usual Defold Fit mode
    • const.LAYOUT_MODE.STRETCH - Usual Defold Stretch Mode
  • The Layout changes the node size property. So it's look much better if you use 9slice nodes
  • Works even the node parent is have Fit adjust mode
• #200 [Scroll] Glitch if content size equals to scroll view size in runtime
• #201 [DataList] Update DataList:
  • Add two events: on_element_add and on_element_remove
  • Add data_list:get_data() to access all current data in DataList
  • Add data_list:get_created_nodes() to access currently visual nodes in DataList
  • Add data_list:get_created_components() to access currenly visual component in DataList (if created)
• #190 [Progress] Add progress:set_max_size function to change max size of progress bar
• #188 [Drag] Add two values passed to on_drag callback. Now it is on_drag(self, dx, dy, total_x, total_y) to check the overral drag distance
• #195 [Drag] Add drag:is_enabled and drag:set_enabled to enable/disable drag input component
• #186 [Grid] Fix: Method set_in_row works incorrectly with IS_DYNAMIC_NODE_POSES style option
• #185 [System] Add on_window_resized component interest. It will called on game window size changes
• #189 [System] Add optional flag to component:set_input_priority to mark it as temporary. It will reset to default input priority after the component:reset_input_priority
• #204 [System] Fix: wrong code example link, if open example from direct URL
• #202 [System] Enabled stencil check to true by default. To disable this, use druid.no_stencil_check in game.project settings
• [Examples] Add layout, layout fit, progres bar, data list + component examples

Defold Druid v0.9.0

Druid 0.9.0

Custom 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! 😉
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

---

• #119 Add Create Druid Component editor script (python3 with deftree required)
  • The headliner of current update. This editor scripts allows you to create Custom component lua script from you .gui scene file. It will create component file with the same name as GUI scene and place it nearby. Inside this generated file you will find the instructions how to start usage this (require and create code).
  • This code contains GUI scheme, basic component boilerplace and generated code for components, used in this GUI scene (see #159)
  • See Create custom components for more info
• #159 Add auto layout custom components by node naming
  • The Create Druid Component script will check the node names to create Druid components stubs inside generated code
  • The generator will check the node name, if it's starts from special prefix, it will create component code for you
  • Currently support the next components: button, text, lang_text, grid, static_grid, dynamic_grid, scroll_view, blocker, slider, progress and timer
• #158 [BREAKING] Auto get_node inside inner components with template/nodes
  • Before this update, if your component with template using another component with template, you had to pass full template name (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 path
  • If you don't want migrate code for this, this option can be disabled via druid.no_auto_template in your game.project file. By default it's enabled now
• #171 Add component:get_template() function to Druid Base Component
  • Now it's able to get full component template name. This function has "protected" scope, so you should use it only inside your component code.
• #173 Fix GUI nodes usage inside inner templates
  • Now you can pass the node name instead of node itself to Druid components inside your Custom Components. Before this update Druid didn't check the nodes in parent component (usually for basic components such as button, text inside your components)
  • So you can use now self.druid:new_button(SCHEME.BUTTON) instead of self.druid:new_button(self:get_node(SCHEME.BUTTON)) inside your custom components
• #174 Add assert to nil node on self:get_node()
  • It's required for easier debuging components, when GUI node path is wrong and your got the nil. The error with node path will appear in console.
• #169 [System] Fix on_layout_change event
  • It was broken, now the on_layout_change event is working as expected
• #165 [StaticGrid] Add static_grid:set_in_row(amount) function
• #44 [Slider] Click zone on all slider node, not only pin node
  • Finally! Added the slider:set_input_node(node) function. Now slider can be interacted not only with slider pin node, but with any zone you will define.
  • It will work only from Defold 1.3.0. If you use earlier version, nothing is happened. It using new gui.screen_to_local and gui.set_screen_position functions.
• #178 [BREAKING][Text] Rename text:get_text_width to text:get_text_size. Now it return two numbers: width and height
• #114 Add default component templates
  • Added templates for fast prototyping. Use GUI templates to place buttons, checkbox, input and sliders on your GUI scene. You still have to create component with druid:new functions inside gui_script.
• #168 Add button to open code of current example
  • Inside every example added button to open code of this example on GitHub
• #140 Better documentation for custom components
• #172 Update documentation with links to components
  • The docs in (https://insality.github.io/druid/) now have cross links for every custom type
• #175 Remove Druid Assets repository, move to Druid library
  • Added folder 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.
  • Usually to use custom component you have to require lua file first and create it's via druid:new(Component, template_name, [nodes]). See component docs to see constructor params.
  • This components will be included in build only if used
• #176 Keep last scene and scroll position in Druid example
  • Probably, it's useful for faster debug, but anyway. The example now keep the last scene and scroll position.
• Add new examples: Checkboxes, Swipe, Grid, Rich input, Pin knob
• Now editor scripts are available in Druid as dependency
• Move emmylua annotations inside Druid dependency folder. You can copy it from Defold Editor outline
• Optimize different stuff(Scroll, Druid Event, Druid instance and Base component)
• Force Data List component to IS_DYNAMIC_NODE_POSES = false style

Defold Druid v0.8.1

Fix the #169 with layout_changed event

Defold Druid v0.8.0

Druid 0.8.0

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! 😉
Wanna something more? Add an issues!
Have a nice day!

Changelog 0.8.0

---

• #160 [BREAKING] Remove component interests list
  • The component interests now setup via function declaration inside your components. The functions are still the same.
  • Now component.create function have next signature: create(component_name, input_priority)
  • Your should remove interests list from your custom components if exists
    • From component.create("custom", { component.ON_INPUT, component.ON_LATE_INIT }, const.PRIORITY_INPUT_HIGH) to
      component.create("custom", const.PRIORITY_INPUT_HIGH)
• #166 [Input] Fix issue with Cyrillic symbols in range "[А-я]"
• #162 [Static Grid] Add last row alignment with dynamic content poses enabled
  • Add style param: static_grid.IS_ALIGN_LAST_ROW, true by default. Works only if static_grid.IS_DYNAMIC_NODE_POSES enabled. See the "Static grid with dynamic poses" example.
• #163 [Lang Text] Set default locale_id value from text node
• #147 [Lang Text] Remove ... from lang_text to fixed arguments, add format function to change only string format arguments
  • There are some issues with .... Now Lang Text will support up to 7 string.format arguments
• [Lang Text] Add more self chaining to Lang text component (set_to, translate and format functions)
• #151 [Text] Fix text adjust by height
  • It still have not perfect fitting, but it's good enough!
• #164 #150 [Scroll] Fix scroll:scroll_to_percent by Y position
• #148 [Scroll] Remove scroll inertion after scroll animate or set_to functions
• [Input] Add current text argument to on_input_unselect event
• #152 [Checkbox] Add is_instant argument to set_state function
  • Add initial_state argument to Checkbox component constructor
  • Update Checkbox style, add is_instant param
• #149 [Button] Call button style functions after actual callback
• #153 System: Mode Druid acquire input to late_init step
  • Required to solve issues, when go input acquire can be later, when gui input acquire (on init step)
• #154 System: Change text adjust const to strings
• #155 Fix: Add margin to total width calculation in helper.centrate_nodes

Defold Druid v0.7.0

Druid 0.7.0:

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!

Changelog 0.7.0

• #78 [Text] Update Text component:
  • Add text adjust type instead of no_adjust param.
    • const.TEXT_ADJUST.DOWNSCALE - Change text's scale to fit in the text node size
    • const.TEXT_ADJUST.TRIM - Trim the text with postfix (default - "...", override in styles) to fit in the text node size
    • const.TEXT_ADJUST.NO_ADJUST - No any adjust, like default Defold text node
    • const.TEXT_ADJUST.DOWNSCALE_LIMITED - Change text's scale list downscale, but there is limit for text's scale
    • const.TEXT_ADJUST.SCROLL - Change text's pivot to imitate scrolling in the text box. Use with stencil node for better effect.
    • const.TEXT_ADJUST.SCALE_THEN_SCROLL - Combine two modes: first limited downscale, then scroll
• #110 [Button] Add 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 availability
  • The check_function should return true of false. If true - button can be clicked by user
  • The failure_callback will be called if check_function will return false
  • Example with set_check_function in general:buttons example collection
• #66 Add druid: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
  • You can pass array of components, single component or nil in these functions
• #111 Add autocheck for input and stencil nodes. To enable this feature, add druid.stencil_check = 1 to your game.project file.
  • This feature is using for auto setup 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!
  • Add helper.get_closest_stencil_node function to get closest parent of non inverted stencil node
  • Add component.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 inited
• #81 Add ability to interact with Druid input via messages:
  • Currently add for Button and Text component only:
    • Send to gui.script message: druid_const.ON_MESSAGE_INPUT. The message table params:
      • node_id - the name of the node with component on it
      • action - value from druid_const.MESSAGE_INPUT. Available values:
        • BUTTON_CLICK - usual button click callback
        • BUTTON_LONG_CLICK - button long click callback
        • BUTTON_DOUBLE_CLICK - button double click callback
        • BUTTON_REPEATED_CLICK - button repeated click callback
        • TEXT_SET - set text for Text component
      • value - optional field for several actions. For example value is text for TEXT_SET
  • Add Druid component interest: component.ON_MESSAGE_INPUT
  • Implement new interest via function component:on_message_input(node_id, message)
  • See System: Message input example
• #131 [Static Grid] Add style param: IS_DYNAMIC_NODE_POSES (default: false). Always align by content size with node anchor.
  • If true - Static Grid will by always align to content anchor.
  • If false (currently behaviour) - all poses for static grid is predefined and not depends on element's count (see example: static grid and static grid with dynamic poses)
• #125 Now component:set_input_priority() affects on all component's children too
• #143 Update all lang components on druid.set_text_function call
• #112 Allow remap default Druid input bindings via game.project
• #107 [Text] Better scale text adjust by height for multiline text nodes (but still not perfect)
• #144 [Scroll] Fix some glitches with scroll Points of Interest. Remove false detection of scroll stopped.
• #142 [Scroll] Add Scroll style param WHEEL_SCROLL_BY_INERTION (default - false). If true - mouse wheel will add inertion to scroll, if false - set position directly per mouse wheel event.
  • This fix caused because Mac trackpad seems have additional mouse wheel events for simulate inertion. If you uncomfortable with this, you can disable WHEEL_SCROLL_BY_INERTION for more controllable scroll by mouse wheel.
• #132 Add example with grid add/remove with animations