Flutter体验 Day 29-flame Collidable

flame Collidable

有开发过游戏的人应该都有听过碰撞侦测这名词，程序使用碰撞侦测的演算法侦测物件是否发生碰撞的事件，而触发对应的游戏行为(动画、得分、扣血…)。

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

Collidable

在 flame 中我们使用 mixin Collidable 取得 onCollision 以及 onCollisionEnd 碰撞事件的接口。

mixin Collidable on Hitbox {
  CollidableType collidableType = CollidableType.active;

  void onCollision(Set<Vector2> intersectionPoints, Collidable other) {}
  void onCollisionEnd(Collidable other) {}

  @override
  void onRemove() {
    super.onRemove();
    findParent<HasCollidables>()?.collidables.remove(this);
  }
}

Collidable 又另外绑定在 Hitbox 设定上

mixin Hitbox on PositionComponent {
  final List<HitboxShape> _hitboxes = <HitboxShape>[];

我们就来看看要怎麽完善星星游戏吧。

HasCollidables

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

class StarGame extends FlameGame with HasDraggableComponents, HasCollidables {
  ...

它用来处理画面上的可碰撞物件

可碰撞物件

让我们加入"星星" SpriteComponent

为了定义可碰撞行为，我们需要 mixin Hitbox, Collidable 类别，并使用addHitbox定义碰撞范围。

下面我们用圆形碰撞演算法定义范围。

class Star extends SpriteComponent with Hitbox, Collidable {
  bool _collision = false;
  Star(_game)
      : super(
          sprite: Sprite(_game.images.fromCache('star.png')),
        ) {
    position = getNewStarPosition();
    addHitbox(HitboxCircle());
  }

  Vector2 getNewStarPosition() {
    return Vector2(_rnd.nextDouble() * 800, _rnd.nextDouble() * 100 + 150);
  }
}

同样的内容我们也在 Moster 类别上加入新的碰撞设定

定义碰撞事件

实作onCollision内容，我们可以从方法上取得碰撞的位置以及碰撞的物件

下面我们检测与 Star 物件发生碰撞的是 Moster，我们先标记发生碰撞

  @override
  void onCollision(Set<Vector2> intersectionPoints, Collidable other) {
    super.onCollision(intersectionPoints, other);
    if (other is Moster) {
      _collision = true;
    }
  }

定义碰撞行为

这边我们先简单定义当Star与Moster碰撞时会更换星星的位置，从update方法实作内容。

  @override
  void update(double dt) {
    if (_collision) {
      position = getNewStarPosition();
      _collision = false;
    }
    super.update(dt);
  }