Sign in to follow this  
caymanbruce

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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 

Share this post


Link to post
Share on other sites

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.

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.