Flutter Flame-ຫົວຂໍ້ສຳຫລັບເດັກຕິດເກມ55

Flame ເປັນ engine ແຍກຂອງ Flutter ສຳຫລັບການສ້າງເກມ ໃຜທີ່ເປັນ Flutter Developer ຢູ່ແລ້ວຫນ້າຈະເຄີຍເຫັນ Flame ຜ່ານຕາກັນມາແດ່ແລ້ວ ດຽວມື້ນີ້ເຮົາມາເບິ່ງວິທີການໃຊ້ງານແບບຄ່າວໆກັນ.

1. ເລີ່ມຕົ້ນດ້ວຍການຕິດຕັ້ງ flame package ໃນໄຟລ໌ pubspec.yaml ເພື່ອໃຊ້ງານ flame engine ກ່ອນເລີຍ.

dependencies:
  flame: 1.10.0

2. ຕໍ່ໄປ ໄປທີ່ໄຟລ໌ main.dart.

void main() {
  runApp(GameWidget(
    game: MyGame(),
  ));
}

class MyGame extends FlameGame {
  @override
  Color backgroundColor() => const Color(0xFFBAE0F3);
 
  @override
  FutureOr<void> onLoad() async {

    return super.onLoad();
  }
}

GameWidget(); ເປັນຂອບເຂດທີ່ເຮົາສາມາດປ້ອນເກມຂອງເຮົາເຂົ້າໄປເພື່ອໃຫ້ Flutter ສາມາດອ່ານໄດ້ ຈາກນັ້ນກໍໃຊ້ FlameGame ເປັນໂຕ render ເກມຂອງເຮົາ. onLoad(); ຈະຄ້າຍກັບ init(); ຕອນຂຽນ flutter ປົກກະຕິເລີຍ ເປັນບ່ອນໂຫລດກຽມພ້ອມຂໍ້ມູນທຸກຢ່າງກ່ອນທີ່ຈະ render UI ຂື້ນມາ

3. ມາເພີ່ມຕົວລະຄອນໃຫ້ເກມເຮົາກັນ ສ້າງໄຟລ໌ my_character.dart

class MyCharacter extends SpriteGroupComponent
    with HasGameRef<MyGame>{
  MyCharacter({
    super.position,
  }) : super(
          size: Vector2(79, 109),
          anchor: Anchor.center,
          priority: -1,
        );

  @override
  FutureOr<void> onLoad() async {
    await super.onLoad();
    await _loadCharacterSprites();
    current = PlayerState.center;
    setPosition();
  }

  Future<void> _loadCharacterSprites() async {
    // asset path default : assets/images/
    final left = await gameRef.loadSprite('character_left.png');
    final right = await gameRef.loadSprite('character_right.png');
    final center = await gameRef.loadSprite('character_center.png');

    sprites = <PlayerState, Sprite>{
      PlayerState.left: left,
      PlayerState.right: right,
      PlayerState.center: center,
    };
  }

  void setPosition() {
    position = Vector2(
      (gameRef.size.x / 2),
      (gameRef.size.y / 2),
    );
  }

}

SpriteGroupComponent ເປັນໂຕທີ່ເຮົາຈະສ້າງເຕົວລະຄອນ ຫຼື ວັດຖຸຕ່າງໆຂື້ນມາໃນໂລກຂອງເກມ. ໃນຟັງຊັ່ນ _loadCharacterSprites(); ຂ້ອຍກຳນົດວ່າເວລາຕົວລະຄອນເຄື່ອນທີ່ໄປມາຈະໃຫ້ສະແດງທາທາງແບບໃດ. setPosition(); ເປັນການເຊັດຕຳແຫນ່ງຂອງຕົວລະຄອນຕອນເລີ່ມເກມວ່າຈະໃຫ້ຢູ່ມຸມໃດຂອງມືຖື ຫຼື ອຸປະກອນທີ່ເຮົາໃຊ້. ລອງບິ້ວເບິ່ງກໍຈະໄດ້ປະມານນີ້.

4. ມາເຮັດໃຫ້ຕົວລະຄອນເຮົາເຫນັງໄດ້ກັນ

ເພີ່ມຟັງຊັ່ນ updatePosition(); ໃນໄຟ໌ my_character.dart

class MyCharacter extends SpriteGroupComponent
    with HasGameRef<MyGame>, DragCallbacks {
  MyCharacter({
    super.position,
  }) : super(
          size: Vector2(79, 109),
          anchor: Anchor.center,
          priority: -1,
        );

...

  void updatePosition(Vector2 move) {
    position += move;
    if (move.x > 0) {
      current = PlayerState.right;
    } else if (move.x < 0) {
      current = PlayerState.left;
    } else {
      current = PlayerState.center;
    }
  }

...

}

updatePosition(); ເງື່ອນໄຂຂອງຟັງຊັ່ນນີ້ຄືຖ້າຕົວລະຕອນຂອງເຮົາເຄື່ອນທີ່ໄປຕາມແກ່ນ x ແລ້ວຄ່າ x > 0 ຫຼື x<0 state ຂອງຕົວຄອນຈະມີການປ່ຽນແປງ.

ກັບໄປທີ່ file main.dart ເພີ່ມ extends DragCallbacks ໃຫ້ກັບ MyGame

class MyGame extends FlameGame with DragCallbacks {
  ....

  @override
  void onDragStart(DragStartEvent event) {
    character.updatePosition(Vector2(0, 0));
    super.onDragStart(event);
  }

  @override
  void onDragEnd(DragEndEvent event) {
    character.updatePosition(Vector2(0, 0));
    super.onDragEnd(event);
  }

  @override
  void onDragUpdate(DragUpdateEvent event) {
    debugPrint('[update] : ${event.delta}');

    event.delta.y = 0;
    character.updatePosition(event.delta);
  }
...
}

DragCallbacks ໂຕນີ້ຈະໃຊ້ເພື່ອກວດຈັບການສຳຜັດຈໍຂອງຜູ້ຫຼີ້ນວ່າເຄື່ອນທີ່ໄປທາງໃດ. ໃນຕອນນີ້ເຮົາກໍເອີ້ນໃຊ້ຟັງຊັ່ນ updatePosition(); ເພື່ອອັບເດດຕຳແຫນ່ງຂອງຕົວລະຄອນຫາກຜູ້ໃຊ້ສຳຜັດຫນ້າຈໍ. ຜົນຮັບທີ່ໄດ້ກໍຈະປະມານນີ້

more info link :

https://docs.flame-engine.org/latest/index.html

https://www.youtube.com/watch?v=tEqVyJNOroI&ab_channel=Flutter

https://pub.dev/packages/flame/example