Smooth scrolling with velocity

Sparrow Forum » Troubleshooting

Smooth scrolling with velocity

(12 posts) (5 voices)

Started 1 year ago by marwic
Latest reply from marwic

Tags:

marwic
Member

Hi guys!

I'm trying to implement a draggable sprite. When the user ends the drag touch, the sprite should continue to move a bit due to its velocity slowing down. The idea is to to make something that works like a normal iPhone view really. It has lots of uses I think, like scrolling text or moving around in a map for instance.

I have something working, but it doesn't have the right feeling.

What I'm doing is simply calculating the speed ((touch.x-previousTouch.x) / (touch.time - previousTouch.time)) in SPTouchPhaseEnded. I then slow it down a bit in each frame until speed is 0. Like this really: http://www.mindthecube.com/blog/2010/09/adding-iphone-touches-to-unitygui-scrollview

Is this a sound approach or is there a better/smarter way of doing it?

[I'll post the code later. Need to clean it up first ]

Posted 1 year ago #
Daniel
Primary Feather

Marwic, I once tried this (just for an experiment), and I used a similar approach. I just slowed down the object a little bit in every frame (by multiplying the velocity with 0.98 each time), until the velocity reaches a certain lower threshold. That felt just like the scrolling tables of UIKit -- so maybe you've just got to tinker a little more with your values.

Posted 1 year ago #
marwic
Member

Thanks, I'll try some more tomorrow.

I'm using the touch.previousLocation to calculate the position difference. There is no touch.previousTimestamp property afaik, so I have to store the previous touch in my code and use that instead. It would be great if there was some symmetry here (ie touch.previousLocation and touch.previousTime).

Posted 1 year ago #
enbr
Moderator

I think you could use event.passedTime.

Posted 1 year ago #
Shilo
Master Sparrow

As enbr said, event.passedTime will give you the time between each loop, which will also be the time between the current touch and the previous touch.

You can also added a previousTimestamp property quite easy, but there would be no point.

Edit: Guess I was wrong, event.passedTime is only in SPEnterFrameEvent.

Posted 1 year ago #
marwic
Member

passedTime is constant (1/fps), so what you are saying is that the previous touch is always 1/fps secs ago? I assumed touches originated from the UIKit/UIView and, afaik, those timestamps are not aligned on Sparrows framerate, but are the exact timestamp when the hardware registered the touch. Sorry for being thick-headed, but I don't see how those two concept can be correct.

Posted 1 year ago #
repetitio
Member

Your sprite need to have a few parameters: v-velocity, v_min, a=acceleration, vx=last_dx/event.passedTime, vy=last_dy/event.passedTime. A vector velocity v = sqrt (SQ(vx)+SQ(vy)). Calculate actual velocity after the sprite drag and after every frame.
If (v > v_min) then decrease v -=a (or with easy out effect v/=1.05f) and still move a sprite every frame in 2 dimensions (until v> v_min=0.05f), where dx=sin(α) v, dy=cos(α) v, where (α) = arctg (last_dy/last_dx). If there aren't dropped frames, you don't need event.passedTime value and then vx=last_dx, vy=last_dy.

Posted 1 year ago #
marwic
Member

Thanks repetitio! Your approach is completely new to me, I'd love to know more. Could you provide some references to it, especially how you calculate acceleration and dx, dy using trig? Also, what is last_dx?

Why do we need to use acceleration at all here? We have both position and time, so
initial_vel = (x-prev_x) / (time-prev_time).
Then in each frame, just decrease the velocity gradually and
pos_x += velocity * passedTime.

But I'm probably missing something. Thanks!

Posted 1 year ago #

repetitio
Member

You can play with this example:

//  Game.h
//http://forum.sparrow-framework.org/topic/where-to-add-touchevent-methods
//http://forum.sparrow-framework.org/topic/smooth-scrolling-with-velocityintertia
 
#import <Foundation/Foundation.h>
 
@interface Game : SPStage
{
	SPQuad *quad;
	SPSprite *sprite;
	bool isGrabbed;
	float offsetX;
	float offsetY;
	float v, v_min, a, x, y, old_x, old_y, dx, dy, t1, t2;
}
 
@end

//  Game.m
//http://forum.sparrow-framework.org/topic/where-to-add-touchevent-methods
//http://forum.sparrow-framework.org/topic/smooth-scrolling-with-velocityintertia
 
#import "Game.h" 
 
@implementation Game
 
- (id)initWithWidth:(float)width height:(float)height
{
    if (self = [super initWithWidth:width height:height])
    {
        // this is where the code of your game will start.
        // in this sample, we add just a simple quad to see if it works.
 
        quad = [SPQuad quadWithWidth:30 height:30];
        quad.color = 0xff0000;
        quad.x = 30;
        quad.y = 30;
		sprite = [SPSprite sprite];
		[sprite addChild:quad];
		//		sprite.x -= sprite.width / 2;
		//		sprite.y -= sprite.height / 2;
		[self addChild:sprite];
 
		[self addEventListener:@selector(onEnterFrame:) atObject:self forType:SP_EVENT_TYPE_ENTER_FRAME];
		[self addEventListener:@selector(onTouch:) atObject:self forType:SP_EVENT_TYPE_TOUCH];
 
    }
    return self;
}
 
//for multi sprites:
-(void)onTouch:(SPTouchEvent *)event
{
	SPTouch *touch = [[event touchesWithTarget:self andPhase:SPTouchPhaseBegan] anyObject];
	SPTouch *drag = [[event touchesWithTarget:self andPhase:SPTouchPhaseMoved] anyObject];
	SPTouch *touchUp = [[event touchesWithTarget:sprite andPhase:SPTouchPhaseEnded] anyObject];
 
	if (touch)
	{
		SPPoint *touchPosition = [touch locationInSpace:self];
		if ([sprite.bounds containsPoint:touchPosition])
		{
			isGrabbed = YES;
			old_x = [touch globalX];
			old_y = [touch globalY];
			t1 = [touch timestamp];
		}
	}
	else if (drag)
	{
		if (isGrabbed)
		{
			SPPoint *dragPosition = [drag locationInSpace:self];
			sprite.x = dragPosition.x;
			sprite.y = dragPosition.y;
		}
	}
	else if (touchUp)
	{
		isGrabbed = NO;
 
		x = [touchUp globalX];
		y = [touchUp globalY];
		t2 = [touchUp timestamp];
		dx = (x - old_x) / (t2 - t1) / 70;
		dy = (y - old_y) / (t2 - t1) / 70;
		v = sqrt(dx * dx + dy * dy);
		v_min = 0.1f;
		a = 0.05;
	}
}
 
- (void)onEnterFrame:(SPEnterFrameEvent *)event
{
	if (!isGrabbed)
	{
		//we know the velocity, let's slow down, there are 2 simple methods:
		if ( isgreater(v, v_min))
		{
			//change YES/NO here
			if (YES)
			{
				//logarithmic acceleration - experimental values
				dx /= 1.01f;
				dy /= 1.01f;
			}
			else
			{
				if (v > a)
				{
					v -= a;
					dx = sinf(atanf(dy/dx)) * v;
					dy = cosf(atanf(dy/dx)) * v;
				}
				else
				{
					v = 0;
				}
			}
 
			v = sqrt(dx * dx + dy * dy);
 
			sprite.x += dx;
			sprite.y += dy;
 
			//wrapper
			if (sprite.x > self.width || sprite.x < 0 || sprite.y < 0 || sprite.y > self.height)
			{
				sprite.x = 0.0f;
				sprite.y = 0.0f;
				v = 0.0f;
				dx = 0.0f;
				dy = 0.0f;
			}
		}	
 
	}
}
 
@end

Posted 1 year ago #

marwic
Member

Thanks! My problem was that I used the previous *move* touch and not the *begin* touch when calculating velocity. That made my delta_x and delta_t extremely small which caused small differences to make a huge effect on the velocity!

Btw, I don't see any of your trig functions in that code though?

Posted 1 year ago #
repetitio
Member
//change YES/NO here
if (YES) ---> if (NO)
dx = sinf(atanf(dy/dx)) * v; dy = cosf(atanf(dy/dx)) * v;
Posted 1 year ago #
marwic
Member

Ok, thanks. Any significance to the sin/cos incarnations, or is it just an arbitrary interpolation function for slowing down the velocity? I currently use easeOut, which looks quite ok. I wonder what apple is using...

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.