Follow camera target between two players - new BJS user

Hi guys, I am very new to Babylon but Im really liking it so far.
I have been trying to make a camera follow a target between two players (on the x axis).
To show both players on the screen at all times. Think Street fighter etc.

Can anyone help me out as i am also very new to any kind of programming.
Please see the playground below
Thanks!!!

Welcome ~ That’s obviously not good enough, and I’m interested in a good answer.

1 Like

Hello and welcome to the Babylon community!

I think @musk’s solution is a great starting point :slight_smile: It can be refined and customized a bit by calculating a “general” case, in which, given the two players’ positions, and a desired “margin” to the borders of the screen, you calculate the desired camera’s parameters - camera position, target, field of view (FOV), etc - to result in the proper viewing frustum:

image

The solution to this will involve, fortunately or unfortunately, maths :slight_smile: I recommend taking a look at Scratchapixel’s camera lessons as they give a nice overview of how a 3D camera works: The Perspective and Orthographic Projection Matrix (Building a Basic Perspective Projection Matrix) (scratchapixel.com). Since Babylon.js already calculates the projection matrix for you, you just need to think about how the parameters will influence on the frustum, and plug them in Babylon.

2 Likes

Thanks Musk!

Thanks for getting back so quickly! I’ll look into it and give it a go.
This approach sounds similar to this unity tutorial video? Camera - tracking two objects at once --- Unity Tutorial: short and quick - 125 seconds - YouTube

I also came across this unity video MULTIPLE TARGET CAMERA in Unity - YouTube
which uses bounds to centre the camera.

Maybe this could be done in Babylon also?

That’s pretty much on spot! You can use the camera’s transformation matrix ( Camera | Babylon.js Documentation (babylonjs.com)) to get from world to viewport coordinates, and the bounds approach is also a pretty good one (I like it even more than the first one to be honest) :smiley:

1 Like