Jump to content

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;

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

Link to comment
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 

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...