libgdx zoom/drag inside rectangle

Question

I am using scene2d for a board game. I want the board to be zoomable and movable inside its assigned rectangular part of the screen, while the rest of the screen stays the same.

I have tried to use a separate stage for the board, but haven't found a way to initialise viewports and cameras that does this correctly.

I tried the following code in Screen.resize(int width, int height) as a test, but the boardStage becomes stretched vertically, and when zoomed in (like here), it fills the whole screen.

hudStage.setViewport(8, 12, true, 0, 12, width, height);
boardStage.setViewport(8, 8, true, 0, 10, width, width); 

OrthographicCamera cam = (OrthographicCamera) boardStage.getCamera();
cam.zoom =.5f;

What is the correct way to do this?

Answer 1

We have implemented a similar zoom for our board game. https://play.google.com/store/apps/details?id=net.peakgames.mobile.rummi.android

We are using a second camera which is zoomed:

• A scissorStack is used to clip the second camera rendering area.
• Second camera is enabled only when there is a touch/drag on the board.
• we are changing the camera position as the user drags on the board.

hope this helps..

Answer 2

I think you want to use a scene2d ScrollPane instead of a new Stage. I'm not entirely sure how you'd do the zooming with this, but I think the scaling stuff should work.