Hi,
I am trying to implement the below UI (Screenshots attached),
This UI is from cm launcher(pull to show content).
Where can I start? Any suggestions?
I am finding it every hard to implement this.
I started using physics, Is it good to go with physics?
No, physics would NOT be a good call.
You can achieve this by putting the ‘to move’ content all in group, then by transitioning that group when the user clicks or drags appropriately.
https://www.youtube.com/watch?v=P4ELUvD3ng4&feature=youtu.be
local trayParent = display.newGroup() local tray = display.newGroup() tray.openY = 0 tray.closedY = tray.y - display.actualContentHeight tray.y = tray.closedY tray.open = false trayParent:insert(tray) -- Make some random objects for demo for i = 1, 5 do local obj = display.newRect( tray, i \* 50, display.contentCenterY, 40, 20 ) end -- Make a 'button' local button = display.newRect( trayParent, display.contentCenterX, display.contentCenterY + display.actualContentHeight/2 - 40, 300, 50 ) button.label = display.newText( trayParent, "Click Me", button.x, button.y ) button.label:setFillColor(0,0,0) function button.touch( self, event ) if( event.phase == "ended" ) then if( tray.open ) then tray.open = false transition.cancel( tray ) transition.to( tray, { y = tray.closedY } ) else tray.open = true transition.cancel( tray ) transition.to( tray, { y = tray.openY } ) end end end button:addEventListener( "touch" )
Get the whole sample here:
http://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2016/04/tray.zip
I think he wants to drag the tray down.
This can probably help?
local actualW = display.actualContentWidth local actualH = display.actualContentHeight local centerX = display.contentCenterX local centerY = display.contentCenterY local rect1 = display.newRect( centerX, centerY - 100, 10, 10 ) local function move(event) if event.phase == "began" then display.getCurrentStage():setFocus( event.target ) dy = math.abs(rect1.y - event.yStart) if event.y \< rect1.y then checky = true elseif event.y \> rect1.y then checky = false end elseif event.phase == "moved" then if checky == true then rect1.y = event.y + dy elseif checky == false then rect1.y = event.y - dy end elseif event.phase == "ended" then display.getCurrentStage():setFocus(nil) end end Runtime:addEventListener( "touch", move )Sure. I understand that. The principle is similar and easier for me to demo in the short time I had. Going from click to slide down to drag down is a small step.
Thank you guys for your reply.
Dragging the tray group is fine .
I am finding difficulty in creating rope and tag. (The rope must be realistic!).
For creating rope, physics must be used right? or Is there some other way?
Ah, okay, you want rope behaviour. For that you do need physics, or some good trigonometry skills (and vector math). I remember there being a “chain link” demo somewhere on the Corona site - it’s pretty old but might be a good start.
Most like you will need to link 20 short lines together (as hardbodies) to get this type of behaviour.
Thanks all,
I figured it out.
No, physics would NOT be a good call.
You can achieve this by putting the ‘to move’ content all in group, then by transitioning that group when the user clicks or drags appropriately.
https://www.youtube.com/watch?v=P4ELUvD3ng4&feature=youtu.be
local trayParent = display.newGroup() local tray = display.newGroup() tray.openY = 0 tray.closedY = tray.y - display.actualContentHeight tray.y = tray.closedY tray.open = false trayParent:insert(tray) -- Make some random objects for demo for i = 1, 5 do local obj = display.newRect( tray, i \* 50, display.contentCenterY, 40, 20 ) end -- Make a 'button' local button = display.newRect( trayParent, display.contentCenterX, display.contentCenterY + display.actualContentHeight/2 - 40, 300, 50 ) button.label = display.newText( trayParent, "Click Me", button.x, button.y ) button.label:setFillColor(0,0,0) function button.touch( self, event ) if( event.phase == "ended" ) then if( tray.open ) then tray.open = false transition.cancel( tray ) transition.to( tray, { y = tray.closedY } ) else tray.open = true transition.cancel( tray ) transition.to( tray, { y = tray.openY } ) end end end button:addEventListener( "touch" )
Get the whole sample here:
http://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2016/04/tray.zip
I think he wants to drag the tray down.
This can probably help?
local actualW = display.actualContentWidth local actualH = display.actualContentHeight local centerX = display.contentCenterX local centerY = display.contentCenterY local rect1 = display.newRect( centerX, centerY - 100, 10, 10 ) local function move(event) if event.phase == "began" then display.getCurrentStage():setFocus( event.target ) dy = math.abs(rect1.y - event.yStart) if event.y \< rect1.y then checky = true elseif event.y \> rect1.y then checky = false end elseif event.phase == "moved" then if checky == true then rect1.y = event.y + dy elseif checky == false then rect1.y = event.y - dy end elseif event.phase == "ended" then display.getCurrentStage():setFocus(nil) end end Runtime:addEventListener( "touch", move )Sure. I understand that. The principle is similar and easier for me to demo in the short time I had. Going from click to slide down to drag down is a small step.
Thank you guys for your reply.
Dragging the tray group is fine .
I am finding difficulty in creating rope and tag. (The rope must be realistic!).
For creating rope, physics must be used right? or Is there some other way?
Ah, okay, you want rope behaviour. For that you do need physics, or some good trigonometry skills (and vector math). I remember there being a “chain link” demo somewhere on the Corona site - it’s pretty old but might be a good start.
Most like you will need to link 20 short lines together (as hardbodies) to get this type of behaviour.
Thanks all,
I figured it out.