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 中使用支持九个补丁的类
是的, Flame 原生支持使用
NineTileBox
类实现 9 块图像。这是在 Flame 游戏中创建可扩展的 UI 元素的绝佳选择,例如 RPG 菜单、商店界面和其他 GUI 元素。以下是实现这一目标的方法:
在 Flame 中使用 NineTileBox,
Flame 中的NineTileBox
类是专为 9 补丁功能而设计的。它允许您拉伸和缩放图像的某些部分,同时保持边框完整,这非常适合像素艺术或UI设计。 使用步骤
NineTileBox
.png
在Flame中加载图像:使用Flame的资源加载器将图像加载为NineTileBox
。
设置 NineTileBox
:使用指定可拉伸中心的坐标和尺寸的
Rectangle
定义拉伸区域。
在画布上绘制 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
?
像素艺术优化:
无缝集成:
性能:
要点
NineTileBox 类获得本机 9 补丁支持。
NineTileBox
集成到您的 Flame 游戏中,以获得可扩展、像素完美的 UI 元素。
您可以在 Flame 文档中找到更多信息:NineTileBox。