Zooming to a point / player position when using a camera in pixi.js

[caymanbruce]

i want to zoom to player position using pixi features.

According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center.

How about do a little more and zoom to the user position and make it look natural? I am currently using this

const scaleDelta = -0.1;

const offsetX = - (user.x * scaleDelta);
const offsetY = - (user.y * scaleDelta);
          
const currentScale = container.scale.x;
let nScale = currentScale + scaleDelta;
          
container.position.x += offsetX;
container.position.y += offsetY;
container.scale.set(nScale);

This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?

[ivan.popelyshev]

I dont know what do you mean by "jumpy". Also you can use toLocal, toGlobal to get correct coords of one elemtns relative to another.

[caymanbruce]

1 hour ago, ivan.popelyshev said:

I dont know what do you mean by "jumpy". Also you can use toLocal, toGlobal to get correct coords of one elemtns relative to another.

The container just jitters to left or right (I can't tell which direction as it happens too fast). 

Also if I want to place a PIXI.Text at the bottom left of the camera, I used to do it like this:

this.textInfo.x = this.camera.x + 35;
this.textInfo.y = this.camera.y + this.renderer.screen.height - 40;

Then the camera position changes with the player. Camera is a plain object not a PIXI object here. But how can I do this using "toLocal" method? I do it like this:

const pos = this.container.toLocal(new PIXI.Point(35, this.renderer.screen.height - 40));
this.textInfo.position.set(pos.x, pos.y);

But it creates a new PIXI.Point on every update which is not optimized. Any better solution?

One other thing I notice is that using toLocal for all the positions in animation makes my game look less smooth. Not sure if it is because I coded it incorrectly 

[ivan.popelyshev]

yeah, you can use toLocal(p1, undefined, p2), andit will store result in p2. Please next time at least consult the docs, or look in the sources again. Really, I'm glad that you're asking so many questions but some of them are too obvious. Treaiting PIXI like a black box that should always work is bad.