Playmaker Forum

PlayMaker Help & Tips => iOS Help => Topic started by: kidwithacomputer on May 18, 2013, 05:48:43 PM

Title: Mimicking an iOS Scrollview [SOLVED]
Post by: kidwithacomputer on May 18, 2013, 05:48:43 PM
Hello!

I am looking to make a very rough and fast prototype that mimics some iOS interactions. I've read I should use NGUI for UI, however for what I'm doing I think I can just fake with some textured cubes and an orthographic camera for now. It only has to be very basic.

I am currently using the FingerGestures asset and its Playmaker actions to detect touch and mouse input, so if it's something that could work with that that'd be extra awesome.

What I would like to do, in its simplest form, is make a really tall cube that I can drag then release then have its speed decelerate slowly over time, mimicking the reaction an iOS scrollview has, kind of like this: https://dl.dropboxusercontent.com/u/8368122/ScrollviewExample.mov

That is enough for my very fast prototype, however I've got bonus points if you have any ideas on how to get this kind of spring and elasticity effect when you pull down or the view reaches its end: https://dl.dropboxusercontent.com/u/8368122/SpringyExample.mov

I appreciate any help and suggestions. Thanks very much!  :D
Title: Re: Mimicking an iOS Scrollview
Post by: jeanfabre on May 20, 2013, 01:47:15 AM
Hi,

 You need to abstract the "scroll" value and work out the speed of the touch drag, then when the user release you decrease the speed.

 So the scrolling behavior has two very distinct part, the system that computes the scrolling value ( touch, decelleration) and the scroll view itself. The scroll view is only exposing a scroll variable, and the touch system will inject the scroll value.

During drag, you don't use the speed, you only use the delta position of the drag, when releasing the touch, you then use the speed ( that you decrease over time) to keep computing the delta position.

Does that make sense?

bye,

 Jean
Title: Re: Mimicking an iOS Scrollview
Post by: kidwithacomputer on May 20, 2013, 03:20:41 PM
Hi Jean,

I think I understand what you're saying in theory but I am not sure how to implement it.

I believe I have the drag / delta position part working and the object is following my finger. The part I am somewhat clueless on though is, I am not sure how to get the speed on release. I tried the "Get Speed" and "Get Velocity" actions, and then tried a series of different things to slow that speed down and apply it back. I haven't had any luck with that yet although I'll keep trying to figure it out.

If you have any suggestions on which actions I could use to achieve this I'd sure appreciate it.

Thanks very much.
Title: Re: Mimicking an iOS Scrollview
Post by: kidwithacomputer on May 21, 2013, 09:18:40 AM
Hi Jean,

I think I might be getting closer, but I haven't been able to figure this out yet. :-\ My brain just isn't what it used to be. If you have any more tips I'd love to hear em.

Thank you.
Title: Re: Mimicking an iOS Scrollview
Post by: jeanfabre on May 22, 2013, 01:03:48 AM
Hi,

 Have a play, and get back to this thread if you really are getting stuck. Cut down the problem is small chunks, it helps a lot.

1: try to first get the velocity of the drag action
2: then try control a scroll view from an abstract point of view ( separate the scroll view from the input system)
3: bind the two together ( that's the likely source of issues)

bye,

 Jean
Title: Re: Mimicking an iOS Scrollview
Post by: kidwithacomputer on May 22, 2013, 02:13:51 PM
Hey Jean,

I just made a breakthrough! I haven't figured it all out yet, but thanks to your suggestions I finally managed to get the velocity of something being dragged. Physics > Fixed Joint! I'm slowly learning. \o/

Now I have to figure out how to use that to throw something, and have the velocity slowly decay. If you have any more hints for that I'd appreciate them, because I'm sure I'll be stuck for a while still.

Thank you! You're the best.

Edit: Eesh, I ended up spending most of the day trying to figure out the throwing but didn't really get anyplace other than learning about 100 different things that don't work.  :-\
Title: Re: Mimicking an iOS Scrollview
Post by: jeanfabre on May 23, 2013, 02:39:01 AM
Hi,

 decaying the velocity, is easy:

you can set the velocity of a physics object using "Set Velocity"

and to decay the velocity value itself, you use "float Lerp" for example:
http://hutonggames.com/playmakerforum/index.php?topic=2905.msg13336#msg13336

or if you deal with a vector, then you can use "vector3 lerp"

bye,

 Jean
Title: Re: Mimicking an iOS Scrollview
Post by: kidwithacomputer on May 25, 2013, 09:35:16 AM
It worked! Thanks Jean.  :D
Title: Re: Mimicking an iOS Scrollview [SOLVED]
Post by: escpodgames on May 27, 2013, 02:10:08 AM
Do you mind posting your solution? Currently trying to figure out how to solve different directional drags .. or stopping drag but still holding.. so many edge cases.
Title: Re: Mimicking an iOS Scrollview [SOLVED]
Post by: kidwithacomputer on June 08, 2013, 01:39:32 PM
Hey,

Sorry for the delay. If this still helps at all here are a couple screen shots of the actions I set up. I bet there's a more efficient way as I'm relatively new to this stuff, but it works.

I'm using FingerGestures to detect the touch and get touch info, but I believe you can do this with the default Playmaker touch actions.

(http://i.imgur.com/w4WBgTP.png)


(http://i.imgur.com/ZRmLBIe.png)


If you have any questions let me know and I'll try to get back to you quicker this time.
Title: Re: Mimicking an iOS Scrollview [SOLVED]
Post by: escpodgames on June 09, 2013, 12:19:09 AM
Awesome! That is a lot simpler than my one :P Will try to intergrade your methods :)
Title: Re: Mimicking an iOS Scrollview [SOLVED]
Post by: gsmetzer on March 24, 2014, 10:04:19 PM
Im trying to translate this to Mouse Input.  However,  the "Finger Gestures Get Finger Info"  has a DeltaPosition variable available but not one for Mouse DeltaPosition which I need to make this work.  Anyone know how I can get the Mouse DeltaPosition? Thanks!
Title: Re: Mimicking an iOS Scrollview [SOLVED]
Post by: gsmetzer on March 25, 2014, 11:44:10 PM
Solved,
 
Here is an action that gets delta position for objects.  Thanks JeanFabre!

http://hutonggames.com/playmakerforum/index.php?topic=1182.msg4961#msg4961

Thanks