Swipe based Smooth Scrolling with Inertia

Favourite 69 favourites
Tutorial written by abhishanOriginally published on 19th, May 2013 - 5 revisions

Intro

I lot of people were asking for this in the forums, so I finally decided to write a tutorial for the same. For my recent Windows Store game RikochetZ, I wanted to implement swipe based layout scroll mechanics. I wanted to make it as smooth as possible with the scroll speed based on the speed of the swipe with a gradual slowing down effect.

See the Demo here

I spent a few days experimenting and finally got it the way I wanted and I have described the same below for the benefit of the community. You can find the example .capx file under downloads here. Also, click here to see the demo on the Arcade.

Leveraging the “Scroll To” Property

In this tutorial, we will be using the “Scroll To” property on an invisible sprite to get the desired results. All you need is the Sprite object and a small set of events.

Pardon me as I am not getting into C2 basics, but getting directly into the implementation. I assume that you have a new project already created.

Step 1
Add the “Touch” plugin to your project.

Step 2
Add an invisible sprite and add the “ScrollTo” and “BoundToLayout” (bound by Edge) behaviors to it. Call this sprite “TouchFollowMe”. Position it roughly in the center of the view port.

Step 3
Add the following instance variables to the sprite
PrevTouchX (Number, 0)
PrevTouchY (Number, 0)
CurTouchX (Number, 0)
CurTouchY (Number, 0)
DiffX (Number, 0)
DiffY (Number, 0)
Step 4
Add the below code in your events sheet


Run the project and swipe in the direction you want the layout to scroll. Swipe fast to scroll faster. Tap once for the scrolling to stop. Touch and drag around and the layout will move with the dragging action.

How does this work

Every time the user touches the screen and starts swiping, we are calculating the distance in between the previous and the current touch coordinates. Then we are setting that as the distance that TouchFollowMe has to travel from its current position.

The distance in between the two touch coordinates is being constantly calculated on every tick. This is because, we want to continuously measure this distance that TouchFollowMe has to traverse. In case of a faster swipe, the distance the Touch/finger travels in between two game ticks will be more thereby leading to a faster movement of TouchFollowMe.

So, when a user swipes fast, the distance is more. TouchFollowMe goes farther, gradually slowing down due to the lerp function.

As TouchFollowMe has the “ScrollTo” behavior, C2 takes care of the rest.

Modifications

Speed: You can control the speed of the scroll by modifying the interpolation X variable of the ‘lerp’ function.

Direction: By adding or subtracting ‘self.DiffX’ to ‘self.X’ (and self.DiffY to self.Y), you can change the direction of the scroll depending on your game needs.

Smoothness/Duration: You can reduce this by providing different division values to self.DiffX and self.DiffY while performing the subtraction with itself. After some testing. I decided to settle with 50.


Improvements

Obviously there is scope for improvement in every implementation. In its current version, if TouchFollowMe reaches the edge and stops and the user scrolls again, there is a finite wait time before the layout starts scrolling again. This can be changed by setting an inner bounding box to TouchFollowMe so that it doesn’t go till the edge of the layout. The size of this bounding box however will be based on the size of your layout and the window (viewport) size.

You can also modify the code to implement scrolling either in the X or the Y direction. This can be used for game menu layouts.

Thank You!

Hope you enjoyed reading this. This is my first tutorial and I hope to receive your feedback. If you like the implementation, please favorite it and spread the word.

I encourage you to write your own tutorials and keep our community thriving.

Tip: In order to get this in your project, simply copy the sprite object from the demo layout to your game layout. When you do that, the sprite gets copied with all its variables and behaviors. Then copy the events to your event sheet. As this doesn't use any global variables, its self sufficient by itself.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

3
Lordshiva1948 40.7k rep

Not bad very good. Thanks for sharing

Sunday, May 19, 2013 at 10:16:13 AM
2
bachrock 2,984 rep

Neat! Thanks for the tutorial.

It took me a second to orient myself as the swiping is opposite of that on touch screens.

Monday, May 20, 2013 at 12:00:20 AM
4
abhishan 6,675 rep

Thanks @bachrock. You can control the direction by subtracting self.DiffX and self.DiffY from self.X and self.Y respectively within the lerp function to change the direction. For my game, I wanted an opposite direction scroll.

Monday, May 20, 2013 at 2:22:11 AM
2
Blacksmith 8,252 rep

@abhishan ,

Nice tutorial, thanks for sharing! :)

Monday, May 20, 2013 at 3:36:44 PM
2
abhishan 6,675 rep

Thank you @Blacksmith!

Tuesday, May 21, 2013 at 5:32:38 AM
3
bigpappapuck 3,124 rep

good job!

instead of using 50, you could make a global variable SmoothnessDivsor or something and set it to 50 at start... will make changing that number easier in future modifications (change once instead of hunting for multiple 50's ;)

Wednesday, May 22, 2013 at 12:22:34 AM
2
abhishan 6,675 rep

That's a great idea @bigpappapuck! Yhea, this could either be a global variable or an instance variable for TouchFollowMe and you can set this via your game logic.

Wednesday, May 22, 2013 at 2:17:48 AM
2
cousinbenson 1,389 rep

very useful! been wondering how to do this for a while, thanks so much mate! :D

Monday, May 27, 2013 at 6:33:44 PM
1
abhishan 6,675 rep

Thanks everyone! If you like the tutorial, please do favorite it. Cheers!

Wednesday, May 29, 2013 at 9:31:58 AM
0
oddo 1,589 rep

it's very good made!!! i'll never get it if you don't help with this wanderful tutorial.
Just a question: i have a samsung galaxy s2 on witch i'm testing my app. On my device inertial scrolling works but is a bit difficult to use (when i don't touch the screen the inertial moment move slowly to the opposite direction). Instead on every desktop browser it works perfectly. have you noticed the same?
Sorry for my terrible english
Thank's again abhishan !!

Tuesday, July 09, 2013 at 8:25:29 PM
1
lennartfox 932 rep

Great tutorial!
How do I invert the scrolling direction?
So if I am scrolling from top to bottom, the screen should scroll from top to bottom aswell not from bottom to top. Pleas help me! :)

Sunday, August 11, 2013 at 7:13:29 PM
1
sbucci 4,750 rep

Very useful. Thanks for this, and thanks for adding the invert of direction.

Saturday, September 07, 2013 at 7:35:44 PM
1
darkstar 1,277 rep

This was driving my nuts so i thought I'd share this.

If you find that dragging isn't working.
2 little tweaks helped me the fix the problem.

Either should work:

1. Check that your bottom layer isn't set to transparent
Or
2. Set the TouchFollowMe object a coloured object and then set it to transparent on layout start.

Tuesday, September 17, 2013 at 12:19:45 AM
1
marcel1980 1,873 rep

this works great ! I wonder if anyone could incorporate the effect of overcoming a certain force or distance to swipe to another page in a menu. Like in level screen menus. that would be great. Im not much a programmer but maybe if the invisiblesprite touchfollowme had certain points on the screen where he would be attracted to based on force or distance of the swipe. If these aren't strong enough, the sprite would be slowly attracted back to the origin point. If the force or distance is larger than some value, it would jump to another anchor point

Sunday, October 06, 2013 at 11:45:32 AM
1
sbucci 4,750 rep

This stopped working for me on Windows 8.1 Build 148. I can see in the debugger that the TouchFollowMe object moves, but it stops scrolling the layout. Any ideas?

Friday, October 25, 2013 at 1:38:35 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.