Pixi.js: Center stage on particular object

Created on 31 Mar 2016  ·  3Comments  ·  Source: pixijs/pixi.js

In the process of making a 2D game it's typically required that the view is centered on whatever represents the player. At this point, I don't know how to do that apart from manually offsetting all coordinates of all sprites.

How to properly move the stage so that player is always in the center of the canvas view?

Most helpful comment

I use standart position/scale/pivot combo.

//(0,0) for us is center of the screen
stage.position.x = renderer.width/2;
stage.position.y = renderer.height/2;
//scale it
stage.scale.x = 2.0;
stage.scale.y = 2.0;
//now specify which point INSIDE stage must be (0,0)
stage.pivot.x = character.position.x;
stage.pivot.y = character.position.y;

In my development version there's secret Camera object, and its possible to make it follow any object even if its inside some containers.

All 3 comments

I use standart position/scale/pivot combo.

//(0,0) for us is center of the screen
stage.position.x = renderer.width/2;
stage.position.y = renderer.height/2;
//scale it
stage.scale.x = 2.0;
stage.scale.y = 2.0;
//now specify which point INSIDE stage must be (0,0)
stage.pivot.x = character.position.x;
stage.pivot.y = character.position.y;

In my development version there's secret Camera object, and its possible to make it follow any object even if its inside some containers.

Thank you very much, it works perfectly! :)

It also answered another question I needed but didn't even ask - how to zoom the stage.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings