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.