How to configure swipe scene change?

[gurcanglc]

Hey everyone,

I’m writing an app that has multiple scenes (inventory, main etc.) created with composer and I want to add a swipe listener to navigate between them. For now I have a Runtime touch listener as it can be seen here –

local function swipe\_scene(event) &nbsp; if event.phase == "ended" then &nbsp;&nbsp;&nbsp; if (event.xStart \< event.x and (event.x - event.xStart) \>= 100 and current\_scene\_no \> 1) then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local options = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; effect = "slideRight", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; time = 500 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; current\_scene\_no = current\_scene\_no - 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; composer.gotoScene(scene\_list[current\_scene\_no], options); &nbsp;&nbsp;&nbsp; elseif (event.xStart \> event.x and (event.xStart - event.x) \>= 100 and current\_scene\_no \< scene\_list.count) then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local options = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; effect = "slideLeft", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; time = 500 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; current\_scene\_no = current\_scene\_no + 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; composer.gotoScene(scene\_list[current\_scene\_no], options); &nbsp;&nbsp;&nbsp; end &nbsp; end &nbsp; return true; end Runtime:addEventListener("touch", swipe\_scene);

but this does not look good since it doesn’t show the new scene while swiping, but switches to it only after swipe is completed (There is no need for it to be a swipe as well since it only checks the x and xStart coordinates) Is there any way to accomplish what I want with scenes or are scenes aren’t suitable for this?

Thanks in advance!

[davebollinger]

>> Is there any way to accomplish what I want with scenes or are scenes aren’t suitable for this?

yes, BUT

if you have to ask, then you likely don’t yet know enough to fully accomplish it

it isn’t built in, and requires a good amount of “hackery” to make it fully functional (read: to make it work the way that you intuitively expect it would)…

1. you need to set up your current scene as an “overlay” above the next scene (so that next scene is present underneath)

2.  you’ll need full began/moved/ended touch response because you’re making a “drag” listener

3.  you’ll need to adjust the scene.view’s x coordinate (assuming it’s a left/right swipe you’re describing)

4.  you’ll need to adjust composer’s slideLeft/Right effect’s xStart value (so that on touch ended the transition BEGINS where the DRAG ends)  (i recommend cloning those effects before beginning as swipeLeft/swipeRight so that you don’t “break” them if used elsewhere for non-swipe slides)

5.  you’ll need to adjust the transition time as a ratio of the scene’s now-offset x to the full-screen width (because you only want to use the full time if fully on-screen, ie if already 90% offscreen you only want 10% transition time, because you’ve already started at the 90% x-coordinate)

6.  you also need an “oops” factor – if delta-x when touch ends is less than some tolerance, then DON’T transition, instead reposition scene.view at 0 as if swipe never occurred.

7.  you also need to clamp delta-x so they don’t swipe it the “wrong direction” or further than fully offscreen in the “correct direction” (tho latter is unlikely to be a problem unless you fully support multitouch)

it’s actually far easier to accomplish something visually-equivalent WITHOUT composer, except that typically when this question is asked, composer is already in place and doing it via scene-transition/management is a requirement.

[anon63346430]

Take a look at the SlideView demo.  Assuming your “scenes” are not too heavy something like that could work.  Just use display groups instead of images.

You can still use composer but you will your swipe left and right “scenes” to not be composer scenes. 

[gurcanglc]

@davebollinger

>> Is there any way to accomplish what I want with scenes or are scenes aren’t suitable for this?

yes, BUT

if you have to ask, then you likely don’t yet know enough to fully accomplish it

it isn’t built in, and requires a good amount of “hackery” to make it fully functional (read: to make it work the way that you intuitively expect it would)…

1. you need to set up your current scene as an “overlay” above the next scene (so that next scene is present underneath)

2.  you’ll need full began/moved/ended touch response because you’re making a “drag” listener

3.  you’ll need to adjust the scene.view’s x coordinate (assuming it’s a left/right swipe you’re describing)

4.  you’ll need to adjust composer’s slideLeft/Right effect’s xStart value (so that on touch ended the transition BEGINS where the DRAG ends)  (i recommend cloning those effects before beginning as swipeLeft/swipeRight so that you don’t “break” them if used elsewhere for non-swipe slides)

5.  you’ll need to adjust the transition time as a ratio of the scene’s now-offset x to the full-screen width (because you only want to use the full time if fully on-screen, ie if already 90% offscreen you only want 10% transition time, because you’ve already started at the 90% x-coordinate)

6.  you also need an “oops” factor – if delta-x when touch ends is less than some tolerance, then DON’T transition, instead reposition scene.view at 0 as if swipe never occurred.

7.  you also need to clamp delta-x so they don’t swipe it the “wrong direction” or further than fully offscreen in the “correct direction” (tho latter is unlikely to be a problem unless you fully support multitouch)

it’s actually far easier to accomplish something visually-equivalent WITHOUT composer, except that typically when this question is asked, composer is already in place and doing it via scene-transition/management is a requirement.

Hey davebollinger, thank you for replying and explaining it to me.I figured it would be easier to just phase composer out.

@anon63346430

Take a look at the SlideView demo.  Assuming your “scenes” are not too heavy something like that could work.  Just use display groups instead of images.

You can still use composer but you will your swipe left and right “scenes” to not be composer scenes. 

Yes that was the first thing I did but I couldn’t figure out how to integrate it to composer. Now after some more research I decided to use this: https://gist.github.com/rannerboy/e84a75d7e17265d077a0b72a039209c1

I changed every scene file to containers that return themselves.It is very easy to use since the repository has a detailed example.

Thank you for helping.

[davebollinger]

>> Is there any way to accomplish what I want with scenes or are scenes aren’t suitable for this?

yes, BUT

if you have to ask, then you likely don’t yet know enough to fully accomplish it

it isn’t built in, and requires a good amount of “hackery” to make it fully functional (read: to make it work the way that you intuitively expect it would)…

1. you need to set up your current scene as an “overlay” above the next scene (so that next scene is present underneath)

2.  you’ll need full began/moved/ended touch response because you’re making a “drag” listener

3.  you’ll need to adjust the scene.view’s x coordinate (assuming it’s a left/right swipe you’re describing)

4.  you’ll need to adjust composer’s slideLeft/Right effect’s xStart value (so that on touch ended the transition BEGINS where the DRAG ends)  (i recommend cloning those effects before beginning as swipeLeft/swipeRight so that you don’t “break” them if used elsewhere for non-swipe slides)

5.  you’ll need to adjust the transition time as a ratio of the scene’s now-offset x to the full-screen width (because you only want to use the full time if fully on-screen, ie if already 90% offscreen you only want 10% transition time, because you’ve already started at the 90% x-coordinate)

6.  you also need an “oops” factor – if delta-x when touch ends is less than some tolerance, then DON’T transition, instead reposition scene.view at 0 as if swipe never occurred.

7.  you also need to clamp delta-x so they don’t swipe it the “wrong direction” or further than fully offscreen in the “correct direction” (tho latter is unlikely to be a problem unless you fully support multitouch)

it’s actually far easier to accomplish something visually-equivalent WITHOUT composer, except that typically when this question is asked, composer is already in place and doing it via scene-transition/management is a requirement.

[anon63346430]

Take a look at the SlideView demo.  Assuming your “scenes” are not too heavy something like that could work.  Just use display groups instead of images.

You can still use composer but you will your swipe left and right “scenes” to not be composer scenes. 

[gurcanglc]

@davebollinger

>> Is there any way to accomplish what I want with scenes or are scenes aren’t suitable for this?

yes, BUT

if you have to ask, then you likely don’t yet know enough to fully accomplish it

it isn’t built in, and requires a good amount of “hackery” to make it fully functional (read: to make it work the way that you intuitively expect it would)…

1. you need to set up your current scene as an “overlay” above the next scene (so that next scene is present underneath)

2.  you’ll need full began/moved/ended touch response because you’re making a “drag” listener

3.  you’ll need to adjust the scene.view’s x coordinate (assuming it’s a left/right swipe you’re describing)

4.  you’ll need to adjust composer’s slideLeft/Right effect’s xStart value (so that on touch ended the transition BEGINS where the DRAG ends)  (i recommend cloning those effects before beginning as swipeLeft/swipeRight so that you don’t “break” them if used elsewhere for non-swipe slides)

5.  you’ll need to adjust the transition time as a ratio of the scene’s now-offset x to the full-screen width (because you only want to use the full time if fully on-screen, ie if already 90% offscreen you only want 10% transition time, because you’ve already started at the 90% x-coordinate)

6.  you also need an “oops” factor – if delta-x when touch ends is less than some tolerance, then DON’T transition, instead reposition scene.view at 0 as if swipe never occurred.

7.  you also need to clamp delta-x so they don’t swipe it the “wrong direction” or further than fully offscreen in the “correct direction” (tho latter is unlikely to be a problem unless you fully support multitouch)

it’s actually far easier to accomplish something visually-equivalent WITHOUT composer, except that typically when this question is asked, composer is already in place and doing it via scene-transition/management is a requirement.

Hey davebollinger, thank you for replying and explaining it to me.I figured it would be easier to just phase composer out.

@anon63346430

Take a look at the SlideView demo.  Assuming your “scenes” are not too heavy something like that could work.  Just use display groups instead of images.

You can still use composer but you will your swipe left and right “scenes” to not be composer scenes. 

Yes that was the first thing I did but I couldn’t figure out how to integrate it to composer. Now after some more research I decided to use this: https://gist.github.com/rannerboy/e84a75d7e17265d077a0b72a039209c1

I changed every scene file to containers that return themselves.It is very easy to use since the repository has a detailed example.

Thank you for helping.