继续创作,加速生长!这是我参加「日新方案 6 月更文应战」的第 24 天,点击检查活动详情


前言

这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程,发布于社区。如果你在其他渠道看到本文,能够根据关于链接移步到中检查。由于文章可能会更新、修正,全部以文章版别为准。本系列源码于 【toly_game】 ,如果本系列对你有所帮助,希望点赞支撑,本系列文章一览:

  • 【Flutter&Flame 游戏 – 壹】开启新世界的大门
  • 【Flutter&Flame 游戏 – 贰】操纵杆与人物移动
  • 【Flutter&Flame 游戏 – 叁】键盘事情与手势操作
  • 【Flutter&Flame 游戏 – 肆】精灵图片加载办法
  • 【Flutter&Flame 游戏 – 伍】Canvas 参上 | 人物的血条
  • 【Flutter&Flame 游戏 – 陆】暴击 Dash | 文字构件的运用
  • 【Flutter&Flame 游戏 – 柒】人随指动 | 动画点触与移动
  • 【Flutter&Flame 游戏 – 捌】装弹完毕 | 人物武器发射
  • 【Flutter&Flame 游戏 – 玖】探究构件 | Component 是什么
  • 【Flutter&Flame 游戏 – 拾】探究构件 | Component 生命周期回调
  • 【Flutter&Flame 游戏 – 拾壹】探究构件 | Component 运用细节
  • 【Flutter&Flame 游戏 – 拾贰】探究构件 | 人物办理
  • 【Flutter&Flame 游戏 – 拾叁】碰撞检测 | CollisionCallbacks
  • 【Flutter&Flame 游戏 – 拾肆】碰撞检测 | 之前代码优化
  • 【Flutter&Flame 游戏 – 拾伍】粒子系统 | ParticleSystemComponent
  • 【Flutter&Flame 游戏 – 拾陆】粒子系统 | 粒子的品种
  • 【Flutter&Flame 游戏 – 拾柒】构件特效 | 了解 Effect 系统
  • 【Flutter&Flame 游戏 – 拾捌】构件特效 | ComponentEffect 一族
  • 【Flutter&Flame 游戏 – 拾玖】构件特效 | 了解 EffectController 系统
  • 【Flutter&Flame 游戏 – 贰拾】构件特效 | 其他 EffectControler
  • 【Flutter&Flame 游戏 – 贰壹】视差组件 | ParallaxComponent
  • 【Flutter&Flame 游戏 – 贰贰】菜单、字体和浮层
  • 【Flutter&Flame 游戏 – 贰叁】 资源办理与国际化
  • 【Flutter&Flame 游戏 – 贰肆】pinball 源码剖析 – 项目结构介绍
  • 【Flutter&Flame 游戏 – 贰伍】pinball 源码剖析 – 资源加载与 Loading
  • 【Flutter&Flame 游戏 – 贰陆】pinball 源码剖析 – 游戏主菜单界面
  • 【Flutter&Flame 游戏 – 贰柒】pinball 源码剖析 – 人物选择与玩法面板
  • 【Flutter&Flame 游戏 – 贰捌】pinball 源码剖析 – 游戏主场景的构成
  • 【Flutter&Flame 游戏 – 贰玖】pinball 源码剖析 – 视口与相机

第一季完结,谢谢支撑 ~


1. 为什么要办理资源

本文介绍一下 Flutter 项目中的资源办理和国际化的一些常识。留意,这是 Flutter 本身的常识点,不只限于 Flame 游戏开发Flame 是在 Flutter 框架基础上的游戏引擎,能够运用 Flutter 本身的全部常识。关于一个游戏来说,图片、音频、字体等资源十分多,如果不进行办理就会十分凌乱。本文代码见【23】

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


比方加载图片时,每次都要去复制地址,而且姓名写死在项目里,也不容易保护和一致加载。运用咱们希望有一种手法来一致办理这些资源,最好能主动生成一些代码,帮助咱们调度资源。

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


在探究 Flutter 官方开源的 pinball 游戏时,发现其中运用的 flutter_gen 挺不错的。能够根据资源信息,主动生成类来办理资源,比方下面红框中的代码是东西主动生成的。

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


2. flutter_gen 东西的装置

首先 flutter_gen 并非是一个三方插件,而是一个指令行东西。能够经过下面的指令来下载:

dart pub global activate flutter_gen

此时会呈现如下的信息,能够看到一个文件夹,并且说期望把这个文件夹增加到系统的环境变量中:

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

咱们在如下文件夹中就能够看到 fluttergen 的批处理文件:

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

把文件夹增加到系统环境变量中,是为了在任何地方都能够运用指令:

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


当输入 fluttergen --version ,有版别信息输出时,表明东西能够运用:

----[~  fluttergen --version
----~]  FlutterGen v4.3.0

3. flutter_gen 东西的运用

首先在 pubspec.yaml 的最外层节点下,配置资源代码生成的方位。别的还能够配置其他的信息,详见 flutter_gen 官方文档:

---->[pubspec.yaml]----
flutter_gen:
  output: lib/base_course/23/gen # 代码生成的途径方位

在项目根目录运用如下指令即可,在关于的文件夹下就会生成资源办理的相关代码:

fluttergen -c pubspec.yaml

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


别的,留意一个小细节,资源名不能运用纯数字,或 dart 中的关键字、首字母是有意义的特殊符号,比方 :{! 等。由于资源办理本质上便是生成和文件名相同的 get 办法,进行访问,也便是说文件名必需求符合办法名的标准。虽然东西端能够进行称号的优化,但最好资源名仍是本身标准一些比较好。

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


flutter_gen 仅仅供给了一个资源文件办理的办法,避免在代码中写死资源途径,否则当资源称号变化时,代码中未及时更改,就会产生潜在的危险。本身并不影响中心的运用办法:

---->[之前]----
const String src = 'adventurer/animatronic.png';
 ---->[现在]----   
String src = Assets.images.adventurer.animatronic.keyName;

别的留意一点,默认情况下 Flame会对资源增加前缀,图片是 assets/images/,而经过 flutter_gen 生成的代码获取的途径是全途径,所以需求清除前缀:

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

能够在 XXXGame 的结构办法体重清除前缀,如下所示:

TolyGame() {
  images.prefix = '';
}

4. 国际化

国际化是指供给多个版别的言语文字支撑,以便满足不同国家、地区的运用。这儿运用的也是官方在 pinball 项意图国际化办法,也是官方推荐的办法:《Internationalizing Flutter apps》。首先在 pubspec.yaml 中 增加依靠:

---->[pubspec.yaml]----
dependencies:
 #...
   flutter_localizations:
     sdk: flutter
   intl: ^0.17.0

然后在 pubspec.yamlflutter 节点下,增加 generate: true ,来表明需求主动生成代码。留意,虽然都是主动生成代码,但这儿和 fluttergen 是没有关系的。在 flutter 节点下,应该是官方的行为:

---->[pubspec.yaml]----
flutter:
  generate: true 
#...

然后需求在根目录创立一个 l10n.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

然后在指定的文件夹下供给运用中的相关文字资源:

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

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

flutter pub get

.dart_tool 中会生成相关的代码。留意这儿的 flutter_gen 文件夹和上面的 flutter_gen 东西是两个不同的东西,仅仅姓名相同。flutter_gen 东西不是官方出品的,而且仅仅对资源进行办理。

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

然后为 MaterialApp 组件指定本地化署理:

import 'package:flutter_gen/gen_l10n/app_localizations.dart';
MaterialApp(
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  locale: AppLocalizations.supportedLocales[0] // 指定言语
)

运用时,经过 AppLocalizations.of 调用相关资源名即可:

String play = AppLocalizations.of(context).play;
String options = AppLocalizations.of(context).options;

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


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

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

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

你能够运用状态办理来切换大局的 local 参数,来到达在运用中切换言语的意图。


别的,在 pinball 在对资源的运用进行了一个小优化,对 BuildContext 拓宽了一个办法,便于调用,本质上没有任何区别。

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);
}

在运用上如下所示,确实简略一些:

String play = context.l10n.play;
String options = context.l10n.options;

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

  • @张风捷特烈 2022.06.19 未允禁转
  • 我的 大众号: 编程之王
  • 我的 主页 : 张风捷特烈
  • 我的 B站主页 : 张风捷特烈
  • 我的 github 主页 : toly1994328

\