Increase button collider size while pressed like iOS

[franktinsley]

In the past NGUI didn't have a behavior that I really wanted. In iOS when a button is pressed the collider, or whatever Apple might call it, increases in size as long as the finger doesn't stop touching the screen and is still over the collider.

This behavior really helps touch based applications feel better, especially if the buttons are many, small, and close together. Users constantly start touches inside small buttons just fine but have a hard time releasing their finger in just the right way as to keep the touch point inside the collider.

My question is: did NGUI ever have this feature added and if so how do I enable it? If not, what might be a good approach to scripting it up myself?

Said behavior in more detail: when a user begins touching over a button, the button's collider grows a given amount (generally adding about a half of a finger tip's width around the whole button). If the user drags off the collider it returns to normal size. If they drag back on to the (now normal size) collider it again grows until they drag back off of it or lift their finger anywhere. Lifting inside the collider of course fires the click event.

Thanks!!

[Nicki]

This isn't directly in NGUI, but can be easily made with it. Either, you can tween the size of the sprite to a size you want when the collider is pressed and have it go back when you release (OnPress(false)) or you can have one big collider on the whole button bar, and have the position define what needs to be resized. So you have a central controller script, then resizes a number of smaller sprites, respective to your touch on the collider.

[boofcpw]

That's an awesome idea. I went ahead and made a simple script that does I think what you want. Just dump it on a button and it should be good to go. Feel free to do whatever you want to it (it only works with boxcolliders at the moment). The script however is still reliant on the mouse click threshold values you set on the UI camera, but now allows you to release while off the button, and still within those limits, and resizes back when you drag out of it.

[franktinsley]

That's an awesome idea. I went ahead and made a simple script that does I think what you want. Just dump it on a button and it should be good to go. Feel free to do whatever you want to it (it only works with boxcolliders at the moment). The script however is still reliant on the mouse click threshold values you set on the UI camera, but now allows you to release while off the button, and still within those limits, and resizes back when you drag out of it.

Thanks man! I should probably look up exactly what iOS button behavior is again but I decided to comment out your drag related methods. That gives me what I think will work really well. I also like to set my mouse click and touch tap thresholds to infinity. Still have a lot of testing to do but I feel really good about it like this. Thanks for the help!

Edit: Ha yeah right away I think I'm seeing that I'll probably also need to have the button set itself to be in front of any adjacent buttons so it's now larger collider actually intercepts the ray. Shouldn't be hard to do.

[boofcpw]

Glad I could help

[franktinsley]

Here's my new version that so far seems to do what I'm after. (Don't mind my silly style edits XD)

[boofcpw]

awesome. I originally didnt have the on drag code until I noticed the last bit of what you said haha. I do agree that it seems to work a bit nicer without it

[franktinsley]

Yeah I'm impressed you could make sense at all out of my rushed explanation lol

[ArenMook]

I'd suggest increasing the collider size by a fixed amount, like 10% of the screen's height for example, not a percentage. Because 25% of a small collider and 25% of a large collider can differ quit a bit.

Also be careful with NGUITools.BringForward. It changes the draw order.