Smooth Scene Transition?

Solar2D General Questions/Discussion
#1

I have a menu page where I can click and slide to the next page. How can I make it so that I can hold and slide the page back and forth to make it more smooth?(Something like the homepage in Apple devices)

Currently what I have is that it moves to the next page once its being slide its like one movement at one time. Possible to make it so that once I hold  down and I can slide back and forth?

Here’s the code to make it slide:

function onTouch(event) if event.phase == "began" then xStart = event.x elseif event.phase == "moved" then -- elseif event.phase == "ended" then -- previous page if xStart \< event.x and event.x - xStart \>= 100 then if currentPage \>= 2 then -- min + 1 --transition.to(groupStars,{x=groupStars.x + screenWidth,time = 300}) transition.to(groupBg, {x = groupBg.x + screenWidth , time=300}) dot\_yellow.x = dot\_yellow.x - 21 currentPage = currentPage - 1 end -- next page elseif xStart \> event.x and xStart - event.x \>= 100 then if currentPage \<= maxPage-1 then -- max - 1 --transition.to(groupStars,{x=groupStars.x - screenWidth, time = 300}) transition.to(groupBg, {x = groupBg.x - screenWidth, time=300}) dot\_yellow.x = dot\_yellow.x + 21 --dots.x = dots.x - screenWidth--math.floor(screenWidth/2) currentPage = currentPage + 1 end end end end Runtime:addEventListener("touch", onTouch)
#2

It’s not a very easy task. Transition.to can’t help you because it only deals with a destination.

The basic concept you need to use is:

  1. Each “screen” needs to be its own display group.

  2. Load each screen group next to each other (like a shelf of books)

  3. Add a touch listener with drag controls (check the code depository or the forums, there are some examples of “correct” drag code)

  4. Whenever you release (lift your finger) you need to detect if it moved far enough to slide over one screen.

  5. If it did, use transition.to to finish the job

  6. If it didn’t, use transition.to to revert

  7. Add code to prevent touch until the transitions finish.

#3

Something close to the Sample Code from Corona sdk(Under Interface -> SlideView) where you can hold and slide at the same time, allowing you to be able to see whats next. Any help?

#4

Well, richard09 pretty much wrote all necessary stuff. Go and experiment with display groups. And transition their position. And step by step, as you learn new things, go and try to do it on full screen. And post your code if you have more specific problems with your code, that way you can get more help.

#5

You can check out the object.parent property to see the parent (and to see if a display object is in a group) I guess. And for your final question try changing the X value directly, without a transition to make sure you are using the correct X value.

#6

Not really sure what you’re doing?

  1. Like I said, each screen needs to have its own root displayGroup. If you then want to scroll between them, I’d have another displayGroup that holds *all* of them. 

  2. You then need to move all of these screen groups so that they are in a row. Just update the .x

    local screen1 = display.newGroup() – add stuff to it using screen1:insert() – repeat for screen2, etc. – then move each group into position screen2.x = screen1.x + screen1.width – etc.

3. Then when you want to scroll, you move the .x position of that group. (With a touch function, you would add/subtract from the group’s .x value during the “moved” phase). If this is hard look in the code repository for drag functions.

#7

So I will need a group that contains all the other screen? Eg groupBg

Then in groupBg I will have all the backgrounds screens?

So it will be something like this?:

local bgs = {bg1, bg2, bg3) -- Table that holds the images of the background local groupBg -- the main display group that holds all local background1 local background2 local background3 -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view groupBg = display.newGroup() background1 = display.newGroup() background2 = display.newGroup() background3 = display.newGroup() --Load the background bgs[1] = display.newImageRect("Images/bg\_Stage\_1.png",screenWidth ,screenHeight ) bgs[1].x = math.floor(screenWidth/2) bgs[1].y = math.floor(screenHeight/2) background1:insert(bgs[1]) --Load the background bgs[2] = display.newImageRect("Images/bg\_Stage\_2.png",screenWidth ,screenHeight ) bgs[2].x = math.floor(screenWidth/2) bgs[2].y = math.floor(screenHeight/2) background2:insert(bgs[2]) --Load the background bgs[3] = display.newImageRect("Images/bg\_Stage\_3.png",screenWidth ,screenHeight ) bgs[3].x = math.floor(screenWidth/2) bgs[3].y = math.floor(screenHeight/2) background3:insert(bgs[3])

So how do I insert all the 3 different display group into the groupBg?

For No.3, currently i am able to drag and move around the background image but once I release it does not fit to the screen nicely.

Sorry for bothering you guys… but I just cant seems to finish this part of the game…

#8

Any group can be inserted into another group, but any object (including a group) can only belong to one other group. (You can only have one parent…)

groupBg:insert(bgs[1])

groupBg:insert(bgs[2]) etc

I would build things like this:

local function buildScreen1() local group = display.newGroup() -- put in all of the stuff for screen 1 in here. make sure to insert into group: group:insert(coolUIobject) return group end local function buildScreen2() local group = display.newGroup() -- put in all of the stuff for screen 1 in here. make sure to insert into group: group:insert(coolUIobject) return group end local function buildScreen3() local group = display.newGroup() -- put in all of the stuff for screen 1 in here. make sure to insert into group: group:insert(coolUIobject) return group end local screen1 = buildScreen1() local screen2 = buildScreen2() local screen3 = buildScreen3() local bigGroup = display.newGroup() bigGroup:insert(screen1) bigGroup:insert(screen2) bigGroup:insert(screen3)
#9

http://docs.coronalabs.com/api/event/touch/index.html

Here you have touch event described.

To calucalte how much you moved your finger you need to substract event.xStart - event.x in each event’s moved phase. That way you will have positive values for moving your finger right and negative for moving left. So you will have just ready to use drag distance.

Now on began phase you might want to store your original position (if it’s not 0, if it’s 0 you will be fine without it).

Back to moved phase… Just add to your coordinate start coordinate drag sitance.

group.x = group.originalPosition + dragDistance &nbsp;

Group will now move after your finger.

On ended phase you might check how far finger moved (use math.abs on drag distance), if it’s beyond your threshold you slide to new page if not you revert to original position.

#10

@delwing I am really having alot of trouble with the dragDistance and math.abs. I could not implement into it Could you help?

Lets say I have a display group called “bigGroup” that holds all my individual level select display group, should I use “bigGroup” or just the individual display group like “screen1”?

Here’s my transition code:

function onTouch(event) if event.phase == "began" then xStart = event.x originalPosition = 0 dragDistance = xStart- event.x elseif event.phase == "moved" then screen1.x = screen1.x + dragDistance elseif event.phase == "ended" then -- previous page if xStart \< event.x and xStart - event.x \>= 100 then if currentPage \>= 2 then -- min + 1 transition.to(screen1, { x = screen1.x + screenWidth, time = 400, transition.outExpo}) dot\_yellow.x = dot\_yellow.x - 21 currentPage = currentPage - 1 end -- next page elseif xStart \> event.x and xStart - event.x \>= 100 then if currentPage \<= maxPage -1 then -- max - 1 transition.to(screen2, { x = screen2.x - screenWidth, time = 400, transition.outExpo }) dot\_yellow.x = dot\_yellow.x + 21 currentPage = currentPage + 1 end end end end Runtime:addEventListener("touch", onTouch)

Really need alot of help with this… Sorry and Thank You

#11

http://coronalabs.com/blog/2011/09/24/tutorial-how-to-drag-objects/

Here is ready solution.

What you are doing wrong, is calculating drag distance in began phase. So it’s once and even before you start moving your finger.

You need to calculate it on move phase. You don’t need xStart variable, you have that in event table, event.xStart.

You can simplify “ended phase”, bear in mind that you can always do something like this

local dragDistance = event.x - event.xStart local direction = dragDistance / math.abs(dragDistance) -- it will be 1 for right and -1 for left &nbsp;

And you can use it for

local page if direction == 1 then page = screen1 else page = screen2 end -- use page for transition if other condition are met dot\_yellow.x = dot\_yellow.x + (21 \* direction) currentPage = currentPage + direction -- etc &nbsp;
#12

Do i do it like this?

function onTouch(event) if event.phase == "began" then self.markX = self.x self.markY = self.y elseif event.phase == "moved" then dragDistance = event.x - event.xStart direction = dragDistance / math.abs(dragDistance) elseif event.phase == "ended" then --Going to next page local page if direction == 1 then page = screen1 else page = screen2 if direction == 1 then transition.to(screen2,{ x = screen2.x - screen.Width, time = 400}) dot\_yellow.x = dot\_yellow + (21 \* direction) currentPage = currentPage + direction end &nbsp;

Am I doing it correctly?

What about screen3,4 and 5? 

#13

Use table listener
Put pages in table and just retrieve them with index changed on swiping.
Try to read more on variable scope and tutorials about event handling.

#14 
local page = {} function page:OnTouch(event)if event.phase == "began"--etc..

Is it like this? what about my transition.to? Is that part wrong also?

Sorry for that. It is my first time doing programming, and I do not have any programming experience before and I still have many things that i do not understand.

#15

More like:

local page = display.newGroup() function page:touch(event) -- all good stuff goes here end page:addEventListener( "touch", page ) &nbsp;

This way in functon touch you have variable self that reffers to page.

#16

Now I have no errors and is abbe to run but when I tried to hold and drag nothing happen.
Even the yellow dots at the bottom is also not moving.

This is what I have now:

local bigGroup = display.newGroup() function bigGroup:touch(event) if event.phase == "began" then self.markX = self.x elseif event.phase == "moved" then dragDistance = (event.x - event.xStart) + self.markX direction = dragDistance / math.abs (dragDistance) elseif event.phase == "ended" then -- previous page if direction == 1 then bigGroup = screen1 else bigGroup = screen2 end -- Go to prev page if dragDistance.x == -1 then -- min + 1 transition.to(screen1, { x = screen1.x + screenWidth, time = 400, transition.outExpo}) dot\_yellow.x = dot\_yellow.x - (21 \* direction) currentPage = currentPage - direction end -- Go to next page if dragDistance.x == 1 then -- max - 1 transition.to(screen2, { x = screen2.x - screenWidth, time = 400, transition.outExpo }) dot\_yellow.x = dot\_yellow.x + (21 \* direction) currentPage = currentPage + direction end end end bigGroup:addEventListener("touch", bigGroup)

Where bigGroup is my display group that holds all the screen 1, 2, 3, 4, 5

What is wrong with the code?
Thank You

#17

Anyone can offer some help here? What is wrong with the code?

Please! Had been stuck for weeks.

#18

Not entirely sure. Try setting bigGroup.anchorChildren = true and see what happens?

Also, add print(“text”) statements so you know for sure if the touch function works or not. Even if nothing moves you should be able to see print statements in the console.

#19

It’s not a very easy task. Transition.to can’t help you because it only deals with a destination.

The basic concept you need to use is:

  1. Each “screen” needs to be its own display group.

  2. Load each screen group next to each other (like a shelf of books)

  3. Add a touch listener with drag controls (check the code depository or the forums, there are some examples of “correct” drag code)

  4. Whenever you release (lift your finger) you need to detect if it moved far enough to slide over one screen.

  5. If it did, use transition.to to finish the job

  6. If it didn’t, use transition.to to revert

  7. Add code to prevent touch until the transitions finish.

#20

Something close to the Sample Code from Corona sdk(Under Interface -> SlideView) where you can hold and slide at the same time, allowing you to be able to see whats next. Any help?