Can't prevent camera from being moved out of bounds

[ShotgunJed]

I'm trying to make a camera and I made it work by using this code:

// Setup
stage.pivot.x = user.position.x;
stage.pivot.y = user.position.y;
stage.position.x = renderer.width/2;
stage.position.y = renderer.height/2;

// Moving
stage.x += 5; // Change 5 to -5 when moving other direction
stage.y += 5;

Thing is, if I console.log the stage, and move the stage across my screen, the position 0,0 is nowhere to be found logically. i.e: I should expect 0,0 to be at the top left corner (when aligning the top left corner of the Container with the top-left corner of the browser) but it isn't. Its often somewhere random in the middle.

By doing this:

console.log('x:', scene.transform.localTransform.tx);
console.log('y:', scene.transform.localTransform.ty);

And moving my scene's top-left corner with the top-left corner of my browser, I get 0,0 which makes sense.

So now I've been trying to put some sort of limit on these two localTransform variables but it isn't working. Is there a way to edit these?

[ivan.popelyshev]

LocalTransform is a product of "position,rotation,scale,skew,pivot". You have to set those fields. Position is point on screen, while Pivot is a point inside the stage, that is pinned to that position on screen. That way, if user is in (0,0), then (0,0) is in the center of screen. 

I dont know how to explain it further  May be formulas can help you: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/TransformStatic.js#L113

You dont change stage position, you have to change user position and pivot.

Anyway, this thing is the basic you have to understand before you move forward. Just study it, that part exists in all 2d renderers.

 

[ivan.popelyshev]

Also, "x" and "y" are aliases for "position.x" and "position.y" respectively.

[ivan.popelyshev]

Hey, @lloydevans, can you describe your view on transforms? Its a problem for me to explain things that are too trivial from my point of view

[lloydevans]

Yea, look at what a PIXI.Container is

[lloydevans]

Creating a moving camera effect can be as simple as adding objects to a container and moving the position/scale of that parent container. No need for local transform.

Tip - Leave your stage container static, and create a container for your "camera scene". If you move the stage you don't have an easy option for anything to be unaffected by the "camera" movements!

Edit - Container.calculateBounds could potentially offer a dynamic way to impose some restrictions on the movement (by checking if the bounding rect of your scene container is within the stage). There are many ways to go about it depending on the requirements and level of optimisation you want.

[ShotgunJed]

Thanks for the insight guys. I managed to achieve this by panning the camera by modifying its "pivot" instead of its "position". I also had to divide the translation by the scale of the container so that it would work like before. But now I can clamp the pivot of the scene and essentially I can't drag my camera out of the bounds (which is what I want).

[ivan.popelyshev]

You're a good padawan!

Btw, about "drag": one of mine examples now has better drag code. Click/drag squares and sprite.

https://pixijs.github.io/examples/#/projection/basic.js 

That is something you can use too.