Druid - Component GUI Library

#8

need help with set_enabled() on a button.
why does a node turn black when i disable it?
how to disable a node with all it’s childrens?

2 Likes

#9

Hi John! What kind of games are you doing with Godot?

There’s a RichText system for Defold as well:

Repo: https://github.com/britzl/defold-richtext
Demo: https://britzl.github.io/RichText

2 Likes

#10

Yea, there is confusing name. Function set_enabled in button is inner logic to disable it’s logic part. And it have default style to turn it black on disabled. I will rework this stuff later (https://github.com/Insality/druid/issues/47).
Default style logic here: https://github.com/Insality/druid/blob/develop/druid/styles/default/style.lua#L36

Styles will be polished closed to Druid 1.0.0

Enable and disable gui elements you should do in Defold way, via gui.set_enabled(node, state). Button have field to node access: button.node

Thanks for feedback!

3 Likes

#11

ok gotcha

but why not add something like :hide :unhide so i don’t need to use gui.set_enabled. It would be more clean and convenient to let druid handle all these things.

1 Like

#12

Probably it will be, but sometimes it looks like over-API (just coping of existence Defold GUI API).

If I will add stuff like this, it will be named exactly, as gui API function to make less confusing names.

0 Likes

#13

I did it with Gooey and Richtext . Therefore, I am sure that you can implement in your game. I am ready to send a code and an example if you need

Gif


https://s4.gifyu.com/images/chat2.gif

@Insality this library is really impressive. Thanks for sharing

4 Likes

#14

whats more confusing then :set_to() in text module for set_text()? :slight_smile:
will this also be renamed?

1 Like

#15

another question, how to get action info on button click? i already searched for it in button parameter from callback method. I need action.x & action.y.

edit: nvm, i think i will try making a custom component for my needs.

0 Likes

#16

With set_text a little different situation in comparing with set_enabled. Component set_text should do more logic, not only text node changing (it’s trigger events, recalc sizes and other stuff).

Yea, API can be reworked. If it will happen, I’ll post about it, and old API will be deprecated for some time.

For action table in button is good point, but for now there is no way to get it. For which stuff you need action table?

Yea, for complex GUI stuff in your game the most reasonable to make your own custom components, which contains already basic one and your modifications. Druid is more about how to create and handle your own GUI components

1 Like

#17

I have a kind of panel in my game where i can touch different spots in it and the action happens based on the touched position, so in fact i don’t need a button at all for this but it was the closest component to a panel in druid.
But then i thought why not make a simple panel component.

Or i will keep my defold code

0 Likes

#18

Druid 0.4.0: https://github.com/Insality/druid/releases/tag/0.4.0

  • Add Drag basic component

    • Drag component allow you detect dragging on GUI node
    • Drag will be processed even the cursor is outside of node, if drag is already started
    • Drag provides correct handle of several touches. Drag can switch between them (no more scroll gliches with position)
    • Drag have next events:
      • on_touch_start (self)
      • on_touch_end (self)
      • on_drag_start (self)
      • on_drag (self, dx, dy)
      • on_drag_end (self)
    • You can restriction side of dragging by changing drag.can_x and drag.can_y fields
    • You can setup drag deadzone to detect, when dragging is started (by default 10 pixels)
  • Druid Scroll component fully reworked. Input logic moved to Drag component

    • Update scroll documentation
    • [Breaking changes] Change constructor order params
    • [Breaking changes] Change scroll:set_border to scroll:set_size
    • Scroll now contains from view and content node
      • View node - static node, which size determine the “camera” zone
      • Content node - dynamic node, moving by Scroll component
    • Scroll will be disabled only if content size equals to view size (by width or height separatly)
    • You can adjust start scroll size via .gui scene. Just setup correct node size
    • Different anchoring is supported (for easier layouting)
    • Function scroll_to now accept position relative to content node. It’s more easier for handling. Example: if you have children node of content_node, you can pass this node position to scroll to this.
    • Resolve #52: Content node size now can be less than view node size. In this case, content will be scrolled only inside view size (can be disabled via style field: SMALL_CONTENT_SCROLL)
    • Fix #50: If style.SOFT_ZONE_SIZE equals to [0…1], scroll had glitches
  • Druid Grid Update

    • Anchor by default equals to node pivot (so, more component settings in .gui settings) (#51)
    • Function grid:clear now don’t delete any GUI nodes. Druid will not care about gui.delete_node logic anymore (#56)
  • Druid Hover component now have two hover events (#49):

    • on_hover is usual hover event. Trigger only if touch or mouse action_id pressed on node
    • on_mouse_hover action on node without action_id (desktop mouse over). Works only on desktop platform
  • Styles update:

    • Styles table now can be empty, every component have their default style values
    • Remove component:get_style function. Now you can only set styles
    • To get style values in component, add component:on_style_change function. It’s invoked on component:set_style function
    • You can look up default values inside component:on_style_change function or style component API on Druid API
  • Druid update:

    • Now function druid:remove remove instance and all instance children components. No more manual deleting child components (#41)
  • Fix: Blocker component bug (blocker had very high priority, so it’s block even button components, created after blocker)

  • Fix #58: Bug, when druid instance should be always named druid (ex: self.druid = druid.new(self))

  • Fix #53: Bug with final Druid instance without any components

P.S.: Thanks for any feedback you give to me. It’s very helpful :slight_smile:

18 Likes

#19

This is great API, for quick and easy GUI functionality.

Thanks,
I have query and not sure if this right platform to ask.
I am trying to implement scroller with dynamic content, but facing issue with Not enough resources, as we have resource limit,
for example message app having scroller for message, as each message is resource, and have no limit for message.

where as I tried to release resources and re-adding resources. for example while scroll up, release bottom out of grid resources and add then again on top of grid and vise versa.
but not working exactly as expected, is there any provision for this type of requirement ? or what else I can try ?
Thank you in advance,

1 Like

#20

Thanks for the feedback! Glad to hear you like Druid

The way you described to create infinity scroll is correct. I’ll add infinity scroll soon (week or two I guess), it will be available as additional GUI component.

But for now my advice is implement it by you own, as you can.

1 Like

#21

Thank you for your quick reply,

I am working on my own implementation, wanted to know what is a better approach.
is it a good approach to reposition out of the grid node again. I mean, while scroll down repositions top nodes again to the bottom, will it be quick enough and smooth in functionality.
or any other approach you want to suggest?

0 Likes

#22

I think reposition is the best way, but my solution is delete nodes outside and re-create it again. Since Defold is static engine this is good enough too (but much easier for use)

You can create your component in any of ways, it should be ok :slight_smile:

2 Likes

#23

Druid 0.5.0: https://github.com/Insality/druid/releases/tag/0.5.0

Besides a lot of fixes (thanks for feedback!) two components was add: StaticGrid and DynamicGrid instead of usual Grid component (it is deprecated now).
Add component:set_input_enabled for basic component class. So you can enable/disable user input for any component.
Finally implemented on_layout_changed support. Druid components now will try keep their data between layout changing! You also can use this callback in your custom components.
Also check component.template.lua what you can use for your own custom components!


  • #77 Grid update:
    • The grid component now is deprecated. Use static_grid instead. Druid will show you deprecated message, if you still using grid component
    • [BREAKING] Remove the grid:set_offset grid functions. To adjust the distance between nodes inside grid - setup correct node sizes
    • Add static_grid component
      • The behaviour like previous grid component
      • Have constant element size, so have ability to precalculate positions, indexes and size of content
      • By default, not shifting elements on removing element. Add is_shift flag to static_grid:remove function
      • This grid can spawn elements with several rows and columns
    • Add dynamic_grid component
      • Can have different element size. So have no ability to precalculate stuff like static_grid
      • This grid can’t have gaps between elements. You will get the error, if spawn element far away from other elements
      • The grid can spawn elements only in row or in column
      • The grid node should have West, East, South or North pivot (vertical or horizontal element placement)
      • Able to shift nodes left or right on grid:add / grid:remove functions
  • Scroll update:
    • Add scroll:set_vertical_scroll and scroll:set_horizontal_scroll for disable scroll sides
    • Add scroll:bind_grid function. Now is possible to bind Druid Grid component (Static or Dynamic) to the scroll for auto refresh the scroll size on grid nodes changing
  • #37 Add on_layout_change support. Druid will keep and restore GUI component data between changing game layout. Override function on_layout_change in your custom components to do stuff you need.
  • #85 Move several components from base folder to extended. In future to use them, you have to register them manually. This is done for decrease build size by excluding unused components
  • Fix #61: Button component: fix button animation node creation
  • Fix #64: Hover component: wrong mouse_hover default state
  • Fix #71: Blocker: blocker now correct block mouse hover event
  • Fix #72: Fix return nil in some on_input functions
  • Fix #74: [BREAKING] Fix typo: strech -> stretch. Scroll function set_extra_stretch_size renamed
  • Fix #76: Add params for lang text localization component
  • Fix #79: Fix druid:remove inside on_input callback
  • Fix #80: Fix hover:set_enable typo function call
  • Fix #88: Add component:set_input_enabled function to enable/disable input for druid component. Now you can disable input of any druid component, even complex (with other components inside)
  • Add component.template.lua as template for Druid custom component
  • Update the example app
8 Likes

#24

Awesome work, really impressive.
I have a question about the list/grid components.
Does it reuse the nodes (similar to a recyclerview in native Android)? I mean does it support a 100K item list or do we have to keep the number of items under the max sprites/nodes allowed?

0 Likes

#25

Thanks!

Currently no, there is no druid solution for infinity scroll
Above we talked about this. In next Druid release will be added extended component to handle scroll with huge amount of data. Current release with grids is preparing for this.

0 Likes

#26

Hello,
Thanks for the quick changes and dynamic grid,
it seems there is an issue with dynamic_grid added into the scroller, if the prefab_dynamic box component has some nested box component or text component, the nested component is not visible in the scroller,

I the example project, I also tried adding grid_nodes_prefab to grid_dynamic_view however its only showing the parent box of grid_nodes_prefab and not showing inner component that is grid_nodes_dot.
is anything else I need to try?
Thanks

0 Likes

#27

It’s seems not the Druid issue, but gui node management.

In Druid Example, create function just make gui.clone of the prefab node. For your case, you should do gui.clone_tree and do your stuff with gui nodes tree

2 Likes