Problem - Animating position and playing walking animation at the same time

Questions
1

Hi All

Just started by Babylon journey recently and still learning.
I have created a monster model in blender, and exported it with some animations (Default, Idle, Walking, Laugh)

I am trying to animate the position of the monster from (0,0,0) to another object mesh tagged in blendr (which i retrieve using)

var intMeshes = scene.getMeshesByTags(“interactable”);

I set up the position animation from monster.position to intMeshes[0].position using Keys, then begin the animation using:

var monsterPosAnim = scene.beginAnimation(monster, 0, 100, false);

First question:
What the code line above results in is the monster animating in position towards the interactable mesh, however, it also seems to plays all of the Skeletons animations up to frame 100 (default, idle, laughing, walking).

Second Question
What is the better way to animate his position (x,y,z) and play the skeleton walking animation at the same time? My understanding is to animate the position, I call beginAnimation on the Mesh for position animation, and a separate call on beginAnimation on the Skeleton

var monsterWalkAnim = scene.beginAnimation(skeleton, walkingRange.from, walkingRange.to, true);
var monsterPosAnim = scene.beginAnimation(monster, 0, 100, false);

This seems like overkill to me. Note my code below does not do this yet, as i was stuck at First question.

Full code below:

var canvas = document.getElementById(“renderCanvas”); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight(“pointLight”, new BABYLON.Vector3(1, 1.5, -2), scene);
light.intensity = 2;

BABYLON.SceneLoader.Append(“assets/”, “NatureScene.babylon”, scene);
BABYLON.SceneLoader.ImportMesh(“”, “assets/”, “cutemonster.babylon”, scene, function (newMeshes, particleSystems, skeletons) {
try {
console.log(“Dump from ImportMesh”);
console.log(newMeshes);
console.log(particleSystems);
console.log(skeletons);
}
catch(e) { console.log("error: ", e) }

});

BABYLON.SceneLoader.ImportMesh(“”, “assets/”, “tv.babylon”, scene, function (newMeshes, particleSystems, skeletons) {

});

scene.executeWhenReady(function () {

var monster;
var moving = false;

monster = scene.getMeshByName(‘Monster’);

//Get the Armature and animation ranges
var skeleton = scene.getSkeletonByName(“Armature”);
skeleton.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride();
skeleton.animationPropertiesOverride.enableBlending = true;
skeleton.animationPropertiesOverride.blendingSpeed = 0.05;
skeleton.animationPropertiesOverride.loopMode = 1;

var defaultRange = skeleton.getAnimationRange(“Default”);
var idleRange = skeleton.getAnimationRange(“Idle”);
var walkingRange = skeleton.getAnimationRange(“Walking”);
var laughRange = skeleton.getAnimationRange(“Laugh”);

// Attach camera to canvas inputs
scene.activeCamera.attachControl(canvas);

// Once the scene is loaded, register a render loop
engine.runRenderLoop(function() {
	
	if(!moving) {
		var intMeshes = scene.getMeshesByTags("interactable");

		var animPos = new BABYLON.Animation("movePos", "position", 30,

BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

  	// An array with all animation keys
  	var keys = []; 
  	//At the animation key 0, the value of scaling is "1"
  	keys.push({
  		frame: 0,
  		value: monster.position
  	});
  	keys.push({
  		frame: 100,
  		value: intMeshes[0].position 
  	});
  	animPos.setKeys(keys);
  	
  	monster.animations = [];
  	monster.animations.push(animPos);
  	
  	moving = true;

  	var monsterPosAnim = scene.beginAnimation(monster, 0, 100, false);
  	
		

	}
	
    scene.render();
});

});

window.addEventListener(‘resize’, function() {
engine.resize();
});

2

Hi Kevin_Wong,

Was the animation in question exported with clips? From talking to @PatrickRyan, I think this might be an issue with having scene motion baked into animations rather than actuated from scene logic, and with animations not being available as clips logically separated from frames. I’m a bit out of my depth on this one, though. :smiley:

Do you have a Playground or live site you could link us to so that we could see the issues involved? Or, if not, could you send us a video so we can better understand the behavior you’re running into? Thanks!

3 
    Somethiing like this

const animationJump.name = “Jump”;
animationJump.play(true);
animationJump.setWeightForAllAnimatables(1);

const animationheight = AnimationGroup.MakeAnimationAdditive(groups[0]);
animationheight.name = “Height”;
animationheight.start(true, 1, 10,10);
animationheight.setWeightForAllAnimatables(1);