0 Favourites

Full screen swipe/drag

  • 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: 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 !

  • 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.

    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:

    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

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Thanks R0J0hound, I'll give it a try !

    Cheers.

  • 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.

    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:2tnqe5et]
    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:2tnqe5et]else
    ---> Set scroll X to lerp(scrollx, round((scrollx-320)/640)*640+320, 10*dt)[/code:2tnqe5et]
    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.

  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)