Getting a camera to follow a ball

Help & Support
1

Problem: Getting a camera to follow a ball.

I am looking at getting a game to have a camera follow a ball like this:

So that is, if a user moves on the X-Axis the camera will yaw around and now when a play presses forward it goes in the forward direction of the camera. I am really stuggling to get the camera to yaw around the y axis to achieve this.

Methods I have tried:

  1. Placing the camera as a child of the ball entity, with no scripts. Like so:

https://launch.playcanvas.com/1069257

Problem: The camera rotates with the ball, causing the camera to be totally crazy.

  1. Having a camera as a root entity, and adding a follow script found in one of the tutorials:

You can find that with same PC link as above, but with 1069260 as the id.

Problem: The camera does not rotate around the y-axis so the camera is always facing the forward direction of the ball.

  1. Editing the ‘3rd person controller’ tutorial to suit my needs

You can find that with same PC link as above, but with 1069262 as the id.

This one has yielded the closest thing to success, but I am struggling to get the camera to feel less jolty.

I don’t really understand how to lerp this line:

originEntity.setEulerAngles(targetAng);

Found in ‘CameraMovement.js’ under postUpdate().

Questions

Can anyone point me in the right direction on how to solve this? I know my understanding is a little limited and I proberly need to learn all this a little bit more, but was wondering if anyone has solved a similar problem?

If not, can anyone point me to some good learning resources for this exact problem?

Many thanks,

James

Sorry, as a new user I can only post two links.

2

Hello, and welcome to Playcanvas!

Hmm, so I think you would want to change the way you are applying forces on your ball. Instead of applying them on the world axis, you probably want to apply them relative to the direction where camera is currently facing. When you press A, you want the ball to start moving left in your camera view. If you apply force to world axis left, it will always move in the same direction, no matter where the camera is facing.

Every entity in Playcanvas has direction properties:

entity.forward
entity.right
entity.up

So, for the camera entity, entity.right will point to the right of the camera. You can get its left by inverse scale, e.g.

const left = entity.right.scale(-1);

Forward and back are similar, except you want to override the Y axis value, because camera will probably face downwards at the ball, so its forward will be pointing into the ground.

Once you have directions to apply the forces, relative to camera, you should be able to move the ball. To make camera look at the ball at all times, you can use entity.lookAt(ballPosition);. The trickier part is to find the new position, where the camera should move to.

This is just trigonometry. Once you know the force you are applying on the ball, you can use it as a direction, where the ball is moving towards. Knowing direction, you can find its opposite, like with the left/right. Once you have the opposite direction, you can move the camera there, adjust the hieght (Y axis) to move it up a bit and make it look at the ball.

1 Like
3

Hi LeXXik,

Thank you very much for you detailed reply. I am going to take a look in to this and see if I can get a prototype up and running.

1 Like
4

To anyone in the future who may be reading this, the way to solve this issue is four easyish steps.

  1. Determine angle ball is moving. You can do this using the x and z coordinates in the linearVelocity vector and working out the angle it is travelling by using some basic trigonometry.

E.g: If you’re calculating from a camera script.

var linearVelocity = this.target.rigidbody.linearVelocity;
  1. Once you have calculated the angle the ball is moving on, you can calculate the cameras x and y position dependent on distance away from ball.

See here: https://math.stackexchange.com/questions/260096/find-the-coordinates-of-a-point-on-a-circle

  1. You can move the camera to its new location using V3.lerp to get a smooth transition.
var newPos = PC.Vec3(x, y, z);
var oldPos = this.entity.getPosition();
newPos = newPos.lerp(oldPos , newPos, 0.02);
this.entity.setPosition(newPos);
  1. Finally, you can set the balls direction based off of camera position in the same way the ‘3rd person camera’ tutorial achieves its goal.

See here: https://developer.playcanvas.com/en/tutorials/third-person-controller/

Hope this helps any body looking for a solution in the future.

4 Likes