Pinch Zoom + Pan with Limits (Clamp to Object Bounds)

How do I...?
1

Hi everyone,
I’m trying to set up camera zoom + panning in GDevelop for a mobile app, but I’m stuck and couldn’t find a solution (I tried Googling and also asked ChatGPT, but nothing matched what I need).

Goal / behaviour I want (similar to the “pixel art paint-by-numbers” app):
I have one main object (or a big image/sprite) that should always stay within the screen bounds, with proper zoom limits.

1) Zoom-out limit + always centered

  • When the camera is zoomed out, the object should stay perfectly centered on screen.
  • I want a minimum zoom (zoom-out limit) so the user cannot zoom out too far.
  • Zooming out should stop exactly when the object would no longer touch the screen edges.
    In other words: as soon as any side of the object would no longer reach the corresponding screen edge (so you’d start seeing empty space around it), zoom-out should stop.

2) Pinch-to-zoom with min/max zoom

  • I want pinch gesture zoom in/out.
  • Zoom in should have a maximum zoom-in limit (so you can’t zoom in infinitely).
  • Zoom out should follow the same zoom-out limit described above (stop when the object would no longer cover/touch the screen edges).

3) Pinch + pan at the same time

  • While pinching, I also want the user to be able to pan/drag (swipe) at the same time.
  • When zoomed in and the user pans, the object/camera should be clamped so you can’t drag it past its edges:
    • e.g. you can’t pan so far that one side of the object would leave the screen and show empty space, unless the other side is still filling the screen.
      Basically: keep the camera position limited so the object always stays inside the screen bounds.

Questions:

  1. What is the best way in GDevelop to calculate and clamp the minimum zoom so zoom-out stops exactly at the object’s size relative to the screen?
  2. How do I combine pinch zoom + drag panning simultaneously, while clamping both the zoom and the camera position to the object bounds?
  3. Are there existing examples / extensions / recommended event logic for this kind of “map/image viewer” behaviour?

Thanks a lot for any help!

2

Hi Juice and welcome

I don’t have exact answers for you but I use the Drag camera with pointer extension for camera panning and the Pinch gesture extension for zooming. Both work well but maybe not at the same time. I decided not to let that bother me but it might be possible to get them to work at the same time with the same gestures.

For the clamping, this formula was suggested by the author of the Pinch gesture extension: Camera Zoom limit - #9 by davy It works well for me, but does not achieve exactly what you want.

The Pinch gesture extension doesn’t seem to work with the Save states behavior though as mentioned by me here a few days ago: Pinch Gesture extension not working with Save states

1 Like