Strategic camera setup (WASD move, mouse rotate)

Tutorials and tips
1

Hi

I was unable to find a ready code snippet for the specific camera behavior I wanted. So here you go:

Behavior

Camera control is basically like in every modern strategy or turn-based game:

  • Move the camera with WASD- or arrow keys. “Move” here means a 2D displacement along the BABYLON x and z axis. I think this is called panning.
  • Holding down any mouse button rotates the camera like a normal ArcRotateCamera.

In other words, the code snippet offers a movable ArcRotateCamera.

Implementation notes

The move code was the cleanest I could find (see credits in code) and avoids spawning an extra TransformNode. I extend the regular Babylon keyboard plugin (src) so that I only have to take care of the checkInputs() method. See also docs.

Any feedback much appreciated.

Best wishes
Joe

8 Likes
2

Nice cc @PolygonalSun and @PirateJC

3

Awesome example @Joe_Kerr! Creating custom inputs can be tricky so we can always use more examples of successful implementations.

4

For me, it is showing that _onKeyboardObserver and _keys are the private property of ArcRotateCameraKeyboardMoveInput which is not accessible in KeyboardPanningInput, although the code is working very successfully but I think it’s not a best practice to use the private property of parent class directly

1 Like
5

Thanks!