Daikon Forge - Help with Scroll Panels/Buttons

[jess84]

Hi,

So I've got a scroll panel that contains my buttons for each level (see screenshot), and a panel that displays each level's information when the corresponding button is pressed.

The scrolling works fine, but as I'm using 'DFGUI Control Mouse Down Event' on my buttons to detect presses, it also selects whichever button i have my finger on, and updates the level panel.

How can I stop this from happening, so there's a difference between pressing and swiping? I only want the level panel to update if it's an intentional press on the button, not merely me touching the screen to scroll down the list.

Ideas?

[jeanfabre]

Hi,

 It's going to be a tricky deal here:

First, for a scroll behavior to be great it has to be instantanious, so I would not suggest implementing a timeout to detect if indeed the user it swiping or not to then enable scrolling.

I am currently playing with IOS homescreen and pressing down dims out the icon, YET I can can still scroll. But if a scroll happen ( I guess 1 or 2 pixel threshold), then releasing the touch do not select the app my finger was down on.

 I think you should go for the same thing.

allow scrolling and pressing down to be happening at the same time, but don't allow TAP to work if a scroll was detected for that finger.

 Does that make sense?

Bye,

 Jean

[jess84]

Thanks for that.

It does make sense, your suggestion at the bottom, but I'm not sure how to go about implementing that - e.g. which actions?

[jeanfabre]

Hi,

 Use "Scroll position changed event" action to trigger a state where you set a boolean variable "is scrolling" to true

then catch the click event as well and if "is scrolling" is true, then exit the logic and don't perform the click action that was supposed the happen

Yes?

Bye,

 Jean

[jess84]

Sounds good in theory, thanks! I'll let you know how I get on with it in a while 

[jeanfabre]

Hi,

 Let me know if you struggle, I'll create a micro sample in that case.

bye,

 Jean

[jess84]

Having some trouble getting it to work, so a micro sample would be very helpful!

[jeanfabre]

Hi,

 ok, please find attached a template that shows how to do this.

1: Open the "Daiken Forge/Examples/Containers/ScrollPanel" example shipped with DFGUI

2: Select the gameobject "UI Root/Window/Scroll Panel" and check "Use Arrow Keys" to true

3: Select the top left "Placeholder" gameobject inside the scroll panel
4: add an fsm based on the template "ClickOrScroll" from the package attached to this post
5: on that fsm, select the variable "Vertical scrollBar" and point to "UI Root/Window/Vert Scrollbar"

6: run the scene

7: mouse down on this placehoder, while you are down, press the up and down arrow keys to scroll, and the state "nothing" is entered.
8: mouse down again on this placeholder, this time don't scroll, release the mouse, the state "Perform Action" is entered


If you have a specific setup, pm me with your scene, but that template will definitly work as it's agnostic to how you scroll basically.

I would trigger in turn a global event send to the gameobject like "PERFORM CLICK" or something so that you can have on template for all your similar placeholders withotu having to manually recreate this behavior again and again.

trick: create an fsm and in the inspector "use template" and reference this "ClickOrScroll", if you create an fsm using a template, it's a hard copy which makes it not really flexible for global editing.

Bye,

 Jean

[jess84]

Awesome. Thanks so much for that, grabbing it now.

And those actions/instructions should work identically on touchscreen, or would they need amending?

[jeanfabre]

Hi,

You'll need to enable "Use Touch" in "DF Input Manager" component of "UI Root" and you'll be good for IOS.

Also, you should know that many complains where made on dfgui on mobile ( never tried it myself), I think v2 is about this as well as other issues. So if you will deal with heavy content, you may want to switch to nGui or wait for v2.


Bye,

 Jean

[jess84]

I decided on sticking to GUI Textures in-game, and on basic screens - but as I'd already bought dkforge in the sale, I figured I'd use it just for the level select screen, which is my only non-complicated GUI related screen. I figure that if it's just a menu screen, it should be able to keep up, even on mobile.

[jess84]

Got your sample working, and applied to my own scene... and it works!

Thank you!

One small thing that I need to fix though - even though it then doesn't register as a click when scrolling, it does set the text/graphic state to Focused. (I use that to change button sprite and text colour to indicate which button is currently active).

Any ideas on forcing it to not set as focused? I'm guessing an action in the 'nothing' state.

[jess84]

Bit stuck with this.

Although 'DFGUI Call Unfocus' on the 'nothing' state will prevent it setting the focus to the button I'm touching whilst scrolling, it also removes the focus from the button corresponding to the information displayed in my panel.

Any ideas on how to leave the focus on the last button actually clicked?

[jeanfabre]

Hi,

 Confused, you can only have one focused ui element at a time right? so you can't expect two elements to have focus at the same time.

Bye,

Jean

[jess84]

You can set up Font Colour for focused elements. I have that set to that when I press Button 1, level 1 information is shown in the panel and the font colour is purple on Button 1.

Then...

If I'm scrolling and have my finger on say Button 6, and it correctly leaves the panel showing Level 1 information, it will set the focus state to Button 6 (to Button 1 is black again, and Button 6 is purple).  I want to prevent this - as the button that corresponds to what's shown in the panel should match the button.

There is an action to prevent focus from happening, but that cancels all focus. I want to just clear the focus from the scrolling event. Focus only happening when a click is done.

Does that make sense?