davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Methods not doing anything #495

Open Fuzzyma opened 3 weeks ago

Fuzzyma commented 3 weeks ago

I have an object at a certain position. Its center is say -200, -300. I want to center this object in the viewport.

Whatever I do, it doesnt do anything. moveCenter doesnt change the viewport (doesnt matter which values I put), ensureVisible is the same. The only thing that did something was changing the pivot of the viewport but that feels wrong.

I cant figure out why all I try just does nothing so please take a look at the code and tell me whats wrong here:

const initViewport = (app, box) => {
  const viewport = new Viewport({
    screenWidth: app.canvas.width,
    screenHeight: app.canvas.height,
    // worldWidth: box.width,
    // worldHeight: box.height,
    worldWidth: app.canvas.width,
    worldHeight: app.canvas.height,
    events: app.renderer.events,
  });

  app.stage.addChild(viewport);

  // this would at least put the center of the bounding box to 0,0 but that doesnt help
  // viewport.pivot = { x: box.cx, y: box.cy }

  viewport
    .drag()
    .pinch()
    .wheel({ percent: 0.3 })
    .clamp({ direction: 'all' })
    .clampZoom({ minScale: 0.1, maxScale: 10 });

  // doesnt matter what I put here. It does nothing
  viewport.moveCenter(box.cy, box.cy);
  return viewport
}

Box is a bounding box with x, y, width, height, cx and cy. I also tried changing the workd to the bounding box dimensions and also trie leaving it out (what does that even do?) but besides different initial rendering, moveCenter just doesnt do anything

Fuzzyma commented 3 weeks ago

So the reason why nothing was moving was because .clamp() restricted it from doing so. Removing the line "fixed" it. However, now I dont have clamping anymore