How to create a draggable screen?

Heya all!
 

I have some kind of  map in mind that i want to use in corona sdk but i want to only show 25% of the map a time.
How do i do this? I want the user to be able to drag the screen around to see more of the map.
So everything is available from the start but i dont want to show everything at once because then all the images have to be very small!

Please help me out with this!!

Thanks in advance,

Danny

I have added a picture for clarification.

Option One: Use a newScrollView widget, add objects to that.

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Option Two: add everything to a display group, add an touch event listener to the group, move the group by the number of pixels the user moves their finger.

Thank you for answering me, i appreciate it!
I have small succes with the scroll view in the sense i got a scene in which i can scroll my objects. :slight_smile:

There are two small problems i have though and one of them is a black bar on the left that i cant get rid of.
The second one is once i drag the screen whatever is in it automatically goes back to its original position after dragging. It doesnt stay there so to say.

Do you know what the problem could be?

If you switch the simulator to iPhone 4 mode, does the black bar go away? If so you need to adjust the X position of the scrollView to take into account the extra screen width on iPhone5 and Android. This will be half the difference between display.actualContentWidth and display.contentWidth.

As for the scrollView moving back after scrolling, try using isBounceEnabled = false.

Thanks! This seemed to make it work halfway.

I simply doubled the size of the background as im going to make it a pretty large map so that will be fine i think.

The isBounceEnabled = false did make it say in place which is what i want! The problem is i can only scroll it to the left or up and not down and right. Except when scrolling back which is strange. Also is it possible to go diagonal with the scrolling?

Im almost there nick! Thanks again!

You’ll need to use this code to scroll immediately to the center of the scrollView, so that you can then move in all directions from there. At present you can’t move down or right because you are already at the outer bounds of the view.

[lua]

scrollView : scrollToPosition
{
    x =240,
    y = 160
}

[/lua]

That would be if the total size of your map was 480 x 320.

Im using it reversed as my resolutin is 320 x 480.

What im getting is it stays in the far right bottom of the screen.
Could it be i have bad coding here?

 local worldMap = widget.newScrollView({0, 0, width = 320, height = 480, scrollWidth = 320, scrollHeight = 480, isBounceEnabled = false}) worldMap.x = centerX worldMap.y = centerY worldMap.anchorX = 0.5 worldMap.anchorY = 0.5 worldMap:scrollToPosition{ x =160, y = 240} grp:insert(worldMap)

Also at the start of the drag the image flies to where my mouse is. Is that supposed to happen?

Option One: Use a newScrollView widget, add objects to that.

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Option Two: add everything to a display group, add an touch event listener to the group, move the group by the number of pixels the user moves their finger.

Thank you for answering me, i appreciate it!
I have small succes with the scroll view in the sense i got a scene in which i can scroll my objects. :slight_smile:

There are two small problems i have though and one of them is a black bar on the left that i cant get rid of.
The second one is once i drag the screen whatever is in it automatically goes back to its original position after dragging. It doesnt stay there so to say.

Do you know what the problem could be?

If you switch the simulator to iPhone 4 mode, does the black bar go away? If so you need to adjust the X position of the scrollView to take into account the extra screen width on iPhone5 and Android. This will be half the difference between display.actualContentWidth and display.contentWidth.

As for the scrollView moving back after scrolling, try using isBounceEnabled = false.

Thanks! This seemed to make it work halfway.

I simply doubled the size of the background as im going to make it a pretty large map so that will be fine i think.

The isBounceEnabled = false did make it say in place which is what i want! The problem is i can only scroll it to the left or up and not down and right. Except when scrolling back which is strange. Also is it possible to go diagonal with the scrolling?

Im almost there nick! Thanks again!

You’ll need to use this code to scroll immediately to the center of the scrollView, so that you can then move in all directions from there. At present you can’t move down or right because you are already at the outer bounds of the view.

[lua]

scrollView : scrollToPosition
{
    x =240,
    y = 160
}

[/lua]

That would be if the total size of your map was 480 x 320.

Im using it reversed as my resolutin is 320 x 480.

What im getting is it stays in the far right bottom of the screen.
Could it be i have bad coding here?

 local worldMap = widget.newScrollView({0, 0, width = 320, height = 480, scrollWidth = 320, scrollHeight = 480, isBounceEnabled = false}) worldMap.x = centerX worldMap.y = centerY worldMap.anchorX = 0.5 worldMap.anchorY = 0.5 worldMap:scrollToPosition{ x =160, y = 240} grp:insert(worldMap)

Also at the start of the drag the image flies to where my mouse is. Is that supposed to happen?