Bevy AoUI

Bevy AoUI为Bevy引擎提供了一种基于锚点偏移的轻量级矩形2D精灵渲染、UI布局和骨骼动画系统。

Bevy AoUI提供了一种基于锚点偏移的轻量级矩形2D精灵渲染、UI布局和骨骼动画系统。

类似于Rust的哲学，AoUI通过锚点偏移系统提供低级控制，并通过其布局系统提供高级易用性。

入门指南

在开始之前，如果您喜欢形状或DSL，应该查看 bevy_aoui_widgets 的示例。

首先添加AoUI插件

app.add_plugins(AoUIPlugin)

创建一个精灵

commands.spawn(AoUISpriteBundle {
    sprite: Sprite { 
        color: Color::RED,
        ..Default::default()
    },
    transform: Transform2D { 
        center: Some(Anchor::Center),
        anchor: Anchor::TopCenter,
        offset: Vec2::new(20.0, 0.0),
        rotation: 1.21,
        scale: Vec2::new(4.0, 1.0),
        ..Default::default()
    },
    dimension: Dimension::pixels(Vec2::new(50.0, 50.0)),
    texture: assets.load("sprite.png"),
    ..Default::default()
});

创建一些文本

commands.spawn(AoUITextBundle {
    text: Text::from_section(
        "Hello, World!!", 
        style(Color::WHITE)
    ),
    font: assets.load::<Font>("OpenSans.ttf"),
    transform: Transform2D { 
        center: Some(Anchor::Center),
        anchor: Anchor::TopCenter,
        offset: Vec2::new(20.0, 0.0),
        rotation: 1.21,
        scale: Vec2::new(4.0, 1.0),
        ..Default::default()
    },
    dimension: Dimension::COPIED.with_em(SetEM::Pixels(24.0)),
    ..Default::default()
});

核心概念

AoUI提供了一种与传统基于CSS的UI布局截然不同的新颖范式。

AoUI精灵包含以下核心组件

• 锚点
• 居中
• 偏移量
• 旋转
• 缩放
• 尺寸

每个精灵都被概念化为一个有尺寸和9个锚点的矩形： BottomLeft、 CenterRight、 Center 等。

可以使用自定义锚点，但并非在所有布局中都可以使用。

精灵通过父精灵的一个锚点连接到父精灵，并且可以通过一个 Vec2 偏移。当偏移设置为 (0, 0) 时，父精灵和子精灵的锚点重叠。

对于无父精灵的精灵，它们锚定到窗口的矩形。

在应用 rotation 和 scale 时，精灵可以使用一个独立于锚点的 center。

容器

锚点偏移非常适合隔离的UI组件，但当需要按照特定顺序排列多个UI元素时，您会发现 Container 非常有用。

Container 是一个布局系统，它只依赖于插入顺序，并使用Bevy的 Children 组件。

请查看书籍以获取更多信息。

AoUI的优势

Bevy生态系统中有许多令人惊叹的UI库，您应该在这些用例中使用这些库而不是AoUI。然而，AoUI提供了一些独特的优势

• 完整的ECS支持和易于特征组合。

AoUI完全采用了Bevy的生态系统。您可以混合和匹配我们的模块化组件，添加、删除或编辑您想要更改的任何系统。

• 相对尺寸系统。

全面支持网络字体单位：em、rem、%等。

• 一流的旋转和缩放支持。

您可以轻松地从任何位置旋转和缩放任何精灵。

• 简单但功能丰富的布局系统。

简单的布局，无需配置即可直接使用。

• 高级抽象与低级控制。

您可以混合和匹配锚点和布局以满足您的需求。

常见问题解答

关于小部件呢？

bevy_aoui是一个布局系统，不是一个小部件库。大多数AoUI小部件的实现将存在于主crate之外，如bevy_aoui_widgets。

bevy_aoui_widgets比bevy_aoui更实验性，变化更多。请查看我们的示例以获取简单的小部件实现。

AoUI致力于不使用标准外观，并且与渲染管道交互尽可能少，因此标准小部件可能不是您的即用型解决方案。

性能如何？

bevy_aoui是一个注重用户体验的crate，在性能方面做出了一些妥协，与传统的渲染相比，每个精灵必须经过多个旋转和缩放步骤。目前为了API一致性，移除了如no_rotation之类的性能优化功能，这可能会在未来随着API的更稳定而改变。

欢迎提出与性能相关的pull请求和建议。