Jump to content

Can't prevent camera from being moved out of bounds


Recommended Posts

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?

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

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...