CameraInputManager support for FollowCamera

Questions
1

Continuation of the conversation started here:

I just spent an afternoon implementing a folowCameraInputsManager:

Is this something people are interested in? Should i submit a Pull request?

cheers,
dunk.

2 Likes
2

Yup, I guess so, it is smthg I have seen asked a couple of times,

Thanks.

3

Cool. please see:

Build Tests are currently running.

4

and itā€™s merged. (Thanks again deltakosh!)

@QuintusHegie , your original post on html5gamedevs.com implies you are a user of the FollowCamera.
Care to try this out and see if it matches your expectations?

When this change gets included in a release, this example should start working:
https://www.babylonjs-playground.com/ts.html#P9RQJW
ie: the cursor keys will start panning the camera.

1 Like
5

Man! thanks to you :slight_smile: You did everything, Iā€™ve just pushed a button :smiley:

1 Like
6

Hi @dunk,

Thanks for taking the time to convert my suggested javascript implementation code to typescript and put it on git. :angel:

Yes I would like to use this input management to control the camera :camera: that is following a locomotive in my Model Train Simulator :steam_locomotive::railway_car::railway_car: game. The generic inputmanager implementation allows other developers/users to configure the input keys as they wish. My experience with Typescript and Git is a bit novice still to work the actual publishing part out :sweat_drops:

I work with the https://preview.babylonjs.com/babylon.js version in :construction::construction_worker_man: development so as soon as the new code is available there Iā€™ll be able and willing to test it. :test_tube:

Q

7

Hi @QuintusHegie,
understood.

Looking at this again, iā€™ve only actually implemented Keyboard input so far.
Since iā€™ve come this far i should probably implement pointers too. Iā€™ll get on that in the coming days.

if you are already doing JavaScript-ey stuff then you should definitely check out TypeScript.
After a very small amount of practice it makes things easier and quicker rather than more difficult.

The one thing that i had a hard time with the first time i tried playing with it though was that most setup documentation presumes you are using it with some other framework (React, angular, etc).
https://www.typescriptlang.org/samples/index.html
I prefer to start with vanilla tools and add such complexities later.
Instructions on how to start with vanilla TS were hard to find. Looking again now, this looks like a reasonable intro: Setting Up a New TypeScript Project ā† Alligator.io

dunk.

8

Urg. well thatā€™s annoying:
Thereā€™s a typo in the submitted code. When rotating, the angle loops back to 0 after 180 degrees instead of 360.
FollowCamera InputManager fix. by mrdunk Ā· Pull Request #5722 Ā· BabylonJS/Babylon.js Ā· GitHub will fix this (although my local Playground has broken so itā€™s untested).

The annoying typo in all itā€™s glory is now live in the dev branch so you can see it in the Playground linked above.

9

Will soon be erased by your fix :smiley:

10

Hi @dunk,

Iā€™ve tested your new playground and Iā€™ve tested my game.
Here are my test results:

  • Left/right arrow rotates camera around target clockwise/counterclockwise = WORKS
  • Up/down arrow offsets height further/lower of camera from target = WORKS, but cannot move below target Y (negative plane)
  • Alt + Up/down arrow adjusts radius increase/decrease of camera from target = WORKS, but intuitively I would expect Up to come closer to the target and Down to move away from the target (invert the controls)

So first of all this is very nice addition! There are controls now to adjust the train-following view perspective in my Model Train Simulator game :slight_smile:

If I might want to further tweak the code, then I would add those minor changes to the code:

  • Be able to choose the switch operator key (e.g. use shift, alt or ctrl as the input modifier key). For example, in my game the Shift key is used as the modifier key / similar to pressing gamepad shoulder buttons. But there are also places where users generally use the Control key to change scrolling directions etc.
  • Be able to offset the height to the negative plane as well (e.g. look from under the target object).
  • Invert the up/down controls for moving further away/closer to target (UP=closer, DOWN=away).
  • Choose whether the switch operator key activates the heightOffset or the radius. For example, default up/down action would be to not change the heightOffset but the radius, in order to get the full train length into view first. Adjusting the heightOffset would be a secondary want for the player.
  • Programmatically define some constraint parameters like min/max heightoffset, min/max radius, min/max rotationOffset to not allow player to move camera too far away from game scene level / out of bound.

These are just some ideas for my specific applicationā€¦ If any of them fancy you as well for the default implementation, feel free to implement it.

Again thanks for committing the keyboard input so far. This is already great to be able to control the FollowCamera. Iā€™ve written some sample JavaScript code for the Mouse input as well. If you are interested, I can share with you.

Q

11

Hi @QuintusHegie,
Thanks for the feedback!

but cannot move below target Y (negative plane)

Yes, see comment relating to min/max heightOffset later.

Alt + Up/down arrow adjusts radius increase/decrease of camera from target = WORKS, but intuitively I would expect Up to come closer to the target and Down to move away from the target (invert the controls)

Yes, iā€™d noticed this and agree. Iā€™ll invert this.

  • Be able to choose the switch operator key (e.g. use shift, alt or ctrl as the input modifier key).

Sure, lets make booleans for <Alt> <Ctrl> and <Shift>.
Set which ever one you want by setting it true.
ArcRotateCameraKeyboardMoveInput does something very similar.

  • Be able to offset the height to the negative plane as well

Already implemented. Set minHeightOffset to a negative value.

  • Choose whether the switch operator key activates the heightOffset or the radius.

I wonder if we can come up with something more generic that can be applied to more than just heightOffset and radiusā€¦
Let me think about it a little.

  • Programmatically define some constraint parameters like min/max ā€¦

Minimum values were already done for radius and heightOffset. Letā€™s add maximums as well and for angleOffset as well.
In the currently submitted code you can do something like camera.inputs.attached.keyboard.minHeightOffset = -10;.

Stay tuned for further updates.

dunk.

12

Ok,
spent the afternoon trying to strike the balance between functionality and ease of use.
Hereā€™s what i came up with: Babylon.js/followCameraKeyboardMoveInput.ts at FollowCamera_InputManager_tweak_keyboard Ā· mrdunk/Babylon.js Ā· GitHub

Youā€™d use it something like this:

var createScene = function () {
  var scene = new BABYLON.Scene(engine);
  // ......etc....

  // This creates and positions a follow camera.
  var camera = new BABYLON.FollowCamera("camera1", new BABYLON.Vector3(0, 0, 0), scene);
  camera.lockedTarget = sphere;
  camera.inputs.attached.keyboard.minHeightOffset = -10;
  camera.inputs.attached.keyboard.maxHeightOffset = 20;
  camera.inputs.attached.keyboard.minRadius = 2;
  camera.inputs.attached.keyboard.maxRadius = 20;
  camera.inputs.attached.keyboard.minRotationOffset = -45;
  camera.inputs.attached.keyboard.maxRotationOffset = 45;
  camera.inputs.attached.keyboard.keysHeightOffsetModifier = camera.inputs.attached.keyboard.modifierKeyChoices.Shift;
  camera.inputs.attached.keyboard.keysRadiusModifier = camera.inputs.attached.keyboard.modifierKeyChoices.None;

  ...etc...
}

That snippet above shows @QuintusHegie requested ability to switch ā€œoffā€ the modifier key for ā€œzoomingā€ and
make the <Shift> key the required modifier for the heightOffset.

Anyone have opinions on the proposed user interface shown in my repository before i push it here and we are stuck with it?
Iā€™m not entirely sure if iā€™ve made the right decision keeping enum ModifierKey out of the main scope. As it is you access it through FollowCameraKeyboardMoveInput if you need to set something that needs it later. (eg: camera.inputs.attached.keyboard.keysHeightOffsetModifier = camera.inputs.attached.keyboard.modifierKeyChoices.Shift; in the code snippet above.)

thanks for reading!
dunk.

13

On further reflection,
I think the maximum and minimum limits for radius heightOffset and rotationOffset should be part of the main FollowCamera class.
Limit the camera not the input.
This way we can use the same limits for all the different input classes.

In other news,
Iā€™ve got a FollowCameraMouseWheelInput mostly finished.

dunk.

1 Like
14

Yup, that sounds like the right conclusion @dunk .

When the radius/height/rotation constraint is on the camera, not on the input, those constraints can be enforced regardless of an input method or with taking auto camera behavior into account. :slight_smile:

Similarly, when the ArcRotateCamera is set outside itā€™s ranges, then it will politely move back within its bounds as well. I believe both a hard and soft bounce can be set with that one.

Great! Canā€™t wait to test the mousewheel input. This is really getting awesome sweet!

For Touch input, I hope a 4 year old will intuitively do the following with a FollowCamera:

  • Swipe up to go lower / swipe down to go higher (heighOffset)
  • Swipe left to turn right / swipe right to turn left (rotationOffset)
  • Move two fingers opposite inward to zoom out / move two fingers opposite outward to zoom in (radius)

Kids are great for testing intuitive controls design :slight_smile: If they donā€™t get it, then itā€™s too complicated.

I Donā€™t have a Javascript example of this Touch variant at the moment, thoughā€¦ :expressionless: Maybe take a peek at the implementations of other cameraā€™sā€¦

Q

15

ok,
MouseWheel submitted here: Follow camera mouse wheel input by mrdunk Ā· Pull Request #5745 Ā· BabylonJS/Babylon.js Ā· GitHub
Maximum and minimum limits submitted here: Added maximum and minimum limits for FollowCamera parameters. by mrdunk Ā· Pull Request #5744 Ā· BabylonJS/Babylon.js Ā· GitHub

Note, the MouseWheel change is just that. Full Mouse movement will follow in a future change.

Iā€™m still procrastinating over how best to assign combinations of keys and modifiers to an actionā€¦
This shows my best effort so far: Babylon.js/followCameraKeyboardMoveInput.ts at FollowCamera_InputManager_tweak_keyboard Ā· mrdunk/Babylon.js Ā· GitHub
but iā€™m not really happy with it.
Iā€™d like to be able to assign lists of key+modifiers to a specific action.
eg. to zoom-in you might want to assign the following keys:
ā€œWā€ on itā€™s own.
or
<UP> with <Shift>.
My current attempt would require <Shift> with both keys.

dunk.

16

Hmm,
maybe the best way to assign keys to an action is having a setter for each action.
Something like:
keyboard.addKeyHeightOffsetDecrease(keyValue, alt=true, ctrl=false, shift=false)

Am i over complicating this?
It needs to be easy to use.
Maybe i should abandon the goal of multiple key mappings to the same action.

17

I think so. Not sure there is a lot of need there

1 Like
18

Ok, Iā€™ve finally submitted the (simplified) updated Keyboard inputs: FollowCamera keyboard input update. by mrdunk Ā· Pull Request #5759 Ā· BabylonJS/Babylon.js Ā· GitHub

The MouseWheel and Min/Max limits changes have been approved and merged so should start working in the next build.

You can see the syntax here:
https://www.babylonjs-playground.com/ts.html#P9RQJW#5
What do yā€™all think of the syntax?
Obviously the example wonā€™t work properly until after these changes are included in a build.

One outstanding issue:
Iā€™ve managed to invert the heightOffset axis when the MouseWheel is configured to control that.

Next on my list: Pointers.

dunk.

19

O, one more thing,
I only have access to Chrome and Firefox browsers.
Anyone got any others they can test the MouseWheel on when it builds?

20

Woohoo!
Latest changes have merged.
Play with them here: https://www.babylonjs-playground.com/ts.html#P9RQJW#6

Outstanding issue:
The heightOffset axis is still inverted when the MouseWheel is configured to control that.
Fix FollowCameraMouseWheelInput orientation of height and rotation axis. by mrdunk Ā· Pull Request #5768 Ā· BabylonJS/Babylon.js Ā· GitHub will fix that when it merges.

2 Likes