Keep libgdx camera inside boundaries when panning and zooming

Question

I am developing a game for Android using LibGDX. I have added pinch zoom and pan. My issue is how to keep from going outside of the play area. As it is, you can pan outside of the play area into blackness. When zoomed out fully I know how to deal with it, I just said:

if(camera.zoom == 1.0f) ;
else {

}

But, if zoomed in, how do I accomplish this. I know this is not that complicated, I just can't seem to figure it out. Upon creation I set the camera to the middle of the screen. I know how to pan, I am using camera.translate(-input.deltaX, -input.deltaY, 0), I just need to test before this call to see if the position is outside of the play area. When I am zoomed in, how do I test if I am at the edge of the screen?

score 8 · Accepted Answer · edited May 23 '17 at 11:54

8

You can use one of

camera.frustum.boundsInFrustum(BoundingBox box) 
camera.frustum.pointInFrustum(Vector3 point)
camera.frustum.sphereInFrustum(Vector3 point, float radius)

to check if a point/box/sphere is within your camera's view. What I normally do is define 4 boxes around my world where the player should not be allowed to see. If the camera is moved and one of the boxes is in the frustum, I move the camera back to the previous position.

Edit: AAvering has implemented this in code below.

edited May 23 '17 at 11:54

Community

1
1

answered Aug 21 '12 at 16:02

Matsemann

21,083
19
56
89

Thank you, that should work. So you define four rectangles around the "play area" and do an if for each box? That way you know which direction to go back if one of them returns true? – weaverx9x9 Aug 21 '12 at 16:52
This is a great idea, however I'm having trouble finding any examples on how to implement this, and instantiate a Boundingbox. You have a play area of, say, (0,0) to (800,480). So do you create 4 BoundingBoxes along each edge? – Jammo Mar 22 '14 at 20:21

score 8 · Answer 2 · edited Mar 07 '16 at 10:34

Credit goes to Matsemann for idea, here is the implementation I used.

Make a custom MyCamera class extending OrthographicCamera and add the following code:

BoundingBox left, right, top, bottom = null;

public void setWorldBounds(int left, int bottom, int width, int height) {
    int top = bottom + height;
    int right = left + width;

    this.left = new BoundingBox(new Vector3(left - 2, 0, 0), new Vector3(left -1, top, 0));
    this.right = new BoundingBox(new Vector3(right + 1, 0, 0), new Vector3(right + 2, top, 0));
    this.top = new BoundingBox(new Vector3(0, top + 1, 0), new Vector3(right, top + 2, 0));
    this.bottom = new BoundingBox(new Vector3(0, bottom - 1, 0), new Vector3(right, bottom - 2, 0));
}

Vector3 lastPosition = new Vector3();
@Override
public void translate(float x, float y) {
    lastPosition.set(position.x, position.y, 0);
    super.translate(x, y);
}

public void translateSafe(float x, float y) {
    translate(x, y);
    update();
    ensureBounds();
    update();
}

public void ensureBounds() {
    if (frustum.boundsInFrustum(left) || frustum.boundsInFrustum(right) || frustum.boundsInFrustum(top) || frustum.boundsInFrustum(bottom)) {
        position.set(lastPosition);
    }
}

Now, in you custom sceene or whathever you use (in my case it was a custom Board class) call:

camera.setWorldBounds()

and in your GestureListener.pan method you can call

camera.translateSafe(x, y);

it should keep your camera in bounds

score 6 · Answer 3 · answered May 10 '13 at 04:02

Here's the code I call after the position of the camera is updated due to panning or zooming in my 2D game using an orthographic camera. It corrects the camera position so that it doesn't show anything outside the borders of the play area.

float camX = camera.position.x;
float camY = camera.position.y;

Vector2 camMin = new Vector2(camera.viewportWidth, camera.viewportHeight);
camMin.scl(camera.zoom/2); //bring to center and scale by the zoom level
Vector2 camMax = new Vector2(borderWidth, borderHeight);
camMax.sub(camMin); //bring to center

//keep camera within borders
camX = Math.min(camMax.x, Math.max(camX, camMin.x));
camY = Math.min(camMax.y, Math.max(camY, camMin.y));

camera.position.set(camX, camY, camera.position.z);

camMin is the lowest left corner that the camera can be without showing anything outside of the play area and is also the offset from a corner of the camera to the center.

camMax is the opposite highest right location the camera can be in.

The key part I'm guessing you're missing is scaling the camera size by the zoom level.

nmw · Answer 4 · 2013-10-24T07:46:31.297

5

Here's my solution:

float minCameraX = camera.zoom * (camera.viewportWidth / 2);
float maxCameraX = worldSize.x - minCameraX;
float minCameraY = camera.zoom * (camera.viewportHeight / 2);
float maxCameraY = worldSize.y - minCameraY;
camera.position.set(Math.min(maxCameraX, Math.max(targetX, minCameraX)),
        Math.min(maxCameraY, Math.max(targetY, minCameraY)),
        0);

Where:

targetX and targetY are world coordinates of where your target is.
worldSize is a Vector2 of the size of the world.

edited Oct 24 '13 at 07:46

answered Oct 21 '13 at 21:00

nmw

6,664
3
31
32

1

Thanks for the code snippet! This was what I was thinking, but I was too lazy to write it myself ;) – Anubian Noob Oct 20 '14 at 08:35

score 4 · Answer 5 · answered Nov 03 '14 at 09:44

I don't have enough reputation to write comments, so I'll point to some previous answers.

AAverin's solution with bounding box that's made with Matsemann's idea isn't good because it annoyingly slows when you are near the one edge (boundary) and trying to translate diagonally in which case you are panning to one side out of bounds and other in proper direction.

I strongly suggest that you try solution from the bottom of handleInput method presented at

https://github.com/libgdx/libgdx/wiki/Orthographic-camera

That one works smoothly, and some of the previous answers look like that one but this one uses MathUtils.clamp wihch is a straight forward and much cleaner.

score 2 · Answer 6 · answered Jun 06 '15 at 20:54

Perfect class for this, (partly thanks to AAverin)

This class not only sticks into the bounds it also snaps into the bounds when you zoom.

Call these for setting bounds and moving the camera.

camera.setWorldBounds()
camera.translateSafe(x, y);

When zooming call

camera.attemptZoom();

And here's the class:

public class CustomCamera extends OrthographicCamera
{
    public CustomCamera() {}

    public CustomCamera(float viewportWidth, float viewportHeight)
    {
        super(viewportWidth, viewportHeight);
    }

    BoundingBox left, right, top, bottom = null;

    public void setWorldBounds(int left, int bottom, int width, int height) {
        int top = bottom + height;
        int right = left + width;

        this.left = new BoundingBox(new Vector3(left - 2, 0, 0), new Vector3(left -1, top, 0));
        this.right = new BoundingBox(new Vector3(right + 1, 0, 0), new Vector3(right + 2, top, 0));
        this.top = new BoundingBox(new Vector3(0, top + 1, 0), new Vector3(right, top + 2, 0));
        this.bottom = new BoundingBox(new Vector3(0, bottom - 1, 0), new Vector3(right, bottom - 2, 0));
    }

    Vector3 lastPosition;
    @Override
    public void translate(float x, float y) {
        lastPosition = new Vector3(position);
        super.translate(x, y);
    }

    public void translateSafe(float x, float y) {
        translate(x, y);
        update();
        ensureBounds();
        update();
    }

    public void ensureBounds()
    {
        if(isInsideBounds())
        {
            position.set(lastPosition);
        }
    }

    private boolean isInsideBounds()
    {
        if(frustum.boundsInFrustum(left) || frustum.boundsInFrustum(right) || frustum.boundsInFrustum(top) || frustum.boundsInFrustum(bottom))
        {
            return true;
        }
        return false;
    }

    public void attemptZoom(float newZoom)
    {
        this.zoom = newZoom;
        this.snapCameraInView();
    }

    private void snapCameraInView()
    {
        float halfOfCurrentViewportWidth = ((viewportWidth * zoom) / 2f);
        float halfOfCurrentViewportHeight = ((viewportHeight * zoom) / 2f);

        //Check the vertical camera.
        if(position.x - halfOfCurrentViewportWidth < 0f) //Is going off the left side.
        {
            //Snap back.
            float amountGoneOver = position.x - halfOfCurrentViewportWidth;
            position.x += Math.abs(amountGoneOver);
        }
        else if(position.x + halfOfCurrentViewportWidth > viewportWidth)
        {
            //Snap back.
            float amountGoneOver = (viewportWidth - (position.x + halfOfCurrentViewportWidth));
            position.x -= Math.abs(amountGoneOver);
        }

        //Check the horizontal camera.
        if(position.y + halfOfCurrentViewportHeight > viewportHeight)
        {
            float amountGoneOver = (position.y + halfOfCurrentViewportHeight) - viewportHeight;
            position.y -= Math.abs(amountGoneOver);
        }
        else if(position.y - halfOfCurrentViewportHeight < 0f)
        {
            float amountGoneOver = (position.y - halfOfCurrentViewportHeight);
            position.y += Math.abs(amountGoneOver);
        }
    }
}

score 1 · Answer 7 · answered Nov 29 '15 at 16:45

The CustomCamera class given doesn't work very well. I used it to map a pinch gesture to zoomSafe and the camera would bounce/flash from left to right constantly when on the edge of the bounds. The camera also doesnt work properly with panning. If you try to pan along the edge of the bounds it doesnt pan anywhere as if the edges are "sticky". This is because it just translates back to the last position instead of just adjusting the coordinate that it outside the bounds.

Keep libgdx camera inside boundaries when panning and zooming

7 Answers7