Restricting an image being dragged off screen.

Solar2D General Questions/Discussion
#1

Hey all!

Sorry if this has already been posted, but I haven’t seen anything on it. Ran into another small problem that I’ve been trying to wrap my head around the last few days.

So I followed this tutorial.

https://coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/

I am working with a large “map” image that the user will be able to drag and zoom in and out of.

Once I got that implemented I needed to restrict the zoom and was able to get that.

if background.xScale \> 1.5 then background.xScale, background.yScale = 1.5, 1.5 elseif background.xScale == 1 then background.xScale, background.yScale = 1, 1 elseif background.xScale \< 0.7 then background.xScale, background.yScale = 0.7, 0.7 end

Now I’m trying to get this large “map” image not to be dragged off the screen when they reach the edge of the image. With the different scaling restriction I figured it would be a little easier, but I’m lost and can’t seem to figure it out.

Any help would be appreciated!

Thank you in advanced!

#2

I can see that the edge of your map would be different depending on the scale.

How about putting a line of code in between your existing code like this:

 if background.xScale \> 1.5 then background.xScale, background.yScale = 1.5, 1.5 if background.x \< 1625 then background.x = 1625 end elseif background.xScale == 1 then background.xScale, background.yScale = 1, 1 if background.x \< 1425 then background.x = 1425 end elseif background.xScale \< 0.7 then background.xScale, background.yScale = 0.7, 0.7 if background.x \< 1225 then background.x = 1225 end end

Of coarse I don’t know the dimensions of your map but you get the idea.

#3

I came up with code very similar and it seems to work. I was overthinking it! The scaling get’s a little messed up when you are already on the edges of the image, but this works great so far. Trying to make it dynamic seems to be the problem now. Thought about using a contentBounds, but I’ll post something when I figure it out!

#4

I don’t know what kind of map you have but say it’s a world.

I would restrict the bounds of the map even further than you need to and all around the edges put loads of trees and mountains etc…

This would fix your scaling dilemma by having the map a lot larger than is needed for the game play.

Hope this makes sense.

#5

I did a ‘restricing’ on a box using this method below :

  1. Create the box

  2. Create a frame-event-listener, so on every frame, it will check whether the box (contentBounds) are still within the screen. If it isn’t, it will just limit it (or bring it back) onto screen. Only create 1, because creating too many frame listeners will be bad for performance.

Hope this helps.

#6

Hi there,

I am doing something very similar to this - would you have code you could share?

#7

I can see that the edge of your map would be different depending on the scale.

How about putting a line of code in between your existing code like this:

 if background.xScale \> 1.5 then background.xScale, background.yScale = 1.5, 1.5 if background.x \< 1625 then background.x = 1625 end elseif background.xScale == 1 then background.xScale, background.yScale = 1, 1 if background.x \< 1425 then background.x = 1425 end elseif background.xScale \< 0.7 then background.xScale, background.yScale = 0.7, 0.7 if background.x \< 1225 then background.x = 1225 end end

Of coarse I don’t know the dimensions of your map but you get the idea.

#8

I came up with code very similar and it seems to work. I was overthinking it! The scaling get’s a little messed up when you are already on the edges of the image, but this works great so far. Trying to make it dynamic seems to be the problem now. Thought about using a contentBounds, but I’ll post something when I figure it out!

#9

I don’t know what kind of map you have but say it’s a world.

I would restrict the bounds of the map even further than you need to and all around the edges put loads of trees and mountains etc…

This would fix your scaling dilemma by having the map a lot larger than is needed for the game play.

Hope this makes sense.

#10

I did a ‘restricing’ on a box using this method below :

  1. Create the box

  2. Create a frame-event-listener, so on every frame, it will check whether the box (contentBounds) are still within the screen. If it isn’t, it will just limit it (or bring it back) onto screen. Only create 1, because creating too many frame listeners will be bad for performance.

Hope this helps.

#11

Hi there,

I am doing something very similar to this - would you have code you could share?