Flutter未知功能探索插件illume的使用

Flutter未知功能探索插件illume的使用

illume

illume 是是一个简单的Flutter游戏引擎，它使用Widget来构建游戏对象，而不是在正常的游戏引擎中使用的Sprite。这使得应用程序和游戏部分可以相当整合，并且可以使用很多共同组件而不需要图形工作来创建Sprite和背景（这是我的主要动机，因为我对图形设计一无所知）。它也非常容易创建和管理游戏状态，如下面的功能所示。许多功能仍然需要实现，包括物理 - 目前只实现了普通的盒子碰撞。

一些部分受到了其他游戏引擎的启发，主要是Flame。

免责声明： 由于Widget比在画布上绘制的Sprite更重，这个引擎将比其他引擎表现得更差。它还处于非常早期的阶段，我计划添加很多功能，但这主要是由于我对基于Widget的游戏引擎的兴趣——任何严肃的游戏开发都应该使用更成熟的引擎，例如[Flame]。这只是为了满足我的好奇心。我很喜欢，并且仍然大量使用那些我非常尊重的主Flutter游戏引擎。

功能

使用Widget直接构建游戏对象

class FlappyWidget extends GameObject {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: const Text('Demo'),
    );
  }

  @override
  void init() {}

  @override
  void onCollision(List<Collision> collisions) { }

  @override
  void onScreenSizeChange(Vector2 size) {}

  @override
  void update(Duration delta) {}
}

容易的游戏开发，无需大型分离

class _MyHomePageState extends State<MyHomePage> {
  IllumeController gameController = IllumeController();

  FlappyWidget flappyWidget = FlappyWidget();

  @override
  void initState() {
    super.initState();
    gameController.startGame();
    gameController.gameObjects.add(flappyWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Illume(
        illumeController: gameController,
      ),
    );
  }
}

// 定义游戏对象

IllumeController允许轻松操作游戏状态

IllumeController gameController = IllumeController();

gameController.startGame();
gameController.gameObjects.add(DemoObject());
gameController.stopGame();

碰撞检测

碰撞检测默认启用，所有对象都可以关闭。每个对象都会通知碰撞以及交集的Rect，以便更好地理解碰撞。这是一个非常早期的原型，目前没有复杂的物理（Box2ish），但我希望将来添加这些功能。

class FlappyWidget extends GameObject {

  //...

  @override
  void onCollision(List<Collision> collisions) { 
    // 这个会给出与这个对象碰撞的所有对象列表，以及交集的Rect。
  }

  //...
}

触摸手势检测

触摸手势检测不是illume的功能，我们可以使用默认的Flutter手势检测Widget，如GestureDetector来驱动我们的应用。查看仓库中的示例以获取更多信息，这里有一个简短的演示：

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        flappyWidget.jump();
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Illume Demo'),
        ),
        body: Illume(
          illumeController: gameController,
        ),
      ),
    );
  }

使用

第一步

添加依赖项：

dependencies:
  illume: ^0.1.0

第二步

添加Illume widget 和关联的IllumeController到你需要创建游戏的地方：

IllumeController gameController = IllumeController();

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Illume Demo'),
      ),
      body: Illume(
        illumeController: gameController,
      ),
    );
  }

第三步

定义你的GameObject通过扩展类：

class FlappyWidget extends GameObject {
  var velocity = 0.0;
  var acceleration = 0.2;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: const Text('Demo'),
    );
  }

  @override
  void init() {
    size = Vector.all(50);
    alignment = GameObjectAlignment.center;
    position = (gameSize / 2);
  }

  @override
  void onCollision(List<Collision> collisions) {
    illumeController.stopGame();
  }

  @override
  void onScreenSizeChange(Vector2 size) {
    // 这是一个快速的演示，但在实际的应用程序中你应该移动位置或至少锁定方向。
  }

  @override
  void update(Duration delta) {
    position += Vector(0, velocity);
    velocity = velocity + acceleration;
  }

  void jump() {
    velocity = -5;
  }
}

第四步

将对象添加到游戏中并启动游戏：

  FlappyWidget flappyWidget = FlappyWidget();

  @override
  void initState() {
    super.initState();
    gameController.startGame();
    gameController.gameObjects.addAll([flappyWidget]);
  }

检查完整的示例以获取演示的Flappy Bird游戏（这是一个非常基础的演示，我稍后会添加一个更好的版本）。

示例代码