如何在 Flame 中实现 9 补丁?

问题描述 投票:0回答:1

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 中使用支持九个补丁的类

flutter dart flame
1个回答
0
投票

是的, Flame 原生支持使用

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

在 Flame 中使用 NineTileBox

Flame 中的

NineTileBox

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

使用步骤

NineTileBox


  1. 准备9块图像:
  • 创建具有清晰边界的可拉伸区域的图像。

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

  • 将图像导出为

    .png

     文件或其他支持的格式。
    

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

  2. 设置 NineTileBox

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

  3. 在画布上绘制 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

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.