FXGL游戏开发-人物移动动画效果

在【FXGL游戏开发-动画效果】这章节中，实现了两辆坦克的碰撞效果，当玩家的坦克（蓝色）撞上敌军坦克（绿色）时，玩家的坦克自动消失，并播放坦克爆炸的效果。

这次使用自定义的 Component 实现人物移动的动画效果，首先看看最终实现的效果：

这个效果gif录制出来不是很理想，实际的效果要比这个gif平滑很多。

FXGL 采用 ECS 架构（以后再介绍），所以 FXGL 的 Entity 允许添加任意多的 Component，通过自定义 Compnent 可以实现上面的人物移动动画效果：

class MoveAnimationComponent extends Component {

    // 移动速度
    private int speed = 0;
    // 动画资源
    private AnimatedTexture texture;
    // 两种动画
    private AnimationChannel stop, move;

    public MoveAnimationComponent() {
        Image image = FXGL.image("player.png");
        stop = new AnimationChannel(image, 4, 32, 42, Duration.seconds(1), 1, 1);
        move = new AnimationChannel(image, 4, 32, 42, Duration.seconds(1), 0, 3);
        texture = new AnimatedTexture(stop);
    }

    @Override
    public void onAdded() {
        // 防止转向出现瞬移（32/2=16,42/2=21）
        entity.getTransformComponent().setScaleOrigin(new Point2D(16, 21));
        // 被添加时，设置entity的造型
        entity.getViewComponent().addChild(texture);
    }

    @Override
    public void onUpdate(double tpf) {
        entity.translateX(speed * tpf);
        if (speed != 0) {
            if (texture.getAnimationChannel() == stop) {
                texture.loopAnimationChannel(move);
            }
            // 速度衰减到小于1时，停止
            speed = (int) (speed * 0.9);
            if (FXGLMath.abs(speed) < 1) {
                speed = 0;
                texture.loopAnimationChannel(stop);
            }
        }
    }

    public void right() {
        speed = 150;
        // 向右
        entity.setScaleX(1);
    }

    public void left() {
        speed = -150;
        // 向左
        entity.setScaleX(-1);
    }
}

上面的例子中，在 MoveAnimationComponent 组件构造函数中，实例化了两种动画，移动和停止，通过重写 onAdd() 在组件被添加到实体的时候，设置实体的造型（这个跟坦克爆炸的动作流程是一样的）。

然后，重写 onUpdate 在刷新的时候，循环播放动画效果，通过 speed = (int) (speed * 0.9) 对移动速度进行衰减，这样如果不持续按 "A" 和 "D" 左右移动的话，速度最终话降为0，人物会停止移动。

最后，提供左右移动的两个方法供外部调用，用它们来控制人物的移动。

跟之前的实现不太一样的是：使用动画组件构造 Entity 就可以不用指定造型了，只要添加动画组件即可：

player = FXGL.entityBuilder()
  .at(10, 120)
  .with(new MoveAnimationComponent())
  .buildAndAttach();

事件监听 "A" 、"D" 实现左右移动人物：

FXGL.onKey(KeyCode.A, () -> player.getComponent(MoveAnimationComponent.class).left());
FXGL.onKey(KeyCode.D, () -> player.getComponent(MoveAnimationComponent.class).right());

这样，带动画的人物移动效果就实现了。

===========================================================================

关注公众号，阅读更多文章。