I am trying to create a scene which allows navigation to other scenes using swipe left or right. I have three scenes the first can only swipe left to go to the next scene, then the second scene had a swipe left to the last scene and swipe right to go to the previous scene, and lastly a scene which only has a swipe right to go back to the previous scene. So it basically is meant to look a bit like a book with three pages.
The issue i’m having is that the second scene gets skipped when I come from the first scene, the animation is still there but it look as if it is picking up the swipe from the first scene when it changes scenes.
I also could not get them to work again when navigation back to them from a entirely different scene after I used them once. So I thought this would be down to the fact that I had a scene:hide which removed the event listener so that other scenes couldn’t use the same navigation, but I haven’t yet added any scene:show functions yet so I thought this was the issue. So I attempted to add this and sure enough it worked, even stopped the scene skipping. However this then introduced a new issue where the first and last scenes could swipe in the directions were they shouldn’t be able to such as the first should be able to swipe left (being back) and the last shouldn’t be able to swipe right (being next) and then it began to give me a white screen if i continue to try and navigate with the swipes.
This is the code for the first scene…
[lua]
–
– page1.lua
–
local composer = require( “composer” )
local scene = composer.newScene()
local widget = require( “widget” )
–Create Starts
function scene:create( event )
local sceneGroup = self.view
–Background
local bg = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
bg.anchorX = 0
bg.anchorY = 0
bg:setFillColor( 1 ) – white
–Title
local title = display.newText( “Page 1”, 0, 0, native.systemFont, 18 )
title:setFillColor( 0 ) – black
title.x = display.contentWidth * 0.5
title.y = -25
–SceneGroups
sceneGroup:insert( bg )
sceneGroup:insert( title )
end
–Touch Events
local stage = display.getCurrentStage()
local function onSceneTouch1( event )
if event.xStart > event.x and (event.xStart - event.x) >= 100 then
composer.gotoScene( “page2”, “slideLeft”, 1000 )
return true
end
end
stage:addEventListener(“touch”, onSceneTouch1)
–Show Starts
function scene:show( event )
local sceneGroup = self.view
stage:addEventListener(“touch”,onSceneTouch1)
end
–Hide Starts
function scene:hide( event )
local sceneGroup = self.view
stage:removeEventListener(“touch”,onSceneTouch1)
end
–Destroy Starts
function scene:destroy( event )
local sceneGroup = self.view
end
– Listener setup
scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )
return scene
[/lua]
This is the code for my second scene…
[lua]
–
– page2.lua
–
local composer = require( “composer” )
local scene = composer.newScene()
local widget = require( “widget” )
–Create Starts
function scene:create( event )
local sceneGroup = self.view
–Background
local bg = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
bg.anchorX = 0
bg.anchorY = 0
bg:setFillColor( 1 ) – white
–Title
local title = display.newText( “Page 2”, 0, 0, native.systemFont, 18 )
title:setFillColor( 0 ) – black
title.x = display.contentWidth * 0.5
title.y = -25
–SceneGroup
sceneGroup:insert( bg )
sceneGroup:insert( title )
end
– Touch Events
local stage = display.getCurrentStage()
local function onSceneTouch2( event )
if event.phase == “ended” then
if event.xStart < event.x and (event.x - event.xStart) >= 100 then
composer.gotoScene( “page1”, “slideRight”, 1000 )
return true
end
elseif event.xStart > event.x and (event.xStart - event.x) >= 100 then
composer.gotoScene( “page3”, “slideLeft”, 1000 )
return true
end
end
stage:addEventListener(“touch”, onSceneTouch2)
–Show Starts
function scene:show( event )
local sceneGroup = self.view
stage:addEventListener(“touch”,onSceneTouch2)
end
–Hide Starts
function scene:hide( event )
local sceneGroup = self.view
stage:removeEventListener(“touch”,onSceneTouch2)
end
–Destroy Starts
function scene:destroy( event )
local sceneGroup = self.view
end
– Listener setup
scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )
return scene
[/lua]
This is the code for my third scene…
[lua]
–
– page3.lua
–
local composer = require( “composer” )
local scene = composer.newScene()
local widget = require( “widget” )
–Create Starts
function scene:create( event )
local sceneGroup = self.view
–Background
local bg = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
bg.anchorX = 0
bg.anchorY = 0
bg:setFillColor( 1 ) – white
–Title
local title = display.newText( “Page 3”, 0, 0, native.systemFont, 18 )
title:setFillColor( 0 ) – black
title.x = display.contentWidth * 0.5
title.y = -25
–SceneGroups
sceneGroup:insert( bg )
sceneGroup:insert( title )
end
–Touch Events
local stage = display.getCurrentStage()
local function onSceneTouch3( event )
if event.xStart < event.x and (event.x - event.xStart) >= 100 then
composer.gotoScene( “page2”, “slideRight”, 1000 )
return true
end
end
stage:addEventListener(“touch”, onSceneTouch3)
–Show Starts
function scene:show( event )
local sceneGroup = self.view
stage:addEventListener(“touch”,onSceneTouch3)
end
–Hide Starts
function scene:hide( event )
local sceneGroup = self.view
stage:removeEventListener(“touch”,onSceneTouch3)
end
–Destroy Starts
function scene:destroy( event )
local sceneGroup = self.view
end
– Listener setup
scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )
return scene
[/lua]
If anyone knows what it is i’m doing wrong here that would be great.
Thanks,
Matt.