Recommended Posts

Hello,

 

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

 

 

post-6975-0-94043100-1393472165.jpg

The camera zooms out when players are far with each other

 

post-6975-0-91174100-1393472362.jpg

camera zooms in when they are near. 

 

 

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

 

Thank you :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.