如何在 Flame 中实现 9 补丁？

Question

Flame可以支持9块图片吗？我已搜索但找不到任何文档或示例。

我知道可以在独立的 Flutter 中实现 9-patch： https://api.flutter.dev/flutter/widgets/Image/centerSlice.html

但是，我不确定如何将 Flutter 的功能无缝集成到 Flame 游戏中。

由于 Godot 开箱即用地支持 9-patch，我觉得在 Flame 中也应该可以： https://2dgames.jp/godot-nine-patch-rect/（日语）

一个特定的用例是 RPG 命令输入菜单或商店菜单等元素的外框架。

独立的 Flutter 9 补丁可能不太适合游戏。 像素艺术以小尺寸绘制。例如，如果线宽是4像素，在Flutter中可能会显得太细。

在 Flame 中，尺寸调整甚至允许将细线表示为更大的像素。

---

正如已经提到的，我问是否有特定于 Flame 的东西，而不仅仅是独立的 Flutter。

我知道可以在独立的 Flutter 中实现 9-patch： https://api.flutter.dev/flutter/widgets/Image/centerSlice.html

---

正如评论中提到的，似乎可以使用像

NineTileBox

这样的东西来实现这一点，所以我打算尝试一下（尽管我还没有测试过）。

顺便说一句，我刚刚发现 Flame 天真地支持九个路径：转到 pub.dev/documentation/flame/latest/index.html 并在右上角的搜索框中输入 9 - 所以使用它而不是 CustomPainterComponent

我的意思是你应该在 Flame 中使用支持九个补丁的类

Answer 1

是的， Flame 原生支持使用

NineTileBox

类实现 9 块图像。这是在 Flame 游戏中创建可扩展的 UI 元素的绝佳选择，例如 RPG 菜单、商店界面和其他 GUI 元素。以下是实现这一目标的方法：

在 Flame 中使用 NineTileBox，

Flame 中的

NineTileBox

 类是专为 9 补丁功能而设计的。它允许您拉伸和缩放图像的某些部分，同时保持边框完整，这非常适合像素艺术或

UI设计。

使用步骤

NineTileBox

1. 准备9块图像：

• 创建具有清晰边界的可拉伸区域的图像。

• 确保图像的边缘包含不可拉伸的部分，而中心和其他部分是可拉伸的。

• 将图像导出为

  .png

  文件或其他支持的格式。

2. 在Flame中加载图像：使用Flame的资源加载器将图像加载为NineTileBox

   。

3. 设置 NineTileBox

   ：

   使用指定可拉伸中心的坐标和尺寸的 Rectangle

    定义拉伸区域。

4. 在画布上绘制 NineTileBox

   ：

   使用 NineTileBox

    在游戏中绘制可缩放元素。

导入'package:flame/components.dart';进口 '包：flame/flame.dart'; 导入'包：flame/game.dart'；进口 '包：flutter/material.dart';

MyGame 类扩展了 FlameGame {

晚期 NineTileBox nineTileBox;

@override Future onLoad() 异步 { // 将图像加载为 NineTileBox 最终图像=等待images.load('9patch_image.png'); nineTileBox = NineTileBox( 图像， tileSize: 16, // 每个图块的大小（基于您的 9 块设计） destTileSize: 32, // 所需的图块输出大小 ）； }

@override void render(Canvas canvas) { 超级渲染（画布）；

//绘制NineTileBox 最终油漆 = Paint(); 最终矩形 = Rect.fromLTWH(50, 50, 200, 100); // 位置和大小 nineTileBox.drawRect(画布, 矩形, 油漆);

} }

无效主（）{

runApp(GameWidget(游戏: MyGame())); }

为什么要在 Flutter 的 centerSlice 上使用 NineTileBox

？

像素艺术优化：

Flame 的 NineTileBox 可以更好地处理像素艺术游戏的缩放，确保锐利的边缘和比例缩放。

无缝集成：

它旨在与其他 Flame 组件集成，并在 Flame 游戏循环中本地工作。

性能：

Flame 优化了游戏渲染，使 NineTileBox 比 Flutter 的 CustomPainter 或类似的游戏开发方法更高效。

要点

• 使用 Flame 中的

  NineTileBox 类获得本机 9 补丁支持。

• 仔细准备 9 块图像，保持边界区域完整。

• 将

  NineTileBox

   集成到您的 Flame 游戏中，以获得可扩展、像素完美的 UI 元素。

您可以在 Flame 文档中找到更多信息：NineTileBox。