Full screen swipe/drag

Discussion and feedback on Construct 2

Post » Fri Nov 08, 2013 11:27 pm

Hello guys,

I'm new to Construct 2 and I was wondering if it's possible to achieve this kind of interation with Construct 2: http://eightmedia.github.io/hammer.js/examples/carousel.html

I was loooking to develop a Glossary application with touch (drag/swipe) events for navigation from A to Z in full scree mode, compatible with mobile, tablets and desktop web browser...

Any ideas if this is possible ?

If so are there any examples you may find to be usefull for me ?

Thank you in advance guys !

Best Regards !
B
10
S
1
Posts: 22
Reputation: 983

Post » Sat Nov 09, 2013 6:51 am

Yes it's possible. First off just design your pages in the layout editor. With a window size of 640x480 and ten pages you'll want your layout size to be 640*10x480 or 6400x480 and just position all your text and whatnot on the layout keeping in mind that every 640 pixels is a new page. Next here is a way to setup your events to scroll around using a click drag.
[code]global variable oldx = 0

On left mouse clicked
---> set oldx to Mouse.AbsoluteX

left mouse button is down
---> Set scroll X to scrollx+oldx-Mouse.AbsoluteX
---> set oldx to Mouse.AbsoluteX
[/code]
All that's left is to move to the closest screen when not dragging. This can be done with one more event like this:
[code]else
---> Set scroll X to lerp(scrollx, round((scrollx-320)/640)*640+320, 10*dt)[/code]
Where:
640 is the window width
320 is half the window width
10 is basically a speed
B
94
S
33
G
114
Posts: 5,359
Reputation: 73,779

Post » Sat Nov 16, 2013 4:34 am

Thanks R0J0hound, I'll give it a try !

Cheers.
B
10
S
1
Posts: 22
Reputation: 983

Post » Mon Dec 15, 2014 7:13 am

R0J0hound wrote:Yes it's possible. First off just design your pages in the layout editor. With a window size of 640x480 and ten pages you'll want your layout size to be 640*10x480 or 6400x480 and just position all your text and whatnot on the layout keeping in mind that every 640 pixels is a new page. Next here is a way to setup your events to scroll around using a click drag.
Code: Select all
global variable oldx = 0

On left mouse clicked
---> set oldx to Mouse.AbsoluteX

left mouse button is down
---> Set scroll X to scrollx+oldx-Mouse.AbsoluteX
---> set oldx to Mouse.AbsoluteX

All that's left is to move to the closest screen when not dragging. This can be done with one more event like this:
Code: Select all
else
---> Set scroll X to lerp(scrollx, round((scrollx-320)/640)*640+320, 10*dt)

Where:
640 is the window width
320 is half the window width
10 is basically a speed


Awesome example of how to accomplish this with minimal events, and really easy to build off of or to modify using touch expressions.
B
74
S
19
G
9
Posts: 377
Reputation: 9,258

Post » Mon Dec 15, 2014 9:43 am

Are there an exmaples of this where it's actually *smooth* on tablet and phones?

If you get good results, please give me some tips.
B
24
S
9
G
4
Posts: 1,646
Reputation: 6,596


Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 11 guests