Hi,
I was wondering how some of you would go about making a ‘swipe around map behavior’. This way, users could swipe their finger around on the screen to move the view (much like swiping a map on the Google/Apple Maps apps).
Any thoughts/feedback of how to go about this would be greatly appreciated.
Thanks!
You will need to use an onTouch() event and in that you can control swiping.
If you want to add momentum there are two ways, the easy one is when the finger leaves the screen, work out which direction you were going and add a decaying transition.
The more complicated method is to add an enterFrame() listener and use that to decay screen swiping based on a decay.
Hi,
Thank you for the suggestions. Regarding the movement, I created a touch listener for the entire screen in conjunction with perspective.lua. When the screen is dragged, the camera view is also dragged. However, I would like to make it so that there are bounds on the actual camera view so if the drag exceeds the “bounds”, it will snap back to the actual bound area (see image below). If you have any thoughts as to how to make a snapback swipe effect, It would be greatly appreciated!
Here’s my current code:
Perspective: https://gist.github.com/GymbylCoding/8675733#file-main-lua
main.lua:
local camera = perspective.createView() camera:track() local a = display.newRect(left, top, 5, 5) a:setFillColor(0) camera:add(a, 1) local b = display.newRect(right, top, 5, 5) b:setFillColor(0) camera:add(b, 1) local c = display.newRect(left, bottom, 5, 5) c:setFillColor(0) camera:add(c, 1) local d = display.newRect(right, bottom, 5, 5) d:setFillColor(0) camera:add(d, 1) -- Objects a-d are just to ensure that the swipe view is working function drag(event) local e = event local p = event.phase local t = event.target if (p == "began") then camera.markX = camera.x -- store x location of object camera.markY = camera.y return true elseif (p == "moved") then local x = (event.x - event.xStart) + camera.markX local y = (event.y - event.yStart) + camera.markY camera.x, camera.y = x, y else -- ended camera:trackFocus() return true end return false end Runtime:addEventListener("touch", drag)
Here’s a quick little drawing I made to outline the general idea. The phone screen in the middle is what the user will see, and they will be able to swipe around the map. The bounds are the actual content area of the map, which if “swiped/scrolled over” will gently transition back so the bounds are the outer edge of the screen.
So assuming the entire area is centred at 0,0 and the “screen” is 320x480 and centred at 0,0. When your drag in x or y is greater than +/- 500 you have crossed a boundary.
So simply transition back current x (or y) - 500 on phase == “ended”. So if “screen” has been dragged 550px then you transition back 550-500 = 50 px.
You will need to use an onTouch() event and in that you can control swiping.
If you want to add momentum there are two ways, the easy one is when the finger leaves the screen, work out which direction you were going and add a decaying transition.
The more complicated method is to add an enterFrame() listener and use that to decay screen swiping based on a decay.
Hi,
Thank you for the suggestions. Regarding the movement, I created a touch listener for the entire screen in conjunction with perspective.lua. When the screen is dragged, the camera view is also dragged. However, I would like to make it so that there are bounds on the actual camera view so if the drag exceeds the “bounds”, it will snap back to the actual bound area (see image below). If you have any thoughts as to how to make a snapback swipe effect, It would be greatly appreciated!
Here’s my current code:
Perspective: https://gist.github.com/GymbylCoding/8675733#file-main-lua
main.lua:
local camera = perspective.createView() camera:track() local a = display.newRect(left, top, 5, 5) a:setFillColor(0) camera:add(a, 1) local b = display.newRect(right, top, 5, 5) b:setFillColor(0) camera:add(b, 1) local c = display.newRect(left, bottom, 5, 5) c:setFillColor(0) camera:add(c, 1) local d = display.newRect(right, bottom, 5, 5) d:setFillColor(0) camera:add(d, 1) -- Objects a-d are just to ensure that the swipe view is working function drag(event) local e = event local p = event.phase local t = event.target if (p == "began") then camera.markX = camera.x -- store x location of object camera.markY = camera.y return true elseif (p == "moved") then local x = (event.x - event.xStart) + camera.markX local y = (event.y - event.yStart) + camera.markY camera.x, camera.y = x, y else -- ended camera:trackFocus() return true end return false end Runtime:addEventListener("touch", drag)
Here’s a quick little drawing I made to outline the general idea. The phone screen in the middle is what the user will see, and they will be able to swipe around the map. The bounds are the actual content area of the map, which if “swiped/scrolled over” will gently transition back so the bounds are the outer edge of the screen.
So assuming the entire area is centred at 0,0 and the “screen” is 320x480 and centred at 0,0. When your drag in x or y is greater than +/- 500 you have crossed a boundary.
So simply transition back current x (or y) - 500 on phase == “ended”. So if “screen” has been dragged 550px then you transition back 550-500 = 50 px.