Follow cam, top down view/follow

[agmcleod]

Hello,

 

So I am in the process of converting my game from three.js to Babylon. I have a top down scene with a ground mesh, and several cubes rendering on top. I have a "player" cube that the camera is meant to follow, which starts at 0,1,0. The camera is then set above it:

this.camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 20, 0), this.scene);

I then set the camera to look at the player mesh:

this.camera.target = this.player.mesh;

However, the camera then flies back behind the player, and slightly above, looking at roughly a 45 degree angle. Any idea how to keep it above, like I was simply rotating on the x axis instead?

 

 

[GameMonetize]

You should play with camera parameters to define distance and rotation limits:

* rotationOffset

* heightOffset

[agmcleod]

Gave that a shot, but the rotationOffset seems to rotate around the target's Y axis, as supposed to its X axis. If i set the rotation to 45 degrees for example, i look directly at the cube's corner, as supposed to its side.

[agmcleod]

Tried working on my own version of the follow cam, just keeping it really simple as i just need one view: top down. However it has not gone well, and i think i am misunderstanding how the setTarget function in the parent's TargetCamera is supposed to work.

 

The follow camera used angle calculation to adjust its position, and would call setTarget(cameraTarget.position); I however, just need to keep the same X & Z values as the target, but about 20 Y above it. So here's my code:

 

var __extends = this.__extends || function (d,  {  for (var p in  if (b.hasOwnProperty(p)) d[p] = b[p];  function __() { this.constructor = d; }  __.prototype = b.prototype;  d.prototype = new __();};(function (BABYLON) {  var TopDownCamera = (function (_super) {    __extends(TopDownCamera, _super);    function TopDownCamera(name, position, scene) {      _super.call(this, name, position, scene);      this.radius = 12;      this.rotationOffset = 0;      this.heightOffset = 0;      this.cameraAcceleration = 0.05;      this.maxCameraSpeed = 20;    }    TopDownCamera.prototype.getRadians = function (degrees) {      return degrees * Math.PI / 180;    };    TopDownCamera.prototype.follow = function (cameraTarget) {      if (!cameraTarget)        return;      this.position.x = cameraTarget.position.x;      this.position.z = cameraTarget.position.z;      this.setTarget(cameraTarget.position);    };    TopDownCamera.prototype._update = function () {      _super.prototype._update.call(this);      this.follow(this.target);    };    return TopDownCamera;  })(BABYLON.TargetCamera);  BABYLON.TopDownCamera = TopDownCamera;})(BABYLON || (BABYLON = {}));

what happens it camera looks straight across, not down at all, even though the target position is right below it.

 

Now, when i do some debugging and check out the setTarget call, the _camMatrix property is all NaN. I think it's because at one point there is a / by 0, which results in Infinity. And then math is done on said Infinity in the invert() operation, making the whole matrix NaN.

[GameMonetize]

Agree. I have more difficulty to help you on this camera as this is the only one I did not develop

[agmcleod]

Hey Delta, I kind of have a solution.

 

So instead of using the follow camera, i decided to use the target camera since it seems to define the cameraRotation behaviour. I simply apply an x rotation and I am able to point down:

 

 

this.camera = new BABYLON.TargetCamera("FollowCam", new BABYLON.Vector3(0, 0, 0), this.scene);this.player = new Player(this.scene);this.camera.parent = this.player;this.camera.position.y = 20;this.camera.cameraRotation.x = (Math.PI / 4);

I'll have to see how movement goes, now that i have the camera attached to the player. My mouse input logic is still broken, so i don't know yet

[GameMonetize]

Sounds good:) could you share the code somewhere perhaps I can see where the problem is

[agmcleod]

Yep, all my babylonjs implementation has been to this branch: https://github.com/agmcleod/threejstopdownplay/tree/feature/babylon

[GameMonetize]

Yes I mean a live server where I can debug between two meetings

[agmcleod]

Ah lol. Just pushed it all here: http://projects.agmprojects.com/topdown/. At the menu screen, click the button on the top right, then try to use the mouse to move the cube in the center around. It seems to sort of flicker at the moment, but not really move anywhere.

[GameMonetize]

Sounds like the velocity vector is too big no?

[agmcleod]

Don't think so, the numbers on coordinate projection must be wrong. I know when i had them in threejs, a single coordinate would range between 30 and -30 or so. Im only getting 1.5 to -1.5 here. I fixed it to use unproject over project (whoops), but still not getting the mouse coordinates quite right.

 

 

 MouseControls.prototype.coordsAsVector = function (x, y, camera, target) {    var vector = new BABYLON.Vector3(      ( x / window.innerWidth ) * 2 - 1,      - ( y / window.innerHeight ) * 2 + 1,      0.5    );    BABYLON.Vector3.Unproject(      vector,      window.innerWidth,      window.innerHeight,      window.scene.camera.getWorldMatrix(),      window.scene.scene.getViewMatrix(),      window.scene.camera.getProjectionMatrix()    );    var dir = vector.subtract(camera.position).normalize();    var distance = - camera.position.y / dir.y;    target.copyFromFloats(camera.position.x, camera.position.y, camera.position.z)    return target.add(dir.multiplyByFloats(distance, distance, distance));;  }

[GameMonetize]

Did you published your fix?

[agmcleod]

Just pushed it up now.

[GameMonetize]

What I can see so far:

- mesh.moveWithCollisions move with a vector of (17, 0, -9)

- then mesh.position is set to 17, 0.5, -9

- almost immediatley the mesh is moved with a (-17,0, 9)

- so mesh.position is reverted to (0, 0.5, 0)

 

 

So visual result is as expected

 

My first thinking would be: is (17, 0, -9) not too much??

[agmcleod]

Figured it out. In the end the best thing to do was use more high level functions of babylon. Instead of my own function, im passing the mouse coords to scene.pick(), and use the resulting hit coordinates to get it to work. I saw the picking collisions in the wiki, but didn't think of this application. I also dropped down the velocity to 10% of what it was.