theme: cyanosis
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 7 天,点击查看活动详情
前言
这是一套 张风捷特烈 出品的 Flutter&Flame
系列教程,发布于掘金社区。如果你在其他平台看到本文,可以根据对于链接移步到掘金中查看。因为文章可能会更新、修正,一切以掘金文章版本为准。本系列文章一览:
- 【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. 文字的价值
无论是应用也好、游戏也好,文字
和 图片
是永恒的显示主体。人类文明是依赖于文字进行传承的,文字的最大价值在于传递信息。如下是阴阳师的战斗截图,其中角色的伤害、当前的成绩、鬼火数量、是否暴击、式神存活状态等,都依赖于文字来显示,向玩家反馈交互的信息。
这里先显示在血条上显示一下血量信息,如下所示:
2. 文字构件 - TextComponent
在 Flame
中,使用 TextComponent
构件显示文字。我们知道 Flutter
的绘制中通过 TextPainter
类可以绘制文字,其实 TextComponent
构建本质上就是对 TextPainter
的一层封装而已。提供了一个 TextPaint
类进行使用。
如下是 Liveable
中的处理,只需要创建一个 TextComponent
对象,然后使用 add
方法添加即可。另外任何构件都可以通过 add(RectangleHitbox)
来显示边框信息,方便查看所占区域。代码详见:【06/01】
```dart final TextStyle _defaultTextStyle = const TextStyle(fontSize: 10, color: Colors.white); late final TextComponent _text;
void initPaint({ required double lifePoint, Color lifeColor = Colors.red, Color outlineColor = Colors.white, }) { // 略... // 添加生命值文字 text = TextComponent(textRenderer: TextPaint(style: _defaultTextStyle)); _updateLifeText(); // 添加外框信息 _text.add(RectangleHitbox()..debugMode = true); add(text); }
void updateLifeText(){ _text.text = 'Hp ${currentLife.toInt()}'; } ```
如下可见,默认情况下 TextComponent
会与父区域的左上角对齐。另外 TextComponent
也是 PositionComponent
一族的构件,我们可以对其进行平移、缩放、旋转等操作。
比如下面的 tag1
处通过指定 _text
的 position
进行定位,左侧和血条对齐,并在血条上方:
dart // 添加生命值文字 _text = TextComponent(textRenderer: TextPaint(style: _defaultTextStyle)); _updateLifeText(); double y = -(offsetY+_text.height+2); double x = (size.x/2)*(1-widthRadio); _text.position = Vector2(x, y); // tag1 add(_text);
去掉信息框后如下所示,在点击时减少生命,它是通过 _updateLifeText
更新文字显示即可:
3.显示伤害数据
在怪物受到攻击时,一般会显示造成伤害的数据,来让操作者有更直观的体验。现在期望在当怪兽受伤时,左侧显示伤害量,另外伤害量维持 1s
之后自动消失。如下所示:代码见 【06/02】
伤害数据是在 Liveable
中维护的,虽然可以直接在 Liveable
中添加文字。但这样的话会使得 Liveable
的职能过于复杂,也不利于后续的拓展。我们可以单独定义一个 DamageText
构件,来维护伤害数值的显示逻辑。
如下代码所示,在 Liveable
中添加一个 addDamage
的方法,在 tag1
处添加 damageText
文字。然后使用 Future.delayed
方法,延迟 1s
中,调用 damageText.removeFromParent
方法即可移除。
```dart class DamageText extends PositionComponent{
final TextStyle _damageTextStyle = const TextStyle( fontSize: 14, color: Colors.white, fontFamily: 'Menlo', shadows: [ Shadow(color: Colors.red, offset: Offset(1, 1), blurRadius: 1), ]);
Future addDamage(int damage) async { TextComponent damageText = TextComponent(textRenderer: TextPaint(style: _damageTextStyle)); damageText.text = damage.toString(); damageText.position = Vector2(-30, 0); add(damageText); // tag1 await Future.delayed(const Duration(seconds: 1)); damageText.removeFromParent(); }
} ```
这样在 Liveable
中就不必处理具体添加伤害文字的逻辑,只需要通过 DamageText
来管理即可。比如在 loss
方法中,当角色受到伤害,通过 _damageText.addDamage
来添加伤害文字,这样处理就非常方便。想要对伤害文字进行显示进行修改或拓展,直接在 DamageText
处理即可,这就是职责的分离。
```dart final DamageText _damageText = DamageText();
void initPaint({ required double lifePoint, Color lifeColor = Colors.red, Color outlineColor = Colors.white, }) { // 略... add(_damageText); }
void loss(double point) { _damageText.addDamage(-point.toInt()); // 略... } ```
4. 暴击伤害
这里来模拟一下产生暴击的情况:如下图所示,伤害时有一定概率产生暴击,此时使用另一种文字样式。并给出 暴击
的字样提示:代码见 【06/03】
实现也比较简单,在 addDamage
中,传入 isCrit
的入参,区分是否暴击。如果是暴击,使用 _addCritDamage
进行处理,添加黄色伤害和暴击字样即可。
```dart ---->[DamageText]---- void addDamage(int damage,{bool isCrit = false}) { if(!isCrit){ _addWhiteDamage(damage); }else{ _addCritDamage(damage); } }
Future _addCritDamage(int damage) async { TextComponent damageText = TextComponent(textRenderer: TextPaint(style: _critDamageTextStyle)); damageText.text = damage.toString(); damageText.position = Vector2(-30, 0); TextStyle style = _critDamageTextStyle.copyWith(fontSize: 10); TextComponent infoText = TextComponent(textRenderer: TextPaint(style:style )); infoText.text = '暴击'; infoText.position = Vector2(-30+damageText.width-infoText.width/2, -infoText.height/2); add(infoText); add(damageText); await Future.delayed(const Duration(seconds: 1)); infoText.removeFromParent(); damageText.removeFromParent(); } ```
暴击和爆伤,本应是角色的属性,这里暂时不搞这么复杂,在 Liveable
的 loss
方法中,用 75%
暴击和 165%
爆伤进行简单的测试,代码如下:
```dart ---->[Liveable]---- final Random _random = Random();
void loss(double point) { double crit = 0.75; double critDamage = 1.65; bool isCrit = _random.nextDouble() < crit; if (isCrit) { point = point * critDamage; } _damageText.addDamage(-point.toInt(),isCrit: isCrit); // 略... } ```
5.多次伤害
伤害是在 1s
后消失,当连续伤害在一秒之内,或者在一次伤害中附加多段伤害,就会产生遮挡。所以需要对多次伤害进行一下偏移处理,效果如下:代码见 【06/04】
这里利用了 Component
的一个特性,每个 Component
都有 children
属性,表示子构件集合。在 addDamage
中,只需要根据集合情况,获取最后一个元素,来确定添加文字的偏移即可:
dart void addDamage(int damage,{bool isCrit = false}) { Vector2 offset = Vector2(-30, 0); if(children.isNotEmpty){ final PositionComponent last; if(children.last is PositionComponent){ last = children.last as PositionComponent; offset = last.position + Vector2(5, last.height); } } if(!isCrit){ _addWhiteDamage(damage,offset); }else{ _addCritDamage(damage,offset); } }
文字本身比较简单,但与文字相关的数据维护和逻辑处理还是非常复杂的。本文通过显示角色的生命值
和伤害值
,简单说明了一下文字的使用方式。一般游戏中,都是使用图片作为文字,比如阴阳师的伤害数字。记得应该有图片形成字体的工具,比如 6000
的字符串,会对应字体中相关的图片。不过感觉 flame
框架太简单了,应该没有支持。
那本文就介绍到这里,明天见 ~
@张风捷特烈 2022.05.31 未允禁转
我的 公众号: 编程之王
我的 掘金主页
: 张风捷特烈我的 B站主页
: 张风捷特烈我的 github 主页
: toly1994328
\