#bevy-ecs #layout #ui #bevy #lunex #ui-elements

bevy_lunex

针对 Bevy 实体的闪电般快的基于路径的保留布局引擎,围绕原生 Bevy ECS 构建

18 个版本

0.2.3 2024 年 7 月 22 日
0.1.1 2024 年 7 月 4 日
0.0.11 2024 年 1 月 5 日
0.0.9 2023 年 11 月 20 日

#46游戏开发

Download history 78/week @ 2024-05-11 11/week @ 2024-05-18 4/week @ 2024-05-25 97/week @ 2024-06-01 35/week @ 2024-06-08 200/week @ 2024-06-15 23/week @ 2024-06-22 222/week @ 2024-06-29 287/week @ 2024-07-06 162/week @ 2024-07-13 148/week @ 2024-07-20 129/week @ 2024-07-27 33/week @ 2024-08-03 52/week @ 2024-08-10 52/week @ 2024-08-17

每月 275 次下载
用于 3 个

MIT/Apache

280KB
5K SLoC

image

针对 Bevy 实体的闪电般快的基于路径的保留布局引擎,围绕原生 Bevy ECS 构建。它使您能够像应用程序的其他部分一样使用常规 ECS 创建自己的自定义 UI。

  • 任何纵横比: Lunex 设计为支持所有窗口大小而无需变形。内置的布局类型对纵横比变化反应良好且直观。

  • 优化: 与即时模式 GUI 系统不同,Bevy_Lunex 是一个保留布局引擎。这意味着布局被计算并存储,减少了不断重新计算的需要,并提供了潜在的性能优势,特别是对于静态或更新不频繁的 UI。

  • 关注 ECS: 由于它是使用 ECS 构建,因此您可以通过简单地添加或修改组件来扩展或自定义 UI 的行为。交互性是通过常规系统和事件完成的。

  • 世界空间 UI: Bevy_Lunex 的一个功能是支持 2D 和 3D UI 元素,利用 Bevy 的 Transform 组件。这为希望将 UI 元素无缝集成到平面和空间环境中的开发者提供了广泛的可能性。情境 UI 没有问题。

  • 自定义光标: 您可以使用任何您想要的图像来设置您的光标!Lunex 还提供了易于插入的鼠标交互组件。

image

image

Itch.ioGitHub Pages 上尝试实时 WASM 示例(由于在单个线程上运行,性能有限且可能出现卡顿)。为了获得最佳体验,请本地编译项目。您可以在 此处找到源代码

语法示例

这是一个从头开始使用预定义组件创建的单击按钮的示例。如您所见,ECS 模块化是这里的重点。库也将从 Cart 正在开发的即将到来的 BSN(Bevy Scene Notation)添加中受益。

commands.spawn((

	// #=== UI DEFINITION ===#

	// This specifies the name and hierarchy of the node
	UiLink::<MainUi>::path("Menu/Button"),

	// Here you can define the layout using the provided units (per state like Base, Hover, Selected, etc.)
	UiLayout::window().pos(Rl((50.0, 50.0))).size((Rh(45.0), Rl(60.0))).pack::<Base>(),


	// #=== CUSTOMIZATION ===#

	// Give it a background image
	UiImage2dBundle { texture: assets.load("images/button.png"), ..default() },

	// Make the background image resizable
	ImageScaleMode::Sliced(TextureSlicer { border: BorderRect::square(32.0), ..default() }),

	// This is required to control our hover animation
	UiAnimator::<Hover>::new().forward_speed(5.0).backward_speed(1.0),

	// This will set the base color to red
	UiColor<Base>::new(Color::RED),

	// This will set hover color to yellow
	UiColor<Hover>::new(Color::YELLOW),


	// #=== INTERACTIVITY ===#

	// This is required for hit detection (make it clickable)
	PickableBundle::default(),

	// This will change cursor icon on mouse hover
	OnHoverSetCursor::new(CursorIcon::Pointer),

	// If we click on this, it will emmit UiClick event we can listen to
	UiClickEmitter::SELF,
));

文档

有一个关于 Lunex 中使用的概念的详细解释的 Lunex 书籍。您可以在 Bevy Lunex 书籍 中找到它。

要查看用于生产的示例/模板,请访问Bevypunk 源代码

版本

Bevy Bevy Lunex
0.14.0 0.2.0 - 0.2.3
0.13.2 0.1.0
0.12.1 0.0.10 - 0.0.11
0.12.0 0.0.7 - 0.0.9
0.11.2 0.0.1 - 0.0.6

低于0.0.X的任何版本都是实验性的,不推荐实际使用

贡献

您提交的任何贡献都将根据以下方式双许可,不附加任何额外条款或条件。如果您需要讨论此事,请与我联系。

许可

同时根据ApacheMIT许可证发布。选择最适合您的一个!

依赖

~47–88MB
~1.5M SLoC