Restrict world bounds/camera to support zoom and drag with UI

[afcruzs]

I am trying to implement a zoom/drag functionality with some menus over the map. Think of Age o Empires 3, you basically have a map on which you can do zoom and drag, but you also have som menus that are always over the screen. Check this for clarity.

So far. I have implemented the zoom/drag by modyfing the x, y and scale attributes of game.scale. But this work pretty good when the scale is big enough to cover the whole screen. But what I need is some kind of viewport that is smaller than the screen (like in Age of Empires) where all the zoom/drag works. The remaining parts of the screen that are not part of the viewport are filled by the UI menus. So far I have put the menus outside the world like I posted here. 

I attached an image with what I mean by viewport and menus in case is not clear

Thanks :)!

[samme]

 

[afcruzs]

Thanks Samme. Altough as I am implementing the drag and specially the zoom using the world camera whenever I increase the scale of the camera, the mask size also increases... I have been thinking about leaving the viewport as the Phaser Game and manage the UI through HTML / CSS outside Phaser. What do you think?, I would prefer a solution with only Phaser, but I think so far it only complicates more my current code.

Thanks!

[samme]

On 2/22/2017 at 8:34 PM, afcruzs said:

as I am implementing the drag and specially the zoom using the world camera whenever I increase the scale of the camera, the mask size also increases

Is that when game.world is masked or another group is masked?

[afcruzs]

I set the mask to a group with the background sprite. How would it be to mask the whole game.world?

[afcruzs]

I added the mask this way:

mask = game.add.graphics(0, 0)
    .beginFill(0xffffff)
    .drawRect(0, 0, 320, 320)
    .endFill();

this.game.world.mask = mask;

But it behaves exactly as if I apply it to an sprite. I still do not fully understand how the mask works, but I think that the mask dimension and position is affected by the world camera. I will check how does it work with this: https://github.com/Flaxis/slick-ui.

[samme]

WIP: 

 

[afcruzs]

Hi Samme, thanks that seems like a good start. I have played with it but there seems to be a very weird behavior: If I do zoom in the boundary on which I can move moves as well, for an instance, if the max x value I can get is 500, and then I add 0.1 to the camera.scale then the max value increases to 700 or something like that. 

Do you know what can be the cause?, and, how does mask work?, is that from PixiJS?, so that we can understand what is going on. I modified your pen to reproduce what I am talking about. I added a keypress on the enter key, so the game.camera.scale is increased.