Integrating NGUI With FingerGestures

3-14-2013: Wow, this has become one of the most frequented page on my website. In hindsight, its title may be a little misleading for developers looking to use NGUI with FingerGestures, as I don’t go into any code or anything. Leave a comment if you’d like to hear more about something in the post–or even not in the post; I’d be glad to write something up if it will help! :-)

This week I was focusing on getting the UI hooked in and operational, and it looks like there’s going to be a couple weeks left of it yet. The specific operation I was working on this week was swiping down on the inventory list to hide it, and swiping back up from the bottom of the screen to show it again. I’m still not entirely happy with the user experience (UX) and affordances of this interaction given that there’s nothing to tell users to ‘swipe up to show the inventory’, but I do want to remove as much UI as possible in order to let the user focus on the gameplay. Kind of a Windows 8 UX problem with their new smart corners and the heavily gesture oriented interface now that I think of it. Regardless, that’s another post for another day–this interaction is for practice and utility stand-in purposes :-)

So, I was hoping to get a lot more done, but this week was all about that swipe interaction. To help me with it and the many, many more touch interactions that I’m going to need to make, I bought an asset pack called FingerGestures¬†a while back. I hadn’t had a real chance to look at it since I grabbed it on a half-off sale until now, and let me just say how easy to learn and professional it is. I would highly recommend it to any Unity dev who’s going to make a game with more complicated actions such as swipe or double tap. It’ll save you so much time. It took me about an hour to get familiar with the advanced stuff, and I can happily say that it is flexible enough to be extremely handy in the future when I’ll be implementing the complicated interactions such as flicking to cast a fishing rod, or swiping in a circle like you’re swirling water to the plants around you (I was somewhat worried about it being too simple when I bought it–but it’s satisfactorily¬†complex!).

Unfortunately, integrating it with the way I am using NGUI is pretty hard. The problem that took me 4 hours earlier today is that I want a user to be able to swipe on the inventory widget to hide it–not on an item in the inventory, but the inventory window itself. Both NGUI and FingerGestures use box colliders to for interaction–which is great, because I can re-use functionality. However, NGUI doesn’t make any box collider on the parent to the UI grid (ie the inventory widget that I’m talking about), but instead just creates children based off of the parent’s position without updating the parent’s layout. Actually, it’s almost exactly like CSS when applying a float to a parent’s children. So, I basically ended up making the clearfix for NGUI, except programmatically where I just make a new parent box collider and add the children’s own box collider coordinates to the parent’s.

But that would be too simple.

To complicate things like no other, NGUI automagically applies a bunch of scaling to its components in order for them to show up on the screen with the right dimensions regardless of the screen size or camera settings. It’s actually awesome if you don’t need to really get in there and go against the grain… but I had to. So, 4 hours of multidimensional 3d vector modifying later, I finally ended up making a script that will fit a parent’s box collider to encompass its children’s box colliders on start-up, regardless of all the scaling going on above the parent game object. This could probably prove useful to fellow Unity devs so I’ve included it here, but beware that there are probably issues if the parent itself has a scale other than 1,1,1 and I didn’t have a need/want to touch the thing after 4 straight hours.

And after all of that, I actually didn’t have the time to do the simple stuff and actually hook up the swiping script to the scene. Classic. Barring anything coming up tomorrow, I should have that done and I’ll update this post with a demo.

Because all of this has been kind of behind the scenes and ninja code-like, next week I’ll set my sights on fleshing out the rest of the terrain, buying the full version of Terrain4Mobile, and re-integrating it and its Level of Detail (LoD) system before I go populating the whole thing–which is what I’m really looking forward to! Ugh, and I still have to figure out how to retopolize the terrain. All in due time…

This entry was posted in Townsend. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Posted April 27, 2013 at 1:22 am | Permalink

    Yeah, I found your blog by this post,very helpful!

  2. Abdul
    Posted March 14, 2015 at 12:07 am | Permalink

    Hi, I was searching how to implement swipe actions on NGUI buttons. So its like press button on any swipe action on the button. Any help is appreciated.

Post a Reply to CgPanda

Your email is never published, nor shared. Entering your website is optional, but good for networking!

*
*

Available HTML
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>