Jump to content

Camera position and object positioning


Recommended Posts


I'm developing a multiplayer 2D shooter game with pixi.js and there's a few questions I have (more will follow in the future :-p).

1. I'm having issues making the view follow the user (the game area spans beyond the view portal). I've tried adjusting the stage pivot point to the target (player) position, but this gives very bad results (e.g. messes up the coordinates, is laggy, etc):

this.stage.pivot.x = (this.user.position.x - window.innerWidth/2);
this.stage.pivot.y = (this.user.position.y - window.innerHeight/2);

2. When creating a Text instance, I can give x and y coordinates to it, but I want to position it fixed at top-right corner. How can I do this without having to recalculate and reposition the text every time?

Link to comment
Share on other sites

1. Move the stage in the opposite direction as your player moves. If the player moves 2 pixels to the right, move the stage 2 pixels to the left.

2. Change up your scene graph. Have a Stage that contains 2 containers, one is "fixed to camera" objects like the GUI, the other is the world the player is in. Move the world container around as the player moves for a camera effect.

Link to comment
Share on other sites

you're correct on using pivot.

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

What do you mean its laggy? It works just fine in all of my projects, morever its recommended implementation of camera for PIXI. That way you can zoom in and out from center. Imagine "position" as position of container and "pivot" as position of camera inside of it. You just pin outer "position" to inner "pivot".

And yes, as xerver said, just use two containers, one of them as GUI , one as a camera.

Link to comment
Share on other sites

Apologies, I realised the function was only being fired on keypress and falsely assumed it was due to lag, I fixed the problem now.

Does the 'stage' emit its own mousemove event? Considering I'm constantly calculating the angle between mouse location and user coordinates (for shooting target). The angles get all messed up, because the stage is moved, but "window" hasn't, so window.onmousemove no longer provides valid coordinates. I would need to know where the cursor is (x,y) in this fictional space.

Nice idea about the two containers btw, thx.

Link to comment
Share on other sites

Apparently it does, when setting stage to interactive. Unfortunately though, the coordinates seem to be equal to the window one, and not within the fictional 'stage', which kinda makes sense now that I think about it, because you wouldn't know what I consider my center.... I guess i will solve this by adding the difference between the new user position to the mouse coordinates.

Link to comment
Share on other sites

No you have to use "stage.toLocal(pos)" to get coordinates on stage. "pos" must be something with "x" and "y"

You can calculate coordinates relative to any element in pixi, please look in the docs for "displayObject.toLocal()"

Also, there is a shortcut: "event.getLocalPosition(stage)" works just fine.

Link to comment
Share on other sites

  • 4 years later...

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