Player movement with animation

Questions
, , ,
1

@thomlucc Hi, we are working in creating the animations to play on “WASD” movement ie,
when we press “W” key the dance animation should be triggered along with the forward movement attached to the modal and when we release the “W” key the movement and animation should stop and the same for “S” key with hip-hop animation and backward movement .
We have tried to implement the same but we have failed to do so . Could you guide us to implement the same . Thanks in advance

2

Here’s one way to do it:

Note that I didn’t use the “hiphop” animation when pressing the “S” key because I did not know how to play it. Using the same method than for the dance generates an error in the console log:

image

Maybe the animation is not correctly generated in Anim01.glb?

1 Like
3

@Evgeni_Popov thanks for the replaying we have implemented it in our project and its working fine,
we have imported multiple animations and assigned it to different keys but the problem we are facing now is that when we host our site the animations are playing as soon as the scene loads but its working fine locally please guide us through this our animation code is given below

BABYLON.SceneLoader.OnPluginActivatedObservable.add(
function (plugin) {
plugin.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode?.NONE;
},
undefined,
undefined,
undefined,
true
);

BABYLON.SceneLoader.ImportAnimations(
  "assets/movements/",
  "Walking.glb",
  scene,
  false,
  BABYLON.SceneLoaderAnimationGroupLoadingMode.Clean,
  null
);

BABYLON.SceneLoader.ImportAnimations(
  "assets/movements/",
  "Idle.glb",
  scene,
  false,
  BABYLON.SceneLoaderAnimationGroupLoadingMode.Clean,
  null
);

BABYLON.SceneLoader.ImportAnimations(
  "assets/movements/",
  "dance.glb",
  scene,
  false,
  BABYLON.SceneLoaderAnimationGroupLoadingMode.Clean,
  null
);

BABYLON.SceneLoader.ImportAnimations(
  "assets/movements/",
  "WalkBack.glb",
  scene,
  false,
  BABYLON.SceneLoaderAnimationGroupLoadingMode.Clean,
  null
);

BABYLON.SceneLoader.ImportAnimations(
  "assets/movements/",
  "jumping.glb",
  scene,
  false,
  BABYLON.SceneLoaderAnimationGroupLoadingMode.Clean,
  null
);

and the key pressed codes are given below

let curGroupAnim;

    scene.onBeforeRenderObservable.add(() => {

if (isWPressed) {

    curGroupAnim = scene.animationGroups[0];
    curGroupAnim.play(true);
    
  }
  if (isSPressed) {
 
    curGroupAnim = scene.animationGroups[3];
    curGroupAnim.play(true);

   }

else{
const curGroupAnim = scene.animationGroups[0];
const curGroupAnim1 = scene.animationGroups[1];
const curGroupAnim2 = scene.animationGroups[2];
const curGroupAnim3 = scene.animationGroups[3];
const curGroupAnim4 = scene.animationGroups[4];
curGroupAnim?.stop();
curGroupAnim2?.stop();
curGroupAnim3?.stop();
curGroupAnim4?.stop();
curGroupAnim1?.play(true);}}

4

That will be hard to help without a repro.

Try calling scene.stopAllAnimations(); after everything has been loaded and see if that helps.

1 Like
5

@Evgeni_Popov i have created a repo with the issue mentioned above its working fine in localhost but when it get hosted in server like (ngrok , aws,etc) the animations are autoplaying on startup of scene that too occasionally (ie, sometime the animations dont play on start up but sometimes it will )

this is the repo it will be so helpfull if you give some fix
thanks in advance

6

I couldn’t reproduce locally either.

Try to add scene.stopAllAnimations(); just before displaying the scene.

Also, which animation is auto-playing? Is it always the same? Does the player move at the same time?

You should try to locate the code that is being executed incorrectly (in case you haven’t already done so) and see how it is possible for it to execute itself.

7

i got the fix i took th e animation by name after importing that fixed the issue

2 Likes
8

Not sure how much this will help, but here is a pretty rudimentary animation controller setup with weighted animations. Its kinda glitchy now because this was from many many version of bjs ago.

You will need a controller to see things in action as well.

The areas of code I can think of you would be interested in would be 238+ “playerAnimationUpdate” function.

The other area you would want to probably refrence is when the model is imported.

        let aGroups = scene.animationGroups         
        scene.stopAllAnimations() 
        for(let i = 0; i < aGroups.length; i++){
            let g = aGroups[i]
            g.start(true)
            g.setWeightForAllAnimatables(0)             
            playerAnimationControls[g['name']] = g             
        }  

        playerAnimationControls["Player_Idle"].setWeightForAllAnimatables(1)