Need some guidance about zooming/scaling and where to start

[Styles2304]

I've been working on a Star Trek Bridge Simulator in html5 and I've gotten to the science officer. The image below is a mock-up of the screen / state. The idea here is that when you click each grid it will zoom in / scale up that specific section. Once I get this down, zooming out will be easy enough. The problem is how to do this without scaling / zooming the rest of the UI. I've been searching and found something but nothing that directly applies to what I need so I was hoping someone can provide some input or point me in the direction of something that would help me get started?

 

I had found this answer from rich before:

http://www.html5gamedevs.com/topic/16724-ignoring-worldscale/

But I wasn't able to get it to work. It must have been a typo or something because I just tried it again and it does exactly what I need it to. Disregard.

[Styles2304]

Ok so I was wrong. The grid area is where you would actually see the player controlled ship and NPCs move around. I figured I would just resize the camera, position it appropriately, then scale the world as need with the UI securely attached to the stage and thus outside the reach of world.scale. Then I found out you can't resize the camera and can't position it. No problem I thought, I'll just use a mask to only make the the grid area viewable and then offset the camera so the player ship, when zoomed appropriately, will be in the middle of the designated viewing area. Again, can't offset the camera.

The entire game hinges on this particular screen. Is the functionality I want even possible with phaser? If not, I'm going to have to scrap this.

[samme]

I think you can set group.scale while also moving the group away from its origin (0, 0). 

[samme]

 

 

[bousing]

I wrote a solution in my project

var worlscale = 1;

 ZoomIn: function(){
            worldscale += 0.05;
            
            
            worldscale = Phaser.Math.clamp(worldscale,0.5,2); //limits of zoom
            
            game.world.scale.set(worldscale);
        },
        
        ZoomOut: function(){
            worldscale -= 0.05;
            
            worldscale = Phaser.Math.clamp(worldscale,0.5,2); //limit of zoom
            
            game.world.scale.set(worldscale);
        }

 

[Styles2304]

10 hours ago, samme said:

I think you can set group.scale while also moving the group away from its origin (0, 0). 

 

6 hours ago, bousing said:

I wrote a solution in my project

var worlscale = 1;

 ZoomIn: function(){
            worldscale += 0.05;
            
            
            worldscale = Phaser.Math.clamp(worldscale,0.5,2); //limits of zoom
            
            game.world.scale.set(worldscale);
        },
        
        ZoomOut: function(){
            worldscale -= 0.05;
            
            worldscale = Phaser.Math.clamp(worldscale,0.5,2); //limit of zoom
            
            game.world.scale.set(worldscale);
        }

 

 

I had figured out how to handle the actual zooming / scaling. My problem is being able to position and resize the camera. That's the part that, as best I can tell, is not possible to work around. You can't define the size of the camera, you can't re-position it and you can't, as far as I have found, specify an offset for following the player. I've seen some dirty fixes for offset but I'm not really looking at a dirty fix for a dirty fix as a solution.

[samme]

What do you mean by "position and resize the camera"? If you want to clip to an arbitrary area, you need to create a Group mask.

For an offset, just add and position a 1×1 child sprite and follow that.

[Styles2304]

Ok...I hadn't thought of that with the child sprite. I'll give it a shot, thanks.

[Styles2304]

On 10/31/2016 at 0:44 PM, samme said:

What do you mean by "position and resize the camera"? If you want to clip to an arbitrary area, you need to create a Group mask.

For an offset, just add and position a 1×1 child sprite and follow that.

Works! Still have some bugs to iron out but basically, I created a parent sprite, added the ship to that as a child, offset the child, and masked the world. Works perfectly. I apply velocity to the parent based on the rotation of the child...beautiful. Thank you.