Fix evaluate value error when switch layer state && get target value …

…error in stateMachine callback and animation event (#2258) * fix: evaluate value error when switch layer state * fix: get target value error in stateMachine callback and animation event * fix: AnimatorController ref bug
galacean · Jul 26, 2024 · 8b02aa0 · 8b02aa0
1 parent 04ecdfc
commit 8b02aa0
Show file tree

Hide file tree

Showing 16 changed files with 396 additions and 301 deletions.
diff --git a/docs/en/animation/animatorController.md b/docs/en/animation/animatorController.md
@@ -137,7 +137,7 @@ To overlay animations, add the desired animation state to another layer and set
 You can set the animation data of the animator controller using the [animatorController](/apis/core/#Animator-animatorController) property. A default AnimatorController will be automatically added when a GLTF model is loaded.
 
 ```typescript
-animator.animatorController = new AnimatorController();
+animator.animatorController = new AnimatorController(engine);
 ```
 
 #### Reusing Animation Data

diff --git a/docs/zh/animation/animatorController.md b/docs/zh/animation/animatorController.md
@@ -135,7 +135,7 @@ animator.play("walkThenRun");
 你可以通过 [animatorController](/apis/core/#Animator-animatorController)  属性来设置动画控制器的动画数据，加载完成的 GLTF 模型会自动添加一个默认的 AnimatorController。
 
 ```typescript
-animator.animatorController = new AnimatorController()；
+animator.animatorController = new AnimatorController(engine)；
 ```
 
 #### 复用动画数据

diff --git a/e2e/case/animator-customAnimationClip.ts b/e2e/case/animator-customAnimationClip.ts
@@ -68,7 +68,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
       const animator = defaultSceneRoot.getComponent(Animator);
 
       const sceneAnimator = rootEntity.addComponent(Animator);
-      sceneAnimator.animatorController = new AnimatorController();
+      sceneAnimator.animatorController = new AnimatorController(engine);
       const layer = new AnimatorControllerLayer("base");
       sceneAnimator.animatorController.addLayer(layer);
       const stateMachine = (layer.stateMachine = new AnimatorStateMachine());

diff --git a/e2e/case/animator-customBlendShape.ts b/e2e/case/animator-customBlendShape.ts
@@ -72,7 +72,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   modelMesh.uploadData(false);
 
   const animator = meshEntity.addComponent(Animator);
-  animator.animatorController = new AnimatorController();
+  animator.animatorController = new AnimatorController(engine);
   const layer = new AnimatorControllerLayer("base");
   animator.animatorController.addLayer(layer);
   const stateMachine = (layer.stateMachine = new AnimatorStateMachine());

diff --git a/e2e/case/animator-multiSubMeshBlendShape.ts b/e2e/case/animator-multiSubMeshBlendShape.ts
@@ -49,7 +49,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
       defaultSceneRoot.transform.rotation = new Vector3(-90, -0, 0);
       const animator = entity.addComponent(Animator);
 
-      animator.animatorController = new AnimatorController();
+      animator.animatorController = new AnimatorController(engine);
       const layer = new AnimatorControllerLayer("base");
       animator.animatorController.addLayer(layer);
       const stateMachine = (layer.stateMachine = new AnimatorStateMachine());

diff --git a/examples/animation-customAnimationClip.ts b/examples/animation-customAnimationClip.ts
@@ -22,7 +22,7 @@ import {
   SystemInfo,
   Transform,
   Vector3,
-  WebGLEngine,
+  WebGLEngine
 } from "@galacean/engine";
 
 Logger.enable();
@@ -63,26 +63,22 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   spotLightEntity2.transform.setRotation(-60, 0, 0);
 
   engine.resourceManager
-    .load<GLTFResource>(
-      "https://gw.alipayobjects.com/os/bmw-prod/ca50859b-d736-4a3e-9fc3-241b0bd2afef.gltf"
-    )
+    .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/ca50859b-d736-4a3e-9fc3-241b0bd2afef.gltf")
     .then((gltfResource) => {
       const { defaultSceneRoot } = gltfResource;
       defaultSceneRoot.transform.setScale(0.05, 0.05, 0.05);
       rootEntity.addChild(defaultSceneRoot);
     });
 
   engine.resourceManager
-    .load<GLTFResource>(
-      "https://gw.alipayobjects.com/os/OasisHub/244228a7-361c-4c63-a790-dd9e19d12e78/data.gltf"
-    )
+    .load<GLTFResource>("https://gw.alipayobjects.com/os/OasisHub/244228a7-361c-4c63-a790-dd9e19d12e78/data.gltf")
     .then((gltfResource) => {
       const { defaultSceneRoot, animations = [] } = gltfResource;
       rootEntity.addChild(defaultSceneRoot);
       const animator = defaultSceneRoot.getComponent(Animator);
 
       const sceneAnimator = rootEntity.addComponent(Animator);
-      sceneAnimator.animatorController = new AnimatorController();
+      sceneAnimator.animatorController = new AnimatorController(engine);
       const layer = new AnimatorControllerLayer("base");
       sceneAnimator.animatorController.addLayer(layer);
       const stateMachine = (layer.stateMachine = new AnimatorStateMachine());
@@ -183,49 +179,14 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
       spotLight2RotateCurve.addKey(key14);
       spotLight2RotateCurve.addKey(key15);
 
-      sceneClip.addCurveBinding(
-        "/light_wrap/spotLight1",
-        SpotLight,
-        "color",
-        colorCurve
-      );
-      sceneClip.addCurveBinding(
-        "/light_wrap/spotLight1",
-        Transform,
-        "rotation",
-        spotLight1RotateCurve
-      );
-      sceneClip.addCurveBinding(
-        "/light_wrap/spotLight2",
-        Transform,
-        "rotation",
-        spotLight2RotateCurve
-      );
-      sceneClip.addCurveBinding(
-        "/light_wrap/spotLight2",
-        SpotLight,
-        "color",
-        color2Curve
-      );
-      sceneClip.addCurveBinding(
-        "/light_wrap",
-        Transform,
-        "rotation",
-        rotateCurve
-      );
+      sceneClip.addCurveBinding("/light_wrap/spotLight1", SpotLight, "color", colorCurve);
+      sceneClip.addCurveBinding("/light_wrap/spotLight1", Transform, "rotation", spotLight1RotateCurve);
+      sceneClip.addCurveBinding("/light_wrap/spotLight2", Transform, "rotation", spotLight2RotateCurve);
+      sceneClip.addCurveBinding("/light_wrap/spotLight2", SpotLight, "color", color2Curve);
+      sceneClip.addCurveBinding("/light_wrap", Transform, "rotation", rotateCurve);
       // curve can be reused
-      sceneClip.addCurveBinding(
-        "/camera_wrap",
-        Transform,
-        "rotation",
-        rotateCurve
-      );
-      sceneClip.addCurveBinding(
-        "/camera_wrap/camera",
-        Camera,
-        "fieldOfView",
-        fovCurve
-      );
+      sceneClip.addCurveBinding("/camera_wrap", Transform, "rotation", rotateCurve);
+      sceneClip.addCurveBinding("/camera_wrap/camera", Camera, "fieldOfView", fovCurve);
 
       sceneAnimator.play("sceneAnim", 0);
       animator.play(animations[0].name, 0);

diff --git a/examples/animation-sprite.ts b/examples/animation-sprite.ts
@@ -22,7 +22,7 @@ import {
   Animator,
   Texture2D,
   Rect,
-  InterpolationType,
+  InterpolationType
 } from "@galacean/engine";
 
 // Create engine
@@ -46,14 +46,13 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   engine.resourceManager
     .load<SpriteAtlas>({
       url: "https://gw.alipayobjects.com/os/bmw-prod/da0bccd4-020a-41d5-82e0-a04f4413d9a6.atlas",
-      type: AssetType.SpriteAtlas,
+      type: AssetType.SpriteAtlas
     })
     .then((atlas) => {
       const spriteEntity = rootEntity.createChild();
       spriteEntity.transform.position = new Vector3();
       spriteEntity.transform.scale.set(100 / 32, 100 / 32, 100 / 32);
-      spriteEntity.addComponent(SpriteRenderer).sprite =
-      atlas.getSprite("npcs-11");
+      spriteEntity.addComponent(SpriteRenderer).sprite = atlas.getSprite("npcs-11");
 
       const spriteCurve = new AnimationRefCurve();
       for (let i = 0; i < 10; ++i) {
@@ -67,7 +66,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
       atlasState.clip = spriteClip;
 
       const animator = spriteEntity.addComponent(Animator);
-      const animatorController = new AnimatorController();
+      const animatorController = new AnimatorController(engine);
       animator.animatorController = animatorController;
       animatorController.addLayer(layer);
       animator.play(atlasState.name);
@@ -77,7 +76,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   engine.resourceManager
     .load<Texture2D>({
       url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*9nsHSpx28rAAAAAAAAAAAAAAARQnAQ",
-      type: AssetType.Texture2D,
+      type: AssetType.Texture2D
     })
     .then((texture) => {
       const spriteEntity = rootEntity.createChild("Sprite");
@@ -94,21 +93,15 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
         spriteCurve.addKey(key);
       }
       const spriteClip = new AnimationClip("sprite");
-      spriteClip.addCurveBinding(
-        "",
-        SpriteRenderer,
-        "sprite.region",
-        spriteCurve
-      );
+      spriteClip.addCurveBinding("", SpriteRenderer, "sprite.region", spriteCurve);
       regionState.clip = spriteClip;
 
       const animator = spriteEntity.addComponent(Animator);
-      const animatorController = new AnimatorController();
+      const animatorController = new AnimatorController(engine);
       animator.animatorController = animatorController;
       animatorController.addLayer(layer);
       animator.play(regionState.name);
     });
 
-
   engine.run();
 });