Super Smash Bro Camera

[opendevcode]

Hello,

 

Our team is trying to create a camera behavior similar to Super Smash Bros. 

 

 

The camera zooms out when players are far with each other

 

camera zooms in when they are near. 

 

 

Any idea on how I could have a similar camera effect with Phaser?

 

Thank you

[codevinsky]

You could use

var distance = game.physics.distanceBetween(player1, player2); 

and then set the world scale based on that distance with

game.world.scale.setTo(someXScale, someYScale);

Basically, you'd be using the scale to zoom. The larger the scale, the closer the zoom. Because you'll be following two players, it's probably easier to do it this way than to have the camera itself try to follow each player. You could also set the camera's x position to the halfway point between the two players so that they are always exactly in the same place on screen.

 

Just my two cents.

[opendevcode]

Hi Codevinsky,

 

Thank you for you reply.  

 

Awesome. Checking distance between is the best way to go for this camera effect.

game.world.scale.setTo(someXScale, someYScale);

I have some issue with game.world.scale, since it scales all objects in the screen. I have a Sprite UI that must not scale with the world. Any other workaround for this scaling effect? 

 

 

Right now, I have separate multiple groups, instead of scaling the world. What do you think of this approach? 

[XekeDeath]

I have not tried this with scaling, so may not work.

A group can be added to the stage directly, and in doing so it essentially fixes itself to the camera.

This is how I am doing the GUI elements in the game I am working on at the moment.

var group = new Phaser.Group(game, null, "", true);

Perhaps, if you did that, and put all your GUI elements into that group, then scaling the world as previously suggested would work?

 

Keep in mind that this is working in Phaser 1.2, but I don't know about previous versions.

[opendevcode]

Hi XekeDeath,

 

Great suggestion. I will try your method for GUI, as well as the world scaling suggestion by codevinsky. 

 

Thanks for pointing out the stage object. It gives me a clearer view of how Phaser renders. I should look more into the stage and world object. Is there any diagram on Phaser's rendering flow? or should I look for Pixi.js?

 

Thanks for reminding about previous version, I am also using Phaser 1.2 which should pretty much work with your suggestion

[opendevcode]

Hi,

 

@XekeDeath Thanks for the GUI group suggestion, it works perfectly. 

 

 

 You could also set the camera's x position to the halfway point between the two players so that they are always exactly in the same place on screen.

 

I am trying to put the camera or the world at the center of the player, but assigning a value on their position doesn't move any of the two.

 

 

I posted a new thread with regards to moving the camera or world. 

http://www.html5gamedevs.com/topic/4273-moving-camera-and-moving-world/

 

Thank you