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

Viewport center behavior changed? #140

Open MartyMcFlyHasNoFarmHiaHiaHo opened 5 years ago

MartyMcFlyHasNoFarmHiaHiaHo commented 5 years ago

Hi ;)

I've build a polygon-line drawing tool for mobile devices that has a cross-hair always centered to the screen and scaled inversely to the zoom-factor of the viewport and it worked great. But now I migrated the code base to PIXI v5 and updated the viewport as well. It does not seem to work anymore and is basically always on the right bottom corner of the screen isstead of the center

 private updateCursor() {
        const x = this._viewport.center.x;
        const y = this._viewport.center.y;
        this._cursor.position.set(x, y);
        const invScaleX = 1 / this._viewport.scale.x;
        const invScaleY = 1 / this._viewport.scale.y;
        this._cursor.scale.x = invScaleX;
        this._cursor.scale.y = invScaleY;
    }

... whereas _cursor is a PIXI.Graphics that is a child of this._viewport ( actually I just noticed that I should clone the center to avoid race-conditions but well... this is another issue :D)

Thanks alot

davidfig commented 5 years ago

Are you using the 4.0.0-beta-0 build? If not, then I'm not sure the problem since the code hasn't changed much.

If so, then while I didn't change center, I did change viewport.worldScreenWidth/Height. It was wrong when the worldWidth and worldHeight were left unset. You might have been inadvertently relying on this behavior in other parts of your code. The code above looks fine, though. Can you show me how you're drawing the cursor?

MartyMcFlyHasNoFarmHiaHiaHo commented 5 years ago

Ok, during playing a little bit around I've noticed that it works as before (no code changes on this polygon tool between the version updates of pixi/viewport) if I start the browser with full window-width/height and resize then (with chrome tools ) to mobile size (what this tool implementation is intended for). If I do start directly in this mobile size, then the coordinates seems to be off (center is on right bottom corner).

Its not easy to tell if that is really a bug of viewport or just a bug of my (pretty large) code base. I am using Angular 7 and wrapped viewport and pixi into a Service class + Angular-component (the canvas) with a listener on window resize events. If it gets resized, I will call the resize() methods on both - pixi and viewport.

I am using the viewport version 4.0.0-beta-0, yes

davidfig commented 5 years ago

Ah, did you call viewport.resize() with the new screen size? The calculations will be off if you don't update the size. Note that resize event isn't triggered in Chrome when you devices (it's really annoying that it isn't).