This is my first tutorial!
Someone asked me to look at an old project where you swipe the screen to change from one page to another - similar to scrolling through a photo album on a smart phone.
If you would like to see the original project, it can be found here: https://www.dropbox.com/s/i0tnhmtb1nx3nlm/swipe_on_one_layout.capx
The original project required the canvas plugin (even through it didn't actually use it) and seemed unnecessarily complex. So, I took a look and ended up rewriting the entire thing. I wanted to make it clean, easy to understand, and flexible so that you can add pages with minimal effort.
So, let's get started!
If you want to try out the finished product, you can see it running here:
http://www.rieperts.com/games/Swipe/index.html
Or try the Smooth scrolling version here:
http://www.rieperts.com/games/Swipe2
Global Variables
First, I eliminated most of the global variables from the original, and added a couple to make it work with any number of pages.
In my project I have 5 pages, each page is 480 pixels wide by 800 pixels high. The pages are numbered 0 through 4. The reason I started numbering the pages from zero rather than one is because the first page starts at an X coordinate of zero (page 2 starts at 480, page 3 starts at 960, etc.), so numbering the pages from zero helps keep the scroll to calculation easier to understand.
CurrentPage tells us what page we are currently on. I have it default to zero (the first page), but you could change that to be any page you want to start on.
NumberPages tells us how many pages there are. It is initially set to zero, and then we calculate it at the start of the layout. This just makes it easier to add or remove pages - you don't have to remember to go back and update the total, it should be smart enough to figure that out by itself!
Next we have PageWidth. I first used the system variable WindowWidth to automatically determine the width, but that didn't always come up with the correct result. It did work properly on my desktop computer and my iPhone, but when I tried it on a laptop the width was half of what it should have been. I don't know if the problem has something to do with the laptop, an old driver, a bug in Construct2, lack of knowledge on my part, or a browser issue. In the end, I added my own PageWidth variable to solve the problem - but now you have to remember to update that global variable if you want to change the width of the page.
The last three variables help decide when we have swiped far enough to move to the next page. swipeThreshold is how far you must swipe before the page will change. swipeStartX tells us where on the screen we started swiping, and swipeDistance tells us how far we have swiped so far.
The Code
Once the layout starts, we calculate the number of pages there are, then we scroll to the current page. The point that Construct2 scrolls to is the middle of the visible window, so for the first page we need to scroll to current page x page width + (page width / 2) or, in my layout, 0 x 480 + 240 which works out to 240. To scroll to the second page it would calculate 1 x 480 + 240, or 720.
OK, now it is displaying the first page and it is waiting for us to swipe!
There are only three events to watch for: touch start, in touch, and touch end.
When we first touch the screen, touch start, it just remembers the X value of where we first touched.
While we are still touching the screen, in touch, it calculates how far we have swiped. If we are swiping right to left, then the point where we first touched the screen will be larger than the current point, so swipeDistance will be positive. Otherwise, if we are swiping left to right then swipeDistance will be a negative number.
Once we know how far we have swiped, then it scrolls the screen that amount: all it has to do is add swipeDistance to the point we were originally scrolled to. If swipeDistance is positive we are scrolling closer to the right end of the layout (trying to get to the next page). If swipeDistance is negative then we are scrolling towards the left end of the layout (trying to get to the previous page).
Finally, when we are no longer swiping, touch end, we need to see if we have swiped far enough to move to the next (or previous) page, so we compare the absolute value of swipeDistance to swipeThreshold. If it is greater than the threshold, then we need to move to a new page if possible, otherwise we want to go back to where we started.
So, if swipeDistance is negative, we subtract one from CurrentPage (as long as it is greater than zero, so that we can't go less than the first page)
If swipeDistance is positive, then we add one to CurrentPage (as long as it is less than NumberPages - 1, so we can't go past the last page)
The last line of code scrolls us to the CurrentPage (which may, or may not have changed). You will notice there is no condition on that line. It is part of the "On any touch end" block, and it needs to run whether we swiped more than the threshold or not. If CurrentPage changed, then we need to go to the new page. But, it we swiped less than the threshold, then we need to re-position the screen back to the current page because it had been partially scrolled towards another page.
The layout
The layout just needs to be a multiple of the window width. In my example, the window is 480 pixels wide and I wanted 5 pages so the layout is 2400 pixels in total.
You can add buttons, or text, or anything else you want on any of the pages.
Final Thoughts
After playing with it for a while, the first thing I wanted to do was make the pages wrap around in a continuous loop. It wasn't terribly hard to do that, but it made the code more complicated and you have to duplicate the right hand page on the left side, and duplicate the left hand page on the right side if you want it to scroll seamlessly - and that makes it much harder to add or remove pages.
There may be other ways to make it wrap around, so if you come up with something better let me know!
I also thought about adding a timer to make it automatically scroll to the next page after a few seconds. That shouldn't be very difficult either, but this already seemed to be pushing the limits of a beginner tutorial.
The final thought I had was that it would be nice if it slid into the next page after you finished swiping, rather than just snapping directly there - which would make it more like the photo gallery on my phone. Again, that shouldn't be too difficult. So, maybe I will do an advanced version of this some day! Or if someone else wants to try it, I would love to see what you come up with.
Thanks for reading!
UPDATE Feb 25, 2014
I just added the capx file with smooth scrolling (swipe2.capx) that I had linked to in the comments. If I had time to work on it there were several things I wanted to improve, but this should give you something to work with.
The capx file for the version that could wrap around was too messy and confusing to share. Some day I may try again, and if I find an easier way to do it I will add that to the download section.