afcruzs

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

Recommended Posts

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 :P

Thanks :)!

viewport.png

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.