feat: 勇士动画倒序播放

packages-user/client-modules/src/render/map/extension/hero.ts

@@ -2,6 +2,7 @@ import {
     degradeFace,
     FaceDirection,
     getFaceMovement,
+    HeroAnimateDirection,
     IHeroState,
     IHeroStateHooks,
     IMapLayer,
@@ -48,6 +49,8 @@ interface HeroRenderEntity {
     animateFrame: number;
     /** 移动的 `Promise`，移动完成时兑现，如果停止，则一直是兑现状态 */
     promise: Promise<void>;
+    /** 勇士移动的动画方向 */
+    animateDirection: HeroAnimateDirection;
 }
 
 export class MapHeroRenderer implements IMapHeroRenderer {
@@ -90,7 +93,8 @@ export class MapHeroRenderer implements IMapHeroRenderer {
             animateInterval: 0,
             lastAnimateTime: 0,
             animateFrame: 0,
-            promise: Promise.resolve()
+            promise: Promise.resolve(),
+            animateDirection: HeroAnimateDirection.Forward
         };
         this.heroEntity = heroEntity;
         this.entities.push(heroEntity);
@@ -163,7 +167,15 @@ export class MapHeroRenderer implements IMapHeroRenderer {
             }
             const dt = time - v.lastAnimateTime;
             if (dt > v.animateInterval) {
+                if (v.animateDirection === HeroAnimateDirection.Forward) {
                     v.animateFrame++;
+                } else {
+                    v.animateFrame--;
+                    if (v.animateFrame < 0) {
+                        // 小于 0，则加上帧数的整数倍，就写个 10000 倍吧
+                        v.animateFrame += v.block.texture.frames * 10000;
+                    }
+                }
                 v.lastAnimateTime = time;
                 v.block.useSpecifiedFrame(v.animateFrame);
             }
@@ -351,7 +363,8 @@ export class MapHeroRenderer implements IMapHeroRenderer {
             animateInterval: 0,
             lastAnimateTime: 0,
             animateFrame: 0,
-            promise: Promise.resolve()
+            promise: Promise.resolve(),
+            animateDirection: HeroAnimateDirection.Forward
         };
         this.entities.push(entity);
     }
@@ -409,6 +422,10 @@ export class MapHeroRenderer implements IMapHeroRenderer {
         follower.block.setAlpha(alpha);
     }
 
+    setHeroAnimateDirection(direction: HeroAnimateDirection): void {
+        this.heroEntity.animateDirection = direction;
+    }
+
     destroy() {
         this.controller.unload();
     }

packages-user/client-modules/src/render/map/extension/types.ts

@@ -1,5 +1,5 @@
 import { ITexture } from '@motajs/render-assets';
-import { FaceDirection } from '@user/data-state';
+import { FaceDirection, HeroAnimateDirection } from '@user/data-state';
 
 export interface IMapHeroRenderer {
     /**
@@ -82,6 +82,12 @@ export interface IMapHeroRenderer {
      */
     setFollowerAlpha(identifier: string, alpha: number): void;
 
+    /**
+     * 设置勇士移动的动画播放方向，一般后退会使用反向播放的动画，前进使用正向播放的动画
+     * @param direction 动画方向
+     */
+    setHeroAnimateDirection(direction: HeroAnimateDirection): void;
+
     /**
      * 摧毁这个勇士渲染拓展，释放相关资源
      */

packages-user/data-state/src/hero/types.ts

@@ -1,6 +1,13 @@
 import { IHookBase, IHookable } from '@motajs/common';
 import { FaceDirection } from '../common/types';
 
+export const enum HeroAnimateDirection {
+    /** 正向播放动画 */
+    Forward,
+    /** 反向播放动画 */
+    Backward
+}
+
 export interface IHeroFollower {
     /** 跟随者的图块数字 */
     readonly num: number;