playMaker

Author Topic: Mimicking an iOS Scrollview [SOLVED]  (Read 4644 times)

kidwithacomputer

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Mimicking an iOS Scrollview [SOLVED]
« on: May 18, 2013, 02: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
« Last Edit: May 25, 2013, 06:37:03 AM by kidwithacomputer »

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 12405
  • Official Playmaker Support
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #1 on: May 19, 2013, 10:47:15 PM »
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

kidwithacomputer

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #2 on: May 20, 2013, 12: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.

kidwithacomputer

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #3 on: May 21, 2013, 06: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.

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 12405
  • Official Playmaker Support
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #4 on: May 21, 2013, 10:03:48 PM »
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

kidwithacomputer

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #5 on: May 22, 2013, 11:13:51 AM »
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.  :-\
« Last Edit: May 22, 2013, 03:17:49 PM by kidwithacomputer »

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 12405
  • Official Playmaker Support
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #6 on: May 22, 2013, 11:39:01 PM »
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

kidwithacomputer

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mimicking an iOS Scrollview
« Reply #7 on: May 25, 2013, 06:35:16 AM »
It worked! Thanks Jean.  :D

escpodgames

  • Hero Member
  • *****
  • Posts: 673
    • View Profile
    • Assets
Re: Mimicking an iOS Scrollview [SOLVED]
« Reply #8 on: May 26, 2013, 11:10:08 PM »
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.

kidwithacomputer

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mimicking an iOS Scrollview [SOLVED]
« Reply #9 on: June 08, 2013, 10:39:32 AM »
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.



  • After the touch stuff I pull just the Y delta from the fingerDeltaPosition, cuz I'm only scrolling on the Y (Get Vector2 XY -- I think the Vector2 actions might be custom ones from Jean found here: https://hutonggames.fogbugz.com/default.asp?W1004

  • I then get the smooth delta time and divide fingerDeltaY by that, which I've been told determines the velocity (Get Time Info, Float Operator).

  • At the top of the stack you'll notice a Set Velocity with a value of 0. This is so after you've gone to the next state and tap again it'll stop instead of continuing to scroll beneath your finger.




  • On release I goto the next State, where I lerp the previously stored velocity to 0 over 1 second, determined by the Get Time Info action.

    Note: If you want this to happen over a longer period of time, use a float operator to multiply the time variable by say .5 to make it twice as long, etc.

  • I use the lerp result to set the velocity, and viola.

If you have any questions let me know and I'll try to get back to you quicker this time.

escpodgames

  • Hero Member
  • *****
  • Posts: 673
    • View Profile
    • Assets
Re: Mimicking an iOS Scrollview [SOLVED]
« Reply #10 on: June 08, 2013, 09:19:09 PM »
Awesome! That is a lot simpler than my one :P Will try to intergrade your methods :)

gsmetzer

  • Playmaker Newbie
  • *
  • Posts: 24
    • View Profile
Re: Mimicking an iOS Scrollview [SOLVED]
« Reply #11 on: March 24, 2014, 07: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!

gsmetzer

  • Playmaker Newbie
  • *
  • Posts: 24
    • View Profile
Re: Mimicking an iOS Scrollview [SOLVED]
« Reply #12 on: March 25, 2014, 08: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