Druid - Component GUI Framework

Sorry, I forgot this was a Druid thread! No idea I’m afraid.

1 Like

Hello! Currently Druid has no any designed way to work with gamepads. I have the issue with it, but no any news about this.

2 Likes

If you need inspiration on how to implement it, I used this LibGDX library in the past. They say core LibGDX has this functionality now also.

You register which UI elements are focusable. Then on input, you act on the focused element, or move focus.

They had 2 algorithms for moving focus: by next item in a list, or by finding the nearest UI element in the direction pressed.

Feels like something that wouldn’t need to be tied to druid.

Link to the directional implementation:

3 Likes

Hey @Insality,
How do I prevent button clicks / mouse hover reactions outside of scroll list? I tried to create a blocker but i guess I am doing it incorrectly. Thanks.

I had to implement the exact same thing 2 days ago :slight_smile:

local function create_item_list(self, data, index, data_list)

	-----------------------------------------------------
	-- Scroll list buttons
	local button = self.druid:new_button(instance[btn_prefab], function()
		-- your button stuff
	end)
	button:set_click_zone(data_list.scroll.view_node) -- to prevent interactions outside the data_list

end

It should work fine.

1 Like

Thanks, I found my mistake. lol. I set click zone to the scroll content and not the stencil area. Duh.

2 Likes

Also there is auto stencil check: https://github.com/Insality/druid#stencil-check-optional
It should be enabled by default and do set_click_zone for you. Is it work for you?
If you pass wrong click zone manually, it will be replaced

1 Like

Hello, and thanks for the response.

I have another question. Not sure what I did wrong, but in Defold emulator, touch / swipe moves scroll list. But on a real android device, the scroll does not work. Button press works, but scrolling / swiping does nothing. Any suggestions?

Side note: When I load Druid example onto my android device, scrolling works.

Hello, @Insality

This is frustrating. I copied the exact code used in Druid example and the scrolling will not work on Android device. Scrolling works on Windows testing though.

I install the druid examples from Github and everything works. I have the same input and game settings. This is making me crazy.

Can you share a test project where this happens? I’m sure it’s something simple that you’ve overlooked!

@Jay_Cee
Not so many ideas without more information or example project

Scroll is working by touch action action. If you have working buttons it should be okay in this part.
Also scroll requires the self.druid:update() calls in the update function. Maybe something wrong here?
And need to know which version of Druid you are using

Posting a test project now. Thank you. I created a blank project that works in Defold windows test environment, but on a device it fail.
@Insality i include you as well. Thanks all.

Mobile game.zip (4.8 MB)

The reason in input bindings: the develop branch currently is migrating to default Defold input bindings (Github show this branch as default)

To solve you issue now: change the Touch multi trigger to multitouch instead of touch_multi or adjust you input field name with

[druid]
input_multitouch = touch_multi

Also I changed default branch of Druid to master temporary to show not migrated documetation. Also this changes affect on mouse_wheel trigger (it will changed too)

Yea, it’s probably not trivial issue (docs de-sync), sorry for inconvenience

1 Like

OMG! Thank you. Lol. Finally it works. I wondered why I did not see [Druid] in my project automatically. I just manually added it to my game.project file and all is good now. Thank you for your help.

Next I will learn panthera!

1 Like

This kind of non-default project settings you should add manually, the dependencies can’t add it automatically

I’ll fix docs soon, thanks for point on this issue :wink:

Glad it helped!

3 Likes

Hello @Insality!

I’m currently implementing some drag&drop stuff (where the dragged items are picked from a scrolling list created with Druid).

While dragging, I disable the scrolling list (which works as intended)

if gp.is_dragging then
      self.scroll_items:set_vertical_scroll(false)
     -- blablabla other stuff
end

But as you can see on this video, the list elements keep being animated when the cursor moves over them (same for the “slot” buttons at the top, but the solution will be the same I suppose).

How to disable/neutralize/prevent these animations when the user is dragging something over them?

4 Likes

Depends on your drag implementation, but here are several ideas:

  1. Disable buttons inside scroll on your drag event. These animations is from button hover component
  2. Use blocker component behind scroll to catch all events. Drag node should be upper, than blocker.
  3. Use whitelist/blacklist of components to disable input for part of your UI except required.
  4. If your drag with drag component, probably there is a way to consume input from drag to prevent other buttons interact (need code explore and probably changing)

Hope it helps to explore and choose best solution for your needs

4 Likes

It’s kind of look like one of those generated responses from ChatGPT :sweat_smile:

As Insality said, it depends on your dragging implementation I think, I would add another idea - if you have ny state saved when you star dragging, you can make all other components handling dependent also on this state (e.g. if not dragging then end), but it’s similar to blacklist

4 Likes

How could I (using Druid) drag and drop elements in dynamic/static list to reorder them in such list?
To drag one element, move it a little bit and drop it between two other elements?

How could I (using Druid) drag and drop elements in dynamic/static list to reorder them in such list?

I didn’t do stuff like this, but probably it’s a good case to make an example!
Probably other users can share their experience with it.

This drag, pickup and drop logic should be implemented manually. Also there are a lot of details:

  • Should grid contains preview with dropped element?
  • Should we scroll grid while drag element?
  • Should we remove element on drag pickup? Or display some stubs?

On my first view: to start drag I could use the long_press callback on grid element, then disable scroll, then create copy of dragged element and somehow handle this to grid interaction and preview

What is your usecase? It can be helpful to check more details and Druid ability to do this :slight_smile:

Edited:

It’s kind of look like one of those generated responses from ChatGPT :sweat_smile:

This made me laugh a lot, very true :upside_down_face:

1 Like