通过使用 Flare 美化游戏界面，下面是美化前和美化后的效果：

sf11 sf12

项目源码为 Flare官方Demo

安装未美化项目程序

首先下载 master 分支下的代码，切换到项目路径，安装相应的包文件：

1
flutter packages get

安装好项目所必须的依赖后，运行程序确认是否能够正常使用。

添加包

打开 pubspec.yaml 找到 dependencies ，在依赖中添加 flare 的包：

1
2
3
4
dependencies:
  flutter:
    sdk: flutter
  flare_flutter: ^1.3.12

然后再次运行包安装命令，安装新添加的包：

1
flutter packages get

回到需要调用这个包的文件 main.dart 中，导入这个包：

1
import 'package:flare_flutter/flare_actor.dart';

导入后编译器不报错即视为成功。

添加静态动画素材

把需要使用的动画素材文件放到项目根目录下 assets 文件夹中，然后回到 pubspec.yaml 中，找到被注释掉的 assets 取消注释，添加一会需要用到的静态动画资源：

1
2
3
4
5
6
7
flutter:
  assets:
    - assets/background.flr
    - assets/bullet.flr
    - assets/play_button.flr
    - assets/earth.flr
    - assets/target.flr

使用动画素材

背景素材的使用

首先在入口程序处找到 Scaffold，这边需要用到背景的设置，所以采用 Stack 这种重叠层的布局方式，然后在 children 属性中传入 FlareActor 和 Scaffold 组件。FlareActor 这个组件首先需要传入一个 String 表示展示的动画素材的路径，还有一些其他的属性控制大小、位置显示动画等，使用示例：

1
2
3
4
5
6
7
8
9
10
11
home: Stack(
      children: <Widget>[
        FlareActor(
          "assets/background.flr",
          alignment: Alignment.center,
          fit: BoxFit.cover,
          animation: "rotate",
        ),
        Scaffold(
            backgroundColor: Colors.transparent,
        )

这里需要把 Scaffold 的背景颜色设置为透明色，这样才能够正常地显示出背景素材。完成之后保存代码使用 Flutter 的热重载， App 显示背景即可视为添加成功。

添加初始界面的火箭头素材

根据最终效果图片，需要在初始界面加上一个火箭的素材，首先在代码中找到相应的位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Scaffold(
  backgroundColor: Colors.transparent,
  body: eG != 1
      ? Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Box Shooter",
                  style: TextStyle(color: w, fontSize: 62),
                ),
              ),
              Text(
                "Score:${c - 1}",
                style: TextStyle(color: w, fontSize: 62),
              ),

可以看到在 Scaffold 的 body 属性根据 eG 的值是否为 1 会显示两种不同的组件，而第一个 Center 组件就是初始界面。分析这个界面由 Padding、Text 等几个组件在 Column 中显示。可以分析出我们需要在 Padding 上面动画素材的组件 FlareActor，该组件用法如下：

1
2
3
4
FlareActor(
  "assets/bullet.flr",
  fit: BoxFit.fitHeight,
)

但是由于素材尺寸比较大，所以需要使用 Container 组件包裹素材组件，通过控制 Container 的尺寸来控制素材的尺寸：

1
2
3
4
5
6
7
8
Container(
    height: 160,
    width: 60,
    child: FlareActor(
    "assets/bullet.flr",
    fit: BoxFit.fitHeight,
    )
),

最后完整的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body: eG != 1
  ? Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
              height: 160,
              width: 60,
              child: FlareActor(
                "assets/bullet.flr",
                fit: BoxFit.fitHeight,
              )),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Box Shooter",
              style: TextStyle(color: w, fontSize: 62),
            ),
          ),
          Text(
            "Score:${c - 1}",
            style: TextStyle(color: w, fontSize: 62),
          ),

修改开始按钮

观察最终效果图，发现在初始界面需要替换的不仅背景还有开始的那个按钮，刚才已经找到了构成初始界面的那个组件，找到那个带有监听事件的组件 GestureDetector，把组件的 child 属性按照上面添加背景素材那种方式改为添加开始按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
GestureDetector(
  onTap: () {
    it();
    eG = 1;
    c = 1;
    i();
  },
  child: Container(
    height: 60,
    width: 60,
    child: FlareActor(
      "assets/play_button.flr",
      fit: BoxFit.cover,
      animation: "animate",
    ),
  )
),

修改游戏界面的三个素材

游戏界面中需要修改的只有三处，添加方式跟上面添加素材的方式一样，使用 FlareActor 组件调用素材，然后用 Container 包裹这个组件控制它的大小，完整的修改代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
: Column(
  children: <Widget>[
    Expanded(
        child: Stack(children: <Widget>[
      Align(
        alignment: Alignment(0.8, -0.9),
        child: Text(
          "${c - 1}",
          style: TextStyle(fontSize: 32, color: w),
        ),
      ),
      StreamBuilder(
        initialData: 1.0,
        stream: s.bSG,
        builder: (context, s) {
          bYP = s.data;
          return Align(
              alignment: Alignment(bXP, s.data),
              child: Container(
                  width: 15,
                  child: FlareActor(
                    "assets/bullet.flr",
                    alignment: Alignment(bXP, s.data),
                    fit: BoxFit.fitWidth,
                    animation: "float",
                  ))
          );
        },
      ),
      Align(
          alignment: Alignment(tXP, tYP),
          child: Container(
            width: 40,
            child: FlareActor(
              "assets/target.flr",
              alignment: Alignment(tXP, tYP),
            ),
          ))
    ])),
    StreamBuilder(
      initialData: 0.0,
      stream: s.hSG,
      builder: (ctx, s) {
        x = s.data;
        return Align(
            alignment: Alignment(s.data, 1),
            child: Container(
                width: 60,
                height: 20,
                child: FlareActor("assets/earth.flr"),
                alignment: Alignment.center));
      },
    )
  ],
),