Camera position and object positioning

[Kalo]

Hi,

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?

[xerver]

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.

[ivan.popelyshev]

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.

[Kalo]

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.

[Kalo]

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.

[ivan.popelyshev]

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.

[Kalo]

That works very well, thx, saves me from having to do all the calculations myself.

[amirGi]

Why do we need to set the position of the stage to the midpoint of the renderer (with 

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

)

 

as opposed to leaving it as (0,0) by default?