Flutter体验 Day 28-flame JoystickComponent

flame JoystickComponent

昨日我们使用 SpriteComponent 建构出整体的游戏画面，今日我们研究看看要如何让 Sprite 动起来。

范例素材图片使用来自 cocos-creator GitHub

第一步：让 Moster 动起来

SpriteComponent 继承自 Component，提供 update 方法可以让我们更新 Sprite 的状态。

  @mustCallSuper
  void update(double dt) {
    children.updateComponentList();
    children.forEach((c) => c.update(dt));
  }

为了让我们的怪兽精灵元件能够跳起来，需要确认目前是往上还是往下的状态，接着定义跳跃的高度以及速度。

  // 向上的状态
  bool _up = true;
  // 向下的状态
  bool _down = false;
  // 跳跃的高度
  final double _jumpHeight = 150;
  // 跳跃的速度
  final double ySpeed = 300;
  // 原始地面的位置
  late final double _originY;

在游戏画面的定位上是从左上角的 (0, 0) 为起点，我们要呈现跳跃的移动效果，可以在每次 update 的时间通过改变 position 或是 y 的值来达到移动的效果。

  @override
  void update(double dt) {
    super.update(dt);

    if (_up) {
      y -= dt * ySpeed;

      if (y < _originY - _jumpHeight) {
        _up = false;
        _down = true;
      }
    }

    if (_down) {
      y += dt * ySpeed;
      if (y > _originY) {
        _up = true;
        _down = false;
      }
    }
  }

目前的 Moster 会上下跳动了

flame_jump

第二步：使用虚拟摇扞左右移动

App 上的游戏开发通常没有搭配键盘而是使用点击画面的位置或是使用虚拟摇扞的设置来控制角度的移动，参考官网说明。

HasDraggableComponents

首先我们需要在游戏上 mixin HasDraggableComponents 类别

class StarGame extends FlameGame with HasDraggableComponents {
  ...

JoystickComponent

我们使用 JoystickComponent 相关属性定义 虚拟摇扞 的显示画面

  final knobPaint = BasicPalette.blue.withAlpha(200).paint();
  final backgroundPaint = BasicPalette.blue.withAlpha(100).paint();

  final joystick = JoystickComponent(
    knob: Circle(radius: 15).toComponent(paint: knobPaint),
    background: Circle(radius: 50).toComponent(paint: backgroundPaint),
    margin: const EdgeInsets.only(left: 30, bottom: 40),
  );

  add(joystick);

在画面上应该就会出现 虚拟摇扞 的介面。

接着将 joystick 当作参数配置给 Moster

class Moster extends SpriteComponent with Hitbox, Collidable {
  ...
  final JoystickComponent joystick;

  final moster = Moster(this, joystick);

joystick 提供三种参数可以供设定

direction：摇扞目前对应的方向。这个让我想到KOF游戏的招式表 XD。
intensity：从旋钮中心至半径边缘的百分比[0.0, 1.0]
delta：从旋钮中心至半径对应向量值
velocity：从 delta 与 knobRadius 计算出 relativeDelta，用来表示加速度的参数。

  /// The percentage, presented as a [Vector2], and direction that the knob is
  /// currently pulled from its base position to a edge of the joystick.
  Vector2 get relativeDelta => delta / knobRadius;

向量：指一个同时具有大小和方向，且满足平行四边形法则的几何对象。[维基百科]

在 Moster 的 update 加入下面程序码：

  @override
  void update(double dt) {
    ...
    // joystick
    if (!joystick.delta.isZero()) {
      x += joystick.relativeDelta[0] * xSpeed * dt;
    }

    // 边界
    if (x < 32) {
      x = 32;
    }

    if (x > _game.screenWidth - 32) {
      x = _game.screenWidth - 32;
    }
  }

flame_joystick