【Flutter&Flame 游戏 - 贰叁】 资源管理与国

发表于

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 24 天，点击查看活动详情

前言

这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程，发布于掘金社区。如果你在其他平台看到本文，可以根据对于链接移步到掘金中查看。因为文章可能会更新、修正，一切以掘金文章版本为准。本系列源码于 【toly_game】 ，如果本系列对你有所帮助，希望点赞支持，本系列文章一览：

第一季完结，谢谢支持 ~

1. 为什么要管理资源

本文介绍一下 Flutter 项目中的资源管理和国际化的一些知识。注意，这是 Flutter 本身的知识点，不只限于 Flame 游戏开发，Flame 是在 Flutter 框架基础上的游戏引擎，可以使用 Flutter 本身的一切知识。对于一个游戏来说，图片、音频、字体等资源非常多，如果不进行管理就会非常杂乱。本文代码见【23】

比如加载图片时，每次都要去拷贝地址，而且名字写死在项目里，也不容易维护和统一加载。使用我们希望有一种手段来统一管理这些资源，最好能自动生成一些代码，帮助我们调度资源。

在探究 Flutter 官方开源的 pinball 游戏时，发现其中使用的 flutter_gen 挺不错的。可以根据资源信息，自动生成类来管理资源，比如下面红框中的代码是工具自动生成的。

2. flutter_gen 工具的安装

首先 flutter_gen 并非是一个三方插件，而是一个命令行工具。可以通过下面的命令来下载：

1
shell复制代码dart pub global activate flutter_gen

此时会出现如下的信息，可以看到一个文件夹，并且说期望把这个文件夹添加到系统的环境变量中：

我们在如下文件夹中就可以看到 fluttergen 的批处理文件：

把文件夹添加到系统环境变量中，是为了在任何地方都可以使用命令：

当输入 fluttergen --version ，有版本信息输出时，表示工具可以使用：

1
2
shell复制代码----[~  fluttergen --version
----~]  FlutterGen v4.3.0
3. flutter_gen 工具的使用

首先在 pubspec.yaml 的最外层节点下，配置资源代码生成的位置。另外还可以配置其他的信息，详见 flutter_gen 官方文档：

1
2
3
yaml复制代码---->[pubspec.yaml]----
flutter_gen:
  output: lib/base_course/23/gen # 代码生成的路径位置

在项目根目录使用如下指令即可，在对于的文件夹下就会生成资源管理的相关代码：

1
shell复制代码fluttergen -c pubspec.yaml

另外，注意一个小细节，资源名不能使用纯数字，或 dart 中的关键字、首字母是有意义的特殊符号，比如 :、{ 、! 等。因为资源管理本质上就是生成和文件名相同的 get 方法，进行访问，也就是说文件名必须要符合方法名的规范。虽然工具端可以进行名称的优化，但最好资源名还是自身规范一些比较好。

flutter_gen 只是提供了一个资源文件管理的方式，避免在代码中写死资源路径，不然当资源名称变化时，代码中未及时更改，就会产生潜在的隐患。本身并不影响核心的使用方式：

1
2
3
4
5
dart复制代码---->[之前]----
const String src = 'adventurer/animatronic.png';

 ---->[现在]----   
String src = Assets.images.adventurer.animatronic.keyName;

另外注意一点，默认情况下 Flame会对资源添加前缀，图片是 assets/images/，而通过 flutter_gen 生成的代码获取的路径是全路径，所以需要清除前缀：

可以在 XXXGame 的构造方法体重清除前缀，如下所示：

1
2
3
dart复制代码TolyGame() {
  images.prefix = '';
}
4. 国际化

国际化是指提供多个版本的语言文字支持，以便满足不同国家、地区的使用。这里使用的也是官方在 pinball 项目的国际化方式，也是官方推荐的方式：《Internationalizing Flutter apps》。首先在 pubspec.yaml 中 添加依赖：

1
2
3
4
5
6
yaml复制代码---->[pubspec.yaml]----
dependencies:
 #...
   flutter_localizations:
     sdk: flutter
   intl: ^0.17.0

然后在 pubspec.yaml 的 flutter 节点下，添加 generate: true ，来表示需要自动生成代码。注意，虽然都是自动生成代码，但这里和 fluttergen 是没有关系的。在 flutter 节点下，应该是官方的行为：

1
2
3
4
yaml复制代码---->[pubspec.yaml]----
flutter:
  generate: true 
#...

然后需要在根目录创建一个 l10n.yaml 的配置文件，给出文字资源的路径，以及生成代码文件的名称：

1
2
3
4
5
yaml复制代码---->[l10n.yaml]----
arb-dir: lib/base_course/23/i10n/arb
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
nullable-getter: false

然后在指定的文件夹下提供应用中的相关文字资源：

在 pubspec.yaml 中点击 pub get 后，或在项目根目录执行 :

1
shell复制代码flutter pub get

在 .dart_tool 中会生成相关的代码。注意这里的 flutter_gen 文件夹和上面的 flutter_gen 工具是两个不同的东西，只是名字一样。flutter_gen 工具不是官方出品的，而且只是对资源进行管理。

然后为 MaterialApp 组件指定本地化代理：

1
2
3
4
5
6
7
dart复制代码import 'package:flutter_gen/gen_l10n/app_localizations.dart';

MaterialApp(
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  locale: AppLocalizations.supportedLocales[0] // 指定语言
)

使用时，通过 AppLocalizations.of 调用相关资源名即可：

1
2
dart复制代码String play = AppLocalizations.of(context).play;
String options = AppLocalizations.of(context).options;

这样，当 local 被改为第一个，也就是中文时，对应的文字资源就会是中文，如下图所示：

1
2
3
4
5
dart复制代码MaterialApp(
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  locale: AppLocalizations.supportedLocales[1] // 指定语言
)

你可以使用状态管理来切换全局的 local 参数，来达到在应用中切换语言的目的。

另外，在 pinball 在对资源的使用进行了一个小优化，对 BuildContext 拓展了一个方法，便于调用，本质上没有任何区别。

1
2
3
4
5
6
7
8
dart复制代码import 'package:flutter/widgets.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

export 'package:flutter_gen/gen_l10n/app_localizations.dart';

extension AppLocalizationsX on BuildContext {
  AppLocalizations get l10n => AppLocalizations.of(this);
}

在使用上如下所示，确实简单一些：

1
2
dart复制代码String play = context.l10n.play;
String options = context.l10n.options;

本文介绍了 Flutter 对资源文件的管理，以及国际化的相关知识。到这里，我们就对 Flame 引擎整体上有了基本的认知。之后，我们将进入下一阶段，敬请期待。那本文就到这里，明天见 ~

\

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%